jQuery中HTML的操做

jQuery中HTML的操做

建立元素的方式

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

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

複製代碼

添加建立的元素

1. append(元素） ==最後一個子節點==
   • 把元素添加到被選中元素裏面的結尾（被選中元素裏邊 div裏面）

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

2. pripend(元素）==第一個子節點==
   • 把元素添加到被選中元素裏面的前面（被選中元素裏邊 div裏面）

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

3. before(元素） ==添加兄弟==
   • 把元素添加到選中元素的前面（被選中元素外邊 div外邊）

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

4. after(元素） ==添加兄弟==
   • 把元素添加到選中元素的後邊（被選中元素外邊 div外邊）

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

5. appendTo(）
   • 把一個對象直接加到另一個對象裏面

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

元素屬性的操做

1. .attr()
   • 設置屬性與獲取屬性
     • .attr("屬性") 獲取到屬性裏面的屬性值
     • .attr("屬性「，」屬性值") 爲元素設置屬性值

獲取到a標籤裏面的超連接 ("a").attr( "herf"," www.baidu.com " );

刪除元素

1. .html()
   • 清空元素中的內容

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

2. empty()

   • 清空元素中的內容

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

3. remove()

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

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

克隆元素

1. .clone()
   • 克隆元素

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

設置元素的全選與全不選

1. .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);
 });
 });

複製代碼