jQuery 基礎(chǔ)選擇器(一)
基礎(chǔ)選擇器
在使用選擇器是，我們必須先使用「$()" 裡面來(lái)包裝我們的css規(guī)則，然後回到j(luò)query物件
#下面我們來(lái)看以下幾個(gè)簡(jiǎn)單的選擇器，如下圖所示：
下面我們先來(lái)看以下ID選擇器
透過(guò)id選擇器，讓div標(biāo)籤中的文字改變顏色
<!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(){
$('#dv').css("color","red");
})
</script>
</head>
<body>
<div id="dv">php 中文網(wǎng)</div>
</body>
</html>在css 中，我們是這樣寫(xiě)的
#dv{
????color：red; ? //新增樣式
}
我們?cè)趈query中，叫新增一個(gè)行為，這個(gè)行為叫新增樣式
這上面就是id 選擇器， 也是最簡(jiǎn)單的選擇器，最常用的選擇器
<!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").css("color","#f60");
})
</script>
</head>
<body>
<div>php 中文網(wǎng)</div>
<div>php 中文網(wǎng)</div>
<div>php 中文網(wǎng)</div>
</body>
</html>看如上程式碼，我們有多個(gè)div 標(biāo)籤，並且沒(méi)有id 這樣我們就要使用元素標(biāo)籤選擇器? ?$("元素名稱").行為類別class 選擇器下面我們先來(lái)看一段程式碼：<!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(){
$(".dv1").css("color","green");
})
</script>
</head>
<body>
<div class="dv1">php 中文網(wǎng)</div>
<div>php 中文網(wǎng)</div>
<div class="dv1">php 中文網(wǎng)</div>
</body>
</html>使用類別選擇器，我們寫(xiě)css 樣式的時(shí)候? ?.class名? 然後去新增樣式，當(dāng)然我們?cè)趈query 中需要這樣寫(xiě)：$（".dv1"）.行為#註：ID在頁(yè)面只會(huì)出現(xiàn)一次，如果id出現(xiàn)多次，那麼我們用css 是可以的，但是使用jquery 後面的就不會(huì)生效，如果一個(gè)頁(yè)面出現(xiàn)多個(gè)id ,那麼這就是開(kāi)發(fā)者程式的不嚴(yán)謹(jǐn)，所以開(kāi)發(fā)者必須有一個(gè)良好的編碼習(xí)慣，一個(gè)頁(yè)面id只能出現(xiàn)一次（相同的id）<!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(){
alert($("#dv").size());
})
</script>
</head>
<body>
<div id="dv">php 中文網(wǎng)</div>
<div id="dv">php 中文網(wǎng)</div>
<div id="dv">php 中文網(wǎng)</div>
</body>
</html>我們有3個(gè)，但是傳回的是1當(dāng)我們使用類別class 時(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(){
alert($(".dv").size());
})
</script>
</head>
<body>
<div class="dv">php 中文網(wǎng)</div>
<div class="dv">php 中文網(wǎng)</div>
<div class="dv">php 中文網(wǎng)</div>
</body>
</html>傳回的結(jié)果是3使用標(biāo)籤名稱：<!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(){
alert($("div").size());
})
</script>
</head>
<body>
<div class="dv">php 中文網(wǎng)</div>
<div class="dv">php 中文網(wǎng)</div>
<div class="dv">php 中文網(wǎng)</div>
</body>
</html>傳回的結(jié)果是3
