jQuery複習

 

1 jQuery簡介

l 爲了簡化 JavaScript 的開發, 一些 JavsScript 庫誕生了. JavaScript庫封裝了不少預約義的對象和實用函數。能幫助使用者創建有高難度交互的頁面, 而且兼容各大瀏覽器

l 當前流行的 JavaScript 庫有

 

 

l jQuery是繼prototype以後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE。優點以下:

l 輕量級(壓縮後只有幾十k)

l 強大的選擇器

l 出色的 DOM 操做的封裝

l 可靠的事件處理機制

l 完善的 Ajax

l 出色的瀏覽器兼容性

l 鏈式操做方式

l 文檔說明很全.

l 可擴展插件

 

2. jQuery快速入門

2.1. 將jQuery的庫文件加入應用

l 在開發測試時, 用的是未壓縮的版本: jquery-1.7.2.js

l 在上線項目中, 會使用壓縮後的版本: jquery-1.7.2.min.js

2.2. 在頁面中導入並使用

<!-- 導入jQuery庫--> <script type="text/javascript" src="script/jquery-1.7.2.js"/> <script type="text/javascript"> //調用jQuery庫定義的函數 $(function(){ $("button").click(function(){ alert("----"); }); }); </script>

 

3. Jquery語法詳解

3.1. jQuery源碼初分析

(function(window) { var jQuery = function(selector, context) { return new jQuery.fn.init(selector, context, rootjQuery); };   window.jQuery = window.$ = jQuery; })(window);

說明:

l 自執行函數

l 給window添加了兩個等同的函數: jQuery()/$()

l 執行$()後,返回的是一個jQuery庫包裝的對象, 通常稱之爲:jQuery對象

3.2. 核心

1).  jQuery核心函數: $()

l jQuery庫中爲window對象定義了一個$函數(方法)

l $函數會根據參數數據類型的不一樣作不一樣的工做, 返回一個jQuery封裝的僞數組的對象

1.1). $(callback)

l 傳入一個function參數, 做爲回調函數

l 在DOM文檔載入完成後, 回調函數自動執行

l 這個函數的做用如同$(document).ready(callback)同樣

l 它與window.onload是有區別的

 

 

1.2). $(selector)

l 接收一個CSS選擇器格式的字符串參數

l 根據此字符串在document中去匹配一組元素, 並封裝成jQuery對象返回

1.3). $(domEle)

l 接收一個DOM對象類型的參數

l 返回包含這個dom對象的jQuery對象

l jQuery對象只能調用jQuery封裝的方法

l DOM對象只能調用DOM中所定義的方法

1.4). $(htmlString)

l 接收一個標籤字符串參數

l 建立對應的標籤對象, 幷包裝成jQuery對象

l 如: $("<div><p>Hello</p></div>")

2).  jQuery對象訪問

2.1). each(callback)

l callback函數:  function (index, domEle)  

l 遍歷jQuery對象中包含的全部DOM對象, 每拿到一個dom對象都會調用指定的回調函數, 並將下標和dom對象傳入

2.2). size() / length

l 獲得jQuery對象中包含的全部DOM對象的個數

2.3). [index] / get(index)

l 根據下標獲得jQuery對象中所包含的某個dom對象

l 經常使用此方法來將jQuery對象轉爲DOM對象

l 約定：若是獲取的是jQuery對象,那麼要在變量前面加上$.

var nameELe = document.getElementById("name") var $nameEle = $("name");

 

3.3. 選擇器(同css)

l jQuery最牛的地方就是其強大的選擇器, 使用其選擇器基本能夠快速輕鬆的找到頁面的任意節點

l jquery的選擇器分類

n 基本選擇器

n 層次選擇器

n 過濾選擇器

u 基本

u 內容

u 可見

u 屬性

u 子元素

u 表單

u 表單屬性

1). 基本選擇器

l 基本選擇器是jquery中最簡單，也是最經常使用的選擇器

l 它經過標籤名,id屬性,class屬性來查找匹配的DOM元素

1.1) id選擇器    

l 用法:  $(‘#id’)  

l 返回值：根據id屬性匹配一個標籤, 封裝成jQuery對象

1.2) 標籤選擇器

l 用法:  $(‘tagName’)

l 返回值：根據標籤名匹配的一個或多個標籤, 封裝成jQuery對象

1.3) class選擇器

l 用法:  $(‘.class’)

l 返回值：根據class屬性值匹配一個或多個標籤, 封裝成jQuery對象

1.4) *選擇器

l 用法:  $(*)  

l 返回值: 匹配全部標籤, 封裝成jQuery對象

1.5) selector1,selector2,…

l 用法:  $(」div,span,.myClass」)    

