教學 JQUERY元素選擇器規則

[ihstar]

其實jquery的元素選擇，跟css一樣。然後再加上其它特定的方式。基本上可分為如下大類
選擇器的基本宣告，為$()。中間用""包起來

基本選擇器：

1. html代碼選擇：
   如 p div等。用$("p")就代表所有的<p>相關的html代碼元件
2. 指定id選擇器：(#)
   前置代碼「#」則代表選擇其對應後置id名稱。
   如 $("#test")。則其<div id="test">或<a id="test">都是屬於他的指定元件之一。
   這裏要注意的是，在html上雖然id是唯一的。但在這裏就算是有重覆型態的id。也是可以正常取用的。
   但最好還是不要這樣做。
3. 指定css的類別代碼：(.)
   前置代碼「.」，則是代表指定對應的class名稱。
   如$(".test")則其 <div class="test">與<a class="test">都是屬於他指定的元件。
   這裏其實如果是複合式的class。如<div class="ssss test">這樣也是有算的。

階層選擇器：應用上面的主選擇器下去組合的指定元件。其方式

1. 以上是「空白」:如$("#test .sel")。則是代表對應於元件id=test及其下子元素集範圍內中所有class=sel的元件。
   如
   

   <div id="test">
         <p class="sel">這一個是指定的元件</p>
   </div>

   或
   

   <div id="test">
       <div>
               <p class="sel">這一個是指定的元件</p>
        </div>
         <p class="sel">這一個是指定的元件</p>
   </div>

2. 「*」:所有物件：如$("#test *")。則代表在元件id=test其下的所有子元素集的物件。
   不過這個設定最好還是少用。

• 「+」:符合第一個條件同級之後的第一個指定：如$("#test +p")。則是代表在元件id=test之後的第一個p標簽。
  如
  

  <div id="test">
      <p>這是裏面的p。不是這</p>
  </div>
  <p>這是之後的p，觸發這一個</p>

• 「~」符合第一個條件後的同級所有後對應值：如$("#test ~p")。則是代表元件id=test其後所有的p元件。
  如
  

  <div id="test">
      <p>這是裏面的p。不是這</p>
  </div>
  <p>這是之後的p，觸發這一個</p>
  <p>這是之後的p，觸發這一個</p>
  <p>這是之後的p，觸發這一個</p>

• 「>」這是符合第一個條件下的對應子層。如$("#test > p")。則是代表元件id=test的其子層 p。
  如
  
  

  <div id="test">
        <p>這個觸發</p>
        <div>
             <p>這不會觸發</p>
        </div>
        <p>這個觸發</p>
        <p>這個觸發</p>
  </div>

以上是一般基本的應用，再來會再說明更高階的應用法。