1 过滤

  1. <script src="js/jquery-1.12.4.min.js"></script>
  2.     <script>
  3.         $(function(){
  4.             var $divs = $("div");
  5.             // 获取包含有指定选择器的标签
  6.             $divs.has("p").css({"background":"red"});
  7.             // 根据下标选择器指定的标签
  8.             $divs.eq(1).css({"background":"blue"});
  9.         });
  10.     </script>
  11. </head>
  12. <body>
  13.     <div>
  14.         <p>哈哈</p>
  15.     </div>
  16.     <div>
  17.         <input type="button" value="按钮">
  18.     </div>
  19. </body>
  20. </html>

image.png

(2) 转移

选择集转移就是以选择的标签为参照, 然后获取转移后的标签
选择集转移操作:

  • $(‘#box’).prev(); 表示选择id是box元素的上一个的同级元素
  • $(‘#box’).prevAll(); 表示选择id是box元素的上面所有的同级元素
  • $(‘#box’).next(); 表示选择id是box元素的下一个的同级元素
  • $(‘#box’).nextAll(); 表示选择id是box元素的下面所有的同级元素
  • $(‘#box’).parent(); 表示选择id是box元素的父元素
  • $(‘#box’).children(); 表示选择id是box元素的所有子元素
  • $(‘#box’).siblings(); 表示选择id是box元素的其它同级元素
  • $(‘#box’).find(‘.myClass’); 表示选择id是box元素的class等于myClass的元素
    1. <script src="js/jquery-1.12.4.min.js"></script>
    2.   <script>
    3.       $(function(){
    4.           // css括号里是一个javascript对象
    5.           // 选择上一个同级标签
    6.           $("#box1").prev().css({"color":"red", "font-size":"25px"});
    7.           // 选择上面所有同级标签
    8.           $("#box1").prevAll().css({"text-indent":"50px"});
    9.           // 选择下一个同级标签
    10.           $("#box1").next().css({"color":"green", "font-size":"25px"});
    11.           // 选择下面所有同级标签
    12.           $("#box1").nextAll().css({"text-indent":"50px"});
    13.           // 选择同级的其它标签
    14.           $("#box1").siblings().css({"text-decoration":"underline"});
    15.           // 选择父标签
    16.           $("#box1").parent().css({"background":"gray"});
    17.           // 获取所有子标签
    18.           $("#box1").children().css({"color":"blue"});
    19.           // 查找指定的子标签
    20.           $("#box1").find(".s1").css({"color":"green"});
    21.       });
    22.   </script>
    23. </head>
    24. <body>
    25.   <h3>三级标题</h3>
    26.   <p>哈哈哈</p>
    27.   <div id="box1">
    28.       <span class="s1">我是</span>一个<span class="s2">div</span>标签
    29.   </div>
    30.   <h3>三级标题</h3>
    31.   <p>哈哈哈</p>
    32. </body>
    33. </html>
    image.png