jQuery學習系列筆記（二）

餘二五發表於2017-11-22
jQuery筆記

上一篇屬於對jQuery進行一個簡單的概述，這篇我們重點學習一下jQuery選擇器最強大的、使用最頻繁的兩個功能：

（1）利用選擇器選擇DOM元素

（2）建立新的DOM元素

一、選擇將被操作的元素

jQuery的元素選擇方法是集大成的，包括通過元素ID，CSS類，標籤名稱以及頁面元素的DOM層次結構進行選擇。

大家可以根據選擇器實驗室(Selector Lab)這個頁面結合這篇文章來學習，實際操作。

1、利用基本CSS選擇器

下面舉幾個簡單的例子給大家熱熱身

（1）選擇器匹配所有連結元素

1
$("a");

（2）選擇器匹配id為specialID的元素

1
$("#specialID");

（3）選擇器匹配擁有CSS類specialClass的元素

1
$(".specialClass");

（4）選擇匹配id為specialID、擁有CSS類specialClass的連結元素

1
$("a#specialID.specialClass");

（5）選擇器匹配擁有CSS類specialClass、在<p>元素內宣告的連結元素

1
$("p a.specialClass");

總的來說，jQuery就是支援CSS，包括完全相容CSS3，反正在學jQuery之前，我對CSS是什麼也完全不知道，現在瞭解的也僅僅是它是一個樣式開發的東東。不過我想這也完全不影響我學習jQuery。

2、利用子選擇器、容器選擇器和特性選擇器

下面見識一下稍微高階一點的玩法。這樣一段html程式碼。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ulclass="list">
  <li><ahref="http://jquery.com">jQuery supports</a>
    <ul>
      <li><ahref="css1">CSS1</a></li>
      <li><ahref="css2">CSS2</a></li>
      <li><ahref="css3">CSS3</a></li>
      <li>Basic XPath</li>
    </ul>
  </li>
  <li>jQuery also supports
    <ul>
      <li>Custom selectors</li>
      <li>Form selectors</li>
    </ul>
  </li>
</ul>

如果我現在想選擇第2行<a>元素，那麼選擇器要怎麼寫？也許你會馬上想到這樣

1
$("ul.list li a");

當然，這麼寫我們是選擇上了第2行的<a>元素，但是我們也同時把4，5，6行的<a>元素也選擇上了。這並不是我們想要的，所以子選擇器“>”登場。

1
$("ul.list > li > a");

這樣就獨一無二的選擇出了第2行的<a>元素。“>”是選擇父節點的直接子節點。

同樣，使用特性選擇器也能達到我們想要的結果。因為第2行的<a>元素有href特性，並且其值為字串“http://”使其與眾不同，所以利用這一特性便能準確的匹配出我們想要的。

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

“^”表示選擇器匹配包含以http://開頭的href值的所有連結。如果替換成“$”，則表示選擇器匹配包含以http://結尾的所有連結。替換成“*”表示選擇器匹配任何部位中包含http://字串的所有連結。

接著是容器選擇器，是指有時我們選擇的元素包含在某個其他元素中。舉個例子：想要找到所有包含連結的列表元素。可以這樣寫

1
$("li:has(a)");

這塊提一下，這麼寫絕對與

1
$("li a");

表達的意思不一樣，前者表示包含<a>的<li>元素，後者表示在<li>中的<a>元素。指的目標元素不同。

3、通過位置選擇

有時候根據元素在頁面上的位置或者與其他元素的關係去選擇元素，會使問題變得更加簡單。

比如：頁面上的第一個<a>元素，我們可以寫成

1
$("a:first");

列表元素的最後一個子節點

1
$("li:last-child");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<table id="languages" border="0" cellspacing="1">
  <thead>
    <tr>
      <th>Language</th>
      <th>Type</th>
      <th>Invented</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Java</td>
      <td>Static</td>
      <td>1995</td>
    </tr>
    <tr>
      <td>Ruby</td>
      <td>Dynamic</td>
      <td>1993</td>
    </tr>
    <tr>
      <td>Smalltalk</td>
      <td>Dynamic</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>C++</td>
      <td>Static</td>
      <td>1983</td>
    </tr>
  </tbody>
</table> 
有這麼一段html程式碼，生成的格式即為


2XCY7]4N}TA9B3UHGSECAR6

根據這個表格再介紹幾個位置選擇的語法。

（1）選擇匹配Language這列

1
$("table td:first-child");


或者


1
$("table td:nth-child(1)");

要說明的是:nth-child()裡的索引是從1開始記數的。

80]04BH{NV]ZDABP4OA97R2

（2）選擇匹配第三行，第三列的元素，“1972”

1
$("table td:eq(5)");

要注意的是這裡的:eq()裡的索引是從我們熟悉的0開始的。

OPD3@106LGI}WUCIQU$_IV0

（3）選擇匹配第三行，第三列之前的所有元素

1
$("table td:lt(5)")

KM6~1NHJE05EL_%GBIZNJMM[4]

4、利用自定義jQuery選擇器

有些時候我們只依賴於CSS規範沒法達到我們目的，所以jQuery為我們提供了自定義選擇器，這樣選擇器真的就變的越發的強大了。

具體的自定義jQuery選擇器有哪些，大家可以到網上查一下，我只介紹一個， :not篩選器

篩選選擇器：通過對元素應用更高的選擇標準，縮小正在匹配的元素的集合。比如“input:not(:checkbox)”選擇非核取方塊的<input>元素。篩選選擇器一般都是以冒號（:）或者左方括號（[）開頭。除篩選選擇器外，其他任何選擇器都不能在:not()篩選器裡使用。

查詢選擇器：查詢與已選擇元素具有某種關係的其他元素。比如 “li a ”已選擇元素li 包含關係的元素a。另外，後代選擇器、子節點選擇器、兄弟節點選擇器均屬於這一範疇。

關於這兩個定義我也有點沒太理解好，大家可以在使用中多多體會。

二、生成新HTML

本來這篇不想再寫這個標題的， 邊學邊寫總覺得有點累，但是當我學習完這部分的內容之後，又有點熱血沸騰了，所以想給大家表一下。

上篇我們其實也寫了一個演示了一個比較簡單的例子，新建一個段落元素

1
$("Hello World");

下面的程式碼大家注意了，很好玩。

1
2
3
4
$("<div class=`iron`>I am iron man!<div>I am Tony Stark")
.filter(".iron").click(function(){
    alert("I`m Iron Man!");
}).end().appendTo("#Avengers");

解釋一下，開始建立了兩個<div>元素，一個帶有類iron，一個沒有，.filter選擇出帶有類iron的<div>，並給它繫結滑鼠點選事件，一點選這個<div>就會出現對話方塊“I’m Iron Man!”，再用.end還原到兩個<div>的完整集合，再使用.appendTo把這兩個新建的元素追加到id為Avengers的元素之後，從而把它們繫結到DOM樹。

哇！大家好好體會一下，在建立的同時，把所有相關的事情都做了，幾乎就像是原html程式碼一樣。有沒有很爽？


今天就先寫到這裡，有點累了，不過還沒結束，關於建立元素包裝集的內容會在 jQuery 學習系列筆記（二）（續） 中表給大家

本文轉自 我不會抽菸 51CTO部落格，原文連結：http://blog.51cto.com/zhouhongyu1989/1400682，如需轉載請自行聯絡原作者


相關文章