l 返回值: 全部匹配選擇器的標籤, 封裝成jQuery對象

 

2). 層次選擇器

l 若是想經過DOM元素之間的層次關係來獲取特定元素。例如子元素、兄弟元素等。則須要經過層次選擇器。

2.1). ancestor descendant

l 用法: $(」form input」)    

l 說明: 在給定的祖先元素下匹配全部後代元素

2.2) parent > child

l 用法: $(」form > input」)

l 說明: 在指定父元素下匹配全部子元素.注意:要區分好後代元素與子元素

2.3) prev + next

l 用法: $(」label + input」)

l 說明: 匹配全部緊接在prev元素後的next元素

2.4) prev ~ siblings

l 用法: $(」form ~ input」)

l 說明: 匹配prev元素以後的全部 siblings元素, 不包含該元素在內,而且siblings匹配的是和prev同輩的元素,其後輩元素不被匹配.

3). 基本過濾選擇器

l 過濾選擇器主要是經過特定的過濾規則來篩選出所需的DOM元素, 該選擇器都以 「:」 開頭

l 按照不一樣的過濾規則, 過濾選擇器能夠分爲基本過濾, 內容過濾, 可見性過濾, 屬性過濾, 子元素過濾, 表單過濾和表單屬性過濾選擇器.

3.1). :first

l 用法: $(」tr:first」) ;   

l 說明: 匹配找到的第一個元素

3.2). :last

l 用法: $(」tr:last」)  

l 說明: 匹配找到的最後一個元素.與 :first 相對應

3.3). :not(selector)

l 用法: $(」input:not(:checked)」)

l 說明: 去除全部與給定選擇器匹配的元素.有點相似於」非」,意思是沒有被選中的input(當input的type=」checkbox」).

3.4). :even

l 用法: $(」tr:even」)   

l 說明: 匹配全部索引值爲偶數的元素，從0開始計數.js的數組都是從0開始計數的.

3.5). : odd

l 用法: $(」tr:odd」)

l 說明: 匹配全部索引值爲奇數的元素,和:even對應,從 0 開始計數.

3.6). :eq(index)

l 用法: $(」tr:eq(0)」)   

l 說明: 匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括號裏面的是索引值,不是元素排列數.

3.7). :gt(index)

l 用法: $(」tr:gt(0)」)  

l 說明: 匹配全部大於給定索引值的元素.

3.8). :lt(index)

l 用法: $(」tr:lt(2)」)    

l 說明: 匹配全部小於給定索引值的元素.

4). 內容過濾選擇器

l 內容過濾選擇器的過濾規則主要體如今它所包含的子元素和文本內容上

4.1).  :contains(text)

l 用法: $(」div:contains(’John’)」)  

l 說明: 匹配包含給定文本的元素.這個選擇器比較有用，當咱們要選擇的不是dom標籤元素時,它就派上了用場了,它的做用是查找被標籤」圍」起來的文本內容是否符合指定的內容的.

4.2).  :empty

l 用法: $(」td:empty」)

l 說明: 匹配全部不包含子元素或者文本的空元素

4.3).  :has(selector)

l 用法: $(」div:has(p)」).addClass(」test」)

l 說明: 匹配含有選擇器所匹配的元素的元素.這個解釋須要好好琢磨,可是一旦看了使用的例子就徹底清楚了:給全部包含p元素的div標籤加上class=」test」.

4.4). :parent

l 用法: $(」td:parent」)

l 說明: 匹配含有子元素或者文本的元素.注意:這裏是」:parent」,可不是」.parent」哦!感受與上面講的」:empty」造成反義詞.

5). 可見過濾選擇器

l 根據元素的可見和不可見狀態來選擇相應的元素

5.1).  :hidden

l 用法: $(」tr:hidden」)

l 說明: 匹配全部的不可見元素，input 元素的 type 屬性爲 「hidden」 的話也會被匹配到.意思是css中display:none和input type=」hidden」的都會被匹配到.一樣,要在腦海中完全分清楚冒號」:」, 點號」.」和逗號」,」的區別.

5.2).  :visible

l 用法: $(」tr:visible」)  

l 說明: 匹配全部的可見元素.

6). 屬性過濾選擇器

l 屬性過濾選擇器的過濾規則是經過元素的屬性來獲取相應的元素

6.1). [attribute]

l 用法: $(」div[id]「)

l 說明: 匹配包含給定屬性的元素. 例子中是選取了全部帶id屬性的div標籤.

6.2). [attribute=value]

l 用法: $(」input[name='newsletter']「).attr(」checked」, true)

l 說明: 匹配給定的屬性是某個特定值的元素.例子中選取了全部name屬性是newsletter的 input 元素.

