jQuery学习

4.jQuery

jQueryHelloWord体验

​​

​​

jQuery对象与DOM对象

​​

DOM处理：

​​

jQuery处理：

​​

jQuery对象转化成DOM对象

利用数组下标的方式读取到jQuery中的DOM对象

​​

通过jQuery自带的get()方法

​​

DOM对象转化成jQuery对象

通过$(dom)方法将普通的dom对象加工成jQuery对象之后，我们就可以调用jQuery的方法了

​​

jQuery选择器之id选择器

​​

jQuery选择器之类选择器

​​

类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选

jQuery选择器之元素选择器

​​

jQuery选择器之全选择器（*选择器）

​​

​​

jQuery选择器之层级选择器

选择器中的层级选择器就是用来处理这种关系

子元素  后代元素  兄弟元素  相邻元素

​​

jQuery选择器之基本筛选选择器

​​

​​

​​

​​

jQuery选择器之内容筛选选择器

​​

​​

​​

​​

jQuery选择器之可见性筛选选择器

​​

​​

jQuery选择器之属性筛选选择器

​​

​​

​​

jQuery选择器之子元素筛选选择器

​​

​​

​​

jQuery选择器之表单元素选择器

​​

16jQuery选择器之表单对象属性筛选选择器

​​

注意事项：

选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器

2. 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

​​

​​

17.jQuery选择器之特殊选择器this

​​

​​

​​

18.jQuery的属性与样式之.attr()与.removeAttr()

attr()有4个表达式

​​

removeAttr()删除方法

​​

注意的问题：

dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是dom节点自带的属性

例如：html中常用的id、class、title、align等：

而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等

​​

19.jQuery的属性与样式之.html()及.text()

1.html()方法

​​

2.text()方法

​​

3.html与.text的异同:

​​

​​

20.jQuery的属性与样式之.val()

.val()方法

​​

​​

.html(),.text()和.val()的差异总结： 

.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

2 .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。

3 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

​​

21.jQuery的属性与样式之增加样式.addClass()

.addClass( className )方法

.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名

.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

​​

​​

22.jQuery的属性与样式之删除样式.removeClass()

.removeClass( )方法

.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名

.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名

​​

​​

23.jQuery的属性与样式之切换样式.toggleClass()

.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名

.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除

.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值

.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

​​

​​

24.jQuery的属性与样式之样式操作.css()

​​

​​

​​

25.jQuery的属性与样式之.css()与.addClass()设置样式的区别

​​

​​

26.jQuery的属性与样式之元素的数据存储

jQuery提供的存储接口

jQuery.data( element, key, value )  //静态接口,存数据

jQuery.data( element, key )  //静态接口,取数据

.data( key, value ) //实例接口,存数据

.data( key ) //实例接口,取数据

2个方法在使用上存取都是通一个接口，传递元素，键值数据。在jQuery的官方文档中，建议用.data()方法来代替。

同样的也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了

jQuery.removeData( element [, name ] )

.removeData( [name ] )

参考右边的代码区域，2个代码段分别描述了静态与实例data的使用

​​

二、DOM操作

DOM创建节点及节点属性

​​

jQuery节点创建与属性的处理

​​

​​

DOM内部插入append()与appendTo()

​​

append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。

appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

append()前面是被插入的对象，后面是要在对象内插入的元素内容

appendTo()前面是要插入的元素内容，而后面是被插入的对象

​​

DOM外部插入after()与before()

​​

​​

DOM内部插入prepend()与prependTo()

在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo

选择器的描述：

​​

这里总结下内部操作四个方法的区别：

append()向每个匹配的元素内部追加内容

prepend()向每个匹配的元素内部前置内容

appendTo()把所有匹配的元素追加到另一个指定元素的集合中

prependTo()把所有匹配的元素前置到另一个指定的元素集合中

​​

DOM外部插入insertAfter()与insertBefore()

​​

before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理

​​

DOM节点删除之empty()的基本用法

empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML：

<div class="hello"><p>慕课网</p></div>

如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中

//通过empty处理

$('.hello').empty()

//结果：

慕课网

被移除

​​

DOM节点删除之remove()的有参用法和无参用法

remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点

我们可以通过$()选择一组相同的元素，然后通过remove（）传递筛选的规则，从而这样处理

对比右边的代码区域，我们可以通过类似于这样处理

$("p").filter(":contains('3')").remove()

​​

9. DOM节点删除之empty和remove区别

empty方法

严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点

empty不能删除自己本身这个节点

remove方法

该节点与该节点所包含的所有后代节点将同时被删除

提供传递一个筛选的表达式，删除指定合集中的元素

​​

10.DOM节点删除之保留数据的删除操作detach()

希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理

