基礎選擇器
在使用選擇器是,我們必須先使用「$()" 裡面來包裝我們的css規則,然後回到jquery物件
#下面我們來看以下幾個簡單的選擇器,如下圖所示:
下面我們先來看以下ID選擇器
透過id選擇器,讓div標籤中的文字改變顏色
<!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 中文网</div> </body> </html>
在css 中,我們是這樣寫的
#dv{
color:red; //新增樣式
}
我們在jquery中,叫新增一個行為,這個行為叫新增樣式
這上面就是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(){ $("div").css("color","#f60"); }) </script> </head> <body> <div>php 中文网</div> <div>php 中文网</div> <div>php 中文网</div> </body> </html>看如上程式碼,我們有多個div 標籤,並且沒有id 這樣我們就要使用元素標籤選擇器 $("元素名稱").行為類別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 中文网</div> <div>php 中文网</div> <div class="dv1">php 中文网</div> </body> </html>使用類別選擇器,我們寫css 樣式的時候 .class名 然後去新增樣式,當然我們在jquery 中需要這樣寫:$(".dv1").行為#註:ID在頁面只會出現一次,如果id出現多次,那麼我們用css 是可以的,但是使用jquery 後面的就不會生效,如果一個頁面出現多個id ,那麼這就是開發者程式的不嚴謹,所以開發者必須有一個良好的編碼習慣,一個頁面id只能出現一次(相同的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 中文网</div> <div id="dv">php 中文网</div> <div id="dv">php 中文网</div> </body> </html>我們有3個,但是傳回的是1當我們使用類別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 中文网</div> <div class="dv">php 中文网</div> <div class="dv">php 中文网</div> </body> </html>傳回的結果是3使用標籤名稱:
<!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 中文网</div> <div class="dv">php 中文网</div> <div class="dv">php 中文网</div> </body> </html>傳回的結果是3