jQuery節點操作方法大全

2022-05-14 09:18:11 字數 3506 閱讀 6499

向每個匹配的元素內部追加內容

html**:

我想說:

jquery**:

結果:我想說:你好

html**:

我想說:

jquery**:

結果:我想說:你好

3.prepend()

向每個匹配的元素內部前置內容

html**:

我想說:

jquery**:

$('p').prepend('你好');

結果:你好我想說:

4.prependto()

將所有匹配的元素前置到指定的元素中。實際上,使用該方法是顛倒了常規$(a).prepend(b)的操作,既不是將b前置到a中,而是將a前置到b中

html**:

我想說:

jquery**:

$('你好').prependto('p');

結果:你好我想說:

5.after()

在每個匹配的元素之後插入內容

html**:

我想說:

jquery**:

$('p').after('你好');

結果:我想說:你好

6.insertafter

將所有匹配的元素插入到指定元素的後面。實際上,使用該方法是顛倒了常規$(a).after(b)的操作,既不是將b插入到a後面,而是將a插入到b後面

html**:

我想說:

jquery**:

$('你好').insertafter('p');

結果:我想說:你好

7.before

在每個匹配的元素之前插入內容

html**:

我想說:

jquery**:

$('p').before('你好');

結果:你好我想說:

8.insertbefore

將所有匹配的元素插入到指定元素的前面。實際上,使用該方法是顛倒了常規$(a).after(b)的操作,既不是將b插入到a前面,而是將a插入到b前面

html**:

我想說:

jquery**:

$('你好').insertbefore('p');

結果:你好我想說:

9.remove()

作用是從dom中刪除所有匹配的元素,傳入的引數用於根據jquery表示式來篩選元素

注意!當某個節點用remove()方法刪除後,該節點包含的所有後代節點將同時被刪除。這個方法的返回值是乙個指向已被刪除的節點的引用,因此可以在以後再使用這些元素。

例項:var $li=$('ul li:eq(1)').remove();//獲取第二個元素節點後,將它從網頁中刪除

另外remove()方法也可以通過傳遞引數來選擇性的刪除元素

例項:$('ul li').remove('li[title!=菠蘿]');//將元素中屬性title不等於『菠蘿』的元素刪除

10.empty()

嚴格來講,empty()方法不是刪除節點,而是清空節點,他能清空元素中的所有後代節點

例項:$('ul li:eq(1)').empty();//獲得第二個元素節點後,清空此元素裡的內容,注意是元素裡!

當**執行後,第二個元素的內容被清空了,只剩下了標籤預設符號『·』

11.clone()

例項:$('ul li').click(function(){

注意!複製節點後,被複製的新元素並不具備任何行為。如果需要新元素也具有行為,使用clone時傳遞引數true。

例項:12.replacewith()和replaceall()

replacewith()方法的作用是將所有匹配的元素都替換成指定的html或者dom元素。

例項:$('p').replacewith('你最不喜歡的方法是?');

同樣上述功能也能使用relaceall()來實現,該方法與relacewith()方法的作用相同,只是顛倒了relacewith()操作。

例項:$('你最不喜歡的方法是?').replaceall('p');

注意!如果在替換之前,已經為元素繫結事件,替換後原先繫結的事件將會與被替換的元素一起消失,需要在元素上重新繫結事件。

13.wrap()

將某個節點用其他標記包裹起來。該方法對於需要在文件中插入額外標記的結構化標記非常有用,而且她不會破壞原始文件的語義。

jquery**:

$('strong').wrap('');//用標籤把元素包裹起來

結果:你最喜歡的方法是?

14.wrapall()

將所有匹配的元素用乙個元素來包裹。它不同於wrap()方法,wrap()方法是將所有的元素進行單獨的包裹。

html**:

方法

方法

如果使用wrap()方法包裹元素

jquery**:

$('strong').wrap('');

結果:方法

方法

如果使用wrapall()方法包裹元素

jquery**:

$('strong').wrapall('');

結果:

方法

方法

15.wrapinner()

將每乙個匹配的元素的子內容(包括文字節點)用其他結構化的標記包裹起來。

jquery**:

$('strong').wrapinner('');

結果:喜歡的方法

jQuery節點操作方法

在元素內部插入節點 方法說明 示例為所有匹配的元素的內部追加內容 將所有匹配元素新增到另乙個元素的元素集合中 prepend content 為所有匹配的元素的內部前置內容 b prepend p a p 向id為b的元素內容前新增乙個段落 prependto content 將所有匹配的元素前置到...

JQuery操作方法

jquery操作方法 位置操作 offser 方法 獲取相對於整個document的位置,按照左上角來看 查詢物件 offset 獲取從左上角來說的位置對應值 查詢物件 offset 設定位置 position方法 scrolltop 方法 獲取滾輪相對整個螢幕來說移動了多少值 window scr...

JQuery 屬性操作方法

以下的方法可以用於獲得或者設元素的dom屬性 addclass sample 1.p first addclass class1 如需加多個,用空格分隔 2.p addclass function n 注 n為選取器的index.hasclass sample p first hasclass cl...