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中

  1. pripend(元素)==第一个子节点==
    • 把元素添加到被选中元素里面的前面(被选中元素里边 div里面)

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

  1. before(元素) ==添加兄弟==
    • 把元素添加到选中元素的前面(被选中元素外边 div外边)

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

  1. after(元素) ==添加兄弟==
    • 把元素添加到选中元素的后边(被选中元素外边 div外边)

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

  1. appendTo()
    • 把一个对象直接加到另外一个对象里面
>var obj = $("<p></p>");
>把 obj对象 主动的加到div中
>obj.appendTo( $( "#div" ) )
复制代码

元素属性的操作

  1. .attr()
    • 设置属性与获取属性
      • .attr("属性") 获取到属性里面的属性值
      • .attr("属性“,”属性值") 为元素设置属性值

获取到a标签里面的超链接 ("a").attr( "herf" ); 为a标签设置超链接("a").attr( "herf"," www.baidu.com " );

删除元素

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

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

  1. empty()

    • 清空元素中的内容

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

  1. remove()

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

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

克隆元素

  1. .clone()
    • 克隆元素

克隆span标签给div2标签 var spanObj=("#dv>span").clone();//克隆,复制了这个元素("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);
		});
	});

复制代码

转载于:https://juejin.im/post/5cf20b7b6fb9a07ec373d596

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值