學習jQuery記錄以及DOM操作

2021-10-04 19:12:02 字數 4395 閱讀 3800

在shiyanlou平台學習中摘抄寫的筆記,以備檢視。

(所有操作必須引入jquery,怎麼引入參照上上上上篇部落格)

var $li =$(

"ol li:eq(0)");

//eq(0)獲取第乙個li節點

var text =$li.

text()

;//獲取li文字內容

var $p=$(

"p")

;//獲取節點

var p_text = $p.

attr

("屬性名");

//獲取節點的屬性

建立元素節點

var $li =$(

"");//建立乙個元素節點

建立文字節點

var $li =$(

"lilili");

//建立乙個元素,包括元素節點和文字節點

建立屬性節點

var $li =$(

"lili">lilili");

//

示例:

$

(document)

.ready

(function()

);

函式:

將引數內容插入到每個匹配元素的前面(元素內部)

.text():得到匹配元素集合中每個元素的合併文字,包括他們的後代設定匹配元素集合中每個元素的文字內容為指定的文字內容。

.after():在匹配元素集合中的每個元素後面插入引數所指定的內容,作為其兄弟節點

insertafter():在目標元素後面插入集合中每個匹配的元素(注:插入的元素作為目標元素的兄弟元素)。

.before():在匹配元素的前面插入內容

.insertbefore():在目標元素前面插入集合中每個匹配的元素(注:插入的元素作為目標元素的兄弟元素)

示例:

$

(document)

.ready

(function()

);

函式:

.detach():雖然刪除,但是 儲存所有 jquery 資料和事件而且和被移走的元素相關聯

.remove():移除元素內部的一切,包括繫結的事件及與該元素相關的 jquery 資料

.empty():移除子元素(和其他後代元素),同樣移除元素裡的文字

示例:

$

(document)

.ready

(function()

);

$

(document)

.ready

(function()

);})

;

函式:

.replaceall():用集合的匹配元素替換每個目標元素

.replacewith():提供的內容替換集合中所有匹配的元素並且返回被刪除元素的集合

$

("p").

replacewith

("pppppp")

;$("ppppppp")

.replaceall

("p");

//與上面效果一樣

$

("p").

wrap("

");//將p元素用div包裹,單獨乙個乙個包裹,中間可以存在其他元素$(

"p")

.wrapall("

");//將p元素用div包裹,單獨乙個div包裹,中間不可以存在其他元素$(

"p")

.wrapinner("

");//將p元素用div包裹,單獨乙個p單獨乙個div包裹

獲取元素屬性

$

(document)

.ready

(function()

);

設定屬性

$

("div").

attr

("class"

,"demo");

//設定css樣式

刪除屬性

$

("div").

removeattr

("class"

);

追加樣式

$

("div").

addclass

("style"

);

移除樣式

$

("div").

removeclass

("style1 style2");

//刪除多個樣式

切換樣式

$

("div").

toggleclass

("style"

);

函式:

.html():

var div_html=$(

"div").

html()

;//獲取文字$(

"div").

html

("sssss");

//設定文字

.text():

var div_text=$(

"div").

text()

;//獲取文字$(

"div").

text

("hhhhh");

//設定文字

.val():

$

("input").

val(

"hhhhh");

//向input裡面設定hhhh

.children()

var list =$(

'ul').

children()

;for

(var i=

0,len=list.length;i)

.next()

var div_next =$(

'div').

next()

;alert

(div_next.

next()

);

.prev()

var p_prev=$(

'p')

.prev()

;

.siblings()

$

('p').

siblings()

.css

('background-color'

,'red');

//改變改變p 元素前後所有的同輩元素的顏色(兄弟元素)

.parent()與.parents():.parents() 和 .parent() 方法是相似的,但後者只是進行了乙個單級的 dom 樹查詢(注:也就是只查詢一層,直接的父元素,而不是更加上級的祖先元素)。此外,$( 「html」 ).parent() 方法返回乙個包含 document 的集合,而 $( 「html」 ).parents() 返回乙個空集合

.css()

alert

($('div'

).css

('background-color'))

;//獲取 div 的背景顏色

$('div').css(

);//為 div 設定邊框和高度屬性

$("p"

).css

("opacity","0.5"

);//對於透明度的設定,可以直接使用 opacity 屬性,jquery 已經處理好了相容性的問題

.height(),.width():

$

("p").

height

(500);

$("p")

.width

(100

);

jQuery學習筆記 DOM操作

1.1 dom物件轉jquery物件 用 把dom物件包起來即可 var domobj document.getelementbyid demo var jqueryobj domobj 1.2 jquery物件轉dom物件 2種方法 index 和get index var jqueryobj d...

Jquery學習筆記 DOM操作

prepend 向每個匹配的元素內部前置內容 prependto after 向每個匹配的元素之後插入內容 insterafter before 在每個匹配的元素之前插入內容 insertbefore 1.remove 該節點所包含的所有後代節點將同時被刪除 返回值是乙個指向已被刪除的節點的引用,因...

jQuery學習(監聽DOM載入)

jquery的extend方法 functionnjquery njquery.extend function obj this key obj key njquery.extend njquery.istest njquery.prototype.extend function obj this ...