jQuery零基礎入門——（三）層級選擇器

《jQuery零基礎入門》系列博文是在廖雪峯老師的博文基礎上，補充了我的的理解和平常遇到的點，用個人理解表述出來，主幹出處來自廖雪峯老師的技術分享。

除了基本的選擇器外，jQuery的層級選擇器更加靈活，也更強大。

由於DOM的結構就是樹形結構，因此咱們常常要根據層級關係進行選擇。

層級選擇器（Descendant Selector）

若是兩個DOM元素具備層級關係，就能夠用$('上級 下級')來選擇，層級之間用空格隔開。例如：

<div class="d1">
	<ul class="lang">
		<li class="lang-js">JavaScript</li>
		<li class="lang-jq">jQuery</li>
		<li class="lang-css">CSS</li>
	</ul>
</div>

要選出jQuery，能夠用層級選擇器：

$("ul.lang li.lang-jq");//能夠取到
$("div.d1 li.lang-jq");//能夠取到

由於<div>和<ul>都是<li>的祖先節點，因此上面兩種方式均可以選出相應的<li>節點。

要選擇全部的<li>節點，用：

$('ul.lang li');

這種層級選擇器相比單個的選擇器好處在於，它縮小了選擇範圍，由於首先要定位父節點，才能選擇相應的子節點，這樣避免了頁面其餘不相關的元素。

子選擇器（Child Selector）

子選擇器$('parent>child')相似層級選擇器，可是限定了層級關係必須是父子關係，就是<child>節點必須是<parent>節點的直屬子節點。仍是以上面的例子：

$("ul.lang>li.lang-jq");//能夠取到
$("div.d1>li.lang-jq");//沒法取到，不是父子級關係

過濾器（Filter）

過濾器通常不單獨使用，它一般附加在選擇器上，幫助咱們更精確地定位元素。觀察過濾器的效果：

$('ul.lang li:first-child'); // 僅選出JavaScript
$('ul.lang li:last-child'); // 僅選出css

表單相關

• .input：能夠選擇<input>，<textarea>，<select>和<button>；

• :file：能夠選擇<input type="file">，和input[type=file]同樣；

• :checkbox：能夠選擇複選框，和input[type=checkbox]同樣；

• :focus：能夠選擇當前輸入焦點的元素，例如把光標放到一個<input>上，用$('input:focus')就能夠選出；

• :radio：能夠選擇單選框，和input[type=radio]同樣；

• :checked：選擇當前勾上的單選框和複選框，用這個選擇器能夠馬上得到用戶選擇的項目，如$('input[type=radio]:checked')；

• :enabled：能夠選擇能夠正常輸入的<input>、<select> 等，也就是沒有灰掉的輸入；

• :disabled：和:enabled正好相反，選擇那些不能輸入的。

此外，jQuery還有不少有用的選擇器，例如，選出可見的或隱藏的元素：

$('div:visible'); // 全部可見的div
$('div:hidden'); // 全部隱藏的div