JQuery-选择器整理
一、基本选择器
1）ID选择器
2）标签选择器
3 ) 类选择器
4 ) 通配符选择器
二、层级选择器
1 ) 包括选择器
2 ) 子选择器
3 ) 相邻选择器
4 ) 兄弟选择器
三、简单的伪类选择器
1 ) 特定位置选择器
2 ) 指定范围选择器
3 ) 排除选择器
四、与内容相关的伪类选择器
1 ) 匹配包括文本选择器
2) 匹配包括元素选择器
3 ) 匹配包括推断选择器
4 ) 解析内容过滤实现原理
五、与元素显示状态相关的伪类选择器
六、匹配子元素的伪类选择器
七、与表单对象相关的伪类选择器
-------------------------------------------------------------------------------------------
一、基本选择器
1、ID选择器。语法：jQuery("#id")
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#div1").css("background","red");
})
</script>
<title>上机练习</title>
</head>
<body>
<div id="div1">測试盒子</div>
</body>
</html>2、标签选择器，语法： jQuery("element")
注意：不须要附加前缀（#）
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div").css("color","red");
})
</script>
<title>无标题文档</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>3、类选择器，语法：jQuery(".className")
className为字符串，表示标签的class属性值，前缀符号“.”表示该选择器为类选择器。返回值为包括匹配className元素的jQuery对象。
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".red").css("color","red");
})
</script>
<title>无标题文档</title>
</head>
<body>
<div class="red">div1</div>
<div>div2</div>
<div class="red">div3</div>
</body>
</html>
4、通配符选择器，语法：jQuery("*")
參数“*”为字符串，表示将匹配指定范围内全部的标签元素。
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("body *").css("color","red");
})
</script>
<title>无标题文档</title>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
</body>
</html>二、层级选择器
1、包括选择器。语法：jQuery("ancestor descendant")
当中,ancestor表示包括选择器，descendant表示被包括选择器。
jQuery可以在ancestor选择器所匹配的元素中，过滤出匹配ancestor选择器的全部包括元素。
eg：
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("form input").css({"border":"solid 1px red","background":"blue"});
})
</script>
<title>无标题文档</title>
</head>
<body>
〈form>
<fieldset>
<label>包括的子文本框
〈input/>
</label>
<fieldset>
<label>包括的孙子文本框
〈input />
</label>
</fieldset>
</fieldset>
</form>
<label>非包括的文本框
〈input />
</label>
</body>
</html>2、子选择器。语法：jQuery("parent>child")
当中，parent表示父选择器。child表示被包括的子选择器，“>”为子选择器的标识符。jQuery可以在parent选择器所匹配的元素中。过滤出全部匹配child选择器的子元素。
eg:
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div > img").css("border","solid 5px red");
})
</script>
<title>无标题文档</title>
</head>
<body>
<div>
<span><img src="images/bg.jpg" /></span>
<img src="images/bg.jpg" />
</div>
<img src="images/bg.jpg" />
</body>
</html>3、相邻选择器，语法：jQuery("prev+next")
当中，prev表示相邻的前一个选择器。next表示相邻的后一个选择器，
"+"为相邻选择器的标识符。
jQuery可以在prev选择器所匹配的元素后，过滤出全部匹配next选择器的紧邻同级元素。
eg：
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div + img").css("border","solid 5px red");
})
</script>
<title>无标题文档</title>
</head>
<body>
<div>
<span><img src="images/bg.jpg" /></span>
<img src="images/bg.jpg" />
</div>
<img src="images/bg.jpg" />
<img src="images/bg.jpg" />
</body>
</html>4、兄弟选择器,语法： jQuery("pre ~ siblings")
当中，prev表示相邻的前一个选择器。siblings表示相邻的同级选择器，
“~”为兄弟选择器的标识符。
jQuery可以在prev选择器所匹配的元素后，过滤出全部匹配siblings选择器的同级元素/
eg：
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("div ~ img").css("border","solid 5px red");
})
</script>
<title>无标题文档</title>
</head>
<body>
<div>
<span><img src="images/bg.jpg" /></span>
<img src="images/bg.jpg" />
</div>
<img src="images/bg.jpg" />
<img src="images/bg.jpg" />
</body>
</html>5、层级选择器综合应用
三、简单的伪类选择器
简单的伪类选择器也称为定位过滤器，由于他们主要依据编号和排位筛选特定位置上的元素。或者过滤掉特定元素
1、特定位置选择器
主要包含 :first 、 :last和:qe(index)3 种。:first可以在匹配的集合中选择第1个元素，相反:last可以在匹配的集合中选择最后一个元素，而
:eq(index)可以依据index索引值确定指定位置的元素。详细用户例如以下：
jQuery("selector:first")
jQuery("selector:last")
jQuery("selector:eq(index)") ,index从0開始计数
eg:
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("tr:first").css({"background":"blue","color":"white"});
$("tr:qe(1)").css("background","#F1F5FB");
$("tr:last").css("background","#ff9");
})
</script>
<title>无标题文档</title>
</head>
<body>
<table>
<tr><th>选择器</th><th>说明</th></tr>
<tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>
<tr><td>:last</td><td>匹配找到的最后一个元素。
</td></tr>
</table>
</body>
</html>
2、指定范围选择器
主要包含 :even 、:odd 、 :gt(index)和:lt(index) 四种
:even 匹配集合中选择全部偶数行元素
:odd 匹配集合中选择全部级奇数行元素
:gt(index) 匹配集合中选择大于给定索引值的元素
:lt(index) 匹配集合中选择小于给定索引值的元素
eg:
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("tr:even").css("background","#F1F5FB");
$("tr:odd").css("background","#ff9");
$("tr:first").css({"background":"blue","color":"white"});
})
</script>
<title>无标题文档</title>
</head>
<body>
<table>
<tr><th>选择器</th><th>说明</th></tr>
<tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>
<tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr>
<tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>
<tr><td>:last</td><td>匹配找到的最后一个元素。
</td></tr>
<tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>
<tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr>
</table>
</body>
</html>
3、排除选择器
语法：jQuery("selector1:not(selector2)");參数selector1、selector2和not为字符串。当中。selector1和selector2表示随意形式的选择器，“：”为伪类选择器的标识符，not表示排除函数标识符。
eg:
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("tr:even").css("background","#F1F5FB");
$("tr:odd").css("background","#ff9");
$("tr:first").css({"background":"blue","color":"white"});
$("tr:not(tr:lt(3))").css({"background":"white","color":"black"});
})
</script>
<title>无标题文档</title>
</head>
<body>
<table>
<tr><th>选择器</th><th>说明</th></tr>
<tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>
<tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr>
<tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>
<tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr>
<tr><td>:first</td><td>匹配找到的第1个元素。</td></tr>
<tr><td>:last</td><td>匹配找到的最后一个元素。</td></tr>
</table>
</body>
</html>
四、与内容相关的伪类选择器
：contains -〉匹配包括给定文本的元素。比如。$("div:contains('图片')")匹配全部包括“图片”的div元素
：empty -〉匹配全部不包括子元素或者文本的空元素。
：has -〉匹配含有选择器所匹配的元素的元素。
比如。
$("div:has(p)") 匹配全部包括p元素的div元素
1、匹配包括文本选择器
语法：jQuery("selector:contains(text)")
<script src="jQuery/jquery-1.6.4.js" type="text/javascript" ></script>
<script type="text/javascript">
$(
function(){
$("dd:contains('乔布斯')").css("text-decoration","underline");
}
)
</script>
<title>无标题文档</title>
</head>
<body>
<h2>纪念乔布斯的评论</h2>
<dl>
<dt>李德0202：</dt>
<dd>司法官神风怪盗法国分公司公司发的。国防生大哥，国防生的故事法国。国防生大哥</dd>
<dt>啊大法师反对法：</dt>
<dd>乔布斯走了。反对反对，放大发射点法，啊大法师法的放大三发，史蒂夫.乔布斯！1955-2011 永远铭记在我们心里！乔布斯，一路走好！
</dd>
<dt>啊大法发射点发生的发</dt>
<dd>歌功颂德丰功硕德发个三的发个</dd>
</dl>
</body>
</html>
2、匹配包括元素选择器
语法: jQuery("selector1:has(selector2)");
3、匹配包括推断选择器
语法：jQuery("selector:empty");
jQuery("selector:parent");
:empty匹配元素中包括空内容的元素
:parent匹配元素中包括非空内容的元素
4、解析内容过滤实现原理
五、与元素显示状态相关的伪类选择器
:hidden 匹配全部不可见元素，或者type为hidden的元素
:visible 匹配全部的可见元素
六、匹配子元素的伪类选择器
:nth-child 匹配其父元素下的第N个子或奇偶元素
:first-child 匹配第一个子元素。:first仅仅匹配一个元素，而:first-child选择器将为每一个父元素匹配一个子元素
:last-child 匹配最后一个子元素。:last仅仅匹配一个元素，而:last-child选择器将为每一个父元素匹配一个子元素
:only-child 假设某个元素是父元素中唯一的子元素，那将会被匹配；假设父元素中含有其它元素，那将不会被匹配
七、与表单对象相关的伪类选择器
:input 匹配全部input , textarea,select和button元素
:text 匹配所以的单行文本框
:password 匹配全部密码框
:radio 匹配全部单选框
:checkbox 匹配全部复选框
:submit 匹配全部提交button
:image 匹配全部图像域
:reset 匹配全部重置button
:button 匹配全部按钮
:file 匹配全部文件
:hidden 匹配全部不可见元素
