jquery选择器--学习笔记

怼烎@ 2021-09-16 13:58 359阅读 0赞

**一、jquery选择器风格:**  
jquery中的选择器完成继承了CSS的风格。利用JQ选择器，可以非常便捷和快速找出特定的DOM元素，然后为它们添加相应的行为。使用CSS选择器时需要考滤主流浏览器是否支持某些选择器，而jquery无需担心浏览器是否支持这一选择器。  
  
  
**二、jquery简洁写法**  
(这里是美元符)()函数在很多javascript类库中都被作为一个选择器函数来使用，在jquery中也不例外。其中，(这里是美元符)("\#ID")用来代替document.getElementById()函数，既通过ID获取元素;$(“tagName”)用来代替document.getElementsByTagName()函数，即可以通过标签名获取HTML元素。

**三、JQuery选择器目录**  
1. 基本选择器  
2. 层次选择器  
3. 基本过滤器选择器  
4. 内容过滤选择器  
5. 可见性过滤选择器  
6. 属性过滤选择器  
7. 子元素过滤选择器  
  
  
*备注：因符号有冲突已在()内用文字提示*

1.基本选择器

<table> 
 <thead> 
 <tr> 
 <th>选择器</th> 
 <th>描述</th> 
 <th align="center">返回</th> 
 <th align="center">示例</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>#id</td> 
 <td>根据给定的id匹配一个元素</td> 
 <td align="center">单个元素</td> 
 <td align="center">$(“#test”)选取id为test的元素</td> 
 </tr> 
 <tr> 
 <td>.class</td> 
 <td>根据给定的类名匹配元素</td> 
 <td align="center">集合元素</td> 
 <td align="center">$(“.test")选取所有class为test的元素</td> 
 </tr> 
 <tr> 
 <td>element</td> 
 <td>根据给定的元素名匹配元素</td> 
 <td align="center">集合元素</td> 
 <td align="center">$(“p”)选取所有p元素</td> 
 </tr> 
 <tr> 
 <td>*</td> 
 <td>匹配所有元素</td> 
 <td align="center">集合元素</td> 
 <td align="center">$(“*”)选取所有元素</td> 
 </tr> 
 <tr> 
 <td>Selectorl,selector2……,selectorN</td> 
 <td>将每一个选择器匹配到的元素集合并后一起返回</td> 
 <td align="center">集合元素</td> 
 <td align="center">$(“div,span,p,myClass”)选取所有div,span和拥有class为myClass的p标签的一组元素</td> 
 </tr> 
 </tbody> 
</table>

基本选择器示例

<table> 
 <thead> 
 <tr> 
 <th align="center">功能</th> 
 <th align="center">代码</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td align="center">改变id为box的元素的背景色</td> 
 <td align="center">$(“#box”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td align="center">改变class为mini的所有元素的背景色</td> 
 <td align="center">$(“.mini”).css(“background”,”blue”);</td> 
 </tr> 
 <tr> 
 <td align="center">改变元素名是div的所有元素的背景色</td> 
 <td align="center">$(“div”).css(“background”,”yellow”);</td> 
 </tr> 
 <tr> 
 <td align="center">改变所有元素的背景色</td> 
 <td align="center">$(“*”).css(“background”,”#bbffaa”);</td> 
 </tr> 
 <tr> 
 <td align="center">改变所有的span元素和id为two的元素的背景色</td> 
 <td align="center">$(“span,#two”).css(“background”,”#bbffaa”);</td> 
 </tr> 
 </tbody> 
</table>

2. 层次选择器

<table> 
 <thead> 
 <tr> 
 <th align="center">选择器</th> 
 <th align="center">描述</th> 
 <th align="center">返回</th> 
 <th align="center">示例</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td align="center">$(“ancestor descendant”)</td> 
 <td align="center">选取ancestor元素里的所有descendant(后代元素)</td> 
 <td align="center">集合元素</td> 
 <td align="center">$(“div span”)选取div里的所有的span元素</td> 
 </tr> 
 <tr> 
 <td align="center">$(“parent&gt;child”)</td> 
 <td align="center">选取parent元素下的child(子)元素，与 ( “ a n c e s t o r d e s c e n d a n t ” ) 有 区 别 ， (“ancestor descendant”)有区别， (“ancestordescendant”)有区别，(“ancestor descendant”)选择的是后代元素</td> 
 <td align="center">集合元素</td> 
 <td align="center">$(“div&gt;span”)选取div元素下元素名是span的子元素</td> 
 </tr> 
 <tr> 
 <td align="center">$(“prev+next”)</td> 
 <td align="center">选取紧接在prev元素后的next元素</td> 
 <td align="center">集合元素</td> 
 <td align="center">$(“.one+div”)选取class为one的下一个div同辈元素</td> 
 </tr> 
 <tr> 
 <td align="center">$(“prev~siblings”)</td> 
 <td align="center">选取prev元素之后的所有siblings元素</td> 
 <td align="center">集合元素</td> 
 <td align="center">$(“#two~div”)选取id为two的元素后面所有div同辈元素</td> 
 </tr> 
 </tbody> 
</table>

层次选择器示例

<table> 
 <thead> 
 <tr> 
 <th>功能</th> 
 <th>代码</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>改变内所有 
 <div>
 的背景色 
 </div></td> 
 <td>$(“body div”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变内子 
 <div>
 元素的背景色 
 </div></td> 
 <td>$(“body &gt;div”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变class为one的下一个 
 <div>
 同辈元素背景色 
 </div></td> 
 <td>$(“.one + div”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变id为two的元素后面的所有 
 <div>
 同辈的背景色 
 </div></td> 
 <td>$(“#two~div”).css(“bakground”,”red”);</td> 
 </tr> 
 <tr> 
 <td>$(“.one+div”);</td> 
 <td>$(“.one”).next(“div”);</td> 
 </tr> 
 <tr> 
 <td>$(“#prev~div”);</td> 
 <td>$(“#prev”).nextAll(“div”);</td> 
 </tr> 
 </tbody> 
</table>

3.基本过滤器选择器

<table> 
 <thead> 
 <tr> 
 <th>选择器</th> 
 <th>描述</th> 
 <th>返回</th> 
 <th>示例</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>:first</td> 
 <td>选取第1个元素</td> 
 <td>单个元素</td> 
 <td>$(“div:first”)选取div元素中第1个div元素</td> 
 </tr> 
 <tr> 
 <td>:last</td> 
 <td>选取最后一个元素</td> 
 <td>单个元素</td> 
 <td>$(“div:last”)选取div中最后1个div元素</td> 
 </tr> 
 <tr> 
 <td>:not(selector)</td> 
 <td>去除所有与给定选择匹配的元素</td> 
 <td>集合元素</td> 
 <td>$(“input:not(.myClass)”)选取class不是myClass的input元素</td> 
 </tr> 
 <tr> 
 <td>:even</td> 
 <td>选取索引为偶数开始的元所有元素，索引从0开始</td> 
 <td>集合元素</td> 
 <td>$(“input:even”)选取索引是偶数的input元素</td> 
 </tr> 
 <tr> 
 <td>:odd</td> 
 <td>选取索引为奇数开始的所有元素，索引从0开始</td> 
 <td>集合元素</td> 
 <td>$(“input:odd”)选取索引是奇数的input元素</td> 
 </tr> 
 <tr> 
 <td>:eq(index)</td> 
 <td>选取索引等于index的元素（index从0开始）</td> 
 <td>单个元素</td> 
 <td>$(“input:eqq(1)”)选取索引等于1的input的元素</td> 
 </tr> 
 <tr> 
 <td>:gt(index)</td> 
 <td>选取索引大于index的元素</td> 
 <td>集合元素</td> 
 <td>$(“input:gt(1)”)选取索引大于1的input元素（注：大于1，不包括1）</td> 
 </tr> 
 <tr> 
 <td>:lt(index)</td> 
 <td>选取索小于index的元素</td> 
 <td>集合元素</td> 
 <td>$(“input:lt(5)”)选取索引小于5的input元素（注：小于5，不包括5）</td> 
 </tr> 
 <tr> 
 <td>:header</td> 
 <td>选取所有的标题元素，例如:h1 h2 h3等</td> 
 <td>集合元素</td> 
 <td>$(:header)选取网页中所有的h1、h2、h3….</td> 
 </tr> 
 <tr> 
 <td>:animated</td> 
 <td>选取当前正在执行动画所有元素</td> 
 <td>集合元素</td> 
 <td>$(“div:animated”)选取正在执行动画的div元素</td> 
 </tr> 
 <tr> 
 <td>:focus</td> 
 <td>选取当前获取焦点的元素</td> 
 <td>集合元素</td> 
 <td>$(“:focus”)选取当前获取焦点的元素</td> 
 </tr> 
 </tbody> 
</table>

基本过滤器选择器示例

<table> 
 <thead> 
 <tr> 
 <th>功能</th> 
 <th>代码</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>改变第1个div元素的背景色</td> 
 <td>$(“div:first”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变最后1个div元素的背景色</td> 
 <td>$(“div:last”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变class不为one的div元素背景色</td> 
 <td>$(“div:not(.one)”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变索引值为偶数的div元素的背景色</td> 
 <td>$(“div:even”).css(“bakground”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变索引值为奇数的div元素的背景色</td> 
 <td>$(“div:odd”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变索引值等于3的div元素的背景色</td> 
 <td>$(“div:eq(3) .css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变索引值大于3的div元素的背景色</td> 
 <td>$(“div:gt(3).css(“background”,“red”);</td> 
 </tr> 
 <tr> 
 <td>改变索引值小于3的div元素的背景色</td> 
 <td>$(“div:lt(3)”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变所有标题元素，例如:h1、h2、h3….</td> 
 <td>$(“:header”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变当前正在执行的动画的元素的背景色</td> 
 <td>$(“:animated”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变当前获取焦点的元素背景色</td> 
 <td>$(“:focus”).css(“background”,”red”);</td> 
 </tr> 
 </tbody> 
</table>

4. 内容过滤选择器

<table> 
 <thead> 
 <tr> 
 <th>选择器</th> 
 <th>描述</th> 
 <th>返回</th> 
 <th>示例</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>:contains(text)</td> 
 <td>选取文本为”text”的元素</td> 
 <td>集合元素</td> 
 <td>$(“div:contains(‘我’)选取含有文本“我”的 
 <div>
 元素 
 </div></td> 
 </tr> 
 <tr> 
 <td>:empty</td> 
 <td>选取不包含子元素或者文本的空元素</td> 
 <td>集合元素</td> 
 <td>$(“div:empty”)选取不包含子元素（包括文本元素）的div元素</td> 
 </tr> 
 <tr> 
 <td>:has(selector)</td> 
 <td>选取含有选择器所匹配的元素的元素</td> 
 <td>集合元素</td> 
 <td>$(“div:has§”)选取含有p元素的 
 <div>
 元素 
 </div></td> 
 </tr> 
 <tr> 
 <td>:parent</td> 
 <td>选取含有子元素或者文本的元素</td> 
 <td>集合元素</td> 
 <td>$(“div:parent”)选取拥有子元素(包括文本元素)的div元素</td> 
 </tr> 
 </tbody> 
</table>

内容过滤选择器示例

<table> 
 <thead> 
 <tr> 
 <th>功能</th> 
 <th>代码</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>改变含有文本di的div元素背景色</td> 
 <td>$(“div:contains(di)”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变不包含子元素（包括文本元素）的div空元素的背景色</td> 
 <td>$(“div:empty”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变class为mini元素的div元素的背景色</td> 
 <td>$(“div:has(.mini)”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变含有子元素（包括文本元素）的div元素的背景色</td> 
 <td>$(“div:prent”).css(“background”,”red”);</td> 
 </tr> 
 </tbody> 
</table>

5. 可见性过滤选择器

<table> 
 <thead> 
 <tr> 
 <th>选择器</th> 
 <th>描述</th> 
 <th>返回</th> 
 <th>示例</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>:hidden</td> 
 <td>选取所有不可见的元素</td> 
 <td>集合元素</td> 
 <td> ( “ : h i d d e n ” ) 选 取 所 有 不 可 见 的 元 素 。 包 括 &amp;lt; i n p u t = ” h i d d e n ” &amp;gt; , &amp;lt; d i v s t y l e = ” d i s p l a y : n o n e ; ” &amp;gt; 和 &amp;lt; d i v s t y l e = ” v i s b i l i t y : h i d d e n ; ” &amp;gt; 等 元 素 。 如 果 只 想 选 取 &amp;lt; i n p u t &amp;gt; 元 素 ， 可 以 使 用 (“:hidden”)选取所有不可见的元素。包括&amp;lt;input=”hidden”&amp;gt;,&amp;lt;div style=”display:none;”&amp;gt;和&amp;lt;div style=”visbility:hidden;”&amp;gt;等元素。如果只想选取&amp;lt;input&amp;gt;元素，可以使用 (“:hidden”)选取所有不可见的元素。包括&lt;input=”hidden”&gt;,&lt;divstyle=”display:none;”&gt;和&lt;divstyle=”visbility:hidden;”&gt;等元素。如果只想选取&lt;input&gt;元素，可以使用(“input:hidden”)</td> 
 </tr> 
 <tr> 
 <td>:visible</td> 
 <td>选取所有可见元素</td> 
 <td>集合元素</td> 
 <td>$(“div:visible”)选取所有可见的div元素</td> 
 </tr> 
 </tbody> 
</table>

可见性过滤器示例

<table> 
 <thead> 
 <tr> 
 <th>功能</th> 
 <th>代码</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>改变所有可见的 
 <div>
 元素的背景色 
 </div></td> 
 <td>$(“div:visible”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>显示隐藏的 
 <div>
 元素 
 </div></td> 
 <td>$(“div:hidden”).show(3000);</td> 
 </tr> 
 </tbody> 
</table>

6. 属性过滤选择器

<table> 
 <thead> 
 <tr> 
 <th>选择器</th> 
 <th>描述</th> 
 <th>返回</th> 
 <th>示例</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>[attribute]</td> 
 <td>选取拥有此属性的元素</td> 
 <td>集合元素</td> 
 <td>$(“div[id]”)选取拥有属性id的元素</td> 
 </tr> 
 <tr> 
 <td>[attribute=value]</td> 
 <td>选取属性的值为value的元素</td> 
 <td>集合元素</td> 
 <td>$(“div[title=test]”)选取属性title为”test”的 
 <div>
 元素 
 </div></td> 
 </tr> 
 <tr> 
 <td>[attribute!=value]</td> 
 <td>选取属性的值不等于value</td> 
 <td>集合元素</td> 
 <td>$(“div[title!=test]”)选取属性title不等于”test”的div元素（注意：没有属性title的div元素也会被选取）</td> 
 </tr> 
 <tr> 
 <td>[attribute^=value]</td> 
 <td>选取属性的值以value开始的元素</td> 
 <td>集合元素</td> 
 <td>$(“div[title^=test]”)选取属性title以“test”开始的元素</td> 
 </tr> 
 <tr> 
 <td>[attribute$=alue]</td> 
 <td>选取属性的值以value结束的元素</td> 
 <td>集合元素</td> 
 <td> ( “ d i v [ t i t l e (“div[title (“div[title=test]”)选取title为“test”结束的div的元素</td> 
 </tr> 
 <tr> 
 <td>[attribute*=value]</td> 
 <td>选取属性的值包含有value的元素</td> 
 <td>集合元素</td> 
 <td>$(“div[title*=test”])选取属性title含有“test”的div元素</td> 
 </tr> 
 <tr> 
 <td>[attribute&gt; (这里有条竖线)=value]</td> 
 <td>选取属性等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素</td> 
 <td>集合元素 $(‘div[tiele</td> 
 <td>=”en”]’)选取属性title等于en或以en为前缀（该字符串后跟一个连字符“-”）的元素</td> 
 </tr> 
 <tr> 
 <td>[attribute~=value]</td> 
 <td>选取属性用空格分隔的值中包含一个给定值的元素</td> 
 <td>集合元素</td> 
 <td>$(’div[title~=”uk”]’)选取属性title用空格分隔的值中包含字符uk的元素</td> 
 </tr> 
 <tr> 
 <td>[attribute 1][attribute2]</td> 
 <td>用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围</td> 
 <td>集合元素</td> 
 <td> ( “ d i v [ i d ] [ t i t l e (“div[id][title (“div[id][title=’test’]”)选取拥有属性id，并且属性title以”test”结束的div元素</td> 
 </tr> 
 </tbody> 
</table>

属性过滤选择器示例

<table> 
 <thead> 
 <tr> 
 <th>功能</th> 
 <th>代码</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>改变含有属性title的div元素的背景色</td> 
 <td>$(“div[title]”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变属性title值等于”test”的div元素的背景色</td> 
 <td>$(“div[title=test]”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变属性title值不等于”test”的div元素的背景色</td> 
 <td>$(“div[title!=test]”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变属性title值以”te”开始的div元素的背景色</td> 
 <td>$(“div[title^=te]”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变属性title值以”est”结束的div元素的背景色</td> 
 <td> ( “ d i v [ t i t l e (“div[title (“div[title=est]”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变属性title值含有”es”的div元素的背景色</td> 
 <td>$(“div[title*=es]”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变含有属性id，并且属性title值含有”es”的div元素的背景色</td> 
 <td>$(“div[id][title*=es]”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变属性title值以”en”开始的div元素背景色</td> 
 <td>$(“div[title^=”en”]”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变属性title等于en或en为前缀（该字条串后跟一个连字符’-‘）的元素的背景色</td> 
 <td>$(“div[title (这里有条竖线)=”en”]”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变属性title用空格分隔的值中包含字符uk的元素的背景色</td> 
 <td>$(“div[title~=”UK”]”).css(“background”,”red”);</td> 
 </tr> 
 </tbody> 
</table>

7. 子元素过滤选择器

<table> 
 <thead> 
 <tr> 
 <th>选择器</th> 
 <th>描述</th> 
 <th>返回</th> 
 <th>示例</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>:nth-child(index/even/odd/equation)</td> 
 <td>选取每个父元素下的第index个子元素或奇偶元素。（index从1算起）</td> 
 <td>集合元素</td> 
 <td>:eq(index)只匹配一个元素，面:nth-child将为每个父元素，并且:nth-child(index)的index是从1开始的，成eq(index)是从0算起。</td> 
 </tr> 
 <tr> 
 <td>:first-child</td> 
 <td>选取每个父元素的第1个子元素</td> 
 <td>集合元素</td> 
 <td>:first只返回单个元素，而:first-child选择符将为每个父元素匹配第1个子元素例如：$(“ul li:first-child”),选取每个ul中第1个li元素</td> 
 </tr> 
 <tr> 
 <td>:last-child</td> 
 <td>选取每个父元素的最后一个子元素</td> 
 <td>集合元素</td> 
 <td>同样，:last只返回单个元素，面:last-child选择符将为每个父元素匹配最后1个子元素例如：$(“ul li:last-child”),选取每个ul中最后1个li元素</td> 
 </tr> 
 <tr> 
 <td>:only-child</td> 
 <td>如果某个元素是它父元素中惟一的子元素，那么将会匹配。如果父元素中包含其他元素，则不会被匹配。</td> 
 <td>集合元素</td> 
 <td>$(:ul li:only-child”)在ul中选取是惟一子元素的li元素</td> 
 </tr> 
 </tbody> 
</table>

子元素过滤选择器示例

<table> 
 <thead> 
 <tr> 
 <th>功能</th> 
 <th>代码</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>改变每个class为one的div父元素下的第2个子元素的背景色</td> 
 <td>$(“div.one:nth-child(2)”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变每个class为one的div父元素下的第1个子元素的背景色</td> 
 <td>$(“div.one:first-child”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>改变每个class为one的div父子元素下的最后一个子元素的背景色</td> 
 <td>$(“div.one:last-child”).css(“background”,”red”);</td> 
 </tr> 
 <tr> 
 <td>如果class为one的div父子元素下只有一个元素，那么则改变这个子元素的背景色</td> 
 <td>$(“div.one:only-child”).css(“background”,”red”);</td> 
 </tr> 
 </tbody> 
</table>