devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Jquery选择器使用方法大全_jquery id选择器正确用法

作者：知新_RL | 2024-05-15 17:47:49

赞

踩

jquery id选择器正确用法

  林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka

       摘要：本文主要讲是Jquery中选择器的使用方法

一、基本选择器

1. id选择器（指定id元素）
将id="divOne"的元素背景色设置为红色。（id选择器返单个元素） 

 $('#divOne').css('background', 'red');

2. class选择器（遍历css类元素）

将class="divTwo"的元素背景色设为蓝色

 $('.divTwo').css('background', 'blue');

3. element选择器（遍历html元素）
将p元素的文字设置为粉色 

  $('p').css('color', 'pink');

4. * 选择器（遍历所有元素）

将ul下的所有元素字体设置成黄色

 $('ul *').css('color', 'yellow');
5. 并列选择器

将id = spanOne,class = 'pTwo' 的字体设置成蓝色

   $('#spanOne,.pTwo').css('color', 'blue');


整个效果如下：

示例代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <script src="jquery-1.8.1.min.js">
  7.         </script>
  8.     </head>
  9.     
  10.     <body>
  11.         <button id="buttonOne" style="width:100px; height:45px;">
  12.             点我改变颜色
  13.         </button>
  14.         <div id="divOne">
  15.             我是divOne
  16.         </div>
  17.         <div class="divTwo">
  18.             我是divTwo
  19.         </div>
  20.         <p>
  21.             我是段落一
  22.         </p>
  23.         <p>
  24.             我是段落二
  25.         </p>
  26.         <ul>
  27.             <li>
  28.                 序列一
  29.             </li>
  30.             <li>
  31.                 序列二
  32.             </li>
  33.             <li>
  34.                 序列三
  35.             </li>
  36.         </ul>
  37.         <span id="spanOne">
  38.             并列一
  39.         </span>
  40.         <br>
  41.         <p class="pTwo">
  42.             并列二
  43.         </p>
  44.     </body>
  45.     <script type="text/javascript">
  46.         /*
  47. *DOM加载完全成执行
  48. */
  49.         $(function() {
  50.             $('#buttonOne').click(function() {
  51.                 $('#divOne').css('background', 'red');
  52.                 $('.divTwo').css('background', 'blue');
  53.                 $('p').css('color', 'pink');
  54.                 $('ul *').css('color', 'yellow');
  55.                 $('#spanOne,.pTwo').css('color', 'blue');
  56.             });
  57.         });
  58.     </script>
  59.  
  60. </html>

这是还没改变之前的：


这是改变之后的：


二、 层次选择器

1. parent > child（直系子元素）

	  $('#divOne > p').css('color', 'blue');

下面的代码，只有外层段落的字体会改变颜色，里层不会，因为里层是属于divInner的直系元素 
  1.         <div id='divOne'>
  2.             <p>
  3.                 外层段落一
  4.             </p>
  5.             <p>
  6.                 外层段落二
  7.             </p>
  8.             <p>
  9.                 外层段落三
  10.             </p>
  11.             <div id='divInner'>
  12.                 <p>
  13.                     里层段落一
  14.                 </p>
  15.                 <p>
  16.                     里层段落二
  17.                 </p>
  18.                 <p>
  19.                     里层段落三
  20.                 </p>
  21.             </div>
  22.         </div>

2. prev + next（下一个兄弟元素，等同于next()方法） 
   $('#divTwo + ul').css('color', 'red');
下面的代码，只有序列2开头的会变色 
  1.         <div id='divTwo'>
  2.         </div>
  3.         <ul>
  4.             <li>
  5.                 序列1_1
  6.             </li>
  7.             <li>
  8.                 序列1_2
  9.             </li>
  10.             <li>
  11.                 序列1_3
  12.             </li>
  13.         </ul>
  14.         <ul>
  15.             <li>
  16.                 序列2_1
  17.             </li>
  18.             <li>
  19.                 序列2_2
  20.             </li>
  21.             <li>
  22.                 序列2_3
  23.             </li>
  24.         </ul>


3. prev ~ siblings（prev元素的所有兄弟元素，等同于nextAll()方法） 
    $('#divThree ~ span').css('color', 'red');

下面的代码，兄弟一到三会变色 
  1. <div id = 'divThree'>
  2. </div>
  3. <span>兄弟一</span><br>
  4. <span>兄弟二</span><br>
  5. <span>兄弟三</span><br>

示例结果：

