引用自https://www.cnblogs.com/yangjunwl/archive/2011/02/14/1954075.html
JQuery 选择器、过滤器
JQuery 选择器、过滤器
使用过AJAX技术的人都知道大名鼎鼎的JQuery。虽然我来学习之前有看过AJAX的视频,但那时对WEB应用这个东西还比较模糊,不清楚HTML、JSP与Servlet是怎么工作的,甚至不知道JQuery包装的是什么东西。今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰。JQuery原则:“write less, do more.”,这句话已充分说明它对简化使用JavaScriptDOM编程的功力!
每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化。老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训。经过多年的总结,他已经有自己一套成熟的教学方式。这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~
从学习JavaWEB、Struts1到现在的JavaScript,我已经找到了WEB应用开发的核心——MVC。是的,就是MVC。其实MVC应该是根据WEB的核心被创造出来的模式,难道不是吗!这一整套工具,就是分别对视图层、控制层和数据模型层的操作。似乎现在才找到了一些感觉,因为以前学习servlet时,知道它可以处理用户的请求,老师讲什么就学习什么。但现在有思想了,老师你无论讲什么,我都知道它应该用在哪一层,有什么用途,这样提高了我的学习效率。这是一个非常好的成长!对以后的成长大有帮助。
接下来这些灵散的知识就不多了,然后就开始做项目了。两个字,快、爽!Ok,开始整理学习内容。
一、JQuery与JavaScript
1.JavaScript库
使用过JavaScriptDOM的人都应该知道(比如昨天的练习),使用JSDOM进行页面的操作是十分麻烦的。比如获取、修改及添加子节点等这些操作。如果操作一个复杂的页面呢?Ok,JavaScript库因此诞生了。
目前比较常见的JavaScript库有:
2.JQuery简介
JQuery是继Prototype之后又一个优秀的JavaScript库。
JQuery理念:write less , do more.
JQuery优势:轻量级、强大的选择器、出色的 DOM 操作的封装、可靠的事件处理机制、完善的Ajax、出色的浏览器兼容性、链式操作方式……。
二、JQuery对象与DOM对象
1.JQuery对象
JQuery对象就是使用“
(
“
D
O
M
O
b
j
”
)
”
,
将
D
O
M
对
象
包
装
起
来
。
一
般
在
J
Q
u
e
r
y
对
象
前
面
加
上
“
(“DOMObj”)”,将DOM对象包装起来。一般在JQuery对象前面加上“
(“DOMObj”)”,将DOM对象包装起来。一般在JQuery对象前面加上“”这样与DMO对象区分,它已经是一种公认的命名约定。JQuery对象不能调用DOM对象的属性和方法,同样DOM对象也不能调用JQuery对象的属性和方法。
2.JQuery对象转成DOM对象
如果想使用JQuery对象调用DOM对象的方法,怎么办?应该将JQuery对象转换成DOM对象,JQuery对象是一个数组对象,这个很特别。所以只需调用JQueryObj[x]或JQueryObj.get(X);即可转换为DOM对象。
3.DOM对象转换成JQuery对象
使用“
(
“
D
O
M
O
b
j
”
)
”
将
D
O
M
对
象
包
装
起
来
就
可
以
了
。
三
、
J
Q
u
e
r
y
选
择
器
选
择
器
是
J
Q
u
e
r
y
的
根
基
,
在
J
Q
u
e
r
y
中
,
对
事
件
处
理
,
遍
历
D
O
M
和
A
j
a
x
操
作
都
依
赖
于
选
择
器
。
这
也
是
今
天
我
们
学
习
的
重
点
内
容
。
1.
基
本
选
择
器
基
本
选
择
器
是
J
Q
u
e
r
y
中
最
常
用
的
选
择
器
,
也
是
最
简
单
的
选
择
器
,
它
通
过
元
素
i
d
、
c
l
a
s
s
和
标
签
名
来
查
找
D
O
M
元
素
。
这
个
非
常
重
要
,
下
面
的
内
容
都
是
以
此
为
基
础
,
逐
级
提
高
的
。
1
)
.
“
(“DOMObj”)”将DOM对象包装起来就可以了。 三、JQuery选择器 选择器是JQuery的根基,在JQuery 中,对事件处理,遍历DOM和Ajax操作都依赖于选择器。这也是今天我们学习的重点内容。 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class 和标签名来查找DOM元素。这个非常重要,下面的内容都是以此为基础,逐级提高的。 1).“
(“DOMObj”)”将DOM对象包装起来就可以了。 三、JQuery选择器选择器是JQuery的根基,在JQuery 中,对事件处理,遍历DOM和Ajax操作都依赖于选择器。这也是今天我们学习的重点内容。 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class 和标签名来查找DOM元素。这个非常重要,下面的内容都是以此为基础,逐级提高的。 1).“(“#id”)”,获取id指定的元素,id是全局唯一的,所以它只有一个成员。
2).“
(
“
.
c
l
a
s
s
”
)
”
,
获
取
c
l
a
s
s
指
定
的
元
素
,
不
同
的
元
素
可
以
具
有
相
同
的
c
l
a
s
s
属
性
,
所
以
它
可
能
具
有
多
个
成
员
。
3
)
.
“
(“.class”)”,获取class指定的元素,不同的元素可以具有相同的class属性,所以它可能具有多个成员。 3).“
(“.class”)”,获取class指定的元素,不同的元素可以具有相同的class属性,所以它可能具有多个成员。 3).“(“element”)”,获取element(元素名,比如div、table等)指定的元素,它可能具有多个成员。
4).“
(
“
∗
”
)
”
,
获
取
所
有
元
素
,
相
当
于
d
o
c
u
m
e
n
t
。
5
)
.
“
(“*”)”,获取所有元素,相当于document。 5).“
(“∗”)”,获取所有元素,相当于document。 5).“(“selector1,selector2,…,selectorN”)”,将每个选择器匹配到的元素合并后一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合。
2.层次选择器
什么是层次?层次就是父子关系、兄弟关系的节点。所以,层次选择器就是用来获取指定元素的父子节点、兄弟节点。
1).“
(
“
a
n
c
e
s
t
o
r
d
e
s
c
e
n
d
a
n
t
”
)
”
,
获
取
a
n
c
e
s
t
o
r
元
素
下
边
的
所
有
元
素
。
2
)
.
“
(“ancestor descendant”)”,获取ancestor元素下边的所有元素。 2).“
(“ancestordescendant”)”,获取ancestor元素下边的所有元素。 2).“(“parent > child”)”,获取parent元素下边的所有子元素(只包含第一层子元素)。
3).“
(
“
p
r
e
+
n
e
x
t
”
)
”
,
获
取
紧
随
p
r
e
元
素
的
后
一
个
兄
弟
元
素
。
4
)
.
“
(“pre + next”)”,获取紧随pre元素的后一个兄弟元素。 4).“
(“pre+next”)”,获取紧随pre元素的后一个兄弟元素。 4).“(“pre ~ siblings”)”,获取pre元素后边的所有兄弟元素。
3.过滤选择器
过滤?肯定是要添加过滤条件的。通过“:”添加过滤条件,比如“
(
“
d
i
v
:
f
i
r
s
t
”
)
”
返
回
d
i
v
元
素
集
合
的
第
一
个
d
i
v
元
素
,
f
i
r
s
t
是
过
滤
条
件
。
按
照
不
同
的
过
滤
规
则
,
过
滤
选
择
器
可
以
分
为
基
本
过
滤
,
内
容
过
滤
,
可
见
性
过
滤
,
属
性
过
滤
,
子
元
素
过
滤
和
表
单
对
象
属
性
过
滤
选
择
器
。
1
)
.
基
本
过
滤
选
择
器
a
)
“
:
f
i
r
s
t
”
,
选
取
第
一
个
元
素
,
别
忘
记
它
也
是
被
放
在
一
个
集
合
里
哦
!
因
为
J
Q
u
e
r
y
它
是
D
O
M
对
象
的
一
个
集
合
。
如
,
“
(“div:first”)”返回div元素集合的第一个div元素,first是过滤条件。 按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器。 1). 基本过滤选择器 a) “:first”,选取第一个元素,别忘记它也是被放在一个集合里哦!因为JQuery它是DOM对象的一个集合。如,“
(“div:first”)”返回div元素集合的第一个div元素,first是过滤条件。 按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器。 1). 基本过滤选择器a) “:first”,选取第一个元素,别忘记它也是被放在一个集合里哦!因为JQuery它是DOM对象的一个集合。如,“(“tr:first”)”返回所有tr元素的第一个tr元素,它仍然被保存在集合中。
b) “:last”,选取最后一个元素。如,“
(
"
t
r
:
l
a
s
t
"
)
”
返
回
所
有
t
r
元
素
的
最
后
一
个
t
r
元
素
,
它
仍
然
被
保
存
在
集
合
中
。
c
)
“
:
n
o
t
(
s
e
l
e
c
t
o
r
)
”
,
去
除
所
有
与
给
定
选
择
器
匹
配
的
元
素
。
如
,
“
("tr:last")”返回所有tr元素的最后一个tr元素,它仍然被保存在集合中。 c) “:not(selector)”,去除所有与给定选择器匹配的元素。如,“
("tr:last")”返回所有tr元素的最后一个tr元素,它仍然被保存在集合中。c) “:not(selector)”,去除所有与给定选择器匹配的元素。如,“(“input:not(:checked)”)”返回所有input元素,但去除被选中的元素(单选框、多选框)。
d) “:even”,选取所有元素中偶数的元素。因为JQuery对象是一个集合,这里的偶数指的就是集合的索引,索引从0开始。
e) “:odd”,选取所有元素中奇数的元素,索引从0开始。
f) “:eq(index)”,选取指定索引的元素,索引从0开始。
g) “:gt(index)”,选取索引大于指定index的元素,索引从0开始。
h) “:lt(index)”,选取索引小于指定index的元素,索引从0开始。
i) “:header”,选取所有的标题元素,如hq、h2等。
j) “:animated”,选取当前正在执行的所有动画元素。
2). 内容过滤选择器
它是对元素和文本内容的操作。
a) “:contains(text)”,选取包含text文本内容的元素。
b) “:empty”,选取不包含子元素或者文本节点的空元素。
c) “:has(selector)”,选取含有选择器所匹配的元素的元素。
d) “:parent”,选取含有子元素或文本节点的元素。(它是一个父节点)
3). 可见性过滤选择器
根据元素的可见与不可见状态来选取元素。
“:hidden”,选取所有不可见元素。
“:visible”,选择所有可见元素。
可见选择器:hidden 不仅包含样式属性 display 为 none 的元素,也包含文本隐藏域 ()和 visible:hidden 之类的元素。
4).属性过滤选择器
通过元素的属性来选取相应的元素。
a) “[attribute]”,选取拥有此属性的元素。
b) “[attribute=value]”,选取指定属性值为value的所有元素。
c) “[attribute !=value]”,选取属性值不为value的所有元素。
d) “[attribute ^= value]”,选取属性值以value开始的所有元素。
e) “[attribute $= value]”,选取属性值以value结束的所有元素。
f) “[attribute *= value]”,选取属性值包含value的所有元素。
g) “[selector1] [selector2]…[selectorN]”,复合性选择器,首先经[selector1]选择返回集合A,集合A再经过[selector2]选择返回集合B,集合B再经过[selectorN]选择返回结果集合。
5). 子元素过滤选择器
一看名字便是,它是对某一元素的子元素进行选取的。
a) “:nth-child(index/even/odd)”,选取索引为index的元素、索引为偶数的元素、索引为奇数的元素。
l nth-child(even/odd):能选取每个父元素下的索引值为偶(奇)数的元素。
l nth-child(2):能选取每个父元素下的索引值为 2 的元素。
l nth-child(3n):能选取每个父元素下的索引值是 3 的倍数的元素。
l nth-child(3n + 1):能选取每个父元素下的索引值是 3n + 1的元素。
b) “:first-child”,选取第一个子元素。
c) “:last-child”,选取最后一个子元素。
d) “:only-child”,选取唯一子元素,它的父元素只有它这一个子元素。
6). 表单过滤选择器
选取表单元素的过滤选择器。
a) “:input”,选取所有、、和元素。
b) “:text”,选取所有的文本框元素。
c) “:password”,选取所有的密码框元素。
d) “:radio”,选取所有的单选框元素。
e) “:checkbox”,选取所有的多选框元素。
f) “:submit”,选取所有的提交按钮元素。
g) “:image”,选取所有的图像按钮元素。
h) “:reset”,选取所有重置按钮元素。
i) “:button”,选取所有按钮元素。
j) “:file”,选取所有文件上传域元素。
k) “:hidden”,选取所有不可见元素。
7).表单对象属性过滤选择器
选取表单元素属性的过滤选择器。
“:enabled”,选取所有可用元素。
“:disabled”,选取所有不可用元素。
“:checked”,选取所有被选中的元素,如单选框、复选框。
“:selected”,选取所有被选中项元素,如下拉列表框、列表框。
四、JQuery中的DOM操作
一种与浏览器,平台,语言无关的接口。使用该接口可以轻松地访问页面中所有的标准组件。
DOM Core:DOM Core 并不专属于 JavaScript,任何一种支持 DOM 的程序设计语言都可以使用它。它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档,例如:XML。
HTML DOM:使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,有许多专属于HTML-DOM的属性。
CSS-DOM:针对于CSS操作,在JavaScript中,CSS-DOM 主要用于获取和设置 style 对象的各种属性。
1.查找节点
请见上面的“基本选择器”。
2.创建节点
使用JQuery的工厂函数,创建一个新节点:var $newNode =
(
“
<
p
>
你
好
<
/
p
>
”
)
;
,
然
后
将
新
节
点
插
入
到
指
定
元
素
节
点
处
。
3.
插
入
节
点
将
新
创
建
的
节
点
,
或
获
取
的
节
点
插
入
指
定
的
位
置
。
“
(“<p>你好</p>”);,然后将新节点插入到指定元素节点处。 3.插入节点 将新创建的节点,或获取的节点插入指定的位置。 “
(“<p>你好</p>”);,然后将新节点插入到指定元素节点处。 3.插入节点 将新创建的节点,或获取的节点插入指定的位置。 “node.append(
n
e
w
N
o
d
e
)
”
,
向
每
个
匹
配
的
元
素
内
部
的
结
尾
处
追
加
结
尾
处
。
如
,
“
newNode)”,向每个匹配的元素内部的结尾处追加结尾处。如,“
newNode)”,向每个匹配的元素内部的结尾处追加结尾处。如,“(“p”).append(“Hello”);”将"Hello"添加到"p"内部的结尾处。
“
n
e
w
N
o
d
e
.
a
p
p
e
n
d
T
o
(
newNode.appendTo(
newNode.appendTo(node)”,将新元素追加到每个匹配元素内部的结尾处。
“
n
o
d
e
.
p
r
e
p
e
n
d
(
node.prepend(
node.prepend(newNode)”,向每个匹配的元素内部的结尾处追加开始处。如,“
(
"
p
"
)
.
p
r
e
p
e
n
d
(
"
<
b
>
H
e
l
l
o
<
/
b
>
"
)
;
”
将
"
<
b
>
H
e
l
l
o
<
/
b
>
"
添
加
到
"
p
"
内
部
的
起
始
处
。
“
("p").prepend("<b>Hello</b>");”将"<b>Hello</b>"添加到"p"内部的起始处。 “
("p").prepend("<b>Hello</b>");”将"<b>Hello</b>"添加到"p"内部的起始处。 “newNode.prependTo(
n
o
d
e
)
”
,
将
新
元
素
追
加
到
每
个
匹
配
元
素
内
部
的
开
始
处
。
“
node)”, 将新元素追加到每个匹配元素内部的开始处。 “
node)”, 将新元素追加到每个匹配元素内部的开始处。 “node.after(
n
e
w
N
o
d
e
)
”
,
向
每
个
匹
配
的
元
素
的
之
后
插
入
内
容
,
是
并
列
兄
弟
。
如
,
“
newNode)”,向每个匹配的元素的之后插入内容,是并列兄弟。如,“
newNode)”,向每个匹配的元素的之后插入内容,是并列兄弟。如,“(“p”).after(“Hello”);”将"Hello"插入到"p"的后边。它们是兄弟关系。
“
n
e
w
N
o
d
e
.
i
n
s
e
r
t
A
f
t
e
r
(
newNode.insertAfter(
newNode.insertAfter(node)”,将新元素插入到每个匹配元素之后。
“
n
e
w
N
o
d
e
.
b
e
f
o
r
e
(
newNode.before(
newNode.before(node)”,向每个匹配的元素的之前插入内容。如,“
(
"
p
"
)
.
b
e
f
o
r
e
(
"
<
b
>
H
e
l
l
o
<
/
b
>
"
)
;
”
将
"
<
b
>
H
e
l
l
o
<
/
b
>
"
插
入
到
"
p
"
的
前
面
,
它
们
是
兄
弟
关
系
。
“
("p").before("<b>Hello</b>");”将"<b>Hello</b>"插入到"p"的前面,它们是兄弟关系。 “
("p").before("<b>Hello</b>");”将"<b>Hello</b>"插入到"p"的前面,它们是兄弟关系。 “node.insertBefore(
n
e
w
N
o
d
e
)
”
,
将
新
元
素
插
入
到
每
个
匹
配
元
素
之
前
。
注
意
:
如
果
插
入
的
节
点
是
不
是
新
创
建
的
,
插
入
将
变
成
移
动
操
作
。
所
以
,
在
插
入
这
样
的
节
点
之
前
应
该
使
用
c
l
o
n
e
的
节
点
。
4.
删
除
节
点
从
D
O
M
中
删
除
所
有
匹
配
的
元
素
。
如
,
“
newNode)”,将新元素插入到每个匹配元素之前。 注意:如果插入的节点是不是新创建的,插入将变成移动操作。所以,在插入这样的节点之前应该使用clone的节点。 4.删除节点 从DOM中删除所有匹配的元素。如,“
newNode)”,将新元素插入到每个匹配元素之前。 注意:如果插入的节点是不是新创建的,插入将变成移动操作。所以,在插入这样的节点之前应该使用clone的节点。 4.删除节点 从DOM中删除所有匹配的元素。如,“(“p”).remove(".hello");”删除所为class属性值为hello的p元素,还有它下面的所有元素。
从DOM中清除所有匹配的元素。如,“
(
"
p
"
)
.
e
m
p
t
y
(
)
;
”
清
除
所
有
p
元
素
,
还
有
它
下
面
的
所
有
元
素
。
5.
复
制
节
点
克
隆
匹
配
的
D
O
M
元
素
。
如
,
“
("p").empty();”清除所有p元素,还有它下面的所有元素。 5.复制节点 克隆匹配的DOM元素。如,“
("p").empty();”清除所有p元素,还有它下面的所有元素。 5.复制节点 克隆匹配的DOM元素。如,“(“p”).clone();”返回克隆后的副本,但不具有任何行为。如果要将DOM的事件一起克隆,应该使用“
(
"
p
"
)
.
c
l
o
n
e
(
t
r
u
e
)
;
”
。
6.
替
换
节
点
将
所
有
匹
配
的
元
素
都
替
换
为
指
定
的
H
T
M
L
或
D
O
M
元
素
。
如
,
("p").clone(true);”。 6.替换节点 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素。如,
("p").clone(true);”。 6.替换节点 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素。如,(“p”).replaceWith(“Paragraph. “);,将所有p元素,替换为"Paragraph. “。
与replaceWith相返:
(
"
<
b
>
P
a
r
a
g
r
a
p
h
.
<
/
b
>
"
)
.
r
e
p
l
a
c
e
A
l
l
(
"
p
"
)
;
。
7.
包
裹
节
点
w
r
a
p
(
)
:
将
指
定
节
点
用
其
他
标
记
包
裹
起
来
。
该
方
法
对
于
需
要
在
文
档
中
插
入
额
外
的
结
构
化
标
记
非
常
有
用
,
而
且
不
会
破
坏
原
始
文
档
的
语
义
。
如
,
“
("<b>Paragraph. </b>").replaceAll("p");。 7.包裹节点 wrap():将指定节点用其他标记包裹起来。该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义。如,“
("<b>Paragraph.</b>").replaceAll("p");。 7.包裹节点 wrap():将指定节点用其他标记包裹起来。该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义。如,“(“p”).wrap(”
wrapAll():将所有匹配的元素用一个元素来包裹。而wrap()方法是将所有的元素进行单独包裹。如,“ ( " p " ) . w r a p A l l ( " < d i v > < / d i v > " ) ; ” , 将 所 有 p 元 素 包 裹 到 < d i v > 中 。 w r a p I n n e r ( ) : 将 每 一 个 匹 配 的 元 素 的 子 内 容 ( 包 括 文 本 节 点 ) 用 其 他 结 构 化 标 记 包 裹 起 来 。 如 , “ ("p").wrapAll("<div></div>");”,将所有p元素包裹到<div>中。 wrapInner():将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来。如,“ ("p").wrapAll("<div></div>");”,将所有p元素包裹到<div>中。wrapInner():将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来。如,“(“p”).wrapInner(” ");”, 被每一个p元素包裹。
8.属性设置
attr():获取属性和设置属性。
当为该方法传递一个参数时,即为某元素的获取指定属性。如,“ ( " i m g " ) . a t t r ( " s r c " ) ; ” , 获 取 i m g 元 素 的 s r c 属 性 值 。 当 为 该 方 法 传 递 两 个 参 数 时 , 即 为 某 元 素 设 置 指 定 属 性 的 值 。 如 , “ ("img").attr("src");”,获取img元素的src属性值。 当为该方法传递两个参数时,即为某元素设置指定属性的值。如,“ ("img").attr("src");”,获取img元素的src属性值。当为该方法传递两个参数时,即为某元素设置指定属性的值。如,“(“img”).attr(“src”,“test.jpg”);”,设置img元素的src属性值为test.jsp。
jQuery 中有很多方法都是一个函数实现获取和设置。如:attr(),html(),text(),val(),height(),width(),css()等。
removeAttr():删除指定元素的指定属性。
9.样式操作
可以通过“attr()”设置或获取css样式。
追加样式:addClass() 。如,“ ( " p " ) . a d d C l a s s ( " s e l e c t e d " ) ; ” , 向 所 有 P 元 素 中 追 加 “ s e l e c t e d ” 样 式 。 移 除 样 式 : r e m o v e C l a s s ( ) − − − 从 匹 配 的 元 素 中 删 除 全 部 或 指 定 的 c l a s s 。 如 , “ ("p").addClass("selected");”,向所有P元素中追加“selected”样式。 移除样式:removeClass() --- 从匹配的元素中删除全部或指定的class。如,“ ("p").addClass("selected");”,向所有P元素中追加“selected”样式。移除样式:removeClass()−−− 从匹配的元素中删除全部或指定的class。如,“(“p”).removeClass(“selected”);”,删除所有P元素中的“selected”。
切换样式:toggleClass() — 控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。如,“ ( " p " ) . t o g g l e C l a s s ( " s e l e c t e d " ) ; ” , 所 有 的 P 元 素 中 , 如 果 存 在 “ s e l e c t e d ” 样 式 就 删 除 “ s e l e c t e d ” 样 式 , 否 则 就 添 加 “ s e l e c t e d ” 样 式 。 判 断 是 否 含 有 某 个 样 式 : h a s C l a s s ( ) − − − 判 断 元 素 中 是 否 含 有 某 个 c l a s s , 有 返 回 t r u e ; 否 则 返 回 f a l s e 。 如 , “ ("p").toggleClass("selected");”,所有的P元素中,如果存在“selected”样式就删除“selected”样式,否则就添加“selected”样式。 判断是否含有某个样式:hasClass() --- 判断元素中是否含有某个 class,有返回 true; 否则返回 false。如,“ ("p").toggleClass("selected");”,所有的P元素中,如果存在“selected”样式就删除“selected”样式,否则就添加“selected”样式。判断是否含有某个样式:hasClass()−−− 判断元素中是否含有某个 class,有返回 true; 否则返回 false。如,“(this).hasClass(“protected”)”,判断当前节点是否有“protected”样式。
10.设置或获取HTML、文本和值
读取和设置某个元素中的 HTML 内容: html(),该方法可以用于 XHTML,但不能用于 XML 文档。
读取和设置某个元素中的文本内容:text(),该方法既可以用于 XHTML 也可以用于 XML 文档。
读取和设置某个元素中的值:val(),该方法类似 JavaScript 中的 value 属性。对于文本框,下拉列表框,单选框该方法可返回元素的值(多选框只能返回第一个值)。如果为多选下拉列表框,则返回一个包含所有选择值的数组。
11.常用遍历节点的方法
取得匹配元素的所有子元素组成的集合:children()。该方法只考虑第一层子元素而不考虑任何后代元素。
取得匹配元素后面紧邻的兄弟元素的集合(但集合中只有一个元素):next()。
取得匹配元素前面紧邻的兄弟元素的集合(但集合中只有一个元素):prev()。
取得匹配元素前后所有的兄弟元素: siblings()。
12.CSS-DOM操作
获取和设置元素的样式属性:css()。
获取和设置元素透明度:opacity()属性。
获取和设置元素高度,宽度:height(),width()。在设置值时,若只传递数字,则默认单位是px。如需要使用其他单位则需传递一个字符串,例如 “ ( “ p : f i r s t ” ) . h e i g h t ( “ 2 e m ” ) ” ; 获 取 元 素 在 当 前 视 窗 中 的 相 对 位 移 : o f f s e t ( ) 。 它 返 回 的 对 象 包 含 了 两 个 属 性 : t o p , l e f t 。 该 方 法 只 对 可 见 元 素 有 效 。 五 、 J Q u e r y 中 的 事 件 1. 加 载 D O M 在 页 面 加 载 完 毕 后 , 浏 览 器 会 通 过 J a v a S c r i p t 为 D O M 元 素 添 加 事 件 。 在 常 规 的 J a v a S c r i p t 代 码 中 , 通 常 使 用 w i n d o w . o n l o a d 方 法 , 在 J Q u e r y 中 使 用 (“p:first”).height(“2em”)”; 获取元素在当前视窗中的相对位移:offset()。它返回的对象包含了两个属性:top,left。该方法只对可见元素有效。 五、JQuery中的事件 1.加载DOM 在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件。在常规的 JavaScript 代码中,通常使用 window.onload 方法,在JQuery 中使用 (“p:first”).height(“2em”)”;获取元素在当前视窗中的相对位移:offset()。它返回的对象包含了两个属性:top,left。该方法只对可见元素有效。 五、JQuery中的事件 1.加载DOM在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件。在常规的 JavaScript 代码中,通常使用 window.onload 方法,在JQuery 中使用(document).ready() 方法。JQuery中的简化写法“ ( ) ” 。 在 w i n d o w . o n l o a d 中 注 册 事 件 时 , 只 能 在 一 个 w i n d o w . o n l o a d 体 中 注 册 。 但 使 用 J Q u e r y , 可 以 在 多 个 ()”。在window.onload中注册事件时,只能在一个window.onload体中注册。但使用JQuery,可以在多个 ()”。在window.onload中注册事件时,只能在一个window.onload体中注册。但使用JQuery,可以在多个(document).ready()或 ( ) 中 注 册 。 2. 事 件 绑 定 对 匹 配 的 元 素 对 指 定 的 事 件 绑 定 。 如 , 昨 天 我 们 在 w i n d o w . o n l o a d 中 绑 定 事 件 的 方 法 : “ ()中注册。 2.事件绑定 对匹配的元素对指定的事件绑定。如,昨天我们在window.onload中绑定事件的方法:“ ()中注册。 2.事件绑定 对匹配的元素对指定的事件绑定。如,昨天我们在window.onload中绑定事件的方法:“(“p”).onclick(function(){
alert( KaTeX parse error: Expected 'EOF', got '}' at position 18: …his).text() ); }̲);” 在JQuer…(document).ready()中可以这样绑定:
“$(“p”).click(function(){
alert( $(this).text() );
});”
使用bind(),可以这样绑定:
$(“p”).bind(“click”, function(){
alert( $(this).text() );
});
3.合成事件
hover():模拟光标悬停时间。当光标移动到元素上时,会触发指定的第一个函数,当光标移出这个元素时,会触发指定的第二个函数。如,悬停效果:
KaTeX parse error: Expected '}', got 'EOF' at end of input: … function () {(this).addClass(“hover”);},
function () {$(this).removeClass(“hover”);}
);
toggle():用于模拟鼠标连续单击事件。第一次单击元素,触发指定的第一个函数,当再一次单击同一个元素时,则触发指定的第二个函数,如果有更多个函数,则依次触发,直到最后一个。如,设置元素的选择与非选中效果:
KaTeX parse error: Expected '}', got 'EOF' at end of input: … function () {(this).addClass(“selected”);},
function () {KaTeX parse error: Expected 'EOF', got '}' at position 32: …ss("selected");}̲ ); 使用toggle(…(“btn”).unbind(“click”)
移除某按钮上的所有事件: ( “ b t n ” ) . u n b i n d ( ) ; o n e ( ) : 该 方 法 可 以 为 元 素 绑 定 处 理 函 数 。 当 处 理 函 数 触 发 一 次 后 , 事 件 立 即 被 删 除 。 即 在 每 个 对 象 上 , 事 件 处 理 函 数 只 会 被 执 行 一 次 。 六 、 J Q u e r y 中 的 D O M 动 画 通 过 设 置 D O M 对 象 的 显 示 与 隐 藏 方 式 , 可 以 产 生 动 画 效 果 。 1. 无 动 画 效 果 的 隐 藏 与 显 示 h i d e ( ) : 在 H T M L 文 档 中 , 为 一 个 元 素 调 用 h i d e ( ) 方 法 会 将 该 元 素 的 d i s p l a y 样 式 改 为 n o n e 。 代 码 功 能 同 c s s ( “ d i s p l a y ” , “ n o n e ” ) ; 相 同 。 s h o w ( ) : 将 元 素 的 d i s p l a y 样 式 改 为 先 前 的 显 示 状 态 。 t o g g l e ( ) : 切 换 元 素 的 可 见 状 态 : 如 果 元 素 时 可 见 的 , 则 切 换 为 隐 藏 ; 如 果 元 素 时 隐 藏 的 , 则 切 换 为 可 见 的 。 2. 通 过 设 置 透 明 度 效 果 的 隐 藏 与 显 示 , 达 到 淡 入 淡 出 的 动 画 效 果 f a d e I n ( ) , f a d e O u t ( ) : 只 改 变 元 素 的 透 明 度 。 f a d e O u t ( ) 会 在 指 定 的 一 段 时 间 内 降 低 元 素 的 不 透 明 度 , 直 到 元 素 完 全 消 失 。 f a d e I n ( ) 则 相 反 。 如 , 用 600 毫 秒 缓 慢 的 将 段 落 淡 入 : (“btn”).unbind(); one():该方法可以为元素绑定处理函数。当处理函数触发一次后,事件立即被删除。即在每个对象上,事件处理函数只会被执行一次。 六、JQuery中的DOM动画 通过设置DOM对象的显示与隐藏方式,可以产生动画效果。 1.无动画效果的隐藏与显示 hide():在HTML文档中,为一个元素调用hide()方法会将该元素的display样式改为none。代码功能同css(“display”, “none”);相同。 show():将元素的display样式改为先前的显示状态。 toggle():切换元素的可见状态:如果元素时可见的,则切换为隐藏;如果元素时隐藏的,则切换为可见的。 2.通过设置透明度效果的隐藏与显示,达到淡入淡出的动画效果 fadeIn(),fadeOut():只改变元素的透明度。fadeOut() 会在指定的一段时间内降低元素的不透明度,直到元素完全消失。fadeIn() 则相反。如,用600毫秒缓慢的将段落淡入: (“btn”).unbind();one():该方法可以为元素绑定处理函数。当处理函数触发一次后,事件立即被删除。即在每个对象上,事件处理函数只会被执行一次。 六、JQuery中的DOM动画通过设置DOM对象的显示与隐藏方式,可以产生动画效果。 1.无动画效果的隐藏与显示hide():在HTML文档中,为一个元素调用hide()方法会将该元素的display样式改为none。代码功能同css(“display”, “none”);相同。show():将元素的display样式改为先前的显示状态。toggle():切换元素的可见状态:如果元素时可见的,则切换为隐藏;如果元素时隐藏的,则切换为可见的。 2.通过设置透明度效果的隐藏与显示,达到淡入淡出的动画效果fadeIn(),fadeOut():只改变元素的透明度。fadeOut() 会在指定的一段时间内降低元素的不透明度,直到元素完全消失。fadeIn() 则相反。如,用600毫秒缓慢的将段落淡入:(“p”).fadeIn(“slow”);。
fadeTo():把不透明度以渐近的方式调整到指定的值(0 – 1 之间)。并在动画完成后可选地触发一个回调函数。如,用200毫秒快速将段落的透明度调整到0.25,动画结束后,显示一个“Animation Done”信息框:“ ( " p " ) . f a d e T o ( " f a s t " , 0.25 , f u n c t i o n ( ) a l e r t ( " A n i m a t i o n D o n e . " ) ; ) ; ” 。 3. 通 过 设 置 高 度 效 果 的 隐 藏 与 显 示 , 达 到 滑 下 与 收 起 的 动 画 效 果 s l i d e D o w n ( ) , s l i d e U p ( ) : 只 会 改 变 元 素 的 高 度 。 如 果 一 个 元 素 的 d i s p l a y 属 性 为 n o n e , 当 调 用 s l i d e D o w n ( ) 方 法 时 , 这 个 元 素 将 由 上 至 下 延 伸 显 示 。 s l i d e U p ( ) 方 法 正 好 相 反 , 元 素 由 下 至 上 缩 短 隐 藏 。 如 , 用 600 毫 秒 缓 慢 的 将 段 落 滑 下 : ("p").fadeTo("fast", 0.25, function(){ alert("Animation Done."); });”。 3.通过设置高度效果的隐藏与显示,达到滑下与收起的动画效果 slideDown(),slideUp():只会改变元素的高度。如果一个元素的display属性为none,当调用slideDown() 方法时,这个元素将由上至下延伸显示。slideUp() 方法正好相反,元素由下至上缩短隐藏。如,用600毫秒缓慢的将段落滑下: ("p").fadeTo("fast",0.25,function()alert("AnimationDone."););”。 3.通过设置高度效果的隐藏与显示,达到滑下与收起的动画效果slideDown(),slideUp():只会改变元素的高度。如果一个元素的display属性为none,当调用slideDown() 方法时,这个元素将由上至下延伸显示。slideUp() 方法正好相反,元素由下至上缩短隐藏。如,用600毫秒缓慢的将段落滑下:(“p”).slideDown(“slow”);。
slideToggle():通过高度变化来切换匹配元素的可见性。如,200毫秒快速将段落滑上或滑下,动画结束后,会显示一个“Animation Done”信息框:“$(“p”).slideToggle(“fast”,function(){ alert(“Animation Done.”); });”。
使用JavaScript、JQuery可以处理当前页面的动态更新,再结合CSS样式可以做出十分漂亮的UI,甚至比桌面软件UI漂亮的多。JavaScript的编写与调试非常麻烦,所以也有一些公司出品了专门针对JavaScript应用的简化开发,比如Google出品的GWT,可以像使用Java编写swing那样编写JavaScript。它为用户提供像swing那样的UI接口与事件等操作并且支持JAVA的核心库。使用GWT自己的编译器,可以将JAVA代码编译为JavaScript代码、CSS样式文件和HTML。
分类: JavaScript, 技术网摘