jQuery中HTML的操作

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的操作的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。