#id 選擇器

如果你想要通過一個id號去查詢一個元素，就可以使用如下格式的選擇器：$("#my_id"),表示根據id選擇器獲取頁面中指定的標籤元素，且返回唯一一個元素。

<div id="divtest">div的內容</div>
<script type="text/javascript">
    $("#divtest").html("hello world.");
</script>

html()方法的功能是設定或獲取元素中顯示的內容。通過#id選擇器的方式獲取元素，並在元素中呼叫html()。

element 選擇器

jQuery中可以根據元素名查詢元素，格式如下：$("element")

<button id="btntest">點我</button>
<script type="text/javascript">
  $("button").attr("disabled","true");
</script>

css()方法的功能是設定或獲取元素的某項樣式屬性。根據元素的名稱可以查詢到該元素，並呼叫css()方法將設定該元素內容中文字顯示的樣式。

.class 選擇器

我們不但可以通過使用元素名稱查詢元素的方法，其實，還可以通過元素的類別屬性查詢元素。它的呼叫格式如下：$(".class")

<div class="red">立正，向我這邊看齊</div>
<p class="red">我先歇歇腳</p> 
<script type="text/javascript">
   $(".red").html("hello class");
   $("p.red").html("hello p.class")
</script>

如例子所示，元素和class以及id選擇器是可以同時使用的。

* 選擇器

“*”號選擇器，它的功能是獲取全部元素，如下面例子所示，可以通過設定$("form *")

<form action="#">
<input id="Button1" type="button" value="button" />
<input id="Text1" type="text" />
<input id="Radio1" type="radio" />
<input id="Checkbox1" type="checkbox" />
</form>

<script type="text/javascript">
    $("form *").attr("disabled", "true");
</script>

sele1,sele2,seleN 選擇器

有時需要精確的選擇任意多個指定的元素，就需要呼叫sele1,sele2,seleN選擇器，它的呼叫格式如下：$(“sele1,sele2,seleN”)其中引數sele1、sele2到seleN為有效選擇器，每個選擇器之間用“，”號隔開，它們可以是之前提及的各種型別選擇器，如$(“#id”)、$(“.class”)、$(“selector”)選擇器等。

<div class="red">選我吧！我是red</div>
<div id="green">選我吧！我是green</div>
<div class="blue">選我吧！我是blue</div>

<script type="text/javascript">
    $(".red,#green").html("hi,我們的樣子很美哦!");
</script>

我們接下來繼續學習層次性選擇器

在實際應用開發中，常常是多個元素巢狀在一起，形成複雜的層次關係，通過層次選擇器，可以快速定位某一層次的一個或多個元素。

ance desc 選擇器

它的呼叫格式如下：$("ance desc"),其中ance desc是使用空格隔開的兩個引數。ance引數（ancestor祖先的簡寫）表示父元素；desc引數（descendant後代的簡寫）表示後代元素，即包括子元素、孫元素等等。

<div>碼農家族
    <p>
       <label></label>
    </p>
    <label></label>
</div>

<script type="text/javascript">
    $("div label").css("background-color","blue");
</script>

parent > child 選擇器

與前面介紹的ance desc選擇器相比，parent > child選擇器的範圍要小些，它所選擇的目標是子集元素，相當於一個家庭中的子輩們，但不包括孫輩，它的呼叫格式如下：$("parent > child")，child引數獲取的元素都是parent選擇器的子元素，它們之間通過“>”符號來表示一種層次關係。

<div>
    碼農家族
    <p>
        <label></label>
    </p>
    <label></label> <!--只有這個label背景是藍色-->
</div>
<label></label>

<script type="text/javascript">
   $("div>label").css("background-color","blue");
</script>

prev + next 選擇器

俗話說“遠親不如近鄰”，而通過prev + next選擇器就可以查詢與“prev”元素緊鄰的下一個“next”元素，格式如下：$("prev + next")，其中引數prev為任何有效的選擇器，引數“next”為另外一個有效選擇器，它們之間的“+”表示一種上下的層次關係，也就是說，“prev”元素最緊鄰的下一個元素由“next”選擇器返回的並且只返回唯的一個元素。

<div>
    碼農家族
    <label></label>
    <p></p>
    <label></label><!--這個label背景是紅色-->
    <label></label>
</div>
<label></label>

<script type="text/javascript">
    $("p+label").css("background-color","red");
</script>

prev ~ siblings選擇器

與上一節中介紹的prev + next層次選擇器相同，prev ~ siblings選擇器也是查詢prev 元素之後的相鄰元素，但前者只獲取第一個相鄰的元素，而後者則獲取prev 元素後面全部相鄰的元素，它的呼叫格式如下：$("prev ~ siblings")，其中引數prev與siblings兩者之間通過“~”符號形成一種層次相鄰的關係，表明siblings選擇器獲取的元素都是prev元素之後的同輩元素。

<div>
    碼農家族
    <label></label>
    <p></p>
    <label></label><!--這個label背景是紅色-->
    <label></label><!--這個label背景也是紅色-->
</div>
<label></label>

<script type="text/javascript">
    $("p+label").css("background-color","red");
</script>

小結

當$(” “)包含多個選擇器時，他們之間的關係有如下幾種：