jQuery中的DOM操作 三

2022-08-24 11:45:12 字數 2099 閱讀 9359

一、查詢節點    【返回jquery物件】

$(選擇器字串);  

使用jquery函式,裡面引數為選擇器字串,查詢符合條件的bom物件並返回jquery物件

eg:

$('div.one span:first');    //

查詢所有類名為one的div裡面的所有後代span裡面的第乙個span元素

二、建立節點

$(html文字字串);

使用jquery函式,裡面引數為要建立的節點字串,返回jquery物件

eg:

var $newnode = $("hello");    //

建立乙個span節點,裡面內容為hello

三、插入節點    

a、引數:乙個或多個dom 元素,dom元素陣列,html字串,或者jquery物件

b、如果將頁面上的元素插入到某元素內,則該插入的元素會從頁面上移動過去,原來頁面上的元素則會不存在【同一元素節點在頁面上是唯一的】

1、插入節點作為最後孩子

】向呼叫該函式的jquery物件中所有dom節點內容最後面插入該節點,即將該節點作為他們的最後孩子插入

eg:

var $node = $("hello");

將$node插入到所選取的div內容最後,作為div的最後乙個孩子

將span節點插入到所有匹配的div中並作為div的最後孩子

2、插入節點作為開始孩子

prepend()    【在自身內部插入其它節點作為開始孩子

】    

向呼叫該函式的jquery物件中所有dom節點內容最前面插入該節點,即將該節點作為他們的最開始的孩子插入

eg:將span節點插入到所有匹配的div中並作為div的開始孩子

prependto()    【將自身插入到其它節點內容中作為開始孩子

】    

呼叫方法者與需要插入的節點和prependto()恰好相反

eg:

$("hello").prependto($('div'));    //

將span節點插入到所有匹配的div中並作為div的開始孩子

3、插入節點作為兄弟元素

after()    【將節點插入到自身後面作為自己後面的兄弟元素】

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

insertafter()   【將自身插入到節點後面作為節點後面的兄弟元素】

呼叫方法者與需要插入的節點和after()恰好相反

before()    【將節點插入到自身前面作為自己前面的兄弟元素

】在匹配元素的前面插入內容(外部插入)作為其兄弟節點插在集合中每個匹配元    素前面。

insertbefore() 【將自身插入到節點前面作為節點前面的兄弟元素

】呼叫方法者與需要插入的節點和before()恰好相反

四、刪除節點

remove([selector]) 【返回被刪除的節點物件】

刪除指定元素並刪除其繫結的事件及與該元素相關的jquery資料(即其返回的刪除節點物件中不包含有原來的事件及相關的jquery資料)

eg:

$('div').remove('.one');    //

刪除類名為one的div

$('div.one').remove(); //

刪除類名為one的div

detach([selector])    【返回被刪除的節點物件】

刪除指定元素但會保留其繫結的事件及與該元素相關的jquery資料(即其返回的刪除節點物件中包含有原來的事件及相關的jquery資料)

eg:

$('div:not(".one")').remove(':first');

//刪除類名不為one的div中的第乙個div

$('div.one').remove(); //

刪除類名為one的div

empty()  【清空元素內容】

無引數,移除匹配元素的所有子節點

eg:

$('div:contains("one")').empty();    //

清空的div內容中包含文字one的div元素內容

三 jQuery中的DOM操作

dom簡介 dom document objectmodel文件物件模型,dom是一種與瀏覽器 平台 語言無關的介面,使用該介面可以輕鬆的訪問頁面中所有的標準元件。dom操作的分類 domcore 核心 html dom和css dom jquery中的dom操作 1.查詢節點 查詢元素節點 查詢屬...

jquery中DOM節點操作(三)

一 樣式操作 1.獲取和設定樣式 attr 2.新增樣式 addclass 3.移除樣式 removeclass 4.切換樣式 toggleclass 5.是否使用樣式 hasclass 個人愛好 二 屬性操作 1.獲取和設定屬性 attr prop 二者區別 對於布林型別的屬性。如 checked...

jQuery中的DOM操作

三 jquery中的dom操作 3.2.1 查詢節點 1.查詢元素節點 var li ul li eq 1 獲取裡第2個節點 var li text li.text 獲取第二個元素節點的文字內容 2.查詢屬性節點 var para p 獲取節點 var p text para.attr title ...