jQuery选择器与事件详解-优快云博客

本文深入探讨jQuery中选择器的功能，包括基本选择器、过滤选择器、子元素选择器和串联选择器的使用方法。同时，详细解析了jQuery提供的事件绑定、触发和委托机制，帮助读者掌握更高效的操作DOM和响应用户交互的技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

筛选

选择器可以完成功能，筛选提供相同函数。
选择器 :first
筛选 first()
对比：
$(“div:first”) 直接获得第一个div （永远只能操作第一个）
$(“div”).first() 先获得所有的div，从所有的中筛选出第一个。（可以操作第一个，也可以操作所有）

1.过滤

eq(index | -index)  类型 :eq()
	index：正数，从头开始获得指定索引的元素。这个元素的位置是从0算起。0表示第一个
	-index：负数，从尾开始获得指定索引的元素。1算起。 -1表示最后一个
first()	第一个  :first
last()	最后一个  :last
is()		判断
hasClass()	判断是否是指定class 。<xxx class="my">
	这其实就是 is("." + class)。
filter()  筛选出与指定表达式匹配的元素集合
not()	将指定内容删除
--------------------------------
has()  子元素是否有
slice(start , end)  截取元素 ，[2,4)  --> 2,3
map()  jQuery对象 拆分成  jQuery对象数组

2.查找

B.children([...])   获得所有的子元素。CDEF
A.find(D)  从指定的区域查询指定元素。D
D.next()	下一个兄弟。E
D.nextAll() 后面的所有兄弟。EF
E.prev()	上一个兄弟。D  （previous）
E.prevAll()  前面的所有兄弟。CD
E.siblings()	所有兄弟。CDF
E.parent()  父元素。B
E.closest(A)  向上获得指定的父元素（含自己），如果获得返回一个对象，如果没有没有对象。
------------------------------

C.nextUntil(E)  获得后面所有兄弟，直到指定条件位置。DE
F.prevUntil(D)  获得前面所有兄弟，直到指定条件位置。DE

E.parents()   获得所有的父元素。AB

closest和parents的主要区别是：
（1）前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
（2）前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
（3）前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

3.串联

A.add(B)  将A和B组合一个对象 。类型 $("A,B")
andSelf() ： 将之前对象添加到操作集合中
	A.children().andSelf()  
   	A	孩子    孩子和A
end() ：回到最近的一个"破坏性"操作之前
	A.children().children().end() .end()  
	A   孩子   孙子		孩子  A
--------------------
contents()  获得所有的子节点（子元素 和 文本）

事件

1.常见事件总结

jQuery 提供额外的事件，用于完善javascript缺失的
focusin 和 focusout
	focusin 获得焦点。js focus。
		focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
	focusout 失去焦点。js blur。
		focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

mouseenter 和 mouseleave
	mouseenter 鼠标移入。js mouseover
		与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

	mouseleave 鼠标移出。js mouseout
		与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

2.页面加载

方式1：标准api
$(document).ready(function(){

});
等效
jQuery(document).ready( fn );

方式2：简化版
$(function(){
});
登录
jQuery(function(){
});

3.事件绑定

3.1处理

bind(type ,fn)  给当前对象绑定一个事件。例如：A.bind("click", fn );  类型：A.click( fn );
unbind(type ) 解绑bind绑定事件

one(type ,fn ) 给当前对象绑定一次事件。
-----------------------------------------
on(events , fn) 提供绑定事件处理程序所需的所有功能。完成3个方法功能.bind(), .delegate(), 和 .live().
off(events) 解绑

trigger(type) 在每一个匹配的元素上触发某类事件。例如：A.trigger("submit")  ,类似 A.submit();
triggerHandler(type) 在每一个匹配的元素上触发某类事件。但不会执行浏览器默认动作，也不会产生事件冒泡。