JQuery学习总结
现在已经学过JQuery 我们就来简单的总结一下: 1.
(
)
方
法
:
可
以
通
过
()方法: 可以通过
()方法:可以通过()方法来获得页面的指定节点,参数是某种CSS的选择器。 var userNameNode=$("#userName");获取页面userName节点。 $()方法的参数是一个DOM对象时,这个方法相当于把DOM对象转换成JQuery对象。 $()方法的参数如果是一段正确的HTML文本,则可以创建一个DOM节点,并包装成JQuery对象。 创建一个文本框var inputObj = $("<inputtype=‘text’>")
(
)
方
法
返
回
的
j
q
u
e
r
y
对
象
上
执
行
各
种
j
q
u
e
r
y
的
方
法
来
获
取
数
据
,
定
义
事
件
,
执
行
操
作
。
2.
关
于
界
面
显
示
l
i
s
t
−
s
y
l
e
:
n
o
n
e
;
可
以
清
除
列
表
u
l
和
l
i
前
面
的
小
圆
点
。
b
a
c
k
g
r
o
u
n
d
−
i
m
a
g
e
:
u
r
l
(
.
.
/
i
m
a
g
e
s
/
c
o
l
l
a
p
s
e
d
.
g
i
f
)
;
/
/
指
定
一
个
元
素
的
背
景
图
。
b
a
c
k
g
r
o
u
n
d
−
r
e
p
e
a
t
:
n
o
−
r
e
p
e
a
t
;
/
/
控
制
背
景
图
的
重
复
填
充
方
式
如
果
一
个
元
素
上
同
时
定
义
了
背
景
图
和
背
景
色
,
那
么
有
背
景
图
的
地
方
是
不
会
显
示
背
景
色
的
。
W
i
d
t
h
(
)
方
法
可
以
设
置
或
获
取
某
个
节
点
的
宽
度
。
3.
获
取
内
容
:
V
a
l
(
)
方
法
可
以
获
得
节
点
的
v
a
l
u
e
属
性
值
。
G
e
t
(
)
方
法
可
以
获
得
j
Q
u
e
r
y
对
象
中
包
含
的
某
一
个
D
O
M
节
点
。
c
h
i
l
d
r
e
n
方
法
可
以
获
得
某
个
节
点
的
子
节
点
,
可
以
制
定
参
数
来
限
制
子
节
点
的
内
容
。
p
a
r
e
n
t
(
)
方
法
可
以
获
得
一
个
节
点
的
父
节
点
。
n
e
x
t
(
)
方
法
可
以
获
得
一
个
节
点
的
下
一
个
兄
弟
节
点
。
P
r
e
v
i
o
u
s
(
)
方
法
可
以
获
得
一
个
节
点
的
上
一
个
兄
弟
节
点
。
a
t
t
r
(
)
方
法
可
以
设
置
或
获
取
某
一
个
节
点
的
属
性
值
。
e
a
c
h
(
)
,
一
个
包
含
了
多
个
元
素
的
J
Q
u
e
r
y
对
象
上
执
行
e
a
c
h
(
)
方
法
,
可
以
注
册
给
以
接
收
到
一
个
参
数
,
表
示
这
个
元
素
的
索
引
值
。
e
q
(
)
方
法
可
以
根
据
索
引
值
只
得
到
J
Q
u
e
r
y
对
象
中
包
含
的
多
个
元
素
中
的
某
一
个
元
素
,
并
仍
然
返
回
元
素
对
应
的
新
J
Q
u
e
r
y
对
象
。
例
如
()方法返回的jquery对象上执行各种jquery的方法来获取数据,定义事件,执行操作。 2.关于界面显示 list-syle:none;可以清除列表ul和li前面的小圆点。 background-image: url(../images/collapsed.gif); //指定一个元素的背景图。 background-repeat: no-repeat; //控制背景图的重复填充方式 如果一个元素上同时定义了背景图和背景色,那么有背景图的地方是不会显示背景色的。 Width()方法可以设置或获取某个节点的宽度。 3.获取内容:Val()方法可以获得节点的value属性值。 Get()方法可以获得jQuery对象中包含的某一个DOM节点。 children方法可以获得某个节点的子节点,可以制定参数来限制子节点的内容。parent()方法可以获得一个节点的父节点。next()方法可以获得一个节点的下一个兄弟节点。Previous()方法可以获得一个节点的上一个兄弟节点。attr()方法可以设置或获取某一个节点的属性值。each(),一个包含了多个元素的JQuery对象上执行each()方法,可以注册给以接收到一个参数,表示这个元素的索引值。eq()方法可以根据索引值只得到JQuery对象中包含的多个元素中的某一个元素,并仍然返回元素对应的新JQuery对象。例如
()方法返回的jquery对象上执行各种jquery的方法来获取数据,定义事件,执行操作。2.关于界面显示list−syle:none;可以清除列表ul和li前面的小圆点。background−image:url(../images/collapsed.gif);//指定一个元素的背景图。background−repeat:no−repeat;//控制背景图的重复填充方式如果一个元素上同时定义了背景图和背景色,那么有背景图的地方是不会显示背景色的。Width()方法可以设置或获取某个节点的宽度。3.获取内容:Val()方法可以获得节点的value属性值。Get()方法可以获得jQuery对象中包含的某一个DOM节点。children方法可以获得某个节点的子节点,可以制定参数来限制子节点的内容。parent()方法可以获得一个节点的父节点。next()方法可以获得一个节点的下一个兄弟节点。Previous()方法可以获得一个节点的上一个兄弟节点。attr()方法可以设置或获取某一个节点的属性值。each(),一个包含了多个元素的JQuery对象上执行each()方法,可以注册给以接收到一个参数,表示这个元素的索引值。eq()方法可以根据索引值只得到JQuery对象中包含的多个元素中的某一个元素,并仍然返回元素对应的新JQuery对象。例如(“div:eq(1)”) 4.设定内容: Html()方法可以设定某个节点中的html内容。 addClass()removeClass()方法可以给某个节点添加或删除一个class。 appendTo方法可以将一个节点追加到另一个节点所有子节点的后面。 5.事件:响应事件Click()方法可以相应鼠标点击事件。 Keyup()方法可以响应键盘弹起的事件。 Trigger()方法可以触发某个JavaScript的事件发生。fadeOut()和fadeIn()可以实现淡出淡入的效果,参数内容和slideUp(),slideDown()方法类似。animate()方法可以实现任意的动画效果,可以控制某个css属性在某个时间内进行变化,从而达到动画的效果。鼠标事件:
表单事件:
键盘事件:
事件的绑定和解绑:
6. jQuery动画
(1).隐藏/显示 show()/hide()如:$obj.show(执行时间,动画完毕后执行的函数)
(2).上下滑动 slideDown()/slideUp用法同上![在这里插入图片描述](https://img-blog.csdnimg.cn/20200809201556705.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3MDk0OQ==,size_16,color_FFFFFF,t_70)
(3).淡入淡出式动画 fadeOut()/fadeIn()用法同上![在这里插入图片描述](https://img-blog.csdnimg.cn/2020080920160746.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3MDk0OQ==,size_16,color_FFFFFF,t_70)
(4).自定义动画 移动位置:animate(偏移起始位置,执行时间,回调函数)(回调函数选择写)(若移动图片则需预先将图片定位,改变流定位默认模式,在样式中将图片设置为相对定位:position:relative)。如:$("div").click(function(){ $(this).animate({'left':500px'},4000);
$(this).animate({'top':300px'},2000);});元素变形:如:$("div").animate({"height":"300px"},2000).animate({"width":"300px"},2000);//each()是jQuery封装的遍历方法//含义是每次循环都执行each()里的function()$(emps).each(function(){});7.JQuery学习总结jQuery总是会给我们太多的便利、简洁还有一点点的零散,所以,需要我们好好的总结、好好的利用,将零散的它们串成线,再结合以前的JS织成网,达到一定的新高度。