jQuery选择器（学习笔记）
1.jQuery选择器是什么
CSS选择器是找到元素后添加样式，jQuery选择器是找到元素后添加行为；
2.jQuery选择器
jQuery选择器包含基本选择器、层次选择器、过滤选择器和表单选择器；
2.1基本选择器（最简单，最常用）
通过元素id、class和标签名来选择DOM元素，每个id名称只能选择一次，class允许重复使用；
$("#test")；获取id为test的元素（#id）（单个元素）
$(".test")；获取class为test的所有元素（.class）（集合元素）
$("p")；获取所有的p元素（element）（集合元素）
$("*")；匹配所有元素（*）（集合元素）
$("div,span,p.myClass") ;选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素（selector1，selector2，......selectorN）（集合元素）
2.2层次选择器
通过DOM元素之间的层次关系来获取特定元素，例如后代元素、兄弟元素、子元素、相邻元素；
后代元素：$（"ancestor descendant"）选取ancestor下的所有后代元素
子元素：$("parent>child") 选取parent元素下的child子元素
相邻元素：$('prev+next') 选取紧接在prev后的next元素
兄弟元素：$('prev~siblings) 选取prev之后的所有siblings元素
其中，$('prev+next')等价于next()方法：$("prev").next("next")；
$('prev~siblings)等价于nextAll()方法：$("prev").nextAll("siblings")；
而$('prev~siblings)与siblings()的区别在于，前者只是prev之后的同辈元素，而后者是包括前后所有的同辈元素；
2.3 过滤选择器
基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤器；
2.3.1基本选择器
$("div:first")：选取所有<div>元素中的第一个<div>元素；
$("div:last)：选取所有<div>元素中的最后一个<div>元素；
$("input:not(.myClass)")：选取所有样式不是myClass的<input>元素；
：odd（奇数）；：even（偶数）；
：eq（index）（索引等于）;：gt（index）（索引大于）；：lt（index）（索引小于）；
：header（标题元素）；：animated（当前正在执行动画的元素）；
注意：这里的index从0算起；
2.3.2内容过滤选择器
：contains（text）：选取含有文本内容为“text”的元素；
：empty：选取不包含任何子元素（包括文本元素）的元素；
：has（selector）：选取包含有选择器匹配的元素的元素；
：parent：选取所有有子元素（包括文本元素）的元素；
2.3.3可见性过滤选择器
：hidden（不可见）；：visible（可见）；
需要注意的是：可见性选择器中，需要注意选择器（：hidden），不仅包括样式属性display为“none”的元素，也包括文本隐藏域（<input type = "hidden"/>）和visibility:hidden之类的元素；
2.3.4属性过滤选择器
通过元素的属性来获取相应的元素；
[attribute]：选取拥有属性attribute的元素；
[attribute=value]：选取属性attribute的值等于value的元素；[attribute!=value]；
[attribute^=value]：选取属性attribute的值以value开始的元素；[attribute$=value]（以value结束）；
[attribute*=value]：选取属性attribute的值包含value的元素；
[selector1][selector2]......[selectorN]：交集；1且2且N
2.3.5子元素过滤选择器
:nth-child(index/odd/even/equation/2/3/3n/3n+1)：选取每个父元素下的第index个子元素或者奇偶元素；
:first-child：选取每个父元素的第一个子元素，例：($"ul li:first-child")：选取ul下的第一个li元素；
:last-child;
:only-child：如果某个元素是他父元素的唯一子元素，那么他将被选取；
注意：这里的index从1开始；
2.3.5表单对象属性过滤选择器
主要是对所选择的表单元素进行过滤；
:enabled：选取所有可用元素；:disabled；
:checked：选取所有被选中的元素（单选框，复选框）；
:selected：选取所有被选中的选项元素（下拉列表）；
2.4表单选择器
获取表单的某个或者某类型的元素；
:input：选取所有的<input>,<textarea>,<select>,<button>元素；
:text（单行文本框）；:password（密码框）；:radio（单选框）；:checkbox（多选框）；:submit（提交按钮）；:image（图像按钮）；:reset（重置按钮）；:button（所有按钮）；:file（所有上传域）；:hidden（所有不可见元素）；
3.选择器中的一些注意事项
属性值中出现了“#”、“.”、“（”、“]”等特殊字符时，获取时需要进行转义；
例如$("#id\\#b")；//对“#”进行转义；
$("#id\\[b\\]")；//对“[”和“]”进行转义；
注：不能在属性前加“@”符号；
带空格和不带空格的选择器：
$(".test:hidden")；选取隐藏的class为“test”的元素；
$(".test :hidden")；选取class为“test”的里面的隐藏元素；
4.案例研究
4.1页面初始化
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-Strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>1-1</title>
<style type="text/css">
li{ width:33.333%;float:left;}
.showmore { clear:both; text-align:center;padding-top:10px;}
</style>
<script src = "../Scripts/jquery-3.2.1.js" type = "text/javascript"></script>
<script type = "text/javascript">
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440) </i></li>
<li><a href="#">索尼</a><i>(27220) </i></li>
<li><a href="#">三星</a><i>(20808) </i></li>
<li><a href="#">尼康</a><i>(17821)</i></li>
<li><a href="#">松下</a><i>(12289)</i></li>
<li><a href="#">卡西欧</a><i>(8242)</i></li>
<li><a href="#">富士</a><i>(14894)</i></li>
<li><a href="#">柯达</a><i>(9520)</i></li>
<li><a href="#">宾得</a><i>(2195)</i></li>
<li><a href="#">理光</a><i>(4114)</i></li>
<li><a href="#">奥林巴斯</a><i>(12205)</i></li>
<li><a href="#">明基</a><i>(1466)</i></li>
<li><a href="#">爱国者</a><i>(3091)</i></li>
<li><a href="#">其他品牌相机</a><i>(7275)</i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌相机</span></a>
</div>
</div>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-Strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>1-1</title>
<style type="text/css">
li{ width:33.333%;float:left;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.promoted { color:#F50;}
</style>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440) </i></li>
<li><a href="#">索尼</a><i>(27220) </i></li>
<li><a href="#">三星</a><i>(20808) </i></li>
<li><a href="#">尼康</a><i>(17821)</i></li>
<li><a href="#">松下</a><i>(12289)</i></li>
<li><a href="#">卡西欧</a><i>(8242)</i></li>
<li><a href="#">富士</a><i>(14894)</i></li>
<li><a href="#">柯达</a><i>(9520)</i></li>
<li><a href="#">宾得</a><i>(2195)</i></li>
<li><a href="#">理光</a><i>(4114)</i></li>
<li><a href="#">奥林巴斯</a><i>(12205)</i></li>
<li><a href="#">明基</a><i>(1466)</i></li>
<li><a href="#">爱国者</a><i>(3091)</i></li>
<li><a href="#">其他品牌相机</a><i>(7275)</i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌相机</span></a>
</div>
</div>
<script src = "../Scripts/jquery-3.2.1.js" type = "text/javascript"></script>
<script type = "text/javascript">
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("color","#203cff")
.text("显示全部品牌相机");
$("ul li a").removeClass("promoted");
return false;
}
else {
$category.show();
$(".showmore a span")
.css("color","#203cff")
.text("精简显示品牌");
$("ul li a").filter(":contains('佳能'),:contains('三星'),:contains('卡西欧')")
.addClass("promoted");
return false; //避免超链接跳转；
}
})
</script>
</body>
</html>