jQuery 入门教程(3): Selectors

川长思鸟来 2023-10-16 19:04 23阅读 0赞

jQuery Selector 是jQuery库中非常重要的一个组成部分。

jQuery Selector 用来选择某个HTML元素，其基本语句和CSS的选择器（Selector）是一样的，所有jQuery selector 都是以$()开始。

### 选择HTML标记 ###

选择某个HTML元素的方法是直接使用该元素的标记名称，比如选择所有<p>元素

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

1.  $("p")
2.  
3.

$("p")

下面的例子当用户点击一个按钮时，隐藏所有的<p>元素

**\[javascript\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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

$(document).ready(function(){
       $("button").click(function(){
         $("p").hide();
       });
     });

### \#id 选择 ###

jQuery \#id 选择器用来选择定义了id 属性的元素，网页上元素的id应保证是唯一的，你可以使用id来选择单个唯一的元素。

比如下面的例子，当点击按钮时，只会隐藏id为test 的元素。

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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. 
25.

<!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#test").hide();
      });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p id="test">This is another paragraph.</p>
    <button>Click me</button>
    </body>
    
    </html>

### .class 选择器 ###

jQuery .class 选择器选择所有定义了class属性为制定值的所有元素，比如下面的例子 隐藏所有类名称为test的元素：

**\[html\]** [ view plain][view plain] [copy][view plain] [print][view plain] [?][view plain]

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. 
23.

<!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $(".test").hide();
      });
    });
    </script>
    </head>
    <body>
    
    <h2 class="test">This is a heading</h2>
    <p class="test">This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button>Click me</button>
    </body>
    </html>

### 更多的例子 ###

<table style="margin:0px 0px 18px; padding:0px; border:1px solid rgb(221,221,221); color:rgb(85,85,85); line-height:21px; font-family:'Times New Roman',Helvetica,serif; font-size:14px; vertical-align:baseline; border-collapse:collapse; border-spacing:0px"> 
 <tbody style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline"> 
  <tr style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> <span style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline">语法</span></td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> <span style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline">说明</span></td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline; background-color:rgb(249,249,249)"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> $(“*”)</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> 选择所以元素</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> $(this)</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> 选择当前元素</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline; background-color:rgb(249,249,249)"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> $(“p.intro”)</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> 选项所有class=intro的p元素</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> $(“p:first”)</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> 选择第一个p元素</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline; background-color:rgb(249,249,249)"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> $(“ul li:first”)</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> 选择第一个&lt;ul&gt;元素的第一个&lt;li&gt;元素</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> $(“ul li:first-child”)</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> 选择每个&lt;ul&gt;的第一个 元素</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline; background-color:rgb(249,249,249)"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> $(“[href]“)</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> 选择所有带href的元素</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> $(“a[target='_blank']“)</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> 选择所有target=_blank的a元素</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline; background-color:rgb(249,249,249)"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> $(“a[target!='_blank']“)</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> 选择所有target！=_blank的a元素</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> $(“:button”)</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> 选择所有button元素及input类型为button的元素</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline; background-color:rgb(249,249,249)"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> $(“tr:even”)</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> 选择所有偶数行&lt;tr&gt;元素</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px currentColor; line-height:inherit; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:baseline"> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> $(“tr:odd”)</td> 
   <td style="margin:0px; padding:9px 10px; border:currentColor; color:rgb(51,51,51); line-height:18px; font-family:inherit; font-style:inherit; font-variant:inherit; vertical-align:top"> 选择所有单数行&lt;tr&gt;元素</td> 
  </tr> 
 </tbody> 
</table>

[view plain]: http://blog.csdn.net/mapdigit/article/details/8640434#