("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在

的。当你append之后，又重新回到了文档流中。就又显示出来了。

当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据

​​

11.DOM节点删除之detach()和remove()区别

remove：移除节点

无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据

有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据

detach：移除节点

移除的处理与remove一致

与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

例如：$("p").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

12.DOM拷贝clone()

​​

13.DOM替换replaceWith()和replaceAll()

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

替换第二段的节点与内容

$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')

.replaceAll( target ) ：用集合的匹配元素替换每个目标元素

.replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理

$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')

总结：

.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别

.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序

.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用

.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

​​

14.DOM包裹wrap()方法

wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构

简单的看一段代码：

<p>p元素</p>

给p元素增加一个div包裹

$('p').wrap('<div></div>')

最后的结构，p元素增加了一个父div的结构

p元素

.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

使用后的效果与直接传递参数是一样，只不过可以把代码写在函数体内部，写法不同而已

以第一个案例为例：

$('p').wrap(function() {

return '

';  //与第一种类似，只是写法不一样

})

注意：

.wrap()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深，但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法。

15.DOM包裹unwrap()方法

jQuery提供了unwrap方法很方便的处理了这个问题

$('p').unwrap();

找到p元素，然后调用unwrap方法，这样只会删除父辈div元素了

​​

DOM包裹wrapAll()方法

.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构

简单的看一段代码：

p元素

p元素

给所有p元素增加一个div包裹

$('p').wrapAll('<div></div>')

最后的结构，2个P元素都增加了一个父div的结构

p元素

p元素

.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

通过回调的方式可以单独处理每一个元素

以上面案例为例，

$('p').wrapAll(function() {

return '

 

';

})

以上的写法的结果如下，等同于warp的处理了

p元素

p元素

注意：

.wrapAll()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。

​​

DOM包裹wrapInner()方法

.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构

听起来有点绕，可以用个简单的例子描述下，简单的看一段代码：

p元素

p元素

给所有元素增加一个p包裹

$('div').wrapInner('<p></p>')

最后的结构，匹配的di元素的内部元素被p给包裹了

p元素

p元素

.wrapInner( function ) ：允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容

以上面案例为例，

$('div').wrapInner(function() {

return '';

})

以上的写法的结果如下，等同于第一种处理了

p元素

p元素

注意：

当通过一个选择器字符串传递给.wrapInner() 函数，其参数应该是格式正确的

HTML，并且 HTML 标签应该是被正确关闭的。

​​

18.jQuery遍历之children()方法

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

理解节点查找关系：

1

代码如果是$("div").children()，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。

children()无参数

允许我们通过在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象

注意：jQuery是一个合集对象，所以通过children是匹配合集中每一给元素的

第一级子元素

.children()方法选择性地接受同一类型选择器表达式

$("div").children(".selected")

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

​​

19.jQuery遍历之find()方法

children是父子关系查找，find是后代关系（包含父子关系）

.find()方法要注意的知识点：

find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。

与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。

find只在后代中遍历，不包括自己。

选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。

注意重点：

.find()和.children()方法是相似的1.children只查找第一级的子节点2.find查

找范围包括子节点的所有后代节点

​​

20.jQuery遍历之parent()方法

因为是父元素，这个方法只会向上查找一级

理解节点查找关系：

1

查找ul的父元素div, $(ul).parent()，就是这样简单的表达

parent()无参数

parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象

注意：jQuery是一个合集对象，所以通过parent是匹配合集中每一个元素的父元素

parent()方法选择性地接受同一型选择器表达式

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

​​

21.jQuery遍历之parents()方法

如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法

parents()无参数

parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象;

返回的元素秩序是从离他们最近的父级元素开始的

注意：jQuery是一个合集对象，所以通过parent是匹配合集中所有元素的祖辈元素

parents()方法选择性地接受同一型选择器表达式

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选

，找出目标元素，所以允许传一个选择器的表达式

注意事项：

1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找

2  $( "html" ).parent()方法返回一个包含document的集合，而$( "html" )

.parents()返回一个空集合。

​​

22.jQuery遍历之closest()方法

closest()方法接受一个匹配元素的选择器字符串

从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

例如：在div元素中，往上查找所有的li元素，可以这样表达

$("div").closet("li')

注意：jQuery是一个合集对象，所以通过closest是匹配合集中每一个元素的祖先元素

closest()方法给定的jQuery集合或元素来过滤元素

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个jQuery的对象

注意事项：在使用的时候需要特别注意下

粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了

起始位置不同：.closest开始于当前元素 .parents开始于父元素

遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合

结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

​​

23.jQuery遍历之next()方法

jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法

next()无参数

允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象。

注意：jQuery是一个合集对象，所以通过next匹配合集中每一个元素的下一个兄弟元素

next()方法选择性地接受同一类型选择器表达式

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

具体的操作，请参考右边的代码

​​

24.jQuery遍历之prev()方法

如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法

rev()无参数

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

注意：jQuery是一个合集对象，所以通过prev是匹配合集中每一个元素的上一个兄弟元素

prev()方法选择性地接受同一类型选择器表达式

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

25jQuery遍历之siblings()

如果想快速查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法

理解节点查找关系：如下蓝色的class="item-2"的li元素，红色的节点就是它的siblings兄弟节点

​​

siblings()无参数

取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合

注意：jQuery是一个合集对象，所以通过siblings是匹配合集中每一个元素的同辈元素

siblings()方法选择性地接受同一类型选择器表达式

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

​​

26.jQuery遍历之add()方法

jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中

.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素

，或HTML片段引用。

简单的看一个案例：

处理一：传递选择器

$('li').add('p')

处理二：传递dom元素

$('li').add(document.getElementsByTagName('p')[0])

还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了

$('li').add('<p>新的p元素</p>').appendTo(目标位置)

具体的操作，请参考右边的代码

​​

27.jQuery遍历之each()

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数

所以大体上了解3个重点：

each是一个for循环的包装迭代器

each通过回调的方式处理，并且会有2个固定的实参，索引与元素

each回调方法中的this指向当前迭代的dom元素

看一个简单的案例

慕课网

Aaron

开始迭代li，循环2次

$("li").each(function(index, element) {

index 索引 0,1

element是对应的li节点 li,li

this 指向的是li

})

这样可以在循环体会做一些逻辑操作了，如果需要提前退出，可以以通过返回 false以便在回调函数内中止循环

​​

jQuery基础(三)—事件篇

jQuery鼠标事件之click与dbclick事件

jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。

dbclick与click事件不同的是：

click事件触发需要以下几点：

click事件其实是由mousedown与mouseup 2个动作构成，所以点击的动作只有在松手后才触发

PS:mousedown和mouseup下一节会讲到

dbclick事件触发需要以下几点：

dbclick又是由2个click叠加而来的，所以dbclick事件只有在满足以下条件的情况下才能被触发

鼠标指针在元素里面时点击。

鼠标指针在元素里面时释放。

鼠标指针在元素里面时再次点击，点击间隔时间，是系统而定。

鼠标指针在元素里面时再次释放。

注意：在同一元素上同时绑定 click 和 dbclick 事件是不可取的。各个浏览器事件触发的顺序是不同的，一些浏览器在dbclick之前接受两个 click 事件 ，而一些浏览器只接受一个 click 事件。用户往往可通过不同的操作系统和浏览器配置双击灵敏度

​​

​​

​​

jQuery鼠标事件之mousedown与mouseup事件

mousedown事件触发需要以下几点：

mousedown强调是按下触发

如果在一个元素按住了鼠标不放，并且拖动鼠标离开这个元素，并释放鼠标键，这仍然是算作mousedown事件

任何鼠标按钮被按下时都能触发mousedown事件

用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

mouseup事件触发需要以下几点：

mouseup强调是松手触发，与mousedown是相反的

mouseup与mousedown组合起来就是click事件

如果用户在一个元素上按下鼠标按键，并且拖动鼠标离开这个元素，然后释放鼠标键，这仍然是算作mouseup事件

任何鼠标按钮松手时都能触发mouseup事件

用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

另外需要注意的是：

click与mousedown的区别：

click事件其实是由mousedown于mouseup 2个动作构成，所以点击的动作只有在松手后才触发

​​

​​

jQuery鼠标事件之mousemove事件

mousemove事件触发需要以下几点：

mousemove事件是当鼠标指针移动时触发的，即使是一个像素

如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题

​​

​​

jQuery鼠标事件之mouseover与mouseout事件

方法一：$ele.mouseover()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

点击触发

$("ele").mouseover(function(){

alert('触发指定事件')

})

$("#test").click(function(){

$("ele").mouseover()  //指定触发事件

});

方法二：$ele.mouseover( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

滑动触发

$("#test").mouseover(function() {

//this指向 div元素

});

方法三：$ele.mouseover( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

点击触发

$("#test").mouseover(11111,function(e) {

//this指向 div元素

//e.data  => 11111 传递数据

});

具体使用可以参考右边的代码

jQuery鼠标事件之mouseenter与mouseleave事件

mouseenter事件和mouseover的区别

关键点就是：冒泡的方式处理问题

简单的例子：

mouseover为例：

<div class="aaron2">    <p>鼠标离开此区域触发mouseleave事件</p></div>

如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:

p元素响应事件

div元素响应事件

这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发

所以在这种情况下面，jQuery推荐我们使用 mouseenter事件

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

jQuery鼠标事件之hover事件

在元素上移进移出切换其换色，一般通过2个事件配合就可以达到，这里用mouseenter与mouseleave，这样可以避免冒泡问题

$(ele).mouseenter(function(){

$(this).css("background", '#bbffaa');

})

$(ele).mouseleave(function(){

$(this).css("background", 'red');

})

这样目的是达到了，代码稍微有点多，对于这样的简单逻辑jQuery直接提供了一个hover方法，可以便捷处理

​​

jQuery鼠标事件之focusin事件

​​

​​

jQuery鼠标事件之focusout事件

当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件

jQuery表单事件之blur与focus事件

focusin事件与focusout事件，同样用于处理表单焦点的事件还有blur与focus事件

它们之间的本质区别:

是否支持冒泡处理

div是input的父元素，当它包含的元素input触发了focus事件时，它就产生了focusin()事件。

focus()在元素本身产生，focusin()在元素包含的元素中产生

blur与focusout也亦是如此

jQuery表单事件之change事件

<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

input元素

监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

select元素

对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

textarea元素

多行文本输入框，当有改变时，失去焦点后触发change事件

change事件很简单，无非就是注意下触发的先后行为

jQuery表单事件之select事件

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

​​

​​

jQuery表单事件之submit事件

通过在<form>元素上绑定submit事件，开发者可以监听到用户的提交表单的的行为

具体能触发submit事件的行为：

<input type="submit">

<input type="image">

<button type="submit">

当某些表单元素获取焦点时，敲击Enter（回车键）

上述这些操作下，都可以截获submit事件。

这里需要特别注意：

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这

个默认行为传统的方式是调用事件对象  e.preventDefault() 来处理，

jQuery中可以直接在函数中最后结尾return false即可

jQuery处理如下：

$("#target").submit(function(data) {    return false;

//阻止默认行为，提交表单});

​​

jQuery键盘事件之keydown()与keyup()事件

注意：

keydown是在键盘按下就会触发

keyup是在键盘松手就会触发

理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。

​​

14. jQuery键盘事件之keypress()事件

eypress事件与keydown和keyup的主要区别

只能捕获单个字符，不能捕获组合键

无法响应系统功能键（如delete，backspace）

不区分小键盘和主键盘的数字字符

总而言之，

KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

15.on()的多事件绑定

基本用法：.on( events ,[ selector ] ,[ data ] )

最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同

$("#elem").click(function(){})  //快捷方式

$("#elem").on('click',function(){}) //on方式

最大的不同点就是on是可以自定义事件名，当然不仅仅只是如何，继续往下看

多个事件绑定同一个函数

$("#elem").on("mouseover mouseout",function(){ });

通过空格分离，传递不同的事件名，可以同时绑定多个事件

多个事件绑定不同函数

$("#elem").on({

mouseover:function(){},

mouseout:function(){}

});

通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法

将数据传递到处理程序

function greet( event ) {

alert( "Hello " + event.data.name ); //Hello 慕课网

}

$( "button" ).on( "click", {

name: "慕课网"

}, greet );

可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的

​​

​​

​​

16.on()的高级用法

委托机制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

在on的第二参数中提供了一个selector选择器，简单的来描述下

参考下面3层结构

目标节点 //点击在这个元素上

给出如下代码：

$("div").on("click","p",fn)

事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

​​

17.卸载事件off()方法

通过.on()绑定的事件处理程序

通过.off() 方法移除该绑定

根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除

绑定2个事件

$("elem").on("mousedown mouseup",fn)

删除一个事件

$("elem").off("mousedown")

删除所有事件

$("elem").off("mousedown mouseup")

快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁

$("elem").off()

​​

​​

jQuery事件对象的作用

event.target

target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托

简单来说：event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

​​

jQuery事件对象的属性和方法

event.type：获取事件的类型

触发元素的事件类型

$("a").click(function(event) {

alert(event.type); // "click"事件

});

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

event.preventDefault() 方法：阻止默认行为

这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

event.stopPropagation() 方法：阻止事件冒泡

事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

event.which：获取在鼠标单击时，单击的是鼠标的哪个键

event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3

event.currentTarget : 在事件冒泡过程中的当前DOM元素

冒泡前的当前触发事件的DOM对象, 等同于this.

this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

.this和event.target都是dom对象

如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

jQuery自定义事件之trigger事件

.trigger是什么？

简单来讲就是：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数

$('#elem').on('Aaron', function(event,arg1,arg2) {  alert

("自触自定义时间") });$('#elem').trigger('Aaron',['参数1','参数2'])

trigger触发浏览器事件与自定义事件区别？

自定义事件对象，是jQuery模拟原生实现的

自定义事件可以传递参数

​​

jQuery自定义事件之triggerHandler事件

若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替

triggerHandler与trigger的用法是一样的，重点看不同之处：

triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()

.trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素

使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理

与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined