KingKong Bruce記事: jQuery - Selectors (1) Basics

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效果。

<!DOCTYPE html>
<html>
<head>
<head> → <style>
<head> → <script>
<body>
<body> → <div>
<body> → <span>
<body> → <p>
<body> → <p> → <button>
<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是重點，從這個元素之下的所有元素都會被選取。

<div>
<span>
<p>
<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 文件翻譯編寫。

Basic *
Basic .Class
Basic element
Basic #id
Basic Selector1, selectorN, ...

2 則留言:

匿名2012年10月19日上午9:44
HI 清楚分類又很多範例，很棒的入門文，謝謝大大的分享

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

新增留言

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

訂閱：張貼留言 (Atom)

KingKong Bruce記事

網頁