1.jQuery是一个JavaScript函数库
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery库包含以下功能:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示: 除此之外,jQuery还提供了大量的插件
jquery使用总结-常用DOM操作
(1)查询或设置元素属性操作
html() //获取匹配元素集合中的第1个元素
html(htmlString) //为匹配集合中的所有元素设置内容
text() //返回所有匹配元素集的文本内容组合起来的文本
text(textString)//设置文本值
val() //返回第1个匹配元素的值
val(value)//设置值
attr(attributeName)//获取属性值
attr(attributeName, value)//设置属性值
(2)插入操作
将content添加到seletor内部的最后面。
(
s
e
l
e
c
t
o
r
)
.
a
p
p
e
n
d
(
c
o
n
t
e
n
t
)
;
(selector).append(content);
(selector).append(content); (selector).append(function(index [,html]){…});
(
c
o
n
t
e
n
t
)
.
a
p
p
e
n
d
T
o
(
s
e
l
e
c
t
o
r
)
;
将
c
o
n
t
e
n
t
添
加
到
s
e
l
e
t
o
r
内
部
的
最
前
面
尾
部
。
(content).appendTo(selector); 将content添加到seletor内部的最前面尾部。
(content).appendTo(selector); 将content添加到seletor内部的最前面尾部。 (selector).prepend(content);
(
s
e
l
e
c
t
o
r
)
.
p
r
e
p
e
n
d
(
f
u
n
c
t
i
o
n
(
i
n
d
e
x
[
,
h
t
m
l
]
)
.
.
.
)
;
(selector).prepend(function(index [,html]){...});
(selector).prepend(function(index[,html])...); (content).prependTo(selector);
插入后的节点与原节点是兄弟关系。
(
s
e
l
e
c
t
o
r
)
.
a
f
t
e
r
(
c
o
n
t
e
n
t
)
;
(selector).after(content);
(selector).after(content); (selector).after(function(index [,html]){…});
$(content).insertAfter(selector);
(
s
e
l
e
c
t
o
r
)
.
b
e
f
o
r
e
(
c
o
n
t
e
n
t
)
;
(selector).before(content);
(selector).before(content); (selector).before(function(index [,html]){…});
$(content).insertBefore(selector);
(3)删除操作
$(selector).remove([selector])
$(selector).detach([selector])
$(selector).empty()
remove 方法和 detach 方法的返回值均为被删除的jQuery节点对象,不同的是,前者指保留该对象节点本身,其他绑定的事件及附加的数据等都会被移除。而后者全部保留。empty 方法则是将指定节点的所有子节点删除,本身保留。
(4)赋值替换操作
$(selector).clone([true]);带true参数则复制出来的节点具备原节点所绑定的事件处理程序。
$(content).replaceAll(selector);
$(selector).repalceWith(content);
这两种方法在使用时效果完全相同,都是用 content 代替 selector.