美文网首页我爱编程
jquery部分方法补充

jquery部分方法补充

作者: wish1994 | 来源:发表于2017-10-24 22:02 被阅读0次

    简单介绍一下今天所学的部分jquery方法。jquery方法命名比较语义化,理解起来比较简单,所有有些方法还是需要自己去探索的。

    1.eq()方法

    我们常用$()函数来返回一个对象队列,此时可以用eq方法来精确选择这个序列中的某个元素。eq方法的参数是从0开始的整数,跟数组的下标很像。

    $("p").eq(3) //这样就是选择了第4个p标签。
    

    同样的,lt、gt、odd、even、first、last都是这个机理。不过这些需要写在$()里面,如$("p:lt(3)")就是选择了下标小于3的前三个p标签。

    2.index()方法

    如果不传递任何参数给 .index() 方法,则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置。
    如果在一组元素上调用 .index() ,并且参数是一个DOM元素或jQuery对象, .index() 返回值就是传入的元素相对于原先集合的位置。
    如果参数是一个选择器, .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则 .index() 返回 -1.
    index()方法常跟$(this)合用。
    举个例子。

    $("div").click(function(){
        alert($(this).index());
    }) //这里就是输出此div在所有div中的排名。
    

    3.each()方法

    each()表示遍历节点,也叫作迭代符合条件的节点。和for循环的遍历一个道理。这个还是比较常用的。

    $("p").each(function(i){
        $(this).animate({"width":50 * i},1000);
    });
    

    上面的例子就是将所有p标签遍历,使每个p标签的宽度与自己的下标挂上钩。

    4.get()方法

    get()方法和eq()方法基本一致,都仰赖$()的序列。
    不过,eq()返回的是jQuery对象,而get()返回的是原生JS对象。jQuery对象后面要跟着jQuery方法,原生对象后面要跟着原生属性、方法。

    $("p").eq(2).html("哈哈哈哈哈哈");
    $("p").get(2).innerHTML = "哈哈哈哈哈哈";
    //上面两行代码是等价的
    

    其他介绍:
    动画相关:show()显示、hide()隐藏、toggle()切换
    额外内容比较简单,具体介绍可以参考https://github.com/lvye1221/Web1708/blob/master/F03-%E7%BB%84%E4%BB%B6-JQuery-%E5%8A%A8%E7%94%BB%E4%B8%8E%E8%8A%82%E7%82%B9/jQuery%E7%AC%AC2%E5%A4%A9%E8%AF%BE%E5%A0%82%E7%AC%94%E8%AE%B0.docx

    相关文章

      网友评论

        本文标题:jquery部分方法补充

        本文链接:https://www.haomeiwen.com/subject/rjoxpxtx.html