jQuery的筛选，事件

r囧r小猫 2022-05-13 09:48 158阅读 0赞

**2.筛选**

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

**2.1过滤**

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

**2.2查找**

![这里写图片描述][70 1]

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个，或者多个元素。

**2.3串联**

将多条语句，改成一条。（得瑟代码）  
![这里写图片描述][70 2]  
A.add(B) 将A和B组合一个对象 。类型 $(“A,B”)  
andSelf() ： 将之前对象添加到操作集合中  
A.children().andSelf()  
A 孩子 孩子和A  
end() ：回到最近的一个”破坏性”操作之前  
A.children().children().end() .end()  
A 孩子 孙子 孩子 A  
contents() 获得所有的子节点（子元素 和 文本）

**3事件**

**3.1常见事件总结**

![这里写图片描述][70 3]

*  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 事件。

3.2页面加载  
![这里写图片描述][70 4]  
\- 方式1：标准api

$(document).ready(function(){ 
    
    });
    等效
    jQuery(document).ready( fn );

![这里写图片描述][70 5]

*  方式2：简化版

$(function(){ 
    });
    登录
    jQuery(function(){ 
    });

*  源码分析（了解）  
    步骤一：回顾js 函数创建  
    方式1：function abc()\{\}; abc();  
    方式2：var abc = function()\{\} ; abc();  
    $( fn ) == jQuery( fn ) == new jQuery.fn.init( fn )  
    ![这里写图片描述][70 6]  
    步骤二： init( fn ) –> rootjQuery.ready( fn )  
    ![这里写图片描述][70 7]  
    ![这里写图片描述][70 8]  
    步骤三：  
    ![这里写图片描述][70 9]  
    总结：  
    $( fn ) –> init( fn ) –> jQuery(document).ready( fn )

**3.3事件绑定**

**3.3.1处理**  
![这里写图片描述][70 10]

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) 在每一个匹配的元素上触发某类事件。但不会执行浏览器默认动作，也不会产生事件冒泡。

**3.3.2委派**

![这里写图片描述][70 11]  
live(type , fn) 绑定事件，之后动态添加同样的成员，也具有相同的事件。  
die(type) 解绑事件

**3.3.3切换**

![这里写图片描述][70 12]  
hover(over , out)  
简化版，鼠标移入和移出 ，A.mouseover( fn ).mouseout( fn) 简化 A.hover( fn , fn )  
toggle( fn , fn , fn ,…) 执行click事件，每点击一次执行一个fn

[70]: /images/20220513/b3d069ca48fb47af8f0f13cf1390e3b3.png
[70 1]: /images/20220513/99e2f050951b4f8d96e780d9f7278a6c.png
[70 2]: /images/20220513/8c37790df2724dccafd23964a91aac70.png
[70 3]: /images/20220513/53d55848eef4420cb1a416a3933cf2fc.png
[70 4]: /images/20220513/b59c62f4bc874c968123d6cdbb54f46b.png
[70 5]: /images/20220513/4b57742f43a44eb19c239bb5a1d7f5fa.png
[70 6]: /images/20220513/43943aa9337a43f1a5faf8973e2018d8.png
[70 7]: /images/20220513/3a0786ae0b8b4c1bbe88a13c868e0b6e.png
[70 8]: /images/20220513/c85d143822ec4ca296556ef363ef1e27.png
[70 9]: /images/20220513/a69ad727fe244852b807449261c6acf1.png
[70 10]: /images/20220513/06642b97e0b54607919fdc61e83b7033.png
[70 11]: /images/20220513/920de9e664e24cb380fcf33165cc17ea.png
[70 12]: /images/20220513/d98e2091bcb84d82bbb8b562042f3980.png