整个示例代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <script src="jquery-1.8.1.min.js">
  7.         </script>
  8.     </head>
  9.     
  10.     <body>
  11.         <button id="buttonOne" style="width:100px; height:45px;">
  12.             点我改变颜色
  13.         </button>
  14.         <div id='divOne'>
  15.             <p>
  16.                 外层段落一
  17.             </p>
  18.             <p>
  19.                 外层段落二
  20.             </p>
  21.             <p>
  22.                 外层段落三
  23.             </p>
  24.             <div id='divInner'>
  25.                 <p>
  26.                     里层段落一
  27.                 </p>
  28.                 <p>
  29.                     里层段落二
  30.                 </p>
  31.                 <p>
  32.                     里层段落三
  33.                 </p>
  34.             </div>
  35.         </div>
  36.         <div id='divTwo'>
  37.         </div>
  38.         <ul>
  39.             <li>
  40.                 序列1_1
  41.             </li>
  42.             <li>
  43.                 序列1_2
  44.             </li>
  45.             <li>
  46.                 序列1_3
  47.             </li>
  48.         </ul>
  49.         <ul>
  50.             <li>
  51.                 序列2_1
  52.             </li>
  53.             <li>
  54.                 序列2_2
  55.             </li>
  56.             <li>
  57.                 序列2_3
  58.             </li>
  59.         </ul>
  60.         <div id='divThree'>
  61.         </div>
  62.         <span>
  63.             兄弟一
  64.         </span>
  65.         <br>
  66.         <span>
  67.             兄弟二
  68.         </span>
  69.         <br>
  70.         <span>
  71.             兄弟三
  72.         </span>
  73.         <br>
  74.     </body>
  75.     <script type="text/javascript">
  76.         /*
  77. *DOM加载完全成执行
  78. */
  79.         $(function() {
  80.             $('#buttonOne').click(function() {
  81.                 $('#divOne > p').css('color', 'blue');
  82.                 $('#divTwo + ul').css('color', 'red');
  83.                 $('#divThree ~ span').css('color', 'red');
  84.             });
  85.         });
  86.     </script>
  87.  
  88. </html>

改变之前：


改变之后：


三、 过滤选择器

1. 基本过滤选择器
——1.1 :first和:last（取第一个元素或最后一个元素）

  1.  $('#divOne ul li :first').css('color', 'red');
  2. $('#divOne ul li :last').css('color', 'blue');
下面的代码，序列1_1（first元素）和序列1_3（last元素）会变色 

  1.   <div id = 'divOne'>
  2. <ul>
  3. <li>序列1_1</li>
  4. <li>序列1_2</li>
  5. <li>序列1_3</li>
  6. </ul>
  7.   </div>

——1.2 :not（取非元素） 

  1.    <div id = 'divTwo'>我是divTwo</div>    
  2.    <div class = 'divThree'>我是divThree</div>

下面的代码，divTwo和divThree会变色 

  1.   <div id = 'divOne'>
  2. <ul>
  3. <li>序列1_1</li>
  4. <li>序列1_2</li>
  5. <li>序列1_3</li>
  6. </ul>
  7.   </div> 
  8.    <div id = 'divTwo'>我是divTwo</div>   
  9.    <div class = 'divThree'>我是divThree</div>
——1.3 :even和:odd（取偶数索引或奇数索引元素，索引从0开始，even表示偶数，odd表示奇数） 
  1.      $('tr:even').css('background', 'red'); // 偶数行颜色
  2.      $('tr:odd').css('background', 'blue'); // 奇数行颜色

偶数行行颜色为红色（第一行的索引为0），奇数为蓝色 
  1. <table border="1">
  2.   <tr>
  3.     <th>Month</th>
  4.     <th>Savings</th>
  5. 	<th>Name</th>
  6.   </tr>
  7.   <tr>
  8.     <td>January</td>
  9.     <td>$100</td>
  10. 	<td>LinBingWen</td>
  11.   </tr>
  12.     <tr>
  13.     <td>Feb</td>
  14.     <td>$200</td>
  15. 	<td>test</td>
  16.   </tr>
  17.     <tr>
  18.     <td>Jna</td>
  19.     <td>$2300</td>
  20. 	<td>kkk</td>
  21.   </tr>
  22.     </tr>
  23.     <tr>
  24.     <td>Nev</td>
  25.     <td>$800</td>
  26. 	<td>cdf</td>
  27.   </tr>
  28.     </tr>
  29.     <tr>
  30.     <td>few</td>
  31.     <td>$300</td>
  32. 	<td>ggg</td>
  33.   </tr>
  34.     </tr>
  35.     <tr>
  36.     <td>Oct</td>
  37.     <td>$300</td>
  38. 	<td>ccc</td>
  39.   </tr>
  40. </table>

——1.4 :eq(x) （取指定索引的元素） 

	 $('tr:eq(2)').css('background', 'yellow');//表格第二行变色

更改第二行的背景色为黄色


