一、查詢節點 【返回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 ...