jquery选择器操作二

紧接上一节，继续介绍jQuery基础选择器

6）属性过滤选择器

属性过滤选择器主要是各种拼接符号：！、*、^、$、|、~

<style type="text/css">
div{width:130px;height:100px;margin:5px;background:#aaa;border:#000 1px solid;float:left;font-size:17px;font-family:Verdana;}
span{color:#f00;font-size:1.2em;}
</style>

<div title="en">title为en的div元素</div>
<div title="en-UK">title为en-UK的div元素</div>
<div title="english">title为english的div元素</div>
<div title="en UK">title为en UK的div元素</div>
<div title="uken">title为uken的div元素</div>

<script type="text/javascript">
//$('div[title=en]').css({"color":"#f00","font-size":"1.2em"});
//$("span").text("以en开头");
//$('div[title^=en]').css({"color":"#f00","font-size":"1.2em"});
//$("span").text("含有en开头");
//$('div[title*=en]').css({"color":"#f00","font-size":"1.2em"});
//$("span").text("以en结束");
//$('div[title$=en]').css({"color":"#f00","font-size":"1.2em"});
//$("span").text("以en开头或者以en为前缀后面跟-");
//$('div[title|=en]').css({"color":"#f00","font-size":"1.2em"});
$("span").text("用空格分隔含有uk");
$('div[title~=UK]').css({"color":"#f00","font-size":"1.2em"});
</script>

7）子元素过滤选择器

子元素选取大家可能会想到前面说到的eq、first、last，但必然也会想到与上面的写法是有区别的，前者只返回单个元素，后者是一个集合

对于nth-child补充如下：

*nth-child(even)         选取的是每个父元素下面索引值为偶数的子元素

*nth-child(odd)          选取的是每个父元素下面索引值为奇数的子元素

*nth-child(3)               选取的是每个父元素下面索引值为3的子元素

*nth-child(3n)            选取的是每个父元素下面索引值为3的倍数的子元素（n从1开始）

*nth-child(3n+1)        选取的是每个父元素下面索引值为3n+1的子元素（n从0开始，某些jQuery版本可能是从1开始）

<style type="text/css">
div {position:relative;marign:10px;float:left;font-size:0.9em;}
.mini {width:85px;height:45px;background-color: #aaa;margin:10px;}
.one{width:140px;height:140px;background-color:#777;margin:10px;}
.two{width:140px;height:140px;background-color:#777;margin:10px;}
</style>

<div class="one">
	<div class="mini">first one class</div>
</div>
<div class="one">
	<div class="mini">first one class</div>
	<div class="mini">second one class</div>
</div>
<div class="two">
	<div class="mini">first two class</div>
	<div class="mini">second two class</div>
</div>
<div class="one">
	<div class="mini">first one class</div>
	<div class="mini">second one class</div>
</div>
<div class="two">
	<div class="mini">first two class</div>
	<div class="mini">second two class</div>
</div>

<script type="text/javascript">
	//改变class为one下下标为2的子元素样式
$(".one>.mini:nth-child(2)").css({"background-color":"#fad","color":"#fff","font-size":"1.2em"});
	//改变class为one下下标为奇数的子元素样式
$(".one>.mini:nth-child(odd)").css({"background-color":"#fad","color":"#fff","font-size":"1.2em"});
	//改变class为two下下标为偶数的子元素样式
$(".two>.mini:nth-child(even)").css({"background-color":"#fad","color":"#fff","font-size":"1.2em"});
	//改变class为one下下标为3n的子元素样式
$(".one>.mini:nth-child(3n)").css({"background-color":"#fad","color":"#fff","font-size":"1.2em"});
	//改变class为two下下标为3n+1的子元素样式
$(".two>.mini:nth-child(3n+1)").css({"background-color":"#fad","color":"#fff","font-size":"1.2em"});
	//改变class为one下第一个子元素样式
$(".one>.mini:first-child").css({"background-color":"#fad","color":"#fff","font-size":"1.2em"});
	//改变class为one下最后一个子元素样式
$(".one>.mini:last-child").css({"background-color":"#fad","color":"#fff","font-size":"1.2em"});
	//改变class为one下只有唯一子元素的样式
$(".one>.mini:only-child").css({"background-color":"#fad","color":"#fff","font-size":"1.2em"});
</script>

8）表单对象属性过滤选择器1

这里需要注意的是过滤属性必须是目标对象所具有的属性，比如checked肯定是单选框或者复选框、selected肯定是下拉框

9）表单对象属性过滤选择器2

这里需要注意的是一定要加“：”，区分$("#formid :input")和$("#formid input")的区别。

另外，以下情况可能也会遇到：

$1、使用选择器是含有特殊符号：！、@、#、$、[、~等，需使用转义符转换成jQuery能读取的字符

<div id="div]id$"></div>则应该用$("#div\\]id\\$")，而不是$("#div]id$")

$2、选择器中使用空格的情况：一种是后代选择器、一种是普通过滤选择器

<div class="test" style="display:none"></div>
<div class="test">
        <div class="test"></div>
        <div class="test" style="display:none"></div>
</div>
<div class="test" style="display:none"></div>
<div></div>

通过以下两种方式获取结果是不一样的：

$(function(){
	$("div:last").append('<p>no space:'+$(".test:hidden").length+'</p>');
	$("div:last").append('<p>with space:'+$(".test :hidden").length+'</p>');
})

结果：

no space:3

with space:1

显然，第一种不带空格的是选择了display为none的所有test样式的节点集合，第二种带空格的是选择了样式为test并且它的子元素中style属性的样式属性display为none的节点集合.