標籤：des style blog http color 使用 java ar strong
#id選取器jquery能使用CSS選取器來操作網頁中的標籤元素。如果你想要通過一個id號去尋找一個元素，就可以使用如下格式的選取器：
$("#my_id")
其中#my_id表示根據id選取器擷取頁面中指定的標籤元素，且返回唯一一個元素。
jquery能根據元素名尋找元素，格式如下
$("element")
其中element就是元素的名稱，也就是通過其名稱找到該元素。
.class選取器jquery能根據類別屬性尋找元素，格式如下
$(".class")
其中.class參數表示元素的CSS類別(類別選取器)名稱。
它的功能是擷取頁面中的全部元素,選取器中的參數就一個“*”，既沒有“#”號，也沒有“.”號。 由於該選取器的特殊性，它常與其他元素組合使用，表示擷取其他元素中的全部子項目。(實踐證明，由於使用*選取器擷取的是全部元素，因此，有些瀏覽器將會比較緩慢，這個選取器也需要謹慎使用。)
$("*")sele1,sele2,seleN選取器
有時需要精確的選擇任意多個指定的元素，就需要調用sele1,sele2,seleN選取器，它的調用格式如下：
$(“sele1,sele2,seleN”)
其中參數sele1、sele2到seleN為有效選取器，每個選取器之間用“，”號隔開，它們可以是之前提及的各種類型選取器，如$(“#id”)、$(“.class”)、$(“selector”)選取器等。
在實際應用開發中，常常是多個元素嵌套在一起，形成複雜的層次關係，通過層次選取器，可以快速定位某一層次的一個或多個元素，ance desc選取器就是其中之一，它的調用格式如下：
$("ance desc")
其中ance desc是使用空格隔開的兩個參數，ance參數任何有效選取器，desc參數是尋找元素的選取器，類似於尋找一個家族下的全部子或孫輩，ance參數為家族名稱，desc參數為子或孫輩名稱。
例如，使用層次選取器，擷取<div>元素中的全部<span>元素，並設定它們顯示的內容，在如下所示：
<!DOCTYPE html><html><head> <title>ance desc選取器</title><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script></head><body> <div> <p> <span></span> </p> <span></span> </div></body><script type="text/javascript"> $("div span").html("ance desc test");</script></html>parent > child選取器
與上一選取器ance desc選取器相比，parent > child選取器的範圍要小些，它所選擇的目標是子集元素，相當於一個家庭中的子輩們，但不包括孫輩，它的調用格式如下：
$"parent > child")
child參數擷取的元素都是parent選取器的子項目，它們之間通過“>”符號來表示一種層次關係。：
<!DOCTYPE html><html><head> <title>parent > child選取器</title><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script></head><body> <div> 碼農家族 <p> <label></label> </p> <label></label> <label></label> </div> <label></label></body><script type="text/javascript"> $("div>label").css("border", "solid 5px red");</script></html>prev + next選取器
通過prev + next選取器就可以尋找與“prev”元素緊鄰的下一個“next”元素，格式如下：
$("prev + next")
其中參數pre為任何有效選取器，參數"next" 為另外一個有效選取器，他們之間"+"表示一種上下的層次關係，也就是說 “prev”元素最緊鄰的下一個元素由“next”選取器返回的並且只返回唯的一個元素。
例如：擷取<p>元素最近鄰的下一個元素，並修改它的背景色。
<!DOCTYPE html><html><head> <title>prev + next選取器</title><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script></head><body> <div><label></label> <p></p> <label></label> <label></label> </div> <label></label></body><script type="text/javascript"> $("p+label").css("background-color","red");</script></html>
prev ~ siblings選取器
與選取器prev + next層次選取器相同，prev ~ siblings選取器也是尋找prev 元素之後的相鄰元素，但前者只擷取第一個相鄰的元素，而後者則擷取prev 元素後面全部相鄰的元素，它的調用格式如下：
$("prev ~ siblings")
其中參數prev與siblings兩者之間通過“~”符號形成一種層次相鄰的關係，表明siblings選取器擷取的元素都是prev元素之後的同輩元素。
例如，使用prev ~ next選取器，擷取<p>元素後面相鄰的全部元素，並修改它們的邊框色和顯示內容。如下所示：
<!DOCTYPE html><html><head> <title>prev ~ siblings選取器</title><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script></head><body> <div> 碼農家族 <label></label> <p>p</p> <label></label> <label></label> </div> <label></label></body><script type="text/javascript"> $("p~label").css("border", "solid 1px red"); $("p~label").html("我們都是p先生的粉絲");</script></html>
jQuery 基礎選取器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
