Jquery学习之——选择器
先上代码：
1 <html> 2 <head> 3 <title>测试选择器</title> 4 <script src="jquery-1.7.2.js" type="text/javascript"></script> 5 6 <style> 7 .brand 8 { 9 width:300px; 10 } 11 .brand li 12 { 13 float:left; 14 width:100px; 15 height:50px; 16 } 17 .brand li a 18 { 19 color:#333; 20 } 21 </style> 22 <script type="text/javascript"> 23 $(function () { 24 var $brandButton = $(".brand>li:last>a"); 25 hider(); 26 27 $brandButton.toggle(function () { 28 $(this).text("↑精选品牌"); 29 $(".brand>li:not(:last)").filter(":not(:contains('品牌10'),:contains('品牌3'),:contains('品牌5'),:contains('品牌8'))").show().css("font-weight", "bolder"); 30 }, function () { 31 hider(); 32 }); 33 34 function hider() { 35 $brandButton.text("↓所有品牌"); 36 $(".brand>li:not(:last)").filter(":not(:contains('品牌10'),:contains('品牌3'),:contains('品牌5'),:contains('品牌8'))").hide(); 37 } 38 }); 39 40 41 </script> 42 </head> 43 <body> 44 <ul class="brand"> 45 <li><a href="#">品牌1</a></li> 46 <li><a href="#">品牌2</a></li> 47 <li><a href="#">品牌3</a></li> 48 <li><a href="#">品牌4</a></li> 49 <li><a href="#">品牌5</a></li> 50 <li><a href="#">品牌6</a></li> 51 <li><a href="#">品牌7</a></li> 52 <li><a href="#">品牌8</a></li> 53 <li><a href="#">品牌9</a></li> 54 <li><a href="#">品牌10</a></li> 55 <li><a href="#">显示精简品牌</a></li> 56 </ul> 57 </body> 58 </html>
该例子如下图所示：打开页面显示精选品牌：
单击所有品牌显示所有品牌，并加粗显示精选品牌：
- 选择器
1.基本选择器：
#id -- 匹配ID
.class --匹配class集合
element --匹配标签 如$("p")
* --匹配所有
selector1,selector2,selector3... --匹配多个选择器 如：$("p,span,a") 则匹配P标签和span和a标签.
2.层次选择器
$("a b") 匹配a元素里的所有b（后代）元素 如$("div span")选取div里所有span元素，包含后代元素
$("a>b") 匹配a元素下的b（子）元素
$("a+b") 匹配a元素的下一个同辈b元素 如： $(".one+div")选取class为one的每个元素的下一个<div>同辈元素 ----等同于---- $(".one").next("div")
$("a~b") 匹配a元素后面所有的同辈b元素 如： $(".one~div")选取class为one的每个元素的后面所有的<div>同辈元素 ----等同于---- $(".one").nextAll("div")
子元素与后代元素的差别：
<div>
<span><span>
<p>
<span></span>
<p>
</div>
如上代码：
Div的后代元素有：span（粉色）, p , p内的span（蓝色）
Div的子元素有 ：span（粉色）, p
所以：
$("div span")选取的是div下所有span元素 span（粉色）和 span（蓝色）
$("div>span")选取的是div内第一级元素下的span元素，即span（粉色）。
3.过滤选择器
基本过滤选择器
:first 第一个元素
:last 最后一个元素
:not(selector) 去除所有与给定选择器匹配的元素(即“非”)
:even 取偶数索引 (索引0开始)
:odd 取奇数索引 (索引0开始)
:eq(index) 取索引为index的元素 (索引0开始)
:gt(index) 取索引大于index的元素 (索引0开始)
:lt(index) 取索引小于index的元素 (索引0开始)
:header 取所有标题元素，如h1,h2,h3,h4...
:animated 取当前正在执行动画的所有元素
:focus 取当前获取焦点的元素
内容过滤选择器
:contains(text) 取含文本内容为"text"的元素 $("div:contains('我')") -- 取所有文本包含‘我’字的div元素
:has(selector) 取含有selector选择器匹配元素的元素 $("div:has('.one')") -- 取所有含有class为one元素的div元素。
:empty 取空元素（不含子元素，且文本为空）
:parent 取非空元素（含子元素或文本）
可见性过滤选择器
:hidden 取所有不可见元素，包含<input type="hidden"/>,<div style="display:none">,<div style="visibility:hidden">等。
:visible 取所有可见元素
属性过滤选择器
[atrribute] 取拥有此属性的元素 $("div[id]") -- 含有id属性的div元素
[atrribute=value] 取属性值等于value的元素
[atrribute!=value] 取属性值不等于value的元素
[atrribute^=value] 取属性值以value开头的元素
[atrribute$=value] 取属性值以value结尾的元素
[atrribute*=value] 取属性值包含value的元素
[atrribute|=value] 取属性值等于value或以value为前缀（该字符串后跟一个连接字符"-"）的元素
[atrribute~=value] 取属性用空格分隔的值中包含一个给定值得元素 $("div[title~='uk']") --选取属性title用空格分隔的值中包含字符uk的元素
[atrribute1][atrribute1]...[atrributeN] 取交集，且
子元素过滤选择器
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个元素(奇偶元素/公式) 。index从1算起
:first-child 选取每个父元素下的第一个子元素
:last-child 选取每个父元素下的最后一个子元素
:only-child 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配。
equation--公式 (an + b)。
描述：a表示周期的长度，n 是计数器（从 1 开始），b 是偏移值。
如:$("p:nth-child(3n+1)")
表单对象属性过滤选择器
:enabled 取可用元素（未被禁用的表单对象元素）
:disabled 取不可用元素
:checked 选取所有被选中的元素(单选框，复选框)
:selected 选取所有被选中的元素(下拉列表)
4.表单选择器
:input 选取所有的<input>,<textarea>,<select>,<button>
:text 选取所有的单行文本框
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:sumbmit 选取所有的提交按钮
:button 选取所有的按钮
:image 选取所有的图像按钮
:reset 选取所有的重置按钮
:file 选取所有的文本域
:hidden 选取所有不可见元素
浙公网安备 33010602011771号