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程式碼,生成的格式即為
根據這個表格再介紹幾個位置選擇的語法。
(1)選擇匹配Language這列
1
|
$( "table td:first-child" );
|
或者
1
|
$( "table td:nth-child(1)" );
|
要說明的是:nth-child()裡的索引是從1開始記數的。
(2)選擇匹配第三行,第三列的元素,“1972”
1
|
$( "table td:eq(5)" );
|
要注意的是這裡的:eq()裡的索引是從我們熟悉的0開始的。
(3)選擇匹配第三行,第三列之前的所有元素
1
|
$( "table td:lt(5)" )
|
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 學習系列筆記(二)(續) 中表給大家
相關文章
- jQuery 學習系列筆記jQuery筆記
- jQuery學習筆記jQuery筆記
- jQuery 學習筆記jQuery筆記
- 架構學習筆記系列二架構筆記
- Jquery學習筆記(一)jQuery筆記
- jQuery學習筆記03jQuery筆記
- jQuery學習筆記(ajax)jQuery筆記
- jQuery 學習筆記:jQuery 程式碼結構jQuery筆記
- jQuery原始碼學習筆記一jQuery原始碼筆記
- JQuery學習系列jQuery
- PHP從零開始系列二(學習筆記):序言PHP筆記
- React 學習筆記【二】React筆記
- TensorFlow學習筆記(二)筆記
- vue學習筆記二Vue筆記
- goLang學習筆記(二)Golang筆記
- ANFIS學習筆記(二)筆記
- activiti學習筆記二筆記
- Typescript學習筆記(二)TypeScript筆記
- python學習筆記(二)Python筆記
- TS學習筆記(二)筆記
- JavaScript學習筆記(二)JavaScript筆記
- Hibernate學習筆記二筆記
- Vue學習筆記(二)------axios學習Vue筆記iOS
- Java學習筆記系列-反射Java筆記反射
- Java學習筆記記錄(二)Java筆記
- 高等數學學習筆記(二)筆記
- 深度學習 DEEP LEARNING 學習筆記(二)深度學習筆記
- Spring MVC學習筆記二SpringMVC筆記
- TS學習筆記(二):介面筆記
- github--學習筆記(二)Github筆記
- react native學習筆記(二)React Native筆記
- orientDB學習筆記(二)MATCH筆記
- 智慧窗-學習筆記(二)筆記
- PHP + MySQL 學習筆記(七)--- jQuery 及 jQuery Mobile 簡介 + 兩個 練習PHPMySql筆記jQuery
- 架構學習筆記系列三架構筆記
- 架構學習筆記系列一架構筆記
- [寒假學習筆記](二)Python初學筆記Python
- JQuery學習記錄jQuery
- HTML入門學習筆記(二)HTML筆記