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);
});
});
复制代码