Jquery學習筆記 DOM操作

2021-08-27 00:15:03 字數 1851 閱讀 9545

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

prependto()

after() 向每個匹配的元素之後插入內容

insterafter()

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

insertbefore

1. remove() 該節點所包含的所有後代節點將同時被刪除

返回值是乙個指向已被刪除的節點的引用,因此可以在以後再使用這些元素

var $li = $('ul li:eq(1)').remove();

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

2. detach() 該方法也不會把匹配的元素從jquery物件中刪除,與remove()方法不同的是所有繫結時間、附加資料都會保留下來

3. empty() 該方法不是刪除節點,而是清空節點,能清空元素中的所有後代節點

clone()

clone(true) 複製元素,同時複製元素中的所有繫結事件

replacewith()

replaceall()

wrap()

wrapall()

warpinner()

attr() 獲取和設定元素屬性,removeattr()刪除元素屬性

prop()和removeprop(),分別用來獲取在匹配的元素集中的第乙個元素的屬性值和為匹配的元素刪除設定的屬性

1. 獲採樣式、設定樣式

var p_class = $('p').attr('class'); //獲取元素的class

$('p').attr('class', 'height'); //為元素設定class為hegith

2. 追加樣式

addclass()

3. 移除樣式

removeclass()

4. 切換樣式

toggle()

toggleclass()

5. 判斷是否含有某個樣式

hasclass()

1. html()方法 讀取或設定某個元素中的html內容

2. text()方法 讀取或設定某個元素的文字內容

3. val()方法 設定和獲取元素的值

通常配合focus(),blur()事件,為文字框等設定預設值,和清空值

$('#address').focus(function()

});

1. children()方法 獲取匹配元素的所有子元素的個數

配合.length,for迴圈實現許多需求

2. next()方法 獲取匹配元素後面緊鄰的同輩元素

3. prev()方法 獲取匹配元素前面緊鄰的同輩元素

4. siblings()方法 獲取匹配元素前後所有的同輩元素

**parent()**  獲得集合中每個匹配元素的父級元素   

$('item-1').parent().css('background-color', 'red'); 從指定型別的直接父節點開始查詢,返回乙個元素節點

**parents()** 獲得集合中每個匹配元素的祖先元素

$('item-1').parents('ul').css('background-color', 'red');

與parent()不同在於,當它找到第乙個父節點時並沒有停止查詢,而是繼續查詢,最後返回多個父節點

**closest()** 從元素本身開始,逐級向上級元素匹配,並返回最先匹配的祖先元素

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操作

dom操作是對dom樹進行插入,刪除,修改。1.建立新元素可以有三種方法 1 var newelement 通過 函式建立 2 var newelement old clone 通過已有的元素進行複製,clone 可以傳遞true,這樣複製的元素也會複製已有元素的事件處理函式以及關聯資料 data ...

jQuery中的DOM操作學習筆記

首先構建乙個網頁,因為每張網頁都能用dom表示出來,每乙份dom都可以看作乙個dom樹。省略其他 title 選擇你最喜歡的水果 你最喜歡的水果是?p title 蘋果 蘋果li title 橘子 橘子li title 菠蘿 菠蘿li 省略其他 var li ul li eq 1 獲取ul裡第二個節...