jquery惯用过滤选择器 _Web前端

jquery常用过滤选择器

????过滤选择器主要是通过特定的过滤规则来筛选出所需的?DOM?元素，过滤规则与?CSS?中的伪类选择器语法相同，即选择器都可以一个冒号（：）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤选择器，内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器 ??
1.?基本过滤选择器? ??
??
选择器? ??
?描述? ??
?返回? ??
?示例? ??
? ??
:first? ??
?选取第一个元素? ??
?单个元素? ??
?$(“div:first”)?选取所有?<div>?元素中第一个?<div>?元素? ??
? ??
:last? ??
?选取最后一个元素? ??
?单个元素? ??
?$(“div:last”)?选取所有?<div>?元素中最后一个?<div>?元素? ??
? ??
:not(selector)? ??
?去除所有与给定选择器匹配的元素? ??
?集合元素? ??
?$(“input:not(.myClass)”)?选取?class?不是?myClass?的?<input>?元素? ??
? ??
:even? ??
?选取索引是偶数的所有元素，索引从?0?开始? ??
?集合元素? ??
?$(“input:even”)?选取索引是偶数的?<input>?元素? ??
? ??
:odd? ??
?选取索引是奇数的所有元素，索引从?0?开始? ??
?集合元素? ??
?$(“input:odd”)?选取索引是奇数的?<input>?元素? ??
? ??
:eq(index)? ??
?选取索引等于?index?的元素（?index?从?0?开始）? ??
?集合元素? ??
?$(“input:eq(1)”)?选取索引等于?1?的?<input>?元素? ??
? ??
:gt(index)? ??
?选取索引大于?index?的元素（?index?从?0?开始）? ??
?集合元素? ??
?$(“input:gt(1)”)?选取索引大于?1?的?<input>?元素（注：大于?1?，而不包括?1?）? ??
? ??
:lt(index)? ??
?选取索引小于?index?的元素（?index?从?0?开始）? ??
?集合元素? ??
?$(“input:lt(1)”)?选取索引小于?1?的?<input>?元素（注：小于?1?，而不包括?1?）? ??
? ??
:header? ??
?选取所有的标题元素，例如?h1,h2,h3?等等? ??
?集合元素? ??
?$(“:header”)?选取网页中所有的?<h1>?，?<h2>?，?<h3>?……? ??
? ??
:animated? ??
?选取当前正在执行动画的所有元素? ??
?集合元素? ??
?$(“div:animated”)?选取当前正在执行动画的?<div>?元素? ??
? ??
??
?? ??
??
2?．内容过滤选择器? ??
??
选择器? ??
?描述? ??
?返回? ??
?示例? ??
? ??
:contains(text)? ??
?选取含有文本内容为“?text?”的元素? ??
?集合元素? ??
?$(“div:contains(‘?我?”)”)?选取含有文本“我”的?<div>?元素? ??
? ??
:empty? ??
?选取不包含子元素或者文本的空元素? ??
?元素集合? ??
?$(“div:empty”)?选取不包含子元素（包括文本元素）的?<div>?元素? ??
? ??
:has(selector)? ??
?选取含有选择器所匹配的元素的元素? ??
?元素集合? ??
?$(“div:has(p)”)?选取含有?<p>?元素的?<div>? ??
? ??
:parent? ??
?选取含有子元素或者文本的元素? ??
?元素集合? ??
?$(“div:parent”)?选取拥有子元素（包括文本元素）的?<div>? ??
? ??
??
?? ??
??
3?．可见性过滤选择器? ??
??
选择器? ??
?描述? ??
?返回? ??
?示例? ??
? ??
?? ??
??
?? ??
??
?? ??
??
:hidden? ??
??? ??
??
?? ??
??
?? ??
??
选取所有不可见的元素? ??
??? ??
??
?? ??
??
?? ??
??
集合元素? ??
?$(“:hidden”)?选取所有不可见的元素，包括?<input?type=”hidden”/>?，?<div?style=”display:none;”>?和?<div?????style=”visibility:hidden;”>?等元素，如果只想选取?<input>?元素，可以使用?$(“input:hidden”)? ??
? ??
:visible? ??
?选取所有可见元素? ??
?集合元素? ??
?$(“div:visible”)?选取所有可见的?<div>? ??
? ??
??
?? ??
??
4?．属性过滤选择器? ??
??
选择器? ??
?描述? ??
?返回? ??
?示例? ??
? ??
[attribute]? ??
?选取拥有此属性的元素? ??
?集合元素? ??
?$(“div[id]”)?选取拥有属性?id?的元素? ??
? ??
[attribute=value]? ??
?选取属性的值为?value?的元素? ??
?集合元素? ??
?$(“div[title=test]”)?选取属性?title?为“?test?”的?<div>?元素? ??
? ??
[attribute!=value]? ??
?选取属性的值不等于?value?的元素? ??
?集合元素? ??
?$(“div[title!=test]”)?选取属性?title?不等于“?test?”的?<div>?元素（注：没有属性?title?的?<div>?元素也会被选取）? ??
? ??
[attribute^=value]? ??
?选取属性的值以?value?开始的元素? ??
?集合元素? ??
?$(“div[title^=test]”)?选取属性?title?以“?test?”开头的?<div>?元素? ??
? ??
[attribute$=value]? ??
?选取属性的值以?value?结尾的元素? ??
?集合元素? ??
?$(“div[title$=test]”)?选取属性?title?以“?test?”结束的?<div>?元素? ??
? ??
[attribute*=value]? ??
?选取属性的值含有?value?的元素? ??
?集合元素? ??
?$(“div[title$=test]”)?选取属性?title?含有“?test?”的?<div>?元素? ??
? ??
[selector1][selector2][selector]? ??
?用属性选择器合并成一个复合的属性选择器，满足多个条件。没选取一次，缩小一次范围? ??
?集合元素? ??
?$(“div[id][title$=’test’]”)?选取拥有属性?id?，并且属性?title?以“?test?”结束的?<div>?元素? ??
? ??
??
?? ??
??
5?．子元素过滤选择器? ??
??
选择器? ??
?描述? ??
?返回? ??
?示例? ??
? ??
:nth-child? ??
??
(index/even/odd/equation)? ??
?选取每个父元素下的第?index?个子元素或者奇（?odd?）偶（?even?）元素，（?index?从?1?开始）? ??
?集合元素? ??
?:eq(index)?只匹配一个元素，而?:nth-child?将为每一个父元素匹配子元素，并且?:nth-child(index)?的?index?是从?1?开始的，而?:eq(index)?是从?0?开始的? ??
? ??
:first-child? ??
?选取每个父元素的第一个子元素? ??
?集合元素? ??
?:first?只返回单个元素，而?:first-child?将为每个父元素匹配第一个子元素。? ??
??
例如：?$(“ul?li:first-child”)?选取每个?<ul>?中第一个?<li>?元素? ??
? ??
:last-child? ??
?选取父元素的最后一个子元素? ??
?集合元素? ??
?:last?只返回单个元素，而?:last-child?将为每个父元素匹配最后一个子元素。? ??
??
例如：?$(“ul?li:last-child”)?选取每个?<ul>?中最后一个?<li>?元素? ??
? ??
:only-child? ??
?如果某个元素的它父亲中唯一的子元素，那么将会被匹配，如果父元素中含有其他元素，则不会被匹配? ??
?集合元素? ??
?$(“ul?li:only-child”)?在?<ul>?中选取是唯一子元素的?<li>?元素? ??
? ??
??
?? ??
??
?? ??
??
?? ??
??
6?．表单对象属性过滤选择器? ??
??
选择器? ??
?描述? ??
?返回? ??
?示例? ??
? ??
:enabled? ??
?选取所有可用元素? ??
?集合元素? ??
?$(“#form1?:enabled”)?选取?id?为“?form1”?的表单中所有可用元素? ??
? ??
:disabled? ??
?选取所有不可用元素? ??
?集合元素? ??
?$(“#form1?:disabled”)?选取?id?为“?form1”?的表单中所有不可用元素? ??
? ??
:checked? ??
?选取所有被选中的元素（单选框，复选框）? ??
?集合元素? ??
?$(“input?:checked”)?选取所有被选中的?<input>?元素? ??
? ??
:selected? ??
?选取所有被选中的选项元素（下拉列表）? ??
?集合元素? ??
?$(“select?:selected”)?选取所有被选中的选项元素? ??
? ??
??
?? ??
??
改变表单内可用?<input>?元素的值，代码如下：? ??
??
$(“form1?input:enabled”).val(“?这里的值改变了?”);? ??
??
获取多选框选中的个数，代码如下：? ??
??
$(“input?:?checked?”).length;? ??
??
获取下拉框选中的内容，代码如下：? ??
??
$(“select:selected”).text();? ??
??
同理，其他对象属性选择器的操作与此类似? ??
??
?? ??
??
?? ??
??
7?．表单对象属性过滤选择器? ??
??
选择器? ??
?描述? ??
?返回? ??
?示例? ??
? ??
:input? ??
?选取所有的?<input>,<textarea>,? ??
??
<select>,<button>?元素? ??
?集合元素? ??
?$(“:input)?选取所有的?<input>,<textarea>,<select>,? ??
??
<button>?元素? ??
? ??
:text? ??
?选取所有的单行文本框? ??
?集合元素? ??
?$(“:text”)?选取所有的单行文本框? ??
? ??
:password? ??
?选取所有的密码框? ??
?集合元素? ??
?$(“:password”)?选取所有的密码框? ??
? ??
:radio? ??
?选取所有的单选框? ??
?集合元素? ??
?$(“:radio”)?选取所有的单选框? ??
? ??
:checkbox? ??
?选取所有的多选框? ??
?集合元素? ??
?$(“:checkbox”)?选取所有的多选框? ??
? ??
:submit? ??
?选取所有的提交按钮? ??
?集合元素? ??
?$(“:submit”)?选取所有的提交按钮? ??
? ??
:image? ??
?选取所有的图形按钮? ??
?集合元素? ??
?$(“:image”)?选取所有的图形按钮? ??
? ??
:reset? ??
?选取所有的重置按钮? ??
?集合元素? ??
?$(“:reset”)?选取所有的重置按钮? ??
? ??
:button? ??
?选取所有的按钮? ??
?集合元素? ??
?$(“:button”)?选取所有的按钮? ??
? ??
:file? ??
?选取所有的上传域? ??
?集合元素? ??
?$(“:file”)?选取所有的上传域? ??
? ??
:hidden? ??
?选取所有的不可见元素? ??
?集合元素? ??
?$(“:hidden”)?选取所有的不可见元素? ??
? ??
??
?? ??
??
得到表单内表单元素的个数，代码如下：? ??
??
$(“form1?:input”).length;? ??
??
得到表单内单行文本的个数，代码如下：? ??
??
$(“form1?:text”).length;? ??
??
得到表单内密码框的个数，代码如下：? ??
??
$(“form1?:password”).length;? ??
??
同理，其他表单选择器的操作与此类似???