由于经常使用jQuery，但是其中的很多选择器又不太能够熟练记牢使用，所以趁着上周有人分享，我再仔细的把jQuery的选择器过一遍，争取一次拿下，以后做到运用自如。
jQuery选择器主要来分可以分为三种：（1）基本选择器 （2）层次选择器 （3）过滤选择器 (4) 表单选择器
1、基本选择器
基本选择器主要就是比较常见和常用的集中，是必须要掌握的。 #ID id选择器 返回一个对象 $("#div") .class 类选择器 返回集合 $(".content") Element 标签选择器 返回集合 $("input") * 匹配所有元素 返回集合 $("*") selector1,selector2,selector3,....合并每个选择器匹配的元素，返回集合 $("#div,.class,input")
2、层次选择器（主要是选择层次下面的元素）
$("E F") 选择E元素中的所有F后代元素(注意：是子孙元素) 返回集合 $("P>C") 选择P元素下的C子元素（注意：是子元素） 返回集合 $("P+N") 选择P元素后的相邻元素（即下一个兄弟元素），和$("P").next("N")方法执行效果相同 $("P~S") 选择P元素之后的所有S兄弟元素，和$("P").nextAll("S")方法执行效果相同，另pre()方法和next()方法相对。preAll()和nextAll()相对。 注意siblings()方法和nextAll()方法的区别：siblings()是所有前后的兄弟元素，nextAll()是所有后面的兄弟元素
第三和第四个选择器常常用后面的写法代替
3、过滤选择器（主要是按照后面的过滤条件取出前面的元素）
通过特定的过滤规则筛选DOM元素
格式: :过滤规则(以冒号作为过滤条件)
分类：基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象过滤器
(1)基本过滤器
:first 选取第一个元素，$("div:first") :last 选择最后一个元素，$("div:last") :not(selector) 除了和选择器匹配元素之外的所有元素，$("input:not(.mytext)") :even 索引是偶数的所有元素，$("tr:even") :odd 索引是奇数的所有元素，$("tr:odd") :eq(index),:gt(index),lt(index) 分别选择索引等于，大于和小于index的元素 :header 选择所有的标题元素，$(":header")如h1,h2,h3... :animated 选择当前执行动画的元素，$("div:animated")
(2)内容选择器
按照它所包含的子元素或者文本内容来选择元素
:contains(text) 文本内容为text的元素，$("div:contains('Hello')") :empty 不包含子元素和文本内容的空元素 :has(selector) 包含有匹配选择器的元素为子元素的元素 ，$("div:has(p)") :parent 选择包含的子元素或者文本内容的元素
(3)可见性过滤器
:hidden 选择不可见的元素，$("div:hidden") :visible 选择可见的元素，$("input:visible") 在可见性选择器中，需要注意选择器 :hidden，它不仅包括样式属性display为"none"的元素，也包括文本隐藏域(<input type="hidden"/>)和visibility:hidden之类的元素。 .show(3000) .hide(1000
(4)属性过滤器
通过元素的属性或者属性值选择元素
[attri] 选择拥有此属性的元素，$("div[id]") [attri=value] 选择属性的值等于value的元素 [attri！=value] 属性的值不等于value的元素 [attri^=value] 属性的值以value开头的元素 [attri$=value] 属性的值以value结尾的元素 [attri*=value] 属性的值中含有value的元素 [selector1][selector2]… 合并多个属性过滤器的结果
(5)子元素过滤器(是选择子类元素的)
:first-child 选择每个父元素的第一个子元素 ，$("ul li:first-child") :last-child 选择每个父元素的最后一个子元素 :only-child 选择是父元素的唯一子元素 :nth-child(even) 选择每个父元素中索引是偶数的子元素 :nth-child(odd) 选择每个父元素中索引是奇数的子元素 :nth-child(index) 选择每个父元素中索引等于index的子元素，index有倍数形式，如3n,表示所有3的倍数，n=0,1,2…
(6)表单对象属性过滤选择器
针对表单元素进行选择
:enabled 选择所有可用的表单元素，$("#form1 :enabled") :disabled :checked 选择所有被选中的单选按钮和复选框元素 :selected 选择所有下拉列表中被选中的选项元素
4、表单选择器
:input 选择所有表单元素，包括<input><textarea><select><button>等元素 :text 选择所有文本框,$("#form1:text") :password 选择所有密码文本框 :radio 选择所有单选按钮 :checkbox 选择所有复选框 :submit :reset :button :image :file :hidden
需要特别注意的是后迭代选择器和过滤选择器的不同：
例如：
<div class="test"> <div style="display:none;">aa</div> <div style="display:none;">bb</div> <div style="display:none;">cc</div> <div class="test" style="display:none;">dd</div> </div> <div class="test" style="display:none;">ee</div> <div class="test" style="display:none;">ff</div>
使用如下的jQuery选择器分别获取他们。
var $t_a = $('.test :hidden'); //带空格的JQuery选择器（后迭代选择器，选取的是class为"test"的元素里面的隐藏元素）
var $t_b = $('.test:hidden'); //不带空格的jQuery选择器（过滤选择器，选取隐藏的class为"test"的元素）
var len_a = $t_a.length;
var len_b = $t_b.length;
alert("$('.test :hidden') = " + len_a); //输出 4
alert("$('.test:hidden') = " + len_b); //输出 3
下面是一个比较经典的例子：
<html>
<head>
<title>jQuery test</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
//alert("shit it");
var $category = $('ul li:gt(5):not(:last)');
$category.hide();
var $toggleBtn = $('div.showmore > a');
/*
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide(); //隐藏
$('.showmore a span').css("background","url(img/down.jpg) no-repeat 0 0").text("显示全部品牌");
$('ul li a').removeClass("promoted");
}else{
$category.show(); //显示全部品牌
$('.showmore a span').css("background","url(img/up1.jpg) no-repeat 0 0").text("精简显示品牌");
$('ul li a').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");
}
return false; //超链接不跳转
});
*/
$toggleBtn.toggle(function(){
$category.show(); //显示全部品牌
$('.showmore a span').css("background","url(img/up1.jpg) no-repeat 0 0").text("精简显示品牌");
$('ul li a').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')").addClass("promoted");
return false; //超链接不跳转
},function(){
$category.hide(); //隐藏
$('.showmore a span').css("background","url(img/down.jpg) no-repeat 0 0").text("显示全部品牌");
$('ul li a').removeClass("promoted");
return false; //超链接不跳转
});
});
</script>
<style type="text/css">
.promoted {
font-family: "Courier New", Courier, monospace;
color:#F00;
font-size: 20px;
white-space: pre;
}
</style>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(27113)</i></li>
<li><a href="#">索尼</a><i>(1256)</i></li>
<li><a href="#">三星</a><i>(33556)</i></li>
<li><a href="#">苹果</a><i>(1024581)</i></li>
<li><a href="#">柯达</a><i>(1250)</i></li>
<li><a href="#">卡西欧</a><i>(5456)</i></li>
<li><a href="#">富士</a><i>(2458)</i></li>
<li><a href="#">宾得</a><i>(8754)</i></li>
<li><a href="#">理光</a><i>(2424)</i></li>
<li><a href="#">奥林巴斯</a><i>(87855)</i></li>
<li><a href="#">明基</a><i>(4424)</i></li>
<li><a href="#">爱国者</a><i>(57857)</i></li>
<li><a href="#">尼康</a><i>(2454)</i></li>
<li><a href="#">松下</a><i>(5784)</i></li>
<li><a href="#">其他品牌相机</a><i>(74548)</i></li>
</ul>
<div class="showmore">
<a href="http://www.baidu.com" target="_blank"><span>show all brands</span></a>
</div>
</div>
</body>
</html>
几个常用的jQuery的方法如下：
show()： 显示隐藏的匹配元素。
css(name,value)：给元素设置样式。
text(string)：设置所有匹配元素的文本内容。
filter(expr)：筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。
addClass(class),removeClass(class)：为匹配的元素添加指定的类名。
toggle()：交替执行方法。
129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
