jQuery 基礎(chǔ)選擇器（二）
基本選擇器
群組選擇器
請(qǐng)看下面代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選擇器</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("div,p,span").css("color","red");
})
</script>
</head>
<body>
<div>php 中文網(wǎng)</div>
<div>php 中文網(wǎng)</div>
<div>php 中文網(wǎng)</div>
<br><br>
<p>php.cn</p>
<p>php.cn</p>
<p>php.cn</p>
<br><br>
<span>php 中文網(wǎng)</span>
<span>php 中文網(wǎng)</span>
<span>php 中文網(wǎng)</span>
</body>
</html>請(qǐng)看下面一段實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選擇器</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
})
</script>
</head>
<body>
<div id="dv">php 中文網(wǎng)</div>
<div>php 中文網(wǎng)</div>
<div>php 中文網(wǎng)</div>
<br><br>
<p>php.cn</p>
<p class="p1">php.cn</p>
<p class="p1">php.cn</p>
<br><br>
<span>php 中文網(wǎng)</span>
<span>php 中文網(wǎng)</span>
<span>php 中文網(wǎng)</span>
</body>
</html>使用群組方式 讓id是div的，class 是p1 還有span 標(biāo)簽變成紅色
代碼如下：
$("#dv,.p1,span").css("color","red");
后代選擇器
下面我們來(lái)寫(xiě)一個(gè)實(shí)例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選擇器</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
})
</script>
</head>
<body>
<ul>
<li><a href="#">php 中文網(wǎng)</a></li>
<li><a href="#">php 中文網(wǎng)</a></li>
</ul>
<a href="#">php 中文網(wǎng)</a>
<a href="#">php 中文網(wǎng)</a>
</body>
</html>請(qǐng)看上面代碼，我想讓 li 標(biāo)簽的a 標(biāo)簽的顏色變成紅色
我們可以這樣寫(xiě)，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選擇器</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li a").css("color","red");
})
</script>
</head>
<body>
<ul>
<li><a href="#">php 中文網(wǎng)</a></li>
<li><a href="#">php 中文網(wǎng)</a></li>
</ul>
<a href="#">php 中文網(wǎng)</a>
<a href="#">php 中文網(wǎng)</a>
</body>
</html>看如上代碼 我們 $("ul li a").css("color","red");
其實(shí)我們寫(xiě)成$("ul a").css("color","red"); 也是可以的，但是為了準(zhǔn)確性，我們寫(xiě)全會(huì)比較好，
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選擇器</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
})
</script>
</head>
<body>
<ul>
<li><a href="#">php 中文網(wǎng)</a></li>
<li><a href="#">php 中文網(wǎng)</a></li>
<a href="#">php.cn</a>
</ul>
<a href="#">php 中文網(wǎng)</a>
<a href="#">php 中文網(wǎng)</a>
</body>
</html>看以上代碼，如果我們寫(xiě)上$("ul a").css("color","red"); 那么 ul 下面的 a 標(biāo)簽都會(huì)變紅色
但是我們最初想要的是 li 標(biāo)簽下的 a 標(biāo)簽變成紅色
所以，這個(gè)時(shí)候我們就需要寫(xiě)全 即 $("ul li a").css("color","red");
通配選擇器 *
看如下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選擇器</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("*").css("color","red");
})
</script>
</head>
<body>
<ul>
<li><a href="#">php 中文網(wǎng)</a></li>
<li><a href="#">php 中文網(wǎng)</a></li>
<a href="#">php.cn</a>
</ul>
<a href="#">php 中文網(wǎng)</a>
<a href="#">php 中文網(wǎng)</a>
<p> php.cn </p>
<p> php.cn </p>
<p> php.cn </p>
<span>php 中文網(wǎng)</span>
</body>
</html>
