jQuery中HTML的操作

創建元素的方式

• jQuery中創建元素的方式:
  • 1.$("標簽的代碼")
  • 2.對象.html("標簽的代碼");

var aObj=$("<a href='http://www.baidu.com'>百度</a>"); $("#div").html("<p>這是一個p標簽</p>")復制代碼

添加創建的元素

append(元素） ==最后一個子節點==

• 把元素添加到被選中元素里面的結尾（被選中元素里邊 div里面）

//把元素添加到div中 $("#dv").append(aObj);//把超鏈接追加到div中

pripend(元素）==第一個子節點==

• 把元素添加到被選中元素里面的前面（被選中元素里邊 div里面）

//把元素插入到某個元素的前面 //$("#dv").prepend(aObj);

before(元素） ==添加兄弟==

• 把元素添加到選中元素的前面（被選中元素外邊 div外邊）

//把元素添加到當前元素的前面(兄弟元素來添加) //$("#dv").before(aObj);

after(元素） ==添加兄弟==

• 把元素添加到選中元素的后邊（被選中元素外邊 div外邊）

//把元素添加到當前元素的后面(兄弟元素來添加) //$("#dv").after(aObj);

appendTo(）

• 把一個對象直接加到另外一個對象里面

>var obj = $("<p></p>"); >把 obj對象 主動的加到div中 >obj.appendTo( $( "#div" ) ) 復制代碼

元素屬性的操作

.attr()

• 設置屬性與獲取屬性
  • .attr("屬性") 獲取到屬性里面的屬性值
  • .attr("屬性“，”屬性值") 為元素設置屬性值

獲取到a標簽里面的超鏈接 ("a").attr( "herf"," www.baidu.com " );

刪除元素

.html()

• 清空元素中的內容

$("#dv").html("");//清空元素中的內容

empty()

• 清空元素中的內容

//$("#dv").empty();//清空元素中的內容

remove()

• 移除元素自身---自殺

//$("#dv").remove();//移除元素自身---自殺

克隆元素

.clone()

• 克隆元素

克隆span標簽給div2標簽 var spanObj=("div2").append(spanObj);

設置元素的全選與全不選

.prop()方法

• 可以設置元素的全選與全不選
• 案例：

<input type="button" value="全選" id="btnAll"/> <input type="button" value="全不選" id="btnNoAll"/> <div id="dv"> <input type="checkbox" value="1"/>吃飯 <input type="checkbox" value="2"/>睡覺 <input type="checkbox" value="3"/>打豆豆 <input type="checkbox" value="4"/>打籃球 <input type="checkbox" value="5"/>打足球 <input type="checkbox" value="6"/>打鉛球 <input type="checkbox" value="7"/>打桌球 </div> </body> 復制代碼 //兩個按鈕:1按鈕全選,2全不選 $(function () { //獲取第一個按鈕,點擊---全選 $("#btnAll").click(function () { $("#dv :checkbox").prop("checked",true); }); //獲取第二個按鈕,點擊---全不選 $("#btnNoAll").click(function () { $("#dv :checkbox").prop("checked",false); }); });復制代碼

轉載于:https://juejin.im/post/5cf20b7b6fb9a07ec373d596

總結

以上是生活随笔為你收集整理的jQuery中HTML的操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。