2015年jQuery系列-DOM操作(理论).ppt

文档介绍：1
DOM操作
JQuery系列
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元素以及其所有的事件处理并且选中这些克隆的副本。
10
事件
事件处理
bind(type, [data], fn)
为每个匹配元素的特定事件绑定事件处理函数。
参数
类型
说明
type
String
含有一个或多个事件类型的字符串,比如"click"或"submit"
data (可选)
Object

fn
Function
绑定到每个匹配元素的事件上面的处理函数