一、jQuery 簡介

jQuery 是繼 Prototype 之后又一個(gè)優(yōu)秀的 JavaScript 庫
jQuery 理念: 寫得少, 做得多. 優(yōu)勢如下:
輕量級(jí)
強(qiáng)大的選擇器
出色的 DOM 操作的封裝
可靠的事件處理機(jī)制
完善的 Ajax
出色的瀏覽器兼容性
鏈?zhǔn)讲僮鞣绞?BR>……

第一個(gè)案例

二、jQuery 對(duì)象

jQuery 對(duì)象就是通過 jQuery ($()) 包裝 DOM 對(duì)象后產(chǎn)生的對(duì)象
jQuery 對(duì)象是 jQuery 獨(dú)有的. 如果一個(gè)對(duì)象是 jQuery 對(duì)象, 那么它就可以使用 jQuery 里的方法: $(“#persontab”).html();
jQuery 對(duì)象無法使用 DOM 對(duì)象的任何方法, 同樣 DOM 對(duì)象也不能使用 jQuery 里的任何方法
約定：如果獲取的是 jQuery 對(duì)象, 那么要在變量前面加上 $.  
var $variable = jQuery 對(duì)象
var variable = DOM 對(duì)象

三、DOM 對(duì)象轉(zhuǎn)成 jQuery 對(duì)象

對(duì)于一個(gè) DOM 對(duì)象, 只需要用 $() 把 DOM 對(duì)象包裝起來(jQuery 對(duì)象就是通過 jQuery 包裝 DOM 對(duì)象后產(chǎn)生的對(duì)象), 就可以獲得一個(gè) jQuery 對(duì)象.

var dc=document.getElement("aa");

var $dc=$(dc);
   轉(zhuǎn)換后就可以使用 jQuery 中的方法了

jQuery 對(duì)象轉(zhuǎn)成 DOM 對(duì)象

jQuery 對(duì)象不能使用 DOM 中的方法, 但如果 jQuery 沒有封裝想要的方法, 不得不使用 DOM 對(duì)象的時(shí)候, 有如下兩種處理方法:
(1) jQuery 對(duì)象是一個(gè)數(shù)組對(duì)象, 可以通過 [index] 的方法得到對(duì)應(yīng)的 DOM對(duì)象. 

var $dc=$("#dc");

var dc=$dc[0];

(2) 使用 jQuery 中的 get(index) 方法得到相應(yīng)的 DOM 對(duì)象  

                 var $dc=$("#dc");

               var dc=$dc.get(0);

四、jQuery 選擇器

基本選擇器

基本選擇器是 jQuery 中最常用的選擇器, 也是最簡單的選擇器, 它通過元素 id, class 和標(biāo)簽名來查找 DOM 元素(在網(wǎng)頁中 id 只能使用一次, class 允許重復(fù)使用).

層次選擇器

如果想通過 DOM 元素之間的層次關(guān)系來獲取特定元素, 例如后代元素, 子元素, 相鄰元素, 兄弟元素等, 則需要使用層次選擇器.

注意:  (“prev ~ div”) 選擇器只能選擇 “# prev ” 元素后面的同輩元素; 而 jQuery 中的方法 siblings() 與前后位置無關(guān), 只要是同輩節(jié)點(diǎn)就可以選取

過濾選擇器

過濾選擇器主要是通過特定的過濾規(guī)則來篩選出所需的 DOM 元素, 該選擇器都以 “:” 開頭
按照不同的過濾規(guī)則, 過濾選擇器可以分為基本過濾, 內(nèi)容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單對(duì)象屬性過濾選擇器.

基本過濾選擇器

內(nèi)容過濾選擇器

內(nèi)容過濾選擇器的過濾規(guī)則主要體現(xiàn)在它所包含的子元素和文本內(nèi)容上

可見性過濾選擇器

可見性過濾選擇器是根據(jù)元素的可見和不可見狀態(tài)來選擇相應(yīng)的元素

可見選擇器 :hidden 不僅包含樣式屬性 display 為 none 的元素, 也包含文本隱藏域 (<input  type=“hidden”>)和 visible:hidden 之類的元素

屬性過濾選擇器

屬性過濾選擇器的過濾規(guī)則是通過元素的屬性來獲取相應(yīng)的元素

子元素過濾選擇器

nth-child() 選擇器詳解如下：
(1) :nth-child(even/odd): 能選取每個(gè)父元素下的索引值為偶(奇)數(shù)的元素
(2):nth-child(2): 能選取每個(gè)父元素下的索引值為 2 的元素
(3):nth-child(3n): 能選取每個(gè)父元素下的索引值是 3 的倍數(shù) 的元素
(3):nth-child(3n + 1): 能選取每個(gè)父元素下的索引值是 3n + 1的元素

一、表單對(duì)象屬性過濾選擇器

此選擇器主要對(duì)所選擇的表單元素進(jìn)行過濾

二、表單選擇器

三、jQuery 中的 DOM 操作

1、DOM(Document Object Model—文檔對(duì)象模型)：一種與瀏覽器, 平臺(tái), 語言無關(guān)的接口, 使用該接口可以輕松地訪問頁面中所有的標(biāo)準(zhǔn)組件
DOM 操作的分類:
2、DOM Core: DOM Core 并不專屬于 JavaScript, 任何一種支持 DOM 的程序設(shè)計(jì)語言都可以使用它. 它的用途并非僅限于處理網(wǎng)頁, 也可以用來處理任何一種是用標(biāo)記語言編寫出來的文檔, 例如: XML
HTML DOM: 使用 JavaScript 和 DOM 為 HTML 文件編寫腳本時(shí),　有許多專屬于 HTML-DOM 的屬性
CSS-DOM:針對(duì)于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于獲取和設(shè)置 style 對(duì)象的各種屬性

四、查找節(jié)點(diǎn)

查找節(jié)點(diǎn):
查找元素節(jié)點(diǎn): 通過 jQuery 選擇器完成.
查找屬性節(jié)點(diǎn): 查找到所需要的元素之后, 可以調(diào)用 jQuery 對(duì)象的 attr() 方法來獲取它的各種屬性值

五、創(chuàng)建節(jié)點(diǎn)

創(chuàng)建節(jié)點(diǎn): 使用 jQuery 的工廠函數(shù) $(): $(html); 會(huì)根據(jù)傳入的 html 標(biāo)記字符串創(chuàng)建一個(gè) DOM 對(duì)象, 并把這個(gè) DOM 對(duì)象包裝成一個(gè) jQuery 對(duì)象返回.
注意:
動(dòng)態(tài)創(chuàng)建的新元素節(jié)點(diǎn)不會(huì)被自動(dòng)添加到文檔中, 而是需要使用其他方法將其插入到文檔中;
當(dāng)創(chuàng)建單個(gè)元素時(shí), 需注意閉合標(biāo)簽和使用標(biāo)準(zhǔn)的 XHTML 格式. 例如創(chuàng)建一個(gè)<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“<P>”)
創(chuàng)建文本節(jié)點(diǎn)就是在創(chuàng)建元素節(jié)點(diǎn)時(shí)直接把文本內(nèi)容寫出來; 創(chuàng)建屬性節(jié)點(diǎn)也是在創(chuàng)建元素節(jié)點(diǎn)時(shí)一起創(chuàng)建

