jQuery 基礎(chǔ)選擇器(一)
基礎(chǔ)選擇器
在使用選擇器是 ，我們首先必須要使用 “$()" 里面來包裝我們的css規(guī)則，然后返回jquery對象
下面我們來看以下幾個簡單的選擇器，如下圖所示：
下面我們先來看以下ID選擇器
通過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 中，我們是這樣寫的
#dv{
????color：red; ? //添加樣式
}
我們在jquery中，叫添加一個行為，這個行為叫添加樣式
這上面就是 id 選擇器， 也是最簡單的選擇器，最常用的選擇器
下面我們來看元素標(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(){
$("div").css("color","#f60");
})
</script>
</head>
<body>
<div>php 中文網(wǎng)</div>
<div>php 中文網(wǎng)</div>
<div>php 中文網(wǎng)</div>
</body>
</html>看如上代碼，我們有多個div 標(biāo)簽，并且沒有id 這樣我們就要使用元素標(biāo)簽選擇器 ? ?$("元素名").行為
類 class 選擇器
下面我們先來看一段代碼：
<!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>使用類選擇器，我們寫css 樣式的時候 ? ?.class名 ? 然后去添加樣式，當(dāng)然我們在jquery 中需要這樣寫：$（".dv1"）.行為
注：ID在頁面只會出現(xiàn)一次，如果id出現(xiàn)多次，那么我們用css 是可以的，但是使用jquery 后面的就不會生效，如果一個頁面出現(xiàn)多個id ,那么這就是開發(fā)者程序的不嚴(yán)謹(jǐn)，
所以開發(fā)者必須有一個良好的編碼習(xí)慣，一個頁面id只能出現(xiàn)一次（相同的id）
為了證明ID返回的是單個元素，而元素標(biāo)簽名和類(class)返回的是多個，我們可以使用jquery核心自帶的一個屬性length 或size()方法來查看返回元素的個數(shù)
下面我們就用實(shí)例來講解：
通過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個，但是返回的是1
當(dāng)我們使用類 class 時
<!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
