jQuery的筛选,事件

2.筛选

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

2.1过滤

这里写图片描述
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查找

这里写图片描述

<A>
    <B>
        <C></C>
        <D></D>
        <E></E>
        <F></F>
    </B>
</A>

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串联

将多条语句,改成一条。(得瑟代码)
这里写图片描述
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常见事件总结

这里写图片描述

  • 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页面加载
这里写图片描述
- 方式1:标准api

$(document).ready(function(){

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

这里写图片描述

  • 方式2:简化版
$(function(){
});
登录
jQuery(function(){
});
  • 源码分析(了解)
    步骤一:回顾js 函数创建
    方式1:function abc(){}; abc();
    方式2:var abc = function(){} ; abc();
    $( fn ) == jQuery( fn ) == new jQuery.fn.init( fn )
    这里写图片描述
    步骤二: init( fn ) –> rootjQuery.ready( fn )
    这里写图片描述
    这里写图片描述
    步骤三:
    这里写图片描述
    总结:
    $( fn ) –> init( fn ) –> jQuery(document).ready( fn )

3.3事件绑定

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

3.3.2委派

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

3.3.3切换

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

猜你喜欢

转载自blog.csdn.net/weixin_41653442/article/details/82655765