六、插入節(jié)點(diǎn)(1)

動(dòng)態(tài)創(chuàng)建 HTML 元素并沒有實(shí)際用處, 還需要將新創(chuàng)建的節(jié)點(diǎn)插入到文檔中, 即成為文檔中某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)

七、插入節(jié)點(diǎn)(2)

以上方法不但能將新創(chuàng)建的 DOM 元素插入到文檔中, 也能對(duì)原有的 DOM 元素進(jìn)行移動(dòng).

八、刪除節(jié)點(diǎn)

1、remove(): 從 DOM 中刪除所有匹配的元素, 傳入的參數(shù)用于根據(jù) jQuery 表達(dá)式來篩選元素. 當(dāng)某個(gè)節(jié)點(diǎn)用 remove() 方法刪除后, 該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將被同時(shí)刪除. 這個(gè)方法的返回值是一個(gè)指向已被刪除的節(jié)點(diǎn)的引用.
2、empty(): 清空節(jié)點(diǎn) – 清空元素中的所有后代節(jié)點(diǎn)(不包含屬性節(jié)點(diǎn)).

九、復(fù)制節(jié)點(diǎn)

1、clone(): 克隆匹配的 DOM 元素, 返回值為克隆后的副本. 但此時(shí)復(fù)制的新節(jié)點(diǎn)不具有任何行為.
2、clone(true): 復(fù)制元素的同時(shí)也復(fù)制元素中的的事件

