鋒利的jquery DOM學習

2021-08-31 08:15:44 字數 2539 閱讀 7829

dom (document object model),即文件物件模型

dom操作一般分為類。即:1、dom core(核心);

2、html-dom;

3、css-dom;

1、dom core(核心)

2、新增節點

3、刪除節點(remove()和empty())

remove()刪除節點和內容,不保留節點。

empty()刪除節點的內容,保留節點。

4、複製節點

clone(true)true表示在複製節點,同時也複製元素所繫結的事件。

5、替換節點

replacewith()   和  replaceall()

6、包裹節點

wrap()    將所有的匹配的元素進行單獨地包裹。

wrapall()  將所有匹配的元素用乙個元素來包裹。

wrapinner() 將每乙個匹配的子內容用乙個元素來包裹。

屬性的操作

1、用attr()方法來獲取和設定元素的屬性值。removeattr()方法來刪除元素的屬性。

類似方法有:

html()、text()、

height()、

width()、val()、

css()、

樣式的操作

1、attr()可以用來設定和獲取class屬性

2、追加樣式addclass()

3、刪除樣式removeclass()若沒有括號中沒有樣式名,則表示把匹配元素的所有樣式刪除。若指定某個樣式的話,則表示只刪除指定的樣式。

4、切換樣式toggle(),function()}

toggleclass()   如果存在樣式,就刪除;如果不存在就新增樣式。

5、hasclass()判斷是否含有某個樣式

6、show(speed,[callback])

speed(string,number) : 三種預定速度之一的字串("slow", "normal", or "fast")

或表示動畫時長的毫秒數值(如:1000)

callback(function) : (optional) 在動畫完成時執行的函式,每個元素執行一次。

css-dom

1、offset()獲取元素在當前視窗的偏移量。得到topleft兩個屬性。(只對可見元素有效 )

2、position()

獲取元素相對於最近乙個position樣式屬性設定為relative或者是absolute 的 祖父節點的偏移量;

得到topleft兩個屬性。

3、scrolltop()元素的滾動條距頂端的距離

4、scrollleft()元素的滾動條距左側的距離。

dom操作參考例子:提示效果圖   《鋒利的jquery》 p95

jquery物件和dom物件相互轉換

1、jquery物件----->dom物件

var  $cr = $("#cr");    //jquery物件

var cr = $cr[0]; //dom物件

//var cr = $cr.get(0);

alert(cr.checked); //檢查這個元素是否被選中

2、dom物件----->jquery物件

var cr = document.getelementbyid("cr"); //dom物件

var $cr = $(cr); //jquery物件

鋒利的jquery學習

jquery物件是通過jquery包裝dom物件後產生的物件,是jquery獨有的。jquery物件無法使用dom物件的任何方法,dom物件也不能使用jquery物件的方法。jquery提供兩個方法將乙個jquery物件轉換成dom物件。var cr cr jquery物件 var cr cr 0 ...

HTML 學習筆記 JQuery(DOM 操作2)

接著上一節的將,這一節從複製節點講起 繼續使用之前的例子 如果單擊元素後 需要在複製乙個元素,可以使用clone 方法完成。全部 如下 html head meta charset utf 8 title title script src js jquery 2.1.1.min.js script ...

jQuery Dom操作的區別

2.prepend 和prependto a.prepend b 將b前置到a中a.prependto b 將a前置到b中3.after 和insertafter a.after b 將b插到a之後 aba.insertafter b 將a插到b之後 ba4.before 和 insertbefor...