jQuery學習筆記之DOM操作、事件綁定（2）
————————————————————學習目錄————————————————————————
4.DOM操作
5.事件綁定

源碼地址：

https://github.com/iyun/jQueryDemo.git

————————————————————學習目錄————————————————————————
4.DOM操作（節點增刪改查）

節點查找：節點分為三種類型：元素節點、屬性節點、文本節點

創建節點
創建元素節點
使用 jQuery 的工廠函數 $(HTML) 。該工廠函數會根據傳入的 html 標記字符串創建一個 DOM 對象, 并把這個 DOM 對象包裝成一個 jQuery 對象返回。
當創建單個元素時, 需注意閉合標簽。

var $option = $("<option></option>"); 創建文本節點創建元素節點后，使用text()方法來設置其節點的文本內容。 $option.text("北京"); 創建元素節點時，直接將其節點的文本內容插入其中。 var $option = $("<option>北京</option>"); 創建屬性節點創建元素節點后，使用attr()方法來設置其節點的屬性。 $option.attr("value","北京"); 創建元素節點時，直接將其節點的屬性插入其中。 var $option = $("<option value="北京">北京</option>");

插入節點
內部插入節點
append(content) :向每個匹配的元素的內部的結尾處追加內容
appendTo(content) :將每個匹配的元素追加到指定的元素中的內部結尾處
prepend(content):向每個匹配的元素的內部的開始處插入內容
prependTo(content) :將每個匹配的元素插入到指定的元素內部的開始處外部插入節點
after(content) :在每個匹配的元素之后插入內容
before(content):在每個匹配的元素之前插入內容
insertAfter(content):把所有匹配的元素插入到另一個、指定的元素元素集合的后面
insertBefore(content) :把所有匹配的元素插入到另一個、指定的元素元素集合的前面

刪除節點
remove(): 從 DOM 中刪除所有匹配的元素, 傳入的參數用于根據 jQuery 表達式來篩選元素. 當某個節點用 remove() 方法刪除后, 該節點所包含的所有后代節點將被同時刪除. 這個方法的返回值是一個指向已被刪除的節點的引用。
empty(): 清空節點 – 清空元素中的所有后代節點(不包含屬性節點)。

復制節點
clone(): 克隆匹配的 DOM 元素, 返回值為克隆后的副本. 但此時復制的新節點不具有任何行為.
clone(true): 復制元素的同時也復制元素中的的事件

<button>保存</button><p>段落</p>$("button").click(function(){alert("點擊按鈕");});//克隆節點，不克隆事件$("button").clone().appendTo("p");//克隆節點，克隆事件$("button").clone(true).appendTo("p");

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

//<p>段落</p>//方式一$("p").replaceWith("<button>登陸</button>");//方式二$("<button>登陸</button>").replaceAll("p");

屬性操作
attr(): 獲取屬性和設置屬性。
當為該方法傳遞一個參數時, 即為某元素的獲取指定屬性。
當為該方法傳遞兩個參數時, 即為某元素設置指定屬性的值。
jQuery 中有很多方法都是一個函數實現獲取和設置. 如: attr(), html(), text(), val(), height(), width(), css() 等。
removeAttr(“屬性名”): 刪除指定元素的指定屬性

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

遍歷節點
取得匹配元素的所有子元素組成的集合: children(). 該方法只考慮子元素而不考慮任何后代元素.
取得匹配元素后面緊鄰的同輩元素下一個元素:next();
取得匹配元素前面緊鄰的同輩元素上一個元素:prev()
取得匹配元素前后所有的同輩元素: siblings()
在jQuery中還有很多遍歷節點的方法，具體參看API幫助文檔。

包裹節點
wrap()

<strong title="jQuery">jQuery</strong><strong title="jQuery">jQuery</strong>//jQuery代碼如下：$("strong").wrap("<b></b>");//得到的結果如下<b><strong title="jQuery">jQuery</strong></b><b><strong title="jQuery">jQuery</strong></b> wrapAll() <strong title="jQuery">jQuery</strong><strong title="jQuery">jQuery</strong>//jQuery代碼如下：$("strong").wrapAll("<b></b>");//得到的結果如下<b><strong title="jQuery">jQuery</strong><strong title="jQuery">jQuery</strong></b> wrapInner() <strong title="jQuery">jQuery</strong>//jQuery代碼如下：$("strong"). wrapInner("<b></b>");//得到的結果如下<strong title="jQuery"><b>jQuery</b></strong>

5.jQuery 中的事件
在頁面加載完畢后, 瀏覽器會通過 JavaScript 為 DOM 元素添加事件.
在常規的 JavaScript 代碼中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

面試題：
1.在js里面可以使用widow.οnlοad= 當頁面上面所有的元素加載完畢之后執行觸發。
2.$(function(){}) == window.jQuery(document).ready(function());
兩者的區別：
執行時機：window.onload它需要等待頁面上面所有元素都加載完畢，包括圖片，src=“”
$(function(){})只需要頁面上面的dom元素繪制完畢之后就執行，不含圖片或者第三方的連接地址…

事件綁定
我們除了可以直接為頁面的元素增加事件，也可以利用bind()方法為頁面元素來綁定事件。
語法：bind(type, [data], fn)
參數type：含有一個或多個事件類型的字符串。
提供可以綁定的事件有：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error。
參數data：作為event.data屬性值傳遞給事件對象的額外數據對象。如{username:"雷"} json格式 alert(event.data.username);
參數fn：綁定到每個匹配元素的事件上面的處理函數。

事件解綁unbind

//瀏覽器提供一個對象用來調試，即控制臺信息`console.info(event);` 常用：`mouseover mouseout`

總結

以上是生活随笔為你收集整理的jQuery学习笔记之DOM操作、事件绑定（2）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。