十、替換節(jié)點(diǎn)

1、replaceWith(): 將所有匹配的元素都替換為指定的 HTML 或 DOM 元素
2、replaceAll(): 顛倒了的 replaceWith() 方法.
注意: 若在替換之前, 已經(jīng)在元素上綁定了事件, 替換后原先綁定的事件會(huì)與原先的元素一起消失

十一、包裹節(jié)點(diǎn)

wrap(): 將指定節(jié)點(diǎn)用其他標(biāo)記包裹起來. 該方法對(duì)于需要在文檔中插入額外的結(jié)構(gòu)化標(biāo)記非常有用, 而且不會(huì)破壞原始文檔的語義.
wrapAll(): 將所有匹配的元素用一個(gè)元素來包裹. 而 wrap() 方法是將所有的元素進(jìn)行單獨(dú)包裹.
wrapInner(): 將每一個(gè)匹配的元素的子內(nèi)容(包括文本節(jié)點(diǎn))用其他結(jié)構(gòu)化標(biāo)記包裹起來.

十二、屬性操作

attr(): 獲取屬性和設(shè)置屬性
當(dāng)為該方法傳遞一個(gè)參數(shù)時(shí), 即為某元素的獲取指定屬性
當(dāng)為該方法傳遞兩個(gè)參數(shù)時(shí), 即為某元素設(shè)置指定屬性的值
jQuery 中有很多方法都是一個(gè)函數(shù)實(shí)現(xiàn)獲取和設(shè)置. 如: attr(), html(), text(), val(), height(), width(), css() 等.
removeAttr(): 刪除指定元素的指定屬性

十三、設(shè)置和獲取 HTML, 文本和值

讀取和設(shè)置某個(gè)元素中的 HTML 內(nèi)容: html() . 該方法可以用于 XHTML, 但不能用于 XML 文檔
讀取和設(shè)置某個(gè)元素中的文本內(nèi)容: text(). 該方法既可以用于 XHTML 也可以用于 XML 文檔.
讀取和設(shè)置某個(gè)元素中的值: val() --- 該方法類似 JavaScript 中的 value 屬性. 對(duì)于文本框, 下拉列表框, 單選框該方法可返回元素的值(多選框只能返回第一個(gè)值).如果為多選下拉列表框, 則返回一個(gè)包含所有選擇值的數(shù)組

十四、常用的遍歷節(jié)點(diǎn)方法

取得匹配元素的所有子元素組成的集合: children(). 該方法只考慮子元素而不考慮任何后代元素.
取得匹配元素后面緊鄰的同輩元素的集合(但集合中只有一個(gè)元素): next()
取得匹配元素前面緊鄰的同輩元素的集合(但集合中只有一個(gè)元素): prev()
取得匹配元素前后所有的同輩元素: siblings()

十五、樣式操作

獲取 class 和設(shè)置 class : class 是元素的一個(gè)屬性, 所以獲取 class 和設(shè)置 class 都可以使用 attr() 方法來完成.
追加樣式: addClass() 
移除樣式: removeClass() --- 從匹配的元素中刪除全部或指定的 class
切換樣式: toggleClass()  --- 控制樣式上的重復(fù)切換.如果類名存在則刪除它, 如果類名不存在則添加它.
判斷是否含有某個(gè)樣式: hasClass() --- 判斷元素中是否含有某個(gè) class, 如果有, 則返回 true; 否則返回 false
 

最新評(píng)論