jQuery选择器课堂随笔

　　$(function(){
   //并集选择器
   /*
   $("h2,ul").css("background","pink");*/

   //交集选择器
  //$("h2.ww").css("background","pink");

   //全局选择器
   //$("*").css("background","red");

   //标签选择器
   //$("ul").css("background","red");
   //类选择器
   //$(".ww").css("background","red");

   //后代选择器
   //$("#66 span").css("background","red");
   //子选择器
   //$("#66>span").css("background","red");
   //相邻选择器
    //$("#66+h2").css("background","red");
    //同辈选择器
   // $("#66~h2").css("background","red");
   //属性选择器
   // $("[href=sss]").css("background","red");href元素属性值等于sss
   //$("[href^=sss]").css("background","red");href元素属属性值包含sss
   //$("[href$=sss]").css("background","red"); href元素属属性值以sss结尾
   //$("a[href=sss]").css("background","red");在a标签中且href元素属性值等于sss

   //过滤选择器
   //偶数
   //$("ul li:even").css("background","red");
   //奇数
   //$("ul li:odd").css("background","red");
   //第一个
   //$("ul li:first").css("background","red");
   //最后一个
   //$("ul li:last").css("background","red");
   //索引等于index的元素
   //$("ul li:eq(1)").css("background","red");
   //索引大于index的元素
   //$("ul li:gt(1)").css("background","red");
   //索引小于indexi的元素
   //$("ul li:lt(1)").css("background","red");
   $("input").focus();
   $("input:focus").css("background","red");
  });



  </script>
</head>
<body>

  <h1 class="2">New Web Project Page</h1>
  <div id="66"><span> ssssss</span> 666666666</div>
  <h2 class="ww">hehehehe</h2>
  <h2 class="ss">66666666666</h2>
  <input type="text"/>
  <ul>
   <li class="1">我是第一个li</li>
   <li class="2">我是第二个li</li>
   <li class="3"> 我是第三个li</li>
   <li class="4">我是第四个li</li>
  </ul>
  <div id="3">

   <a href="sss">1</a>
   <a href="sss2">2</a>
   <a href="sss3">3</a>
   <a href="sss4">4</a>
  </div>
</body>

秒客网

jQuery选择器课堂随笔

相关文章