- 相關(guān)推薦
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=$("
$("htmltype2").append($var_1); //這句話是把節(jié)點(diǎn)插入所有htmltype2節(jié)點(diǎn)中
例子：var $li_1=$("
香蕉
");
$("ul").append($li_1);
其中插入方法有以下幾種：
append() 把B追加到A內(nèi)部（所有的A元素，以下類(lèi)似） appendTo() 把A追加到B內(nèi)部 prepend() 把B追加到A內(nèi)部的內(nèi)容前 prependTo() 把A追加到B的內(nèi)容前 after() 在A后追加B After() 在A前追加B before() 在A前追加B Before()在A后追加B
例子：$("ul").append("
你好
");//在ul內(nèi)部追加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ì)顯示出來(lái)的
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屬性為樣式表類(lèi)class1
2.追加樣式
addClass() 添加樣式到A
例子：$("p").addClass("another");添加樣式表類(lèi)another類(lèi)到P
3.移除樣式
removeClass() 移除類(lèi)
4.切換樣式
toggleClass() 切換clss屬性類(lèi)為新的類(lèi)
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的DOM操作筆記】相關(guān)文章：
焊工有哪些操作規(guī)程-焊工的操作規(guī)程04-02
電腦常用操作技巧07-19
買(mǎi)殼上市操作流程04-04
excel表格的基本操作08-11
電工安全操作規(guī)程03-18
數(shù)控加工中心的操作步驟07-16
操作摩卡壺的方法與流程04-28
CAD入門(mén)詳細(xì)操作指南07-19
最新口腔護(hù)理操作流程12-05