首頁 > web前端 > js教程 > 如何對jQuery元素進行增加和刪除

如何對jQuery元素進行增加和刪除

yulia
發布: 2018-09-17 15:43:40
原創
1185 人瀏覽過

因為工作需要,經常需要對元素進行增加,刪除,改變和查找,他們都有哪些方式?這篇文章就跟大家講講如何對jQuery元素進行增加和刪除。有需要的朋友可以參考一下,希望對你有用。

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列表
登入後複製

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元素進行增加和刪除的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板