jQuery中的DOM操作

2021-06-23 08:03:13 字數 2256 閱讀 5111

三、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"); // 獲取元素節點屬性title的值


3.2.2 建立節點


1. 建立元素節點


var $create=$(""); //建立乙個元素


2. 建立文字節點


var $ls=$("香蕉"); // 建立乙個元素，包括元素節點和文字節點


3. 建立屬性節點


var $ls=$("香蕉"); // title='as'就是建立的屬性節點


3.2.3 插入節點


插入節點的方法：


prepend() // 向每個匹配的元素內部前置內容 $(a).prepend(b)操作是將b內建到a的前部


prependto() // 與prepend()相反


after() // 在每個匹配的元素之後插入內容 $(a).after(b)的操作是將b插入到a的後面


insertafter() // 與after()相反


before() //在每個匹配的元素之前插入內容


insertbefore() // 與before()相反


3.2.4 刪除節點


刪除節點的方法：


remove() 


var $li=$("ul li:eq(1)").remove();// 獲取第2個元素節點後，將它從網頁中刪除


$("ul li").remove("li[title!=aa]"); // 將元素中屬性title不等於aa的元素刪除


detach()


var $li=$("ul li:eq(1)").detach();// 刪除元素


empty()


$("ul li:eq(1)").empty();//獲取第二個元素節點後，清空此元素裡的內容，注意是元素裡


3.2.5 屬性操作


1. 獲取屬性和設定屬性


$("p").attr("title"); //獲取元素節點屬性title的值


$("p").attr("title","dsf"); //設定單個的屬性值


$("p").attr();//設定多個屬性


2. 刪除屬性


$("p").removeattr("title"); // 刪除元素的屬性title


3.2.6 樣式操作


$('p').attr("class"); //獲取元素的class


$('p').attr("class","high"); //設定元素的class為"high"


$('p').addclass("sddf"); //給元素追加'sddf'類


$('p').removeclass("high"); // 移除元素中值為high的class


$('p').removeclass("high").removeclass("gh"); //刪除元素的兩個class


$('p').removeclass("high gh");// 刪除元素的兩個class


$('p').removeclass(); //移除元素的所有class


$('p').toggleclass("df"); // 重複切換類名『df』


$('p').hasclass("as"); // 判斷元素中是否含有'as'的class,等價於$("p").is(".as");


3.2.7 獲取文字：


方法：1. html()


2. text() 對應innertext文字內容


$("p").text(); // 獲取值


$("p").text("sfsdfsd"); // 設定值


3. val() 對應value的內容


3.2.8 遍歷節點：


1. children（）方法： 用於取得匹配元素的子元素集合，只考慮子元素，不考慮其他後代元素。


$('p').children（）.length //p的所有子元素的個數


2. next()方法：用於取得匹配元素後面緊鄰的同輩元素


3. prev()方法： 用於取得匹配元素前面緊鄰的同輩元素


4. siblings()方法： 用於取得匹配元素前後所有的同輩元素

jQuery中的DOM操作

jquery中的dom操作 dom分為3個部分，dom core html dom,css dom 1,查詢節點 查詢元素節點可以用 選擇器，find 和children 方法。查詢屬性節點可以用attr 方法,也可以用 的屬性過濾選擇器 eg div tittle 2,建立節點 3，插入節點 3....

jQuery中的DOM操作

dom操作又叫節點操作,標籤操作,元素操作 再選中元素的裡邊的最後邊 叫做建立乙個元素,jquery物件 其實就是在原有標籤的基礎上做了一些改造 prepend div prepend div prepend 生成乙個jquery物件p prependto 給div裡邊的最前邊加乙個p標籤 prep...

jquery中的DOM操作

1 查詢元素節點，並列印其內容 var li ul li eq 1 查詢裡第2個節點 var li txt li.text 獲取文字內容 alert li txt 2 查詢屬性節點 var para p 獲取節點 var p txt para.attr title 獲取元素節點屬性title 3 建...