使用php自動備份數據庫表的實現方法
772
2023-12-08
本文實例分析了jQuery添加刪除DOM元素的方法。分享給大家供大家參考，具體如下：
介紹
DOM是Document Object Modeule的縮寫，一般來說，DOM操作分成3個方面。
1、DOM Core
DOM Core并不專屬于javascript，任何一種支持DOM的程序設計語言都可以使用它，用途也遠不止僅限于網頁，也可以用來處理任何一種使用標記語言編寫出來的文檔，如XML。
例如：document,getElementsByTagName("form");//使用DOM Core來獲取表單對象的方法。
2、HTML-DOM
在使用Javascript和DOM為HTML文件編寫腳本時，有許多屬于HTML-DOM的屬性，HTML-DOM的出現甚至比DOM Core還要早，他提供了一些更簡明的記號來描述各種HTML元素的屬性。
例如：
document.forms //HTML-DOM提供了一個forms對象。
PS:可以看出，獲取對象、屬性即可以用DOM Core來實現民，也可以用HTML-DOM實現。
3、CSS-DOM
CSS-DOM是針對CSS的操作,在javascript中，CSS-DOM主要的作用是獲取和設置style對象的各種屬性，由此達到網頁呈現出各種不同的效果.
例如：
element.style.color="red";//設置某元素的字體顏色的方法。
常用方法
1.查找元素節點
var $li = $("ul li:eq(0)");//獲取ul標記下的第一個li,也可以寫成 $("#ulID li:eq(0)");
2.查找元素屬性
利用jquery的attr()方法來獲取元素的各種屬性的值，attr()方法的參數可以是一個，也可以是兩個。
當參數是一個時，則是要查詢的屬性名稱。
當參數是兩個時，則可以設置屬性的值。
alert($("#id").attr("title")); //輸出元素的title屬性.一個參數
$("#id").attr("title","改變title值"); //改變元素的title屬性值.二個參數
3.添加元素節點
$(html) 簡單說明一下$(html)方法會根據傳入的html標記字符串創建一個dom對象，并將這個dom對象包裝成一個jquery對象返回，總之就是把標記所有html代碼都放到$()工廠里面就行了！
例：
var $htmlLi = $(" <li title='香蕉'>香蕉</li>"); //創建DOM對象
var $ul = $("ul"); //獲取UL對象
$ul.append($htmlLi); //將$htmlLi追加到$ul元素的li列表
下面列出部分插入節點的方法
方法
描述
示例
Append()
向每個匹配的元素內追加內容
HTML代碼
<ul></ul>
JQuery代碼
$(“ul”).append(“<li>AA</li>”);
結果
<ul>
<li>AA</li>
</ul>
appendTo()
該方法和Append()相反，a.Append(b)是將b追加到a中，而appendTo()是將b追求到a中
HTML代碼
<ul></ul>
JQuery代碼
$ (“<li>AA</li>”).appendTo (“ul”).;
結果
<ul>
<li>AA</li>
</ul>
Prepend()
向每個匹配的元素內部前置內容
HTML代碼
<p>哈哈</p>
JQuery代碼
$(“p”).prepend(“<b>ABC</b>”);
結果
<p><b>ABC</b>哈哈</p>
prependTo()
該方法和Prepend()相反，a. Prepend (b)是將b前置到a中，而prependTo ()是將b前置到a中
HTML代碼
<p>哈哈</p>
JQuery代碼
$(“<b>ABC</b>”).prependTo.(“p”);
結果
<p><b>ABC</b>哈哈</p>
After()
在每個匹配的元素之后插入內容，是之后
HTML代碼
<p>AAA</p>
JQuery代碼
$(“p”).After(“<b>cc</b>”);
結果
<p>AAA</p><b>cc</b>
insertAfter()
和After()相反
HTML代碼
<p>AAA</p>
JQuery代碼
$ (“<b>cc</b>”).After(“p”);
結果
<p>AAA</p><b>cc</b>
Before()
在每個匹配的元素之前插入內容
HTML代碼
<p>AAA</p>
JQuery代碼
$(“p”). Before (“<b>cc</b>”);
結果
<b>cc</b><p>AAA</p>
insertBefore()
和Before()相反
HTML代碼
<p>AAA</p>
JQuery代碼
$ (“<b>cc</b>”). insertBefore (“p”);
結果
<b>cc</b><p>AAA</p>
好了，不要齋看，自己動手試試吧:)
4.刪除元素節點
由于我們需要經常動態去改變DOM元素，因此Jquery提供了兩種刪除節點的方法，即remove()和empty();
4.1 remove()方法
$("p").remove();// 我們可以獲取到要刪除的元素，然后調用remove()方法
$("ul li:eq(0)").remove().appendTo("ul");// 刪除ul下面的第一個li標記，然后再把刪除的li標記重新加到ul里面，remove()方法返回刪除元素的引用，這時你可以繼續使用
$("ul li").remove("li[title!=ABC]");//remove可以接受通過參數來選擇性的刪除符合條件的元素;
4.2 empty()方法
嚴格來講，empty()方法并不是刪除元素，而是清空
例：
HTML代碼：
<ul> <li title="AAA">AAA</li> </ul>
JQuery代碼：
$("ul li:eq(0)").empty();
結果
<ul> <li title="AAA"></li> </ul>
記住，只會清空內容，不會請空屬性;
更多關于jQuery操作DOM元素相關內容感興趣的讀者可查看本站專題：《jQuery操作DOM節點方法總結》
希望本文所述對大家jQuery程序設計有所幫助。
