jQuery 3教程(二)：jQuery選擇器

aqv發表於2016-03-15
jQuery

原文地址：jQuery 3教程(二)：jQuery選擇器

Introduction

jQuery最方便的地方便是各種選擇器。jQuery選擇器完美相容CSS 3選擇器，甚至還有更強大的功能。

$

在jQuery程式中，最常見的就是$符號，那麼$到底是什麼意思呢？
其實，JavaScript的命名規範中，允許以$開頭命名變數，而jQuery則將$作為別名使用，也就是說：

$ = jQuery = window.$ = window.jquery

利用$，你可以簡化大量的程式碼量，減少你的程式碼體積。

jQuery選擇器

雖然JavaScript提供了getElementsByClassName()和getElementsByTagName()的方法，但是並不是所有瀏覽器都能正確的解析，所以不推薦使用原生態JavaScript程式碼。
jQuery對上述問題做了相容性處理，當瀏覽器支援以上方法時，jQuery呼叫該方法，否則，jQuery有自己的實現，確保在不同瀏覽器下都能生效。
下面給出jQuery選擇器的幾個例子：

*

選擇頁面所有的元素

a

選擇頁面所有連結元素(a元素)

selected-id

選擇頁面ID為selected-id的元素，如：

<p id="selected-id">csprojectedu.com</p>

選擇這個標籤的jQuery程式碼為：

$(`#selected-id`);

.selected-class

選擇頁面class為selected-class的元素，如：

<p class="selected-class">csprojectedu.com</p>

選擇這個標籤的jQuery程式碼為：

$(`.selected-class`);

.selected-classA.selected-classB

選擇頁面class為selected-classB且包含在selected-classA中的元素，如：

<div class="selected-classA">
  <p class="selected-classB">csprojectedu.com</p>
</div>

選擇這個標籤的jQuery程式碼為：

$(`.selected-classA.selected-classB`);

[selected-property]

選擇頁面屬性為selected-property的元素，如：

<p title="selected-property">csprojectedu.com</p>

選擇這個標籤的jQuery程式碼為：

$(`[selected-property]`);

jQuery選擇器高階用法

在實際程式設計中，只使用基礎選擇器是不夠的，除非你願意給每一個需要的元素建立ID或者Class，下面給出一些技巧：

層級選擇器

可以根據DOM層級來選擇元素，如：

<div class="A">
  <div class="B">
    <p class="C">csprojectedu.com</p>
  </div>
</div>

可以這樣來選擇：

$(`A > B > C`);

屬性選擇器

可以根據部分屬性來選擇元素，如：

<div class="A">
  <div class="B">
    <a href="http://www.baidu.com">Baidu</a>
  </div>
</div>

可以這樣來選擇：

$(`a[href^="http://"]`);

^是匹配開頭的意思，這樣可以找到所有以http開頭的連結元素。
反過來你也可以通過：

$(`a[href^!="http://"]`);

選擇所有非http開頭的連結元素。
事實上還有更多比較靈活的選擇器，如偽選擇器等。更多選擇器使用語法，可以參考W3School的CSS教程，這裡不再贅述。

Summary

本文簡單介紹了jQuery的選擇器，選擇器並不是jQuery 3特有的東西，本系列文章也不會深入去探索。如何精妙簡潔地使用選擇器，不是jQuery的重點，而是CSS的重點。此外，雖然jQuery有許多精妙的選擇器使用方法，但是過於注重程式碼的精簡，實際將會增加程式碼的可讀性和維護難度。

相關文章