一.DOM操作的分类
- DOM Core:核心DOM 获取元素的一系列的方法
- HTML-DOM:通过方法控制网页中的标签
- CSS-DOM:通过方法控制网页标签的css属性
二. CSS-DOM
a .css():修改css样式
b.addClass():追加class赋值
c.removeClass():移除class赋值
d.toggleClass(): 相当于addclass()和removeclass()
e.hasClass(): 判断是否添加了某个class样式
三.事件
- focus():获取焦点
- blur():失去焦点
四.HTML-DOM
1 html():获取或设置第一个匹配元素的HTML内容或文本内容
6. text():用于获取或设置所有匹配元素的文本内容
7. val():获取或设置元素的value属性值
五.节点操作
1 append:
(
A
)
.
a
p
p
e
n
d
(
B
)
表
示
将
B
追
加
到
A
中
如
:
(A).append(B)表示将B追加到A中如:
(A).append(B)表示将B追加到A中如:(“ul”).append(
n
e
w
N
o
d
e
1
)
;
8.
a
p
p
e
n
d
t
o
:
newNode1); 8. appendto:
newNode1);8.appendto:(A).appendTo(B)表示把A追加到B中如:$newNode1.appendTo(“ul”);
9. prepend:
(
A
)
.
p
r
e
p
e
n
d
(
B
)
表
示
将
B
前
置
插
入
到
A
中
如
:
(A). prepend (B)表示将B前置插入到A中如:
(A).prepend(B)表示将B前置插入到A中如:(“ul”). prepend ($newNode1);
10. prependto:
(
A
)
.
p
r
e
p
e
n
d
T
o
(
B
)
表
示
将
A
前
置
插
入
到
B
中
如
:
(A). prependTo (B)表示将A前置插入到B中如:
(A).prependTo(B)表示将A前置插入到B中如:newNode1. prependTo (“ul”);
11. after:
(
A
)
.
a
f
t
e
r
(
B
)
表
示
将
B
插
入
到
A
之
后
如
:
(A).after (B)表示将B插入到A之后如:
(A).after(B)表示将B插入到A之后如:(“ul”).after(
n
e
w
N
o
d
e
1
)
;
12.
i
n
s
e
r
t
a
f
t
e
r
:
newNode1); 12. insertafter:
newNode1);12.insertafter:(A). insertAfter (B)表示将A插入到B之后如:$newNode1.insertAfter(“ul”);
13. before:
(
A
)
.
b
e
f
o
r
e
(
B
)
表
示
将
B
插
入
至
A
之
前
如
:
(A). before (B)表示将B插入至A之前如:
(A).before(B)表示将B插入至A之前如:(“ul”).before(
n
e
w
N
o
d
e
1
)
;
14.
i
n
s
e
r
t
b
e
f
o
r
e
:
newNode1); 14. insertbefore:
newNode1);14.insertbefore:(A). insertBefore (B)表示将A插入到B之前如:$newNode1.insertBefore(“ul”);
六.工厂函数
- 获取节点:$(选择器)
- 创建节点:$("
- ")
七.删除节点
1.remove:移除被选元素,包括所有文本和子节点。 该方法不会把匹配的元素从 jQuery 对象中删除
2.empty:移除被选元素的所有子节点和内容
3…detach:移除被选元素,包括所有文本和子节点。 这个方法会保留 jQuery 对象中的匹配的元素
八.替换节点
- replaceWith: l i . r e p l a c e W i t h ( li.replaceWith( li.replaceWith((“
- 新节点
- ”));
- replaceAll: ( " < l i > 新 节 点 < / l i > " ) . r e p l a c e A l l ( ("<li>新节点</li>").replaceAll( ("<li>新节点</li>").replaceAll(li);
八.复制节点
- true:复制节点内容 事件
2.false:复制内容