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();