——1.5 :gt(x)和:lt(x)（取大于x索引或小于x索引的元素） 
  1.      $('#divFour ul li:gt(2)').css('color', 'red');
  2.      $('#divFour ul li:lt(2)').css('color', 'blue');

序列4_0到4_1是红色，4_3到4_4为蓝色 

  1.   <span id = 'divFour'>
  2. <ul>
  3. <li>序列4_0</li>
  4. <li>序列4_1</li>
  5. <li>序列4_2</li>
  6. <li>序列4_3</li>
  7. <li>序列4_4</li>
  8. </ul>
  9.   </span>

——1.6 :header（取H1~H6标题元素） 

	 $(':header').css('background', 'pink');

下面的代码，H1~H6的背景色都会成粉色 
  1. <h1>H1</h1>
  2. <h2>H2</h2>
  3. <h3>H3</h3>
  4. <h4>H4</h4>
  5. <h5>H5</h5>
  6. <h6>H6</h6>
上面的整个代码如下： 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8">
  5.     <script src="jquery-1.8.1.min.js"></script>
  6. </head>
  7. <body>
  8.  <button id = "buttonOne" style = "width:100px; height:45px;">点我改变颜色</button>
  9.   <div id = 'divOne'>
  10. <ul>
  11. <li>序列1_1</li>
  12. <li>序列1_2</li>
  13. <li>序列1_3</li>
  14. </ul>
  15.   </div>
  16.   
  17.    <div id = 'divTwo'>我是divTwo</div>
  18.      
  19.    <div class = 'divThree'>我是divThree</div>
  20.  
  21. <table border="1">
  22.   <tr>
  23.     <th>Month</th>
  24.     <th>Savings</th>
  25. 	<th>Name</th>
  26.   </tr>
  27.   <tr>
  28.     <td>January</td>
  29.     <td>$100</td>
  30. 	<td>LinBingWen</td>
  31.   </tr>
  32.     <tr>
  33.     <td>Feb</td>
  34.     <td>$200</td>
  35. 	<td>test</td>
  36.   </tr>
  37.     <tr>
  38.     <td>Jna</td>
  39.     <td>$2300</td>
  40. 	<td>kkk</td>
  41.   </tr>
  42.     </tr>
  43.     <tr>
  44.     <td>Nev</td>
  45.     <td>$800</td>
  46. 	<td>cdf</td>
  47.   </tr>
  48.     </tr>
  49.     <tr>
  50.     <td>few</td>
  51.     <td>$300</td>
  52. 	<td>ggg</td>
  53.   </tr>
  54.     </tr>
  55.     <tr>
  56.     <td>Oct</td>
  57.     <td>$300</td>
  58. 	<td>ccc</td>
  59.   </tr>
  60. </table>
  61.   <span id = 'divFour'>
  62. <ul>
  63. <li>序列4_0</li>
  64. <li>序列4_1</li>
  65. <li>序列4_2</li>
  66. <li>序列4_3</li>
  67. <li>序列4_4</li>
  68. </ul>
  69.   </span>
  70.  
  71. <h1>H1</h1>
  72. <h2>H2</h2>
  73. <h3>H3</h3>
  74. <h4>H4</h4>
  75. <h5>H5</h5>
  76. <h6>H6</h6>
  77.   
  78.   
  79. </body>
  80. </body>
  81. <script type="text/javascript">
  82. /*
  83. *DOM加载完全成执行
  84. */
  85. $(function() {
  86.  $('#buttonOne').click(function(){
  87.      $('#divOne ul li :first').css('color', 'red');
  88. 	 $('#divOne ul li :last').css('color', 'blue');
  89. 	 $('div:not(#divOne)').css('background', 'yellow');
  90.      $('tr:even').css('background', 'red'); // 偶数行颜色
  91.      $('tr:odd').css('background', 'blue'); // 奇数行颜色
  92. 	 $('tr:eq(2)').css('background', 'yellow');//表格第二行变色
  93. 	 $('#divFour ul li:gt(2)').css('color', 'red');
  94.      $('#divFour ul li:lt(2)').css('color', 'blue');
  95. 	 $(':header').css('background', 'pink');
  96. });
  97. });
  98. </script>
  99. </html>

原始效果：


选择后效果：


2. 内容过滤选择器
——2.1 :contains(text)（取包含text文本的元素） 
     $('#divOne span:contains("兄弟1_1")').css('color', 'red');

下面的代码，兄弟1_1会变色 
  1.  <div id = 'divOne'>
  2. <span>兄弟1_1</span><br>
  3. <span>兄弟1_2</span><br>
  4. <span>兄弟1_3</span><br>
  5. </div>

