一、基本选择器
1)ID选择器
2)标签选择器
3 ) 类选择器
4 ) 通配符选择器
二、层级选择器
1 ) 包含选择器
2 ) 子选择器
3 ) 相邻选择器
4 ) 兄弟选择器
三、简单的伪类选择器
1 ) 特定位置选择器
2 ) 指定范围选择器
3 ) 排除选择器
四、与内容相关的伪类选择器
1 ) 匹配包含文本选择器
2) 匹配包含元素选择器
3 ) 匹配包含判断选择器
4 ) 解析内容过滤实现原理
五、与元素显示状态相关的伪类选择器
六、匹配子元素的伪类选择器
七、与表单对象相关的伪类选择器
-------------------------------------------------------------------------------------------
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>