6.3). [attribute!=value]

l 用法: $(」input[name!='newsletter']「).attr(」checked」, true)。   

l 說明：匹配全部不含有指定的屬性，或者屬性不等於特定值的元素.此選擇器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value]).以前看到的 :not 派上了用場.

6.4). [attribute^=value]

l 用法: $(」input[name^=‘news’]「)

l 說明: 匹配給定的屬性是以某些值開始的元素.,咱們又見到了這幾個相似於正則匹配的符號.如今想忘都忘不掉了吧?!

6.5). [attribute$=value]

l 用法: $(」input[name$=‘letter’]「)

l 說明: 匹配給定的屬性是以某些值結尾的元素.

6.6). [attribute*=value]

l 用法: $(」input[name*=‘man’]「)

l 說明: 匹配給定的屬性是以包含某些值的元素.

7). 子元素過濾選擇器

7.1). :nth-child(index/even/odd/equation)

l 用法: $(」ul li:nth-child(2)」)

l 說明: 匹配其父元素下的第N個子或奇偶元素.這個選擇器和以前說的基礎過濾(Basic Filters)中的 eq() 有些相似,不一樣的地方就是前者是從0開始,後者是從1開始.

7.2). :first-child

l 用法: $(」ul li:first-child」) 

l 說明: 匹配第一個子元素.’:first’ 只匹配一個元素,而此選擇符將爲每一個父元素匹配一個子元素.這裏須要特別點的記憶下區別.

7.3). :last-child

l 用法: $(」ul li:last-child」)

l 說明: 匹配最後一個子元素.’:last’只匹配一個元素,而此選擇符將爲每一個父 元素匹配一個子元素.

7.4). : only-child

l 用法: $(」ul li:only-child」)

l 說明: 若是某個元素是父元素中惟一的子元素,那將會被匹配.若是父元素中含有其餘元素,那將不會被匹配.意思就是:只有一個子元素的纔會被匹配!

8). 表單選擇器

9.1). :input

l 用法: $(」:input」)  

l 說明:匹配全部 text, textarea, select 和 button 元素 

9.2). :text

l 用法: $(」:text」)

l 說明: 匹配全部的單行文本框.

9.3). :password

l 用法: $(」:password」)

l 說明: 匹配全部密碼框.

9.4). :radio

l 用法: $(」:radio」)

l 說明: 匹配全部單選按鈕.

9.5). :checkbox

l 用法: $(」:checkbox」)

l 說明: 匹配全部複選框

9.6). :submit

l 用法: $(」:submit」)

l 說明: 匹配全部提交按鈕

9.7). :image

l 用法: $(」:image」)

l 說明: 匹配全部圖像域.

9.8). :reset

l 用法: $(」:reset」)

l 說明: 匹配全部重置按鈕.

9.9). :button

l 用法: $(」:button」)

l 說明: 匹配全部按鈕.這個包括直接寫的元素button.

9.10). :file

l 用法: $(」:file」)

l 說明: 匹配全部文件域.

9.11). :hidden

l 用法: $(」input:hidden」)

l 說明: 匹配全部不可見元素，或者type爲hidden的元素.這個選擇器就不只限於表單了,除了匹配input中的hidden外,那些style爲hidden的也會被匹配.

9). 表單對象屬性過濾選擇器

l 此選擇器主要對所選擇的表單元素進行過濾

8.1). :enabled

l 用法: $(」input:enabled」)

l 說明: 匹配全部可用元素.意思是查找全部input中不帶有disabled=」disabled」的input.不爲disabled,固然就爲enabled啦.

8.1). :disabled

l 用法: $(」input:disabled」)

l 說明: 匹配全部不可用元素.與上面的那個是相對應的. 

8.1). :checked

l 用法: $(」input:checked」)

l 說明: 匹配全部選中的被選中元素(複選框、單選框等，不包括select中的option).這話提及來有些繞口.

8.1). :selected

l 用法: $(」select option:selected」)

l 說明: 匹配全部選中的option元素.

 

3.4. 文檔處理(CRUD)

1). 內部插入節點

1.1). append(content) 

l 向每一個匹配的元素的內部的結尾處追加內容

1.2). appendTo(content) 

l 把全部匹配的元素追加到另外一個指定的元素元素集合中

1.3). prepend(content)

l 向每一個匹配的元素的內部的開始處插入內容

1.4). prependTo(content) 

l 將每一個匹配的元素插入到指定的元素內部的開始處

2). 外部插入節點

2.1). after(content) :

l 在每一個匹配的元素以後插入內容

2.2). before(content)

l 在每一個匹配的元素以前插入內容

