jQuery选择器简表

缺乏、安全感 2021-12-22 09:13 145阅读 0赞

1、基本选择器 Basics

2、层次选择器Hierarchy

3、基本过滤选择器Basic Filters

<table> 
 <tbody> 
 <tr> 
 <td>名称</td> 
 <td>说明</td> 
 <td>举例</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/first" rel="nofollow">:first</a></td> 
 <td>匹配找到的第一个元素</td> 
 <td>查找表格的第一行:$("tr:first")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/last" rel="nofollow">:last</a></td> 
 <td>匹配找到的最后一个元素</td> 
 <td>查找表格的最后一行:$("tr:last")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/not#selector" rel="nofollow">:not(selector)</a></td> 
 <td>去除所有与给定选择器匹配的元素</td> 
 <td>查找所有未选中的 input 元素: $("input:not(:checked)")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/even" rel="nofollow">:even</a></td> 
 <td>匹配所有索引值为偶数的元素，从 0 开始计数</td> 
 <td>查找表格的1、3、5...行:$("tr:even")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/odd" rel="nofollow">:odd</a></td> 
 <td>匹配所有索引值为奇数的元素，从 0 开始计数</td> 
 <td>查找表格的2、4、6行:$("tr:odd")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/eq#index" rel="nofollow">:eq(index)</a></td> 
 <td>匹配一个给定索引值的元素&nbsp; 注:index从 0 开始计数</td> 
 <td>查找第二行:$("tr:eq(1)")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/gt#index" rel="nofollow">:gt(index)</a></td> 
 <td>匹配所有大于给定索引值的元素&nbsp; 注:index从 0 开始计数</td> 
 <td>查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/lt#index" rel="nofollow">:lt(index)</a></td> 
 <td>选择结果集中索引小于 N 的 elements&nbsp; 注:index从 0 开始计数</td> 
 <td>查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/header" rel="nofollow">:header</a></td> 
 <td>选择所有h1,h2,h3一类的header标签.</td> 
 <td>给页面内所有标题加上背景色: $(":header").css("background", "#EEE");</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/animated" rel="nofollow">:animated</a></td> 
 <td>匹配所有正在执行动画效果的元素</td> 
 <td>只有对不在执行动画效果的元素执行一个动画特效: $("#run").click(function(){&nbsp; &nbsp; $("div:not(:animated)").animate({ left: "+=20" }, 1000);&nbsp; }); </td> 
 </tr> 
 </tbody> 
</table>

4、内容过滤器Content Filters

5、可见性过滤器 Visibility Filters

6、属性过滤器 Attribute Filters

<table> 
 <tbody> 
 <tr> 
 <td>名称</td> 
 <td>说明</td> 
 <td>举例</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/attributeHas#attribute" rel="nofollow">[attribute]</a></td> 
 <td>匹配包含给定属性的元素</td> 
 <td>查找所有含有 id 属性的 div 元素:&nbsp; $("div[id]")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/attributeEquals#attributevalue" rel="nofollow">[attribute=value]</a></td> 
 <td>匹配给定的属性是某个特定值的元素</td> 
 <td>查找所有 name 属性是 newsletter 的 input 元素: $("input[name='newsletter']").attr("checked", true);</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/attributeNotEqual#attributevalue" rel="nofollow">[attribute!=value]</a></td> 
 <td>匹配给定的属性是不包含某个特定值的元素</td> 
 <td>查找所有 name 属性不是 newsletter 的 input 元素:&nbsp; $("input[name!='newsletter']").attr("checked", true);</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/attributeStartsWith#attributevalue" rel="nofollow">[attribute^=value]</a></td> 
 <td>匹配给定的属性是以某些值开始的元素</td> 
 <td>$("input[name^='news']")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/attributeEndsWith#attributevalue" rel="nofollow">[attribute$=value]</a></td> 
 <td>匹配给定的属性是以某些值结尾的元素</td> 
 <td>查找所有 name 以 'letter' 结尾的 input 元素:&nbsp; $("input[name$='letter']")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/attributeContains#attributevalue" rel="nofollow">[attribute*=value]</a></td> 
 <td> 匹配给定的属性是以包含某些值的元素 </td> 
 <td> 查找所有 name 包含 'man' 的 input 元素:&nbsp; $("input[name*='man']") </td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/attributeMultiple#attributeFilter1attributeFilter2attributeFilterN" rel="nofollow">[attributeFilter1][attributeFilter2][attributeFilterN]</a></td> 
 <td>复合属性选择器，需要同时满足多个条件时使用。</td> 
 <td>找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的:&nbsp; $("input[id][name$='man']")</td> 
 </tr> 
 </tbody> 
</table>

7、子元素过滤器 Child Filters

8.表单选择器 Forms

<table> 
 <tbody> 
 <tr> 
 <td>名称</td> 
 <td>说明</td> 
 <td>解释</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/input" rel="nofollow">:input</a></td> 
 <td>匹配所有 input, textarea, select 和 button 元素</td> 
 <td>查找所有的input元素:&nbsp; $(":input")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/text" rel="nofollow">:text</a></td> 
 <td>匹配所有的文本框</td> 
 <td>查找所有文本框:&nbsp; $(":text")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/password" rel="nofollow">:password</a></td> 
 <td>匹配所有密码框</td> 
 <td>查找所有密码框:&nbsp; $(":password")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/radio" rel="nofollow">:radio</a></td> 
 <td>匹配所有单选按钮</td> 
 <td>查找所有单选按钮</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/checkbox" rel="nofollow">:checkbox</a></td> 
 <td>匹配所有复选框</td> 
 <td>查找所有复选框:&nbsp; $(":checkbox")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/submit" rel="nofollow">:submit</a></td> 
 <td>匹配所有提交按钮</td> 
 <td>查找所有提交按钮:&nbsp; $(":submit")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/image" rel="nofollow">:image</a></td> 
 <td> 匹配所有图像域 </td> 
 <td>匹配所有图像域:&nbsp; $(":image")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/reset" rel="nofollow">:reset</a></td> 
 <td>匹配所有重置按钮</td> 
 <td>查找所有重置按钮:&nbsp; $(":reset")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/button" rel="nofollow">:button</a></td> 
 <td>匹配所有按钮</td> 
 <td>查找所有按钮:&nbsp; $(":button")</td> 
 </tr> 
 <tr> 
 <td><a href="http://docs.jquery.com/Selectors/file" rel="nofollow">:file</a></td> 
 <td>匹配所有文件域</td> 
 <td>查找所有文件域:&nbsp; $(":file")</td> 
 </tr> 
 </tbody> 
</table>

9.表单过滤器 Form Filters

//name为hyipinvest的值 结果为hyip投资
    alert(jQuery("input[name='hyipinvest']").val());
    //name以hyip开始的值 结果为hyip投资
    alert(jQuery("input[name^='hyip']").val());
    //name以hyip结束的值 结果为投资hyip
    alert(jQuery("input[name$='hyip']").val());
    //name包含oo的值 结果为HYIP
    alert(jQuery("input[name*='oo']").val());

转载于:https://www.cnblogs.com/JoannaQ/archive/2012/10/06/2712711.html