jQuery Selector

時間  2019-11-24
標籤 jquery selector 欄目 JQuery 简体版
原文   原文鏈接

jQuery Selector 是jQuery庫中很是重要的一個組成部分。 html

jQuery Selector 用來選擇某個HTML元素，其基本語句和CSS的選擇器（Selector）是同樣的，全部jQuery selector 都是以$()開始。 jquery

選擇HTML標記

選擇某個HTML元素的方法是直接使用該元素的標記名稱，好比選擇全部<p>元素 ajax

  1. $("p")  
  2.    

下面的例子當用戶點擊一個按鈕時，隱藏全部的<p>元素 api

  1. $(document).ready(function(){  
  2.    $("button").click(function(){  
  3.      $("p").hide();  
  4.    });  
  5.  });  
  6.    

#id 選擇

jQuery #id 選擇器用來選擇定義了id 屬性的元素，網頁上元素的id應保證是惟一的，你能夠使用id來選擇單個惟一的元素。 ide

好比下面的例子，當點擊按鈕時，只會隱藏id爲test 的元素。 this

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">  
  5. </script>  
  6. <script>  
  7. $(document).ready(function(){  
  8.   $("button").click(function(){  
  9.     $("#test").hide();  
  10.   });  
  11. });  
  12. </script>  
  13. </head>  
  14.   
  15. <body>  
  16. <h2>This is a heading</h2>  
  17. <p>This is a paragraph.</p>  
  18. <p id="test">This is another paragraph.</p>  
  19. <button>Click me</button>  
  20. </body>  
  21.   
  22. </html>  
  23.   
  24.    

.class 選擇器

jQuery .class 選擇器選擇全部定義了class屬性爲制定值的全部元素，好比下面的例子 隱藏全部類名稱爲test的元素： google

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">  
  5. </script>  
  6. <script>  
  7. $(document).ready(function(){  
  8.   $("button").click(function(){  
  9.     $(".test").hide();  
  10.   });  
  11. });  
  12. </script>  
  13. </head>  
  14. <body>  
  15.   
  16. <h2 class="test">This is a heading</h2>  
  17. <p class="test">This is a paragraph.</p>  
  18. <p>This is another paragraph.</p>  
  19. <button>Click me</button>  
  20. </body>  
  21. </html>  
  22.    

更多的例子

語法 說明
$(「*」) 選擇因此元素
$(this) 選擇當前元素
$(「p.intro」) 選項全部class=intro的p元素
$(「p:first」) 選擇第一個p元素
$(「ul li:first」) 選擇第一個<ul>元素的第一個<li>元素
$(「ul li:first-child」) 選擇每一個<ul>的第一個 元素
$(「[href]「) 選擇全部帶href的元素
$(「a[target='_blank']「) 選擇全部target=_blank的a元素
$(「a[target!='_blank']「) 選擇全部target！=_blank的a元素
$(「:button」) 選擇全部button元素及input類型爲button的元素
$(「tr:even」) 選擇全部偶數行<tr>元素
$(「tr:odd」) 選擇全部單數行<tr>元素
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程