jQuery的DOM操作筆記
一.節點的操作
1.查找節點:
var $var_1=$("htmltype"); //這句話就是獲取所有htmltype節點
如:var $ul_1=$("ul");
2.創建並追加節點:
var $var_1=$("
$("htmltype2")nd($var_1); //這句話是把節點插入所有htmltype2節點中
例子:var $li_1=$("
香蕉
");
$("ul")nd($li_1);
其中插入方法有以下幾種:
append() 把B追加到A內部(所有的A元素,以下類似) appendTo() 把A追加到B內部 prepend() 把B追加到A內部的內容前 prependTo() 把A追加到B的內容前 after() 在A後追加B After() 在A前追加B before() 在A前追加B Before()在A後追加B
例子:$("ul")nd("
你好
");//在ul內部追加li
$("
你好
")ndTo("ul");//在ul內部追加li
3.刪除節點
remove() 刪除該元素 empty() 清空節點,包括後代節點
例子:$("ul li:eq[1]")ve(); //獲取ul中的第二個li並刪除
$("ul li")ve(“li[title="菠蘿"]”);//刪除ul中li元素屬性title="菠蘿"的元素
4.複製節點
clone();//複製本節點
例子:$("ul li:eq[1]")e()nTo("ul");//複製並追加到ul中,只複製是不會顯示出來的'
5.替換節點
replaceWith();//將B替換所有A replaceAll();//將A替換所有B
6.包裹節點
warpAll();//用B包裹A warpInner();//用B包裹A的內容
二.屬性操作
1.獲取和設置屬性
var $var_1=$("p");//這句話是獲取節點P
var $p_1=$var_("title");//獲取節點P的title屬性
var $p_2=$var_("title","你好");//設置節點P的title屬性為"你好"
2.刪除屬性
$("p")veAttr("title");//刪除節點P的Title屬性
三.樣式操作
1.獲取和設置樣式
var $var_class=$("p")("class");//獲取節點P的class屬性
$("p")("class","class1");設置節點P的class屬性為樣式表類class1
2.追加樣式
addClass() 添加樣式到A
例子:$("p")lass("another");添加樣式表類another類到P
3.移除樣式
removeClass() 移除類
4.切換樣式
toggleClass() 切換clss屬性類為新的類
5.判斷某個樣式是否存在
hasClass()
四.內容的操作
html() 該方法獲取html元素的內容,如:var var1=$("p")();//獲取P元素內的內容 text() 獲取或設置某個html元素的內容 val() 獲取元素的Value值 children() 獲取html元素的所有子節點 next()獲取html元素後緊鄰的同輩節點 prev() 獲取html元素前緊鄰的同輩節點 siblings() 獲取html元素前後緊鄰的同輩節點
五-DOM技術
css("屬性","值") 設置元素css某個屬性的值,如:$("p")("color","red");//設置P的css屬性{color:red;}
-
網站設計首頁要注意的事項
網站設計首頁的時候要注意些什麼?哪些是必須要注意的?下面就來和小編一起看看網站設計首頁要注意的事項吧。1.用户友好性:提高首頁的用户友好性,能夠大大增加留住用户的可能性,更進一步的`話則是能提高用户的黏着度,取得良好的用户轉化效益。而用户的友好性主要體...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
dreamweaver的學習心得
當我們備受啟迪時,寫心得體會是一個不錯的選擇,這樣我們可以養成良好的總結方法。那麼要如何寫呢?下面是小編收集整理的dreamweaver的學習心得,歡迎閲讀與收藏。dreamweaver的學習心得1目前,互聯網是最快捷的信息傳播渠道之一,學習網頁製作成了學生必須掌握的一項技...
-
javascript設置創建動態表格的方法
兩種JavaScript動態創建table表格的方法,分享給大家,具體實現如下方法一:最原始的方法,創建一一元素vara1=teElement("table");vara2=teElement("tbody");vara3=teElement("tr");vara4=teElement("td");//開始appendchild()追加各個元素ndChild(a4);ndChild(a3);nd...