jQuery學(xué)習(xí)筆記之jQuery的DOM操作
一.節(jié)點(diǎn)的操作
1.查找節(jié)點(diǎn):
var $var_1=$("htmltype"); //這句話就是獲取所有htmltype節(jié)點(diǎn)
如:var $ul_1=$("ul");
2.創(chuàng)建并追加節(jié)點(diǎn):
var $var_1=$("<htmltype>");//這句話是創(chuàng)建一個(gè)節(jié)點(diǎn)
$("htmltype2").append($var_1) ; //這句話是把節(jié)點(diǎn)插入所有htmltype2節(jié)點(diǎn)中
例子:var $li_1=$("<li title="title1">香蕉</li>");
$("ul").append($li_1);
其中插入方法有以下幾種:
- append() 把B追加到A內(nèi)部(所有的A元素,以下類似)
- appendTo() 把A追加到B內(nèi)部
- prepend() 把B追加到A內(nèi)部的內(nèi)容前
- prependTo() 把A追加到B的內(nèi)容前
- after() 在A后追加B
- insertAfter() 在A前追加B
- before() 在A前追加B
- insertBefore()在A后追加B
例子:$("ul").append("<li>你好</li>");//在ul內(nèi)部追加li
$("<li>你好</li>").appendTo("ul");//在ul內(nèi)部追加li
3.刪除節(jié)點(diǎn)
- remove() 刪除該元素
- empty() 清空節(jié)點(diǎn),包括后代節(jié)點(diǎn)
例子:$("ul li:eq[1]").remove(); //獲取ul中的第二個(gè)li并刪除
$("ul li").remove(“l(fā)i[title="菠蘿"]”);//刪除ul中l(wèi)i元素屬性title="菠蘿"的元素
4.復(fù)制節(jié)點(diǎn)
- clone();//復(fù)制本節(jié)點(diǎn)
例子:$("ul li:eq[1]").clone().appenTo("ul");//復(fù)制并追加到ul中,只復(fù)制是不會(huì)顯示出來的
5.替換節(jié)點(diǎn)
- replaceWith();//將B替換所有A
- replaceAll();//將A替換所有B
6.包裹節(jié)點(diǎn)
- warpAll();//用B包裹A
- warpInner();//用B包裹A的內(nèi)容
二.屬性操作
1.獲取和設(shè)置屬性
var $var_1=$("p");//這句話是獲取節(jié)點(diǎn)P
var $p_1=$var_1.attr("title");//獲取節(jié)點(diǎn)P的title屬性
var $p_2=$var_1.attr("title","你好");//設(shè)置節(jié)點(diǎn)P的title屬性為"你好"
2.刪除屬性
$("p").removeAttr("title");//刪除節(jié)點(diǎn)P的Title屬性
三.樣式操作
1.獲取和設(shè)置樣式
var $var_class=$("p").attr("class");//獲取節(jié)點(diǎn)P的class屬性
$("p").attr("class","class1");設(shè)置節(jié)點(diǎn)P的class屬性為樣式表類class1
2.追加樣式
- addClass() 添加樣式到A
例子:$("p").addClass("another");添加樣式表類another類到P
3.移除樣式
- removeClass() 移除類
4.切換樣式
- toggleClass() 切換clss屬性類為新的類
5.判斷某個(gè)樣式是否存在
- hasClass()
四.內(nèi)容的操作
- html() 該方法獲取html元素的內(nèi)容,如:var var1=$("p").html();//獲取P元素內(nèi)的內(nèi)容
- text() 獲取或設(shè)置某個(gè)html元素的內(nèi)容
- val() 獲取元素的Value值
- children() 獲取html元素的所有子節(jié)點(diǎn)
- next() 獲取html元素后緊鄰的同輩節(jié)點(diǎn)
- prev() 獲取html元素前緊鄰的同輩節(jié)點(diǎn)
- siblings() 獲取html元素前后緊鄰的同輩節(jié)點(diǎn)
五.CSS-DOM技術(shù)
- css("屬性","值") 設(shè)置元素css某個(gè)屬性的值,如:$("p").css("color","red");//設(shè)置P的css屬性{color:red;}
- jQuery移動(dòng)和復(fù)制dom節(jié)點(diǎn)實(shí)用DOM操作案例
- jQuery的DOM操作之刪除節(jié)點(diǎn)示例
- jQuery DOM操作 基于命令改變頁面
- jQuery 選擇器、DOM操作、事件、動(dòng)畫
- jQuery DOM操作小結(jié)與實(shí)例
- jQuery常見面試題之DOM操作詳析
- 淺談jQuery 選擇器和dom操作
- Jquery基礎(chǔ)教程之DOM操作
- 鋒利的jQuery jQuery中的DOM操作
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
- jQuery DOM操作實(shí)例
- jQuery中DOM常見操作實(shí)例小結(jié)
相關(guān)文章
jquery Moblie入門—hello world的示例代碼學(xué)習(xí)
jquery Moblie入門:Hello World的示例代碼學(xué)習(xí),感興趣的朋友可以了解下哦2013-01-01
jquery實(shí)現(xiàn)每個(gè)數(shù)字上都帶進(jìn)度條的幻燈片
瀏覽網(wǎng)頁時(shí)不小心會(huì)碰到這樣的一個(gè)網(wǎng)站有幻燈片而且每個(gè)數(shù)字上面都帶有進(jìn)度條閑的無聊,自己用jquery實(shí)現(xiàn)了一個(gè),因?yàn)橛幸粋€(gè)進(jìn)度條的播放過程暫不支持ie6,熱愛特效的你可不要錯(cuò)過了哈2013-02-02
jquery實(shí)現(xiàn)可自動(dòng)收縮的TAB網(wǎng)頁選項(xiàng)卡代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)可自動(dòng)收縮的TAB網(wǎng)頁選項(xiàng)卡代碼,涉及jquery鼠標(biāo)事件及頁面元素樣式變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
Jquery實(shí)現(xiàn)鼠標(biāo)移動(dòng)放大圖片功能實(shí)例
這篇文章主要介紹了Jquery實(shí)現(xiàn)鼠標(biāo)移動(dòng)放大圖片功能,實(shí)例分析了jQuery操作鼠標(biāo)與圖片的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)的上拉刷新功能組件示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的上拉刷新功能組件,涉及jQuery事件響應(yīng)與頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-05-05
jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)
jQuery基礎(chǔ)學(xué)習(xí)技巧總結(jié)...2007-06-06
jquery 查找select ,并觸發(fā)事件的實(shí)現(xiàn)代碼
項(xiàng)目中,用jquery 查找select ,并觸發(fā)事件. 記一筆.關(guān)鍵代碼,需要的朋友可以參考下。2011-03-03

