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+版本更新