• jQuery的dom操作


    PS:选择器主要用在dom元素的选择上,而dom方法主要用在链式操作上。
     
    1. eq(index|-index)选择指定索引的元素
    2. filter(表达式)筛选指定表达式的元素
    3. first()选择第一个元素
    4. last()选择最后一个元素
    5. is()检测是否元素返回布尔值
    6. has()保留包含特定后代的元素,去掉那些不含有指定后代的元素
    7. not()从匹配的元素集合中移除指定的元素。
    8. map()将一组元素转换成其他数组
    9. slice(start, end)根据指定的下标范围,选取匹配的元素集合,结果为[s,e).
     
    实例:
        <p class=”first”>第1个p</p>
        <p>第2个p</p>
        <p>第3个p</p>
        <p>第4个p</p>
        <p>第5个p</p>
        <p>第6个p</p>
     
    <script>
        $(“p”).eq(0).css(“background”, “red”);
     
        $(“p”).filter(“:odd”).css(“background”, “red”);
     
        $(“p”).filter(“.first”).css(“background”, “red”);
     
        $(“p”).first().css(“background”, “red”);
     
        $(“p”).last().css(“background”, “red”);
     
        $(“p”).click(function() {
            if($(this).is(“.first”)) {
                $(this).css(“background”, “red”);
            }
        });
     
        $(“p”).not(“:first”).css(“background”, “red”);
        //返回值是数组,每个值以,分割
        $(“p”).map(function() {
            return $(this).val();
        }).get().join(“,”);
     
        $(“p”).slice(1, 3).css(“background”, “red”);

    </script>

    dom遍历查找
    1. children()选取子元素
    2. parent()选取父元素
    3. parents()选取祖先元素
    4. parentsUntil()所有的父辈元素,直到遇到匹配的那个元素为止 1.6+
    5. offsetParent()返回父元素中第一个其position设为relative或者absolute的元素,仅对可见元素有效
    6. next()选择后面紧临的兄弟元素
    7. nextAll()查找当前元素之后所有的同辈元素
    8. nextUntil()所有的同辈元素,直到遇到匹配的那个元素为止 1.6+
    9. prev()前一个兄弟元素
    10. prevAll()前面所有的兄弟元素
    11. prevUntil()所有的兄弟元素,直到遇到匹配的那个元素为止 1.6+
    12. siblings()前后所有的兄弟元素
    13. closest()从元素本身开始,在DOM 树上逐级向上级元素匹配,并返回最先匹
    配的祖先元素
    14. contents()元素的子元素,包括文字和注释节点
    15. end()终止在当前链的最新过滤操作,并返回匹配的元素的以前状态
    16. andself()1.8版本中已废弃
    17. addBack()添加堆栈中元素集合到当前集合,一个选择性的过滤选择器
    18. each()遍历一个jQuery对象,为每个匹配元素执行一个函数
     
    实例:
    <div id=”outer”>
        outer
        <div id=”wrap” style=”position:absolute;left:10px;top:10px;”>
        wrap
            <div>111</div>
            <div>222</div>
            <p id=”p1″>第1个p<span>span111</span></p>
            <p id=”p2″>第2个p</p>
            <p>第3个p</p>
            <div>div标签</div>
        </div>
    </div>
     
    <script>
        $(“#wrap”).children().not(“div”).css(“background”, “red”);
     
        $(“#p1”).parent().css(“background”, “red”);
     
        $(“#p1”).parents(“#outer”).css(“background”, “red”);
     
        $(“#p1”).offsetParent().css(“background”, “red”);
     
        //选择后面紧临的兄弟元素
        $(“#p1”).next().css(“background”, “red”);
     
        $(“#p1”).nextAll().not(“div”).css(“background”, “red”);
     
        $(“#p2”).prev().css(“background”, “red”);
     
        $(“#p2”).prevAll().css(“background”, “red”);
     
        //p2的所有兄弟元素
        $(“#p2”).siblings().css(“background”, “red”);
     
        $(“span”).parent().css(“background”, “red”).end().css(“background”, “blue”);
     
        $(“#p1”).nextAll().addBack().css(“background”, “red”);
     
    </script>
     
     实例:jquery表格隔行变色
     
    <script>
        $(“#table tr”).filter(“:odd”).css(“background”, “red”)
        .end().filter(“:even”).background(“background”, “yellow”);
    </script>
     
    选择器的优化准则
     
        1.优先使用id选择器
        2.在class选择器前添加标签名, 如<p class=”a”>ll</p>   $(‘p.a’);
        3.采用find(),而不使用上下文查找
        4.强大的链式操作比缓存更快
        5.从左至右的模型1.3+版本更新
  • 相关阅读:
    [程序员必备工具]分享一款不错的个人代码个人知识管理软件wiz
    移动开发,如何选择手机软件开发​平台?
    Best Wishes,my Married Friend!
    三年来最开心的一天!
    “世事无绝对”也是相对的……
    又到世界CUP……
    利物浦,总是在我情绪低落时给我鼓舞!
    一种感觉
    How to break to loop? It frustrates me!
    取舍有度,学会放弃……
  • 原文地址:https://www.cnblogs.com/zhangmingcheng/p/5597839.html
Copyright © 2020-2023  润新知