jQuery - Selectors (1) Basics - 基礎選擇器

jQuery基礎選擇器簡介

以下是最基本,也是jQuery裡最簡單也最重要的一節,沒有了它,jQuery 可以說無法作運。所有的jQuery都是以它為開頭。

jQuery基礎選擇器速查表

jQuery 基礎選擇器
選擇器 說明 範例
* 選擇所有元素。 $('*')
.class 選擇所有符合class的元素。 $('.PostFont')
element 選擇所有符合標籤名稱(Tag name)的元素。 $('div')
#id 選擇一個符合id屬性的元性。 $('#NavBar')
selector1, selectorN, ... 選擇指定的元素。 $('div,p.PostFont,#NavBar')

除了*選擇器外,其他都是非常常用的選擇器,一定要好好了解。

jQuery基礎選擇器範例

*選擇器範例1:找尋文件中所有的元素(element),包含head,body等。

使用「*選擇器」時,請多加注意,它會嚴重影響效能

<!DOCTYPE html>
<html>
<head>
  <style>
  h3 { margin: 0; }
  div,span,p {
    width: 80px;
    height: 40px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>DIV</div>

  <span>SPAN</span>
  <p>P <button>Button</button></p>
<script>
// 1. 所有元素加上CSS屬性
// 2. 取得元素數量(共11個)
var elementCount = $("*").css("border","3px solid red").length;
// 3. 在body之後加入一個新h3元素
$("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>
</body>
</html>

由上而下計算,共11個元素被選擇器選中。只有body裡的元素會顯示CSS效果。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <head> → <style>
  5. <head> → <script>
  6. <body>
  7. <body> → <div>
  8. <body> → <span>
  9. <body> → <p>
  10. <body> → <p> → <button>
  11. <body> → <script>

*選擇器範例2:由特定元素後,進行全部選擇。


<!DOCTYPE html>
<html>
<head>
  <style>
  h3 { margin: 0; }
  div,span,p {
    width: 80px;
    height: 40px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  #test {
    width: auto; height: auto; background-color: transparent; 
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="test">
  <div>DIV</div>
  <span>SPAN</span>
  <p>P <button>Button</button></p>
</div>
<script>
// 1. 由特定元素($("#test"))開始進行「全部選擇(find("*")」後
var elementCount = $("#test").find("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");</script>
</body>
</html>

由上而下計算,共4個元素被選擇器選中。<div id="test"> → id是重點,從這個元素之下的所有元素都會被選取。
  1. <div>
  2. <span>
  3. <p>
  4. <p> → <button>

.class(類別)選擇器範例1:選擇特定的類別名稱。

注意:如果Browser支援,jQuery會使用JavaScript原生函式getElementsByClassName()。

<!DOCTYPE html>
<html>
<head>
  <style>
  div,span {
    width: 100px;
    height: 40px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div class="notMe">div class="notMe"</div>

  <div class="myClass">div class="myClass"</div>
  <span class="myClass">span class="myClass"</span>
<script>
// 1. 將class名稱為".myClass"選擇起來,進行動作。
$(".myClass").css("border","3px solid red");</script>
</body>
</html>

第二個div與第三個span會被選擇,進行CSS相關動作。

.class(類別)選擇器範例2:需符合兩個名稱(myclass, otherclass)類別名稱,才會被選擇。


<!DOCTYPE html>
<html>
<head>
  <style>
  div,span {
    width: 100px;
    height: 40px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div class="myclass">div class="notMe"</div>

  <div class="myclass otherclass">div class="myClass"</div>
  <span class="myclass otherclass">span class="myClass"</span>
<script>
// 1. 類別名稱為myclass與otherclass,才會被選擇
$(".myclass.otherclass").css("border","13px solid red");</script>
</body>
</html>

第二個div與第三個span會被選擇,進行CSS相關動作。

element(元素)選擇器範例:選擇每一個div元素。

注意:element是用來搜尋的元素。指定DOM節點的tagName。
注意:當Expression(表達式)返回對應的元素,使用JavaScript的getelementsByTagName()函式。

<!DOCTYPE html>
<html>
<head>
  <style>
  div,span {
    width: 60px;
    height: 60px;
    float:left;
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>DIV1</div>

  <div>DIV2</div>
  <span>SPAN</span>
<script>
// 1. 選擇所有div元素
$("div").css("border","9px solid red");</script>
</body>
</html>

#id選擇器範例1:選擇單一元素。

id的選擇,jQuery使用JavaScript的getElementByid()函式。當另一選擇器是附加id選擇器,例如,h2#pageTitle,在確定為符合元素前,jQuery會執行一個額外的檢查。記得,每個id在一份文件中,都應該是獨立無二的。如果id名稱包含期間或冒號等,你必須使用反斜線來轉議

<!DOCTYPE html>
<html>
<head>
  <style>
  div {
    width: 90px;
    height: 90px;
    float:left;
    padding: 5px;
    margin: 5px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="notMe"><p>id="notMe"</p></div>

  <div id="myDiv">id="myDiv"</div>
<script>
// 選擇id名稱為myDiv的元素
$("#myDiv").css("border","3px solid red");</script>
</body>
</html>

第二個div會被選擇執行CSS動作。

#id選擇器範例2:id名稱含特殊符號。


<!DOCTYPE html>
<html>
<head>
  <style>
  div {
    width: 300px;
    float:left;
    padding: 2px;
    margin: 3px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="myID.entry[0]">id="myID.entry[0]"</div>

  <div id="myID.entry[1]">id="myID.entry[1]"</div>
  <div id="myID.entry[2]">id="myID.entry[2]"</div>
<script>
// 1. id名稱含特殊符號,使用轉義符號。
$("#myID\\.entry\\[1\\]").css("border","3px solid red");</script>
</body>
</html>

第二個div會被選擇執行CSS動作。
相關轉義請參考jQuery FAQ:How do I select an element by an ID that has characters used in CSS notation?

多選擇器範例1:任何符合選擇器條件的元素都會被選取。

注意:多選擇器,將每一個選擇器符合的元素合併後一起回傳。你可以指定任何數量的選擇器組合成一個單一的結果。多個Expression(表達式)組合是一種有效的方法來選擇不同的元素。它們在文件順序、DOM元素的順序,與回傳jQeruy物件可能不同。另一替代的選擇器組合是.add()函式。

<!DOCTYPE html>
<html>
<head>
  <style>

  div,span,p {
    width: 126px;
    height: 60px;
    float:left;
    padding: 3px;
    margin: 2px;
    background-color: #EEEEEE;
    font-size:14px;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>div</div>

  <p class="myClass">p class="myClass"</p>
  <p class="notMyClass">p class="notMyClass"</p>
  <span>span</span>
<script>
// 1. 元素div, span
// 2. 元素p且類別名稱為myClass
// 3. 符合以上三個選擇器條件者,都會被選擇
$("div,span,p.myClass").css("border","3px solid red");</script>
</body>
</html>

第一個div,第二個p,第四個span會被選擇進行CSS動作。

多選擇器範例2:顯示元素在jQuery物件裡的順序。


<!DOCTYPE html>
<html>
<head>
  <style>
  b { color:red; font-size:16px; display:block; clear:left; }
  div,span,p { width: 40px; height: 40px; float:left;
               margin: 10px; background-color: blue; 
               padding:3px; color:white; 
             }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span>span</span>

  <p>p</p>
  <p>p</p>
  <div>div</div>
  <span>span</span>

  <p>p</p>
  <div>div</div>
  <b></b>
<script>
    // 選擇所有div, p, span元素
    // map主要進行array的轉換。
    var list = $("div,p,span").map(function () {
      return this.tagName;
    }).get().join(", ");
    $("b").append(document.createTextNode(list));
</script>
</body>
</html>

這邊我們注重在了解選擇器,其他的.map(), .get(), .join()後面會介紹。

jQuery基礎選擇器修改歷程

[2011/12/13] 參考 jQuery 1.7 文件翻譯編寫。

2 則留言:

  1. HI 清楚分類又很多範例,很棒的入門文,謝謝大大的分享

    範例1 用chrome算出來是10 elements found ' IE則是11個物件

    回覆刪除

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「+1」,我會很高興的。

无觅相关文章插件,迅速提升网站流量