程序博客网 > mac如何解压文件

Jquery选择器使用方法

来源：互联网 发布：mac如何解压文件 编辑：程序博客网 时间：2024/05/29 02:12

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

一、基本选择器

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

[html] view plain copy
  1. $('#divOne').css('background', 'red');  

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

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

[html] view plain copy
  1. $('.divTwo').css('background', 'blue');  

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

[html] view plain copy
  1. $('p').css('color', 'pink');  

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

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

[html] view plain copy
  1. $('ul *').css('color', 'yellow');  
5. 并列选择器

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

[html] view plain copy
  1. $('#spanOne,.pTwo').css('color', 'blue');  


整个效果如下：

示例代码如下：

[html] view plain copy
  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（直系子元素）

[html] view plain copy
  1. $('#divOne > p').css('color', 'blue');  

下面的代码，只有外层段落的字体会改变颜色，里层不会，因为里层是属于divInner的直系元素
[html] view plain copy
  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()方法）
[html] view plain copy
  1. $('#divTwo + ul').css('color', 'red');  
下面的代码，只有序列2开头的会变色
[html] view plain copy
  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()方法）
[html] view plain copy
  1. $('#divThree ~ span').css('color', 'red');  

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

示例结果：

整个示例代码如下：

[html] view plain copy
  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（取第一个元素或最后一个元素）

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

[html] view plain copy
  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（取非元素）

[html] view plain copy
  1. <div id = 'divTwo'>我是divTwo</div>      
  2. <div class = 'divThree'>我是divThree</div>  

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

[html] view plain copy
  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表示奇数）
[html] view plain copy
  1. $('tr:even').css('background', 'red'); // 偶数行颜色  
  2. $('tr:odd').css('background', 'blue'); // 奇数行颜色  

偶数行行颜色为红色（第一行的索引为0），奇数为蓝色
[html] view plain copy
  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) （取指定索引的元素）

[html] view plain copy
  1. $('tr:eq(2)').css('background', 'yellow');//表格第二行变色  

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


——1.5 :gt(x)和:lt(x)（取大于x索引或小于x索引的元素）
[html] view plain copy
  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为蓝色

[html] view plain copy
  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标题元素）

[html] view plain copy
  1. $(':header').css('background', 'pink');  

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

[html] view plain copy
  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文本的元素）
[html] view plain copy
  1. $('#divOne span:contains("兄弟1_1")').css('color', 'red');  

下面的代码，兄弟1_1会变色
[html] view plain copy
  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（取不包含子元素或文本为空的元素）
[html] view plain copy
  1. $('#divTwo span:empty').html('没有内容').css('color', 'red');  

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

[html] view plain copy
  1.  <div id = 'divTwo'>  
  2. <span></span><br>  
  3. <span></span><br>  
  4. <span></span><br>  
  5. </div>  

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

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

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

[html] view plain copy
  1.  <div id = 'divThree'>  
  2. <h1>我是标题一</h1>  
  3. </div>  

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

[html] view plain copy
  1. $('ol li:parent').css('border', '1px solid #000');  

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

[html] view plain copy
  1. <ol>  
  2.     <li>序列1</li>  
  3.     <li></li>  
  4.     <li></li>  
  5.     <li>序列2</li>  
  6. </ol>  

整个代码如下：

[html] view plain copy
  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（取可见的元素）
示例代码如下：

[html] view plain copy
  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设置背景色为篮色

[html] view plain copy
  1. $('span[title]').css('background','blue');  

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

[html] view plain copy
  1. $('span[title = test3]').css('background','red');  

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

整个代码如下：

[html] view plain copy
  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>  

原效果：


点击后：


0 0
mac如何解压文件 mac如何解压文件
原创粉丝点击
热门IT博客
易源数据易源数据
arm c语言编程实例arm c语言编程实例
经传软件oa系统
青岛知行国际怎么样
淘宝客qq群链接转微信
私募股权基金知乎
oracle 停数据库
科比场均数据
react json 遍历
人工智能百度云资源
软件培训要多少钱
淘宝满减漏洞 故意多买
linux用什么编译软件好
c语言运算符优先级口诀
yii2 数据库查询缓存
非暴力不合作知乎
山东省网络信息办公室
线切割3b编程软件
电脑怎么发布淘宝宝贝
济南程序员兼职平台
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 科大邮箱 科大分数线 西南科大 湖南科大 科大科大 科大医院 科大自考 青科大 科大驾校 科大附中 科大图书馆 科大考研网 科大主页 科大专升本 科大招生 江科大附中 科大mba中心 黑科大 科大网院 湖科大 科大网站 科大学习 科大精神 科大首页 科大招生网 科大科技 国科大考研 科大高新 国科大为什么没有排名 北科大在211中算什么水平 科大讯飞待遇 河科大一附院 武科大为什么这么烂 武科大教务处 科大讯飞招聘 电子科大成都学院 林科大教务处 科大讯飞列入实体清单 河科大教务管理系统 科大少年班为何都放弃中国籍 洛阳河科大足浴一条街

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里