排除公告

嗨!遊客

歡迎您的到來喔!第一次來此嗎?

如有任何問題,還請到 建言/問題

教學 JQUERY元素選擇器規則

本帖由 yoching2016-10-15 發佈。版面名稱:JQUERY

  1. yoching

    yoching 站務人員
    管理成員

    註冊:
    2016-10-01
    文章:
    36
    讚:
    3
    其實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的元件。

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

      HTML:
      <div id="test">
          <div>
                  <p class="sel">這一個是指定的元件</p>
           </div>
            <p class="sel">這一個是指定的元件</p>
      </div>
    2. 「*」:所有物件:如$("#test *")。則代表在元件id=test其下的所有子元素集的物件。
      不過這個設定最好還是少用。
    • 「+」:符合第一個條件同級之後的第一個指定:如$("#test +p")。則是代表在元件id=test之後的第一個p標簽。

      HTML:
      <div id="test">
          <p>這是裏面的p。不是這</p>
      </div>
      <p>這是之後的p,觸發這一個</p>
    • 「~」符合第一個條件後的同級所有後對應值:如$("#test ~p")。則是代表元件id=test其後所有的p元件。

      HTML:
      <div id="test">
          <p>這是裏面的p。不是這</p>
      </div>
      <p>這是之後的p,觸發這一個</p>
      <p>這是之後的p,觸發這一個</p>
      <p>這是之後的p,觸發這一個</p>
      
    • 「>」這是符合第一個條件下的對應子層。如$("#test > p")。則是代表元件id=test的其子層 p。


      HTML:
      <div id="test">
            <p>這個觸發</p>
            <div>
                 <p>這不會觸發</p>
            </div>
            <p>這個觸發</p>
            <p>這個觸發</p>
      </div>
    以上是一般基本的應用,再來會再說明更高階的應用法。
     

分享此頁面

正在載入...