系列DOM操作理论.ppt

文档名
Those who adhere to the principles of wisdom, have right attitudes, and true to their words and discharge their dut文档名
Those who adhere to the principles of wisdom, have right attitudes, and true to their words and discharge their duties with responsibility
2021
2
回顾
:input可以匹配哪些元素？
所有 input, textarea, select 和 button 元素
修改元素样式有几种方法？
css(“样式名”,”样式值”)
attr(“style”,”样式值”)
addClass(“css类”)/removeClass(“css类”);
attr(“class”,” css类”)
3
本章任务
使用jQuery操作DOM
进一步了解jQuery事件
4
使用jQuery操作DOM
添加新元素
删除元素
替换元素
复制元素
本章目标
5
DOM操作
创建新元素
例：
$(“<div></div>”) 或者 $(“<div />”)
$(“<div><p>新元素</p></div>”)
注意：
HTML代码中标签必须完整
HTML代码中标签不要使用大写字母
语法：$(“HTML代码”)
6
DOM操作
追加元素
添加儿子
添加兄弟
(小儿子) 或者 (自己)
(大儿子) 或者 (自己)
(弟弟) 或者 (自己)
(哥哥) 或者 (自己)
如果添加的元素为已有元素，则变为元素移动。
7
DOM操作
删除元素
empty()
删除匹配的元素集合中所有的子节点。
remove([expr])
从DOM中删除所有匹配的元素。
detach([expr])
从DOM中删除所有匹配的元素。
remove / detach所有绑定的事件、附加的数据等不会/都会保留下来。
8
DOM操作
替换元素
replaceWith(content)
将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll(selector)
用匹配的元素替换掉所有 selector匹配到的元素。
9
DOM操作
复制元素
clone()
克隆匹配的DOM元素并且选中这些克隆的副本。
clone(true)
克隆匹配的DOM元素以及其所有的事件处理并且选中这些克隆的副本。
15
作业
作业：

THANK YOU