jQuery实现鼠标点击Div区域外隐藏Div

[

][1]

jQuery本身没有这样一个事件，要实现这个效果，我们首先要先了解javascript中的事件冒泡。

冒泡定义：当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。（摘自网络）

上述代码运行后，点击链接，以此会出现link, inner, outer, document,转向百度。

也就是说我们点击链接后 click事件一直冒泡传递在最外层body。

1. 阻止事件冒泡, 并不阻止事件行为：event.stopPropagati

想读更多 ->

jQuery中的clone妙用

clone：官方的解释是克隆匹配的DOM元素并且选中这些克隆的副本。如果想克隆DOM元素绑定的所有事件，可采用clone(true)，JQ1.5版本以上默认为false。

具体怎么用？

先举例一个小例子：

<p><a href="#">第一个<a/>123456</p>

我们想吧a标签克隆一个放在p标签内部末尾：

$("a").clone().appendTo("p")

结果：<p><a href="#">第一个</a>123456<a href="#">第一个</a></p>

下面进入正题：

显示结果如下：

想读更多 ->

jquery初探

作为一名程序员，需要有全面的知识和技能，不仅仅是对某一领域的精通。比如作为一名java程序员，就不仅要对java的知识很精通，也要对sql，javascript等熟练掌握，方能满足日常的工作要求。

对于js，目前的实际情况是大多使用的是js的各种框架，最常见的额就是jquery了。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1

想读更多 ->

Jquery常用属性和方法

Jquery常用属性和方法

1.点我消失

2.隐藏和消失

3.点击消失再点击出现

4.颜色渐变

5.向下滑和向上滑

6.点击代码块就移动

1:juery获得内容三个方法 - text()、html() 以及 val()

想读更多 ->

JQuery的选择器优化

JQuery有非常多的选取节点的方法，但是采用这些方法选取节点时所影响到的性能是完全不一样的，用更合适的选择器去选取节点，是使用JQuery时优化浏览器性能的一个可考虑方向。

首先，我们的建立一个有着复杂样式的无序列表。

调用浏览器时间调试工具，建立测试函数：

我们采用选取循环50000次的无序列表中的一个方法，来测试每个选择器对于浏览器的响应性能的影响。

1、将选择器选取的节点缓存，将大大的提升响应时间。

分别调用两次方法，测试 未把节点缓存 和 把节点缓存 的时间。

想读更多 ->

JQuery初学一笔记

$("document").ready(funtcion()

{

$("P").css("border","3px solid"); //代表P标签的CSS样式。

$("P:first").css("border","3px solid"); //代表第一个P标签的CSS样式。

$("P:even").css("border","3px solid"); //代表第偶数个P标签的CSS样式，需要注意的是，第一P标签并为奇数，因为P标签的统计数按数组统计的，数组的索引值是从0开始的，并非从1开始，因此第一个标签算是偶数。

$("P:odd").css("border","3px solid"); //代表第奇数个P标签的CSS样式。

$("P:gt(1)").css("border","3px solid"); //代表大于1的P标签的CSS样式。

$("P:eq(1)").css("border","3px solid"); //代表索引值为1的P标签的CSS样式。

$("P,li.b").css("border","3px solid"); //P后面的逗号代表P和li两个标签都要设置其CSS样式，注意li.b是代表li的class属性为b的标签。例如： ＜ｌｉ　ｃ

想读更多 ->

Jquery入门

jquery

[] jquery概念

jquery是JS的框架。

JS的函数库。

【】BOM

BOM：Browser Object Model

BOM对象：

1.window：BOM根对象

2.window.navigator 浏览器对象

3.window.location : URL地址对象

4.window.document: 文档对象。

5.window.history 历史对象

【】DOM

DOM根对象：window.document 表示浏览器载入的文档在内存中模型。

DOM模式的格式：树。

每个标记表示一个对象，在树中是一个节点。

1. JS定位一个节点方法

(1)根据ID定位：var div=document.getElementById("id"); 返回一个对象

(2)根据标记名定义：var div=document.getElemenetByTagName("div");

返回对象的数组。

(3) 根据CSS选择器选择对象：

var ob=document.querySelector("css选择器")

想读更多 ->

Java后端笔记（8）Ajax和JQuery

1.JQuery

JQuery：js的库文件，简化编写js代码的过程

1）window.onload和ready的异同：

当整个文档加载完毕后调用函数

共同点：都是整个文档加载完毕之后执行

区别：ready（）：文本节点加载完毕之后就可以执行，不必等图片节点也加载完

2）用法：

a）引入:

<script type="text/javascript" charset="utf-8" src="static/patients_js/jquery-1.8.0.js" ></script>

b）写函数:

<script type="text/javascript" >

$(document).ready(function( ){

alert("hello");

}

</script>

2.JQuery用来定位文档元素的方式：

1)选择器（和CSS中选择器一样，且可扩展）

ID选择器：$( " # id " )

类选择器：$( ".classname" )

标签选择器：$( "标签名字" )

想读更多 ->

jQuery Tooltip插件

jQuery Tooltip 插件取代了原生的工具提示框，让它们可自定义，您只需要调整它们的内容、位置和外观即可。

该插件目前版本是 1.3，已经很长时间没有更新，推荐使用 jQuery UI 工具提示框（Tooltip）。

如需了解更多有关 jQuery UI 工具提示框（Tooltip）的细节，请查看 API 文档 jQuery UI 工具提示框部件（Tooltip Widget）。

实例演示

jQuery Tooltip 插件演示。

正常情况下

2、点击后效果

点击后效果

jQuery核心代码：

$(function() {

$('span').click(function() {

$(this).siblings().each(function() {

$(this).removeClass('reds');

})

$(this).addClass('reds');

$(th

想读更多 ->