JQuery中DOM遍历和事件处理总结
作者：袖梨
2022-06-25
1.筛选元素
| 方法 | 返回的元素 |
|---|---|
| .filter(selector) | 与selector匹配的元素 |
| .filter(callbaxk) | callback中返回true的元素 |
| .eq(index) | 从0开始计数的第index个选中元素 |
| .first() | 选中元素中的第一个元素 |
| .last() | 选中元素的最后一个元素 |
| .slice(start[,end]) | 从0开始计数的给定范围内的选中元素 |
| .not(selector) | 与selector不匹配的元素 |
| .has(selector) | 与selector匹配的的后代元素 |
2.后代元素
| 方法 | 返回的元素 |
|---|---|
| .find(selector) | 与selector匹配的后代元素 |
| .contents() | 子节点（包括文本节点） |
| .children([selector]) | 子节点，可传入selector进行筛选 |
3.同辈元素
| 方法 | 返回的元素 |
|---|---|
| .next([selector]) | 每个选中元素紧邻的下一个元素，可传入selector进行筛选 |
| .nextAll([selector]) | 每个选中元素后的所有同辈元素，可传入selector进行筛选 |
| .nextUntil([selector],[filter]) | 每个选中元素之后、直至但不包含第一个和selector匹配的元素，可传入filter进行筛选 |
| .prev([selector]) | 每个选中元素紧邻的上一个元素，可传入selector进行筛选 |
| .prevAll([selector]) | 每个选中元素前的所有同辈元素，可传入selector进行筛选 |
| .prevUntil([selector],[filter]) | 每个选中元素之前、直至但不包含第一个和selector匹配的元素，可传入filter进行筛选 |
| .siblings([selector]) | 所有同辈元素，可传入selector进行筛选 |
4.祖先元素
| 方法 | 返回的元素 |
|---|---|
| .parent([selector]) | 每个选中元素的父元素，可传入selector进行筛选 |
| .parents([selector]) | 每个选中元素的所有祖先元素，可传入selector进行筛选 |
| .parentsUntil([selector],[filter]) | 每个选中元素的所有祖先元素、直至但不包含第一个和selector匹配的元素，可传入filter进行筛选 |
| .closest(selector) | 与selector匹配的第一个元素，从元素自身开始沿DOM数向上搜索祖先元素 |
| .offsetParent() | 选中元素的第一个被定为的父元素(relative或absolute) |
5.集合操作
| 方法 | 说明 |
|---|---|
| .add([selector]) | 将与selector匹配的元素添加原对象集合中 |
| .addBack() | 选中的元素加上JQuery内部栈中之前选中的元素 |
| .end() | 内部JQuery栈中之前选中的元素 |
| .map(callback) | 对每个选中调用回调函数callback之后的结果 |
| .pushStack() | 指定的元素 |
6.操作选中的元素
| 方法 | 说明 |
|---|---|
| .is(selector) | 确定匹配的元素中是否有传入的与selector匹配的元素 |
| .index() | 取得匹配元素相对其同辈元素的索引 |
| .index(element) | 取得匹配元素中与指定元素对象的DOM节点的索引 |
| $.contains(a,b) | 确定DOM节点a是否包含DOM节点b |
| .each(callback) | 迭代匹配元素，对每个元素执行callback |
| .length | 取得匹配元素的数量 |
| .get() | 取得与匹配元素对应的DOM节点列表 |
| .get(index) | 取得匹配元素中与指定索引对应的DOM节点 |
| .toArray() | 取得与匹配元素对应的DOM节点列表 |
7.事件绑定
| 方法 | 说明 |
|---|---|
| .ready(handler) | DOM和CSS完全加载后之间handler |
| .on(type,[selector],[data],handler) | 绑定type事件，并指定事件处理程序handler;如果指定selector则执行事件委托 |
| .on(events,[selector],[data]) | 根据events对象的事件绑定多个事件处理程序 |
| .off(type,[selector],handler) | 解除on给元素绑定的事件处理程序 |
| .bind(type,[data],handler) | 绑定type事件，并指定事件处理程序handler |
| .one(type,[data],handler) | 绑定type事件，并指定事件处理程序handler,handler被调用后立即解除绑定 |
| .unbind([type],[handler]) | 解除bind给元素绑定的指定事件处理程序(不指定则解除所有指定) |
| .delegate(selector,type,[data],handler) | 给与selector匹配的元素绑定type事件，并指定事件处理程序handler |
| .delegate(selector,handlers) | 给与selector匹配的元素绑定type事件，并指定事件处理程序handlers |
| .undelegate(selector,type,[handler]) | 解除delegate给元素绑定的指定事件处理程序 |
8.其它方法
| 方法 | 说明 |
|---|---|
| .trigger(type,[data]) | 触发元素上的事件并执行事件的默认操作 |
| .triggerHandler(type,[data]) | 触发元素上的事件，但不执行事件的默认操作 |
| $.proxy(fn,context) | 创建一个新的在指定上下文中执行的函数。 |
