10.24 JQ继续DOM操作
10.24 JQ继续 DOM操作
一、DOM操作
1.内容操作
(1)html()方法:获取/设置标签体内容
如:
<a><font>内容</font></a>
若用html()获取a标签的内容 ,获取的是:<font>内容</font>
//获取
$("a").html();
//设置
$("a").html("aaa"),此时变成<a>aaa</a>,没有<font>标签了
$("a").html(“<p>aaa</p>”),此时变成<a><p>aaa</p></a>
(2)text()方法:获取/设置标签体纯文本内容
如:
<a><font>内容</font></a>
若用test()获取a标签的内容 ,获取的是:内容
//获取
$("a").test();
//设置
$("a").test("bbb");注,此时变成<a>bbb</a>,<font>标签也没有了
(3)val()方法:相当于value属性,获取/设置元素的value属性值
//获取
$("div").val();
//设置
$("div").val("张三")
2.属性操作
(1)通用属性操作
1.1 attr():获取/设置元素的属性
1.2 removeAttr():删除属性
1.3 prop():获取/设置元素的属性
1.4 removeProp();删除属性
(
attr和prop区别:
如果操作的是元素的固有属性,则建议使用prop
如果操作的属性是自定义的属性,则建议使用attr
)
<ul>
<li id="bj" name="beijing" xxx="yyy">北京</li>
<li id="tj" name="tianjin" xxx="yyy">天津</li>
</ul>
<input type="checkbox" id="hobby">
//获取北京节点的name属性
$("#bj").attr("name");
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");
//新增北京节点的discription属性,属性值是didu
$("#bj").attr("discription","didu");
//删除北京节点的name属性
$("#bj").removeAttr("name");
//获取hobby的checked的属性
$("#hobby").prop("checked");
(2)对class属性操作
2.1 addClass():添加class属性值
2.2 removeClass();删除class属性值
2.3 toggleClass();切换class属性(比如:toggleClass(“one”):判断如果元素对象上存在class=“one”,则将属性值one删除掉。如果元素对象上不存在class=“one”,则添加)
(1)采用属性增加样式
$("#one").prop("class","second"); class是div的固有属性
(2)使用addClass增加样式
$("#one").addClass("second");
(3)删除class="second"属性
$("#one").removeClass("second");
(4)通过css()获得id为one的背景颜色
$("#one").css("backgroundColor") ;(如果css()含有一个值的话,是获取对应属性的值)
(5)通过css()设置id为one 的背景色为绿色
$("#one").css("backgroundColor","green") ;
(3)css()方法
3.CRUD的相关操作:(增删改查的相关操作)
(1)append():父元素将子元素追加到末尾
*对象1.append(对象2):将对象2添加到对象1内部,并且是末尾
(2)prepend():父元素将子元素追加到开头
*对象1.prepend(对象2):将对象2添加到对象1内部,并且是开头
(3)appendTo():父元素将子元素追加到末尾
*对象1.append(对象2):将对象1添加到对象2内部,并且是末尾
(4)prependTo():父元素将子元素追加到开头
*对象1.append(对象2):将对象1添加到对象2内部,并且是开头
(5)after():追加元素到元素 后面
*对象1.after(对象2):将对象2添加到对象1后边,对象1和对象2是兄弟关系
(6)before():追加元素到元素 前边
*对象1.after(对象2):将对象2添加到对象1前边,对象1和对象2是兄弟关系
(7)insertAfter():追加元素到元素 后面
*对象1.insertAfter(对象2):将对象2添加到对象1后边,对象1和对象2是兄弟关系
(8)insertBefore():追加元素到元素 后面
*对象1.insertBefore(对象2):将对象2添加到对象1前边,对象1和对象2是兄弟关系
(9)remove():移除元素
*对象.remove():将对象删除
(10)empty():清空元素是所有后代元素
*对象.empty():将元素的后代元素全部清除,但保留当前对象以及其属性节点
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="星际">星际</li>
</ul>
(1)将反恐加到city的后边
$("#city").append($("#fk"));
(2)将反恐加到天津的后面
$("#tj").after($("#fk"));
(3)删除“北京”节点
$("#bj").remove();