一：内容过滤选择器
1 :contains(text)（取包含text文本的元素）
$(function(){
$("li:contains('r')").css("color","red");
})
<ul>
<li>abc</li>
<li>bcdr</li>
<li>cgh</li>
</ul>
2 :empty（取不包含子元素或文本为空的元素）
$(function(){
$("li:empty").html("没有内容");
})
<ul>
<li>php</li>
<li>jquery</li>
<li>html</li>
<li></li>
</ul>
3 :has(selector)（取选择器匹配的元素）
$(function(){
$("div:has('span')").css("color","red");
})
</script>
<div>
<span>aaaa</span>
</div>
<div>
<p>aaaa</p>
</div>
4 :parent（取包含子元素或文本的元素）
$(function(){
$("li:parent").css("color","blue");
})
<ul>
<li>
<span>aaaa</span>
</li>
<li>dddd</li>
<li></li>
</ul>
二：可见性选择器
1 :hidden（取不可见的元素）
$(function(){
var dv = $("div:hidden").show(1000);
var hd = $("input:hidden").val();
alert(hd);
})
<div style="display: none"></div>
<input type="hidden" value="这个是隐藏域">
<div style="visibility: hidden;background:blue;"></div>
<div style="opacity:0"></div>
注:hidden选择器仅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或 opactity:0的元素占据了空间，会被排除在外。
2 :visible（取可见的元素）
$(function(){
var dv = $("div:visible").css("background","#f0f");
})
<div style="display: none"></div>
<input type="hidden" value="这个是隐藏域">
<div style="visibility: hidden;background:blue;"></div>
<div style="opacity:0"></div>
<div></div>
三：属性过滤选择器
1: [attribute]（取拥有attribute属性的元素）
$(function(){
$("span[class]").css("color","red");
})
2: [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）
$(function(){
$("span[class=sp]").css("color","red");
$("span[class!=sp]").css("color","red");
})
3: [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute属性值以value开始，以value结束，或包含value值）
$(function(){
$("span[class^=c]").css("color","red");
$("span[class$=p]").css("color","blue");
$("span[class*=l]").css("color","green");
})
4: [selector1][selector2]（复合型属性过滤器，同时满足多个条件）
$(function(){
$("span[class][name=sp]").css("color","red");
})
四：子元素过滤选择器
1 :first-child和:last-child(:first-child表示第一个子元素，:last-child表示最后一个子元素。)
注：:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。举个 例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。
$(function(){
//$("div:first").css("color","blue");
$("div span:first-child").css("color","red");
$("div span:last-child").css("color","red");
})
<div>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>
<div>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>
2 :only-child(某个元素是父元素中唯一的子元素)
$(function(){
$("div span:only-child").css("color","red");
})
<div>
<span>aaa</span>
</div>
<div>
<span>bbb</span>
<span>bbb</span>
<span>bbb</span>
</div>
3 :nth-child(匹配其父元素下的第N个子或奇偶元素,nth表示第n个)
注：:nth-child从1开始的，而:eq()是从0算起的。
$(function(){
$("div span:nth-child(2)").css("color","red");
})
:nth-child有三种用法：
1) :nth-child(x)，获取第x个子元素
2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素
3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。
$(function(){
$("ul li:nth-child(6)").css("color","red");
$("ul li:nth-child(even)").css("color","blue");
$("ul li:nth-child(odd)").css("color","green");
})
<ul>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
</ul>
五：表单对象过滤选择器
1 :enabled和:disabled（取可用或不可用元素）
注：:enabled和:disabled的匹配范围包括input, select, textarea。
$(function(){
$(":enabled").css("border","1px solid red");
$(":disabled").css("border","1px solid blue");
})
<input type="text" disabled="disabled">
<select name="sel" disabled="disabled">
<option>aaa</option>
<option>aaa</option>
<option>aaa</option>
</select>
<textarea disabled="disabled">aaaa</textarea>
2 :checked（取选中的单选框或复选框元素）
注：不匹配select元素
$(function(){
$(":checked").each(function(){
alert($(this).val());
});
})
<td>
<input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex" checked="true">女
</td>
3 :selected（取下拉列表被选中的元素）
$(function(){
alert($(":selected").val());
})
<select>
<option value="安徽">安徽</option>
<option value="浙江" selected>浙江</option>
<option value="江苏">江苏</option>
</select>
六：表单选择器
1：:input（取input,textarea,select,button元素）
$(function(){
$(":input").css("border","1px solid red");
})
<input type="text">
<input type="button">
<textarea></textarea>
<select></select>
2 :text（取单行文本框元素）和:password（取密码框元素）
$(function(){
alert($(":text").val());
alert($(":password").attr("name"));
})
<input type="text" value="aaa">
<input type="password" name="pwd">
3 :radio（取单选框元素）
$(function(){
$(":radio").each(function(){
alert($(this).val());
})
})
<input type="radio" value="男" name="sex">男
<input type="radio" value="女" name="sex">女
4 :checkbox（取复选框元素）
$(function(){
$(":checkbox").each(function(){
alert($(this).val());
})
})
5 :submit（取提交按钮元素）
$(function(){
alert($(":submit").val());
})
<input type="submit" value="提交">
6. :reset（取重置按钮元素）
$(function(){
var val = $(":reset").val();
alert(val);
})
7. :button（取按钮元素）
$(function(){
var val = $(":button").val();
alert(val);
})
8. :file（取上传域元素）
$(function(){
var val = $(":file").attr("name");
alert(val);
})
9. :image (取图片按钮元素)
$(function(){
var val = $(":image").attr("name");
alert(val);
})
10. :hidden（取不可见元素）
$(function(){
var val = $("input:hidden").attr("name");
var val = $("p:hidden").html();
alert(val);
})