——2.2 :empty（取不包含子元素或文本为空的元素） 
	 $('#divTwo span:empty').html('没有内容').css('color', 'red');

下面第span显示"没有内容"文本 

  1.  <div id = 'divTwo'>
  2. <span></span><br>
  3. <span></span><br>
  4. <span></span><br>
  5. </div>

——2.3 :has(selector)（取选择器匹配的元素） 

     $('#divThree:has(h1)').css('border', '1px solid #000');	  // 为包含h1元素的div添加边框

为包含h1元素的div添加边框 

  1.  <div id = 'divThree'>
  2. <h1>我是标题一</h1>
  3. </div>

——2.4 :parent（取包含子元素或文本的元素） 

	 $('ol li:parent').css('border', '1px solid #000');

下面的代码，序列1和序列2所在的li会有边框 

  1. <ol>
  2.     <li>序列1</li>
  3.     <li></li>
  4.     <li></li>
  5.     <li>序列2</li>
  6. </ol>

整个代码如下： 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8">
  5.     <script src="jquery-1.8.1.min.js"></script>
  6. </head>
  7. <body>
  8.  <button id = "buttonOne" style = "width:100px; height:45px;">点我改变颜色</button>
  9.  <div id = 'divOne'>
  10. <span>兄弟1_1</span><br>
  11. <span>兄弟1_2</span><br>
  12. <span>兄弟1_3</span><br>
  13. </div>
  14.  
  15.  <div id = 'divTwo'>
  16. <span></span><br>
  17. <span></span><br>
  18. <span></span><br>
  19. </div>
  20.  
  21.  <div id = 'divThree'>
  22. <h1>我是标题一</h1>
  23. </div>
  24.  
  25. <ol>
  26.     <li>序列1</li>
  27.     <li></li>
  28.     <li></li>
  29.     <li>序列2</li>
  30. </ol>
  31.  
  32.   
  33. </body>
  34. <script type="text/javascript">
  35. /*
  36. *DOM加载完全成执行
  37. */
  38. $(function() {
  39.  $('#buttonOne').click(function(){
  40.      $('#divOne span:contains("兄弟1_1")').css('color', 'red');
  41. 	 $('#divTwo span:empty').html('没有内容').css('color', 'red');
  42.      $('#divThree:has(h1)').css('border', '1px solid #000');	  // 为包含h1元素的div添加边框
  43. 	 $('ol li:parent').css('border', '1px solid #000');
  44. });
  45. });
  46. </script>
  47. </html>

原始内容：


点击后的：


3. 可见性过滤选择器
——3.1 :hidden（取不可见的元素）

jQuery至1.3.2之后的:hidden选择器仅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或opactity:0的元素占据了空间，会被排除在外。

——3.2 :visible（取可见的元素）
示例代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8">
  5.     <script src="jquery-1.8.1.min.js"></script>
  6. </head>
  7. <body>
  8.  <button id = "buttonOne" style = "width:100px; height:45px;">点我改变颜色</button>
  9.     <div class="div-1" style = 'display: none'></div>
  10.     <div class="div-2" ></div>
  11.     <input type="hidden" value="hello"/>
  12. </body>
  13. <script type="text/javascript">
  14. /*
  15. *DOM加载完全成执行
  16. */
  17. $(function() {
  18.  $('#buttonOne').click(function(){
  19.      $('div:visible').css({'background':'blue','height':'20px'});
  20. 	 $('div:hidden').show().css({'background':'red','height':'20px'});
  21. 	 alert($('input:hidden').val());
  22. 	
  23. });
  24. });
  25. </script>
  26. </html>
原始：


点击后:


4. 属性过滤选择器
——4.1 [attribute]（取拥有attribute属性的元素）

将有title元素的span设置背景色为篮色

   $('span[title]').css('background','blue');

——4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素） 

 $('span[title = test3]').css('background','red');

将将有title=‘test3’元素的span设置背景色为红色

整个代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8">
  5.     <script src="jquery-1.8.1.min.js"></script>
  6. </head>
  7. <body>
  8.  <button id = "buttonOne" style = "width:100px; height:45px;">点我改变颜色</button>
  9.  <div id = 'divOne'>
  10. <span title ="test1">兄弟1_1</span><br>
  11. <span title ="test2">兄弟1_2</span><br>
  12. <span title ="test3">兄弟1_3</span><br>
  13. </div>
  14. </body>
  15. <script type="text/javascript">
  16. /*
  17. *DOM加载完全成执行
  18. */
  19. $(function() {
  20.  $('#buttonOne').click(function(){
  21.    $('span[title]').css('background','blue');
  22.    $('span[title = test3]').css('background','red');
  23. 	
  24. });
  25. });
  26. </script>
  27. </html>

原效果：


点击后：


声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号