• jQuery 集合 串联操作( andSelf() end() add() contents() )


    1.andSelf() 新增自身对象到当前的jQuery对象里,通常用法:

    $('li.third-item').nextAll().andSelf() .css('background-color', 'red'); 

    2.end()  返回到上一次jQuery对象, 通常用于链式操作里:

    $('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green'); 

    3.add()  新增对象到当前的jQuery对象里
    4.contents()  查找子节点元素。与children()不同的是,它包括文本节点及所生成的jQuery对象中的页面元素。

    举个例子:

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     2 <html>
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
     6     <title>串联操作应用示例</title>
     7     <style>
     8         .border{border: 2px solid red; }
     9     </style>
    10     <script language="javascript" type="text/javascript">
    11         $(document).ready(function(){
    12             $("#div1").find("span").andSelf().addClass("border");
    13             $("#div2").find("p").css("color","blue");
    14             $("#div3").find("option").css("color","red").end().find("p").css("background-color","yellow");
    15             $("#p1").add("ul").css("color","#FF44FF");
    16             $("#p2").contents().css("color","green");
    17         });
    18     </script>
    19 </head>
    20 <body bgcolor="#EEEEEE">
    21     <div id="div1">
    22         <p>p元素1</p>
    23         <span id="span1">span元素一</span>
    24         <span id="span2">span元素二</span>
    25     </div>
    26     <hr/>
    27     <div id="div2">
    28         <p>p元素2</p>
    29         <span>span元素三</span>
    30     </div>
    31     <hr/>
    32     <div id="div3">
    33         请选择运动项目:
    34         <select>
    35             <option id="op1">长跑</option>
    36             <option id="op2">短跑</option>
    37         </select>
    38         <p>p元素3</p>
    39     </div>
    40     <hr/>
    41     <p id="p1">p元素测试</p>
    42     <ul>
    43         <li>(1)hello</li>
    44         <li>(2)jQuery</li>
    45     </ul>
    46     <hr/>
    47     <p id="p2">content:p元素4<a>[p内嵌的a元素]</a></p>
    48 </body>
    49 </html>

    运行效果如下:

  • 相关阅读:
    鲜牛奶与纯牛奶的区别 All In One
    Rough Notation Animation All In One
    java基础编程String及相关
    JDBC1
    java基础数据类型
    java基础编程
    JDBC3
    MYSQL1
    JDBC2
    JSP和Servlet的相同点和不同点,他们之间的联系
  • 原文地址:https://www.cnblogs.com/lihuiyy/p/2582834.html
Copyright © 2020-2023  润新知