2.3). insertAfter(content)

l 把全部匹配的元素插入到另外一個、指定的元素元素集合的後面

2.4). insertBefore(content) 

l 把全部匹配的元素插入到另外一個、指定的元素元素集合的前面

3).查找節點

3.1). 使用jQuery選擇器查詢

l $(selector)

l 獲得一個包含全部匹配的dom節點對象的jQuery對象

3.2). 查詢jQuery對象內部數據

l $object.find(selector)

l 在Jquery對象中根據selector查找其中匹配的後代節點

3.3). 遍歷jQuery對象包含的數據

l $(selector1).each(function(index, itemDom){ })

l 遍歷jQuery對象所包含的全部節點, 每取一個dom節點對象都去調用設置的回調函數, 並將取出的節點在數組中的下標和節點對象傳入函數

4).建立節點

l $(htmlString).

l 動態建立的新元素節點不會被自動添加到文檔中, 須要使用其餘方法將其插入到文檔中;

l 當建立單個元素時, 需注意閉合標籤和使用標準的 XHTML 格式. 例如建立一個<p>元素, 可使用 $(「<p/>」) 或 $(「<p></p>」), 但不能使用 $(「<p>」) 或 $(「</P>」)

l 建立文本節點就是在建立元素節點時直接把文本內容寫出來; 建立屬性節點也是在建立元素節點時一塊兒建立

5). 刪除節點

5.1). empty():

l 刪除匹配的元素集合中全部的子節點(不包括自己)。

5.2). remove(): 

l 刪除匹配的元素及其子元素(包括自己)

6). 屬性操做

6.1). attr(name [,value])

l 根據屬性名獲取屬性值或者設置一個屬性

6.2).  removeAttr(name)

l 根據屬性名刪除對應的屬性

7). HTML代碼/值

7.1). html([val])

l 獲得元素的內容或者設置元素的內容

7.2). val([value])

l 得到匹配元素的當前值或者設置其值

8) CSS

8.1). addClass(className)

l 添加class屬性

8.2). removeClass()

l 移除class屬性

8.3). css(name,  [value])

l 查看某個樣式屬性, 或設置某個樣式屬性

3.5. 事件

1) 經常使用的事件

1.1). ready(fn)

l 當DOM載入就緒能夠查詢及操縱時綁定一個要執行的函數

l 它與window.onload是有區別的

 

1.2). click([fn]) 

l 觸發每個匹配元素的click事件

1.3). blur([fn]) 

l 觸發每個匹配元素的blur事件

1.4). change([fn]) 

l 觸發每個匹配元素的change事件

2) 綁定與解綁事件

2.1). bind(type, fn)

l 爲每一個匹配元素的特定事件綁定事件處理函數。

2.2).  unbind(type)

l bind()的反向操做，從每個匹配的元素中刪除綁定的事件

3) 事件切換

3.1). hover(over,out)

l 當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。

4) 事件冒泡

l 描述: 事件會按照 DOM 層次結構像水泡同樣不斷向上只止頂端

l 解決: 在事件處理函數中返回 false, 會對事件中止冒泡

3.6. 效果

1) 基本

1.1) show()

l 顯示當前標籤

1.2) hide()

l 隱藏當前標籤

1.3) toggle()

l 切換當前標籤的可見性

2) 滑動

2.1). slideDown()

l 這個動畫效果只調整元素的高度，可使匹配的元素以「滑動」的方式顯示出來

2.2). slideUp()

l 這個動畫效果只調整元素的高度，可使匹配的元素以「滑動」的方式隱藏起來

2.3). slideToggle()

l 經過高度變化來切換全部匹配元素的可見性

3) 淡入淡出

3.1). fadeIn()

l 經過不透明度的變化來實現全部匹配元素的淡入效果

3.2). fadeOut()

l 經過不透明度的變化來實現全部匹配元素的淡出效果

3.3). fadeToggle()

l 經過不透明度的變化來開關全部匹配元素的淡入和淡出效果

3.7. 處理XML文件

1) 加載XML文件

l 可使用$函數中定義的get()函數或post()函數加載本地或遠程的xml文件, 獲得文件中包含的dom數據

l get(path, fn, dataType)   post(path, fn, dataType)

l 例子:

$.get( "cities.xml", function(dom){ //dom爲cities.xml包含的文檔對象 }, "xml" );

 

2) 操做XML數據

 

4. 練習

4.1. 練習1: 愛好選擇

 

4.2. 練習2: 分類動態展現

 

 

 

 

 

4.3. 練習3: 動態查看圖片

 

 

 

 

 

4.4. 練習4: 員工管理

 

4.5. 練習5: 二級聯動