JQuery中常用的选择器

jQuery常用选择器

基础选择器

基本选择器语法功能
ID选择器 $('#ID') 找到匹配指定ID的元素
元素(标签)选择器 $('element') 找到指定的元素
class选择器 $('.class') 找到匹配指定class的元素
通配符选择器 $('*') 匹配所有元素
并集(组合)选择器 $('sel,sel') 多个选择器匹配的元素合并
层级选择器语法功能
后代选择器 $('parent child') 当前元素的所有后代元素
直接后代选择器 $('parent>child') 当前元素所有的子元素
下一个兄弟 $('prev+next') 当前元素的下一个元素
后面所有兄弟 $('prev~siblings') 当前元素后面的所有兄弟元素

筛选选择器

基本筛选选择器语法
获取第一个元素 $('ele:first')
获取最后一个元素 $('ele:last')
获取指定索引的元素 $('ele:eq(index)') 方法eq(index)
获取所有元素除某个 $('ele:not(selector)')
获取索引为偶数的元素 $('ele:even')
获取索引为奇数的元素 $('ele:odd')
获取大于该索引元素 $('ele:gt(index)')
获取小于于该索引元素 $('ele:lt(index)')
获取所有标题类型元素 $('ele:header')

例题:

基础选择器

<button>选择所有段落标签</button>
   <button>选择class为left的标签</button>
   <button>选择id为box的标签</button>
   <button>选择所有不分类型标签</button>
   <button>选择ul里面的li标签</button>
   <button>选择body下的第一级所有标签并添加边框</button>
   <button>选择p后的一个div</button>
   <button>选择p后的所有div</button>
   <p>段落标签</p>
   <p>段落标签</p>
   <p>段落标签</p>
   <div class="left">类选择器</div>
   <div class="left">类选择器</div>
   <div id="box">id选择器</div>
   <ul>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
   </ul>
   <ol>
       <li>列表项</li>
       <li>列表项</li>
       <li>列表项</li>
   </ol>

   <script>
       $("button:first").click(function(){
           $("p").css("color","red")
      })

       $("button:eq(1)").click(function(){
           $(".left").css("color","blue")
      })

       $("button:eq(2)").click(function(){
           $("#box").css("color","yellow")
      })

       $("button:eq(3)").click(function(){
           $("body>:not(.left)").css("color","yellow")
      })

       $("button:eq(4)").click(function(){
           $("ul li").css("color","skyblue")
      })

       $("button:eq(5)").click(function(){
           $("body>*").css("border","1px solid #000")
      })
       
       $("button:eq(6)").click(function(){
           $("p~div:first").css("color","purple")
      })

       $("button:last").click(function(){
           $("p~div").css("color","green")
      })
   </script>

筛选选择器

<button>选择第一个li</button>
   <button>选择最后一个li</button>
   <button>选择所有li排除最后一个</button>
   <button>选择所有li排除第二个</button>
   <button>选择所有索引值为偶数个li</button>
   <button>选择所有索引值为奇数个li</button>
   <button>选择大于第5个的li</button>
   <button>选择小于第5个的li</button>
   <button>选择等于第5个的li</button>
   <button>选择所有标题标签</button>
   <ul>
       <li>这是一个li</li>
       <li>这是一个li</li>
       <li>这是一个li</li>
       <li>这是一个li</li>
       <li>这是一个li</li>
       <li>这是一个li</li>
       <li>这是一个li</li>
       <li>这是一个li</li>
       <li>这是一个li</li>
       <li>这是一个li</li>
   </ul>
   <h1>标题1标签</h1>
   <h2>标题2标签</h2>
   <h3>标题3标签</h3>
   <script>
      $("button:first").click(function () {
           $("li:first").css("color", "red")
      })
       $("button:eq(1)").click(function () {
           $("li:last").css("color", "green")
      })
       $("button:eq(2)").click(function () {
           $("li:not(:last)").css("color", "blue")
      })
       $("button:eq(3)").click(function () {
           $("li:not(:eq(1))").css("color", "yellow")
      })
       $("button:eq(4)").click(function () {
           $("li:even").css("color", "pink")
      })
       $("button:eq(5)").click(function () {
           $("li:odd").css("color", "orange")
      })
       $("button:eq(6)").click(function () {
           $("li:gt(4)").css("background", "blue")
      })
       $("button:eq(7)").click(function () {
           $("li:lt(4)").css("background", "red")
      })
       $("button:eq(8)").click(function () {
           $("li:eq(4)").css("background", "green")
      })
       $("button:eq(9)").click(function () {
           $("*:header").css("background", "skyblue")
      })
    </script>
 

 

posted @ 2022-10-10 16:25  Dollom  阅读(604)  评论(0)    收藏  举报