文章参考：机械工业出版社，陶国荣，《jQuery权威指南》
1.基本选择器
基本选择器
选择器
功能
返回值
#id
根据给定的id匹配一个元素
单个元素
element
根据给定的元素名称匹配所有元素
元素集合
.class
根据给定的类匹配元素
元素集合
*
匹配所有元素
元素集合
selector1,...,selectorN
将每个选择器匹配的元素合并后一起返回
元素集合
2.层次选择器
层次选择器
选择器
功能
返回值
ancestor descendant
根据祖先匹配所有的后代元素
元素集合
parent>child
根据父元素匹配所有的子元素
元素集合
prev+next
匹配所有紧接在prep元素后的相邻元素
元素集合
prev~siblings
匹配prev元素之后的所有兄弟元素
元素集合
3.简单过滤选择器
简单过滤选择器
选择器
功能
返回值
first()或:first
获取第一个元素
单个元素
las()或:last
获取最后一个元素
单个元素
:not(selector)
获取出给定选择器外的所有元素
元素集合
:even
获取所有索引值为偶数的元素，索引号从0开始
元素集合
:odd
获取所有索引值为偶数的元素，索引号从0开始
元素集合
:eq(index)
获取指定索引值的元素，索引号从0开始
单个元素
:gt(index)
获取所有大于给定索引值的元素，索引号从0开始
元素集合
:lt(index)
获取所有小于给定索引值的元素，索引号从0开始
元素集合
:header
获取所有标题类型的元素，如h1、h2…
元素集合
:animated
获取正在执行动画效果的元素
元素集合
4.内容过滤选择器
内容过滤选择器
选择器
功能
返回值
:contain(text)
获取包含给定文本的元素
元素集合
:empty
获取所有不包含子元素或者文本的元素
元素集合
:has(selector)
获取含有选择器所匹配的元素的元素
元素集合
:parent
获取含有子元素或者文本的元素
元素集合
5.可见性过滤选择器
可见性过滤选择器
选择器
功能
返回值
:hidden
获取所有不可见元素，或者type为hidden的元素
元素集合
:visible
获取所有的可见元素
元素集合
6.属性过滤选择器
属性过滤选择器
选择器
功能
返回值
[attribute]
获取包含给定属性的元素
元素集合
[attribute=value]
获取给定的属性的值等于某个特定值的元素
元素集合
[attribute!=value]
获取给定的属性的值不等于某个特定值的元素
元素集合
[attribute^=value]
获取给定的属性的值是以某些值开始的元素
元素集合
[attribute$=value]
获取给定的属性的值是以某些值结束的元素
元素集合
[attribute*=value]
获取给定的属性的值包含某些值的元素
元素集合
[selector1] [selector2] [selectorN]
获取满足多个条件的复合属性的元素
元素集合
7.子元素过滤选择器
子元素过滤选择器
选择器
功能
返回值
:nth-child(eq|even|odd|index)
获取每个父元素下的特定位置元素，索引号从1开始
元素集合
:first-child
获取每个父元素下的第一个子元素
元素集合
:last-child
获取每个父元素下的最后一个子元素
元素集合
:only-child
获取每个父元素下的仅有一个子元素
元素集合
8.表单对象属性过滤选择器
表单对象属性过滤选择器
选择器
功能
返回值
:enabled
获取表单中所有属性为可用的元素
元素集合
:disabled
获取表单中所有属性为可不用的元素
元素集合
:checked
获取表单中所有被选中的元素
元素集合
:selected
获取表单中所有被选中option的元素
元素集合
9.表单选择器
表单选择器
选择器
功能
返回值
:input
获取所有input、textarea、select
元素集合
:text
获取所有文本框
元素集合
:password
获取所有密码框
元素集合
:radio
获取所有单选按钮
元素集合
:checkbox
获取所有复选框
元素集合
:submit
获取所有提交按钮
元素集合
:image
获取所有图像域
元素集合
:reset
获取所有重置按钮
元素集合
:button
获取所有按钮
元素集合
:file
获取所有文件域
元素集合
10.最后给上一个利用jQuery选择器写的导航条吧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单行条</title> <script type="text/javascript" src="jQuery/jquery-2.1.4.js"></script> <style type="text/css"> body{ font-size: 13px; } #divFrame{ border: solid 1px #666; width: 301px; overflow: hidden; } #divFrame .clsHead{ background-color: #eee; padding: 8px; height: 18px; cursor: hand; } #divFrame .clsHead h3{ padding:0px; margin: 0px; float: left; } #divFrame .clsHead span{ float: right; margin-top:3px; } #divFrame .clsContent{ padding: 8px; } #divFrame .clsContent ul{ list-style-type: none; margin: 0px; padding: 0px; } #divFrame .clsContent ul li{ float: left; width:95px; height: 23px; line-height: 23px; } #divFrame .clsBot{ float: right; padding-top: 5px; padding-bottom: 5px; } .GetFocus{ background-color: #eee; } </style> <script type="text/javascript"> $(function () { $(".clsHead span img").click(function(){//图片点击事件 if($(".clsContent").is(":visible")){//内容可见 $(".clsHead span img").attr("src","images/open.gif");//改变图片 $(".clsContent").css("display","none");//隐藏内容 }else{//内容不可见 $(".clsHead span img").attr("src","images/off.gif"); $(".clsContent").css("display","block"); } }); //热点连接单击事件 $(".clsBot>a").click(function () { //如果内容为'简化' if($(".clsBot>a").text()=="简化"){ //隐藏index号大于4，且不是最后一个的元素 $("ul li:gt(4):not(:last)").hide();//hide隐藏元素 //将字符内容改为更多 $(".clsBot>a").text("更多"); }else{ $("ul li:gt(4):not(:last)").show();//.addClass("GetFocus"); //将字符内容改为简化 $(".clsBot>a").text("简化"); } }); }); </script> </head> <body> <div id="divFrame"> <div class="clsHead"> <h3>图书分类</h3> <span><img src="images/off.gif"></span> </div> <div class="clsContent"> <ul> <li><a href="#">小说</a><i>(1110)</i></li> <li><a href="#">文艺</a><i>(230)</i></li> <li><a href="#">青春</a><i>(1430)</i></li> <li><a href="#">少儿</a><i>(1560)</i></li> <li><a href="#">生活</a><i>(870)</i></li> <li><a href="#">社科</a><i>(1460)</i></li> <li><a href="#">管理</a><i>(1450)</i></li> <li><a href="#">计算机</a><i>(1780)</i></li> <li><a href="#">教育</a><i>(930)</i></li> <li><a href="#">工具书</a><i>(3450)</i></li> <li><a href="#">引进版</a><i>(980)</i></li> <li><a href="#">其他类</a><i>(3230)</i></li> </ul> <div class="clsBot"><a href="#">简化</a> </div> </div> </div> </body> </html>运行结果如下：
点击"×"：
点击"简化":
