jQuery選擇器分類

jQuery的基本選擇器

    選擇器的分類

    <!--1.基本選擇器
        2.層級選擇器
        3.過濾選擇器
            3.1 基本過濾選擇器
            3.2 內容過濾選擇器
            3.3 可見性過濾選擇器
            3.4 子元素過濾選擇器
            3.5 表單對象屬性過濾選擇器
        4.表單選擇器
        

1. 基本選擇器

            #id
            element   根據給定的元素名匹配所有元素


            .class  
            *          改變所有元素的背景色 
            selector,    將每一個選擇器匹配到的元素合併後一起返回。


    -->


</title>

    <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>

#id HTML的代碼如下：

    <div id="notMe"><p>id="notMe"</p></div>
    <div id="myDiv">id="myDiv"</div>

#id 用於搜索的，通過元素的 id 屬性中給定的值

jQuery 代碼如下；

<script type="text/javascript">
   $("#myDiv")．css("color","red");
</script>

結果: id=“myDiv”字體變為紅色

   [ <div id="myDiv">id="myDiv"</div> ]

element HTML的代碼如下：

    <div>DIV1</div>
    <div>DIV2</div>
    <span>SPAN</span>

element 一個用於搜索的元素。指向 DOM 節點的標簽名。

jQuery 代碼如下；

<script type="text/javascript">
  $("div").css({"font-size":"3em"});
</script>

結果:顯示所有div，且字體為3em；

  [ <div>DIV1</div>, <div>DIV2</div> ]

.class HTML的代碼如下：

    <div class="notMe">div class="notMe"</div>
    <div class="myClass">div class="myClass"</div>
    <span class="myClass">span class="myClass"</span>

.class 根據給定的類匹配元素。

jQuery 代碼如下；

     $(".myClass").css("background","blue");

結果:顯示所有，myClass背景為藍色；

    [ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

* HTML 代碼如下：

    <div>DIV</div>
    <span>SPAN</span>
    <p>P</p>

* 匹配所有元素

jQuery 代碼如下；

    $("*").css("background","yellow");

結果: body 背景為黃色

jQuery 代碼

    [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

selector HTML 的代碼如下：

    <div>div</div>
    <p class="myClass">p class="myClass"</p>
    <span>span</span>
    <p class="notMyClass">p class="notMyClass"</p>

selector 將每一個選擇器匹配到的元素合併後一起返回。

jQuery 代碼如下；

    $("div,span,p.myClass")

結果:註意元素合併用 , 表示;

    [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]