JQuery选择器之位置选择器

谁践踏了优雅 2022-06-03 06:20 293阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>B:first</td> 
   <td>匹配页面上满足选择器B的第一个元素</td> 
  </tr> 
  <tr> 
   <td>B:last</td> 
   <td>匹配页面上满足选择器B的最后一个元素</td> 
  </tr> 
  <tr> 
   <td>B:first-child</td> 
   <td>所有匹配选择器B的第一个元素</td> 
  </tr> 
  <tr> 
   <td>B:last-child</td> 
   <td>所有匹配选择器B的所有最后一个元素</td> 
  </tr> 
  <tr> 
   <td>B:only-child</td> 
   <td>匹配选择器B的唯一元素。</td> 
  </tr> 
  <tr> 
   <td>B:nth-child(n)</td> 
   <td>匹配选择器B的第N个子元素，从1开始。</td> 
  </tr> 
  <tr> 
   <td>B:nth-child(odd,even)</td> 
   <td>匹配选择器B的奇数位，偶数位子元素</td> 
  </tr> 
  <tr> 
   <td>B:nth-child(Xn+Y)</td> 
   <td>匹配选择器B的第(Xn+Y)个子元素</td> 
  </tr> 
  <tr> 
   <td>B:even</td> 
   <td>所有偶数位匹配选择B的元素</td> 
  </tr> 
  <tr> 
   <td>B:odd</td> 
   <td>所有奇数位匹配选择B的元素</td> 
  </tr> 
  <tr> 
   <td>B:eq(n)</td> 
   <td>第N个匹配选择B的元素，从0开始</td> 
  </tr> 
  <tr> 
   <td>B:gt(n)</td> 
   <td>第N个元素之后匹配选择B的元素，从0开始</td> 
  </tr> 
  <tr> 
   <td>B:lt(n)</td> 
   <td>第N个元素之前匹配选择B的元素，从0开始</td> 
  </tr> 
 </tbody> 
</table>

示例：

<table> 
 <thead> 
  <tr> 
   <th>语句</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(“p:first”)</td> 
   <td>selects the first element on the page</td> 
  </tr> 
  <tr> 
   <td>$(img[src§=.png]:first”)</td> 
   <td>selects the first &lt;img&gt; element on the page that has a src attribute ending in .png</td> 
  </tr> 
  <tr> 
   <td>$(“button.small:last”)</td> 
   <td>selects the last &lt;button&gt; element on the page that has a class name of small</td> 
  </tr> 
  <tr> 
   <td>$(“li:first-child”)</td> 
   <td>selects all &lt;li&gt; elements that are first children within their lists</td> 
  </tr> 
  <tr> 
   <td>$(“a:only-child”)</td> 
   <td>selects all &lt;a&gt; elements that are the only element within their parent</td> 
  </tr> 
  <tr> 
   <td>$(“li:nth-child(2)”)</td> 
   <td>selects all &lt;li&gt; elements that are the second item within their lists</td> 
  </tr> 
  <tr> 
   <td>$(“tr:nth-child(odd)”)</td> 
   <td>selects all odd &lt;tr&gt; elements within a table</td> 
  </tr> 
  <tr> 
   <td>$(“div:nth-child(5n)”)</td> 
   <td>selects every 5th &lt;div&gt; element</td> 
  </tr> 
  <tr> 
   <td>$(“div:nth-child(5n+1)”)</td> 
   <td>selects the element after every 5th &lt;div&gt; element</td> 
  </tr> 
  <tr> 
   <td>$(“.someClass:eq(1)”)</td> 
   <td>selects the second element with a class name of someClass</td> 
  </tr> 
  <tr> 
   <td>$(“.someClass:gt(1)”)</td> 
   <td>selects all but the first two elements with a class name of someClass</td> 
  </tr> 
  <tr> 
   <td>$(“.someClass:lt(4)”)</td> 
   <td>selects the first four elements with a class name of someClass</td> 
  </tr> 
 </tbody> 
</table>