jQuery 3教程(二)：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有許多精妙的選擇器使用方法，可是過於注重代碼的精簡，實際將會增長代碼的可讀性和維護難度。