jQurey
一、jQuery简介
1.版本
(1)jQuery1:兼容所有浏览器
(2)jQuery2:不再支持IE6/7/8
(3)jQuery3:目前版本
2.作用
jQuery作为JavaScript封装的库,他的目的就是为了简化开发者使用JavaScript。
二、jQurey代码
1.$
在jQuery程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,
2.jQuery对象
(1)jQuery对象是一个列表对象,就是操作内容是针对看列表中所有的元素。
(2)jQuery对象是不能使用DOM的方法和事件。
(3)jQuery的方法也只针对jQuery对象使用,DOM对象不能使用。
(4)jQuery转换为DOM元素
①
(
"
d
i
v
"
)
[
i
]
;
②
("div")[i]; ②
("div")[i];②(“div”).get(0);
⑤$(“div”).get(); 返还一个dom元素的数组
(5)DOM元素转换为jQuery
①直接将dom元素放入jQuery $() 函数内。
②将nodeList或者HTMLCollection放入 $() 函数内,转为jQuery对象
(6)jQuery对象筛选其中某一个
$("").eq(i)
三、jQuery选择器
1.选择器种类
(1) 1.
(
"
d
i
v
"
)
标
签
选
(
2
)
("div") 标签选 (2)
("div")标签选(2)("#div1") id选择器
(3)
(
"
.
d
i
v
0
"
)
c
l
a
s
s
选
择
器
(
4
)
(".div0") class选择器 (4)
(".div0")class选择器(4)("") 通配符选择器
(5)
(
"
d
i
v
.
d
i
v
2
"
)
后
代
选
择
器
(
包
含
的
所
有
标
签
)
(
6
)
("div .div2") 后代选择器(包含的所有标签) (6)
("div.div2")后代选择器(包含的所有标签)(6)(“div>.div2”) 子代选择器(仅下一级标签)
(7)
(
"
.
d
i
v
1
+
d
i
v
"
)
下
一
个
兄
弟
选
择
器
(
8
)
(".div1+div") 下一个兄弟选择器 (8)
(".div1+div")下一个兄弟选择器(8)(".div1~div") 下面所有的兄弟选择器
(9)特殊:
①
"
d
i
v
.
d
i
v
1
"
;
d
i
v
中
类
名
是
d
i
v
1
的
d
i
v
②
{"div.div1"}; div中类名是div1的div ②
"div.div1";div中类名是div1的div②(“div .div1”); div后代中类名是div1的元素
③
(
"
.
d
i
v
1
>
∗
"
)
;
类
名
是
d
i
v
1
所
有
的
子
元
素
④
(".div1>*"); 类名是div1所有的子元素 ④
(".div1>∗");类名是div1所有的子元素④(" .div1+") div1下一个任意兄弟元素
2.选择器方法
①$(".div1").next();
(
"
.
d
i
v
1
+
"
)
;
②
(".div1+"); ②
(".div1+");②(" .div1") .nextAll();
(
"
.
d
i
v
1
"
)
;
③
(".div1~"); ③
(".div1 ");③(".div1"). nextUntil(" .div2"); div1到div2停止
④
(
"
.
d
i
v
1
"
)
.
p
r
e
v
(
)
;
向
上
的
一
个
兄
弟
元
素
⑤
(".div1").prev(); 向 上的一个兄弟元素 ⑤
(".div1").prev();向上的一个兄弟元素⑤(". div1"). prevAll(); 向.上的所有兄弟元素
⑥
(
"
.
d
i
v
1
"
)
.
p
r
e
v
U
n
t
i
l
(
"
.
d
i
v
2
"
)
;
从
d
i
v
1
向
上
到
d
i
v
2
兄
弟
元
素
截
止
⑦
(".div1"). prevUntil(" . div2"); 从div1向上到div2兄弟元素截止 ⑦
(".div1").prevUntil(".div2");从div1向上到div2兄弟元素截止⑦(" .div1"). find(“span”);
(
"
.
d
i
v
1
s
p
a
n
"
)
;
⑧
(".div1 span"); ⑧
(".div1span");⑧(" .div1"). find(“span”); $(".div1 span");
3.属性选择器
(1)
(
"
d
i
v
[
a
]
"
)
标
签
是
否
具
备
a
属
性
(
2
)
("div[a]") 标签是否具备a属性 (2)
("div[a]")标签是否具备a属性(2)("[a]") 具有a属性的标签
(3)
(
"
[
a
=
1
]
"
)
具
有
属
性
a
,
且
属
性
值
为
1
的
标
签
(
4
)
("[a=1]") 具有属性a,且属性值为1的标签 (4)
("[a=1]")具有属性a,且属性值为1的标签(4)("[a|=ab]") 具有属性a,且属性值是ab或者ab- 的标签
(5)
(
"
[
a
=
a
b
]
"
)
具
有
属
性
a
,
且
属
性
值
是
a
b
或
者
以
空
格
区
分
隔
的
标
签
(
6
)
("[a~=ab]") 具有属性a,且属性值是ab或者以空格区分隔的标签 (6)
("[a =ab]")具有属性a,且属性值是ab或者以空格区分隔的标签(6)("[a^=1]") 具有属性a,且属性值以1开头的标签
(7)$("[a=
1
]
"
)
具
有
属
性
a
,
且
属
性
值
以
1
结
尾
的
标
签
(
8
)
1]") 具有属性a,且属性值以1结尾的标签 (8)
1]")具有属性a,且属性值以1结尾的标签(8)("[a=!1]") 具有属性a,且属性值不为1的标签
四、jQuery过滤器
1.基本过滤器
(1)first
①
(
"
d
i
v
.
f
i
r
s
t
"
)
将
所
有
d
i
v
放
在
一
个
列
表
中
,
筛
选
出
第
一
个
元
素
等
同
于
:
("div.first")将所有div放在一个列表中,筛选出第一个元素 等同于:
("div.first")将所有div放在一个列表中,筛选出第一个元素等同于:(“div”).first();
②
(
"
d
i
v
:
f
i
r
s
t
−
c
h
i
l
d
"
)
将
每
个
d
i
v
父
元
素
中
的
第
一
个
子
元
素
,
如
果
是
d
i
v
的
筛
选
出
来
③
("div:first-child") 将每个div父元素中的第一个子元素,如果是div的筛选出来 ③
("div:first−child")将每个div父元素中的第一个子元素,如果是div的筛选出来③(“div:first-of-type”);将每个div父元素中第一个div类型的子元素筛选出来
(2)last
①
(
"
[
d
i
v
.
l
a
s
t
"
)
等
同
于
:
("[div.last") 等同于:
("[div.last")等同于:(“div”).last();
②
(
"
d
i
v
:
l
a
s
t
−
c
h
i
l
d
"
)
③
("div:last-child") ③
("div:last−child")③(“div:last-of-type”)
(3)not: $(“ul>:not(li)”) ul所有子元素中不是li元素的
(4)even: $(“li :even”); 偶数列表 是从0开始计数
(5)odd:
(
"
l
i
:
o
d
d
"
)
;
奇
数
项
(
6
)
n
t
h
①
("li:odd"); 奇数项 (6)nth ①
("li:odd");奇数项(6)nth①(“li:nth-child(i)”); 父元素内,下标为i的元素,父元素内只能有li一种类型元素
②$(“li:nth-of-type(i)”); 父元素内,下标为i的元素,父元素下可以有不同类型元素
(7)gt: $(“li:gt(i)”) 列表中下标大于i的所有元素
(8)lt:
(
"
l
i
:
l
t
(
i
)
"
)
列
表
中
下
标
小
于
i
的
所
有
元
素
(
9
)
("li:lt(i)") 列表中下标小于i的所有元素 (9)
("li:lt(i)")列表中下标小于i的所有元素(9)(“li:eq(i)”); li列表内下标为i的元素
(10)
(
"
:
h
e
a
d
e
r
"
)
;
所
有
h
1
−
h
6
的
元
素
(
11
)
(":header"); 所有h1-h6的元素 (11)
(":header");所有h1−h6的元素(11)(":animated"); 所有使用aniamte动画的元素
(12)
(
"
:
f
o
c
u
s
"
)
;
聚
焦
元
素
(
13
)
(":focus"); 聚焦元素 (13)
(":focus");聚焦元素(13)(":empty"); 没有内容或者子元素的元素
(14)
(
"
.
d
i
v
1
:
h
a
s
(
.
d
i
v
2
)
"
)
;
含
有
d
i
v
2
的
内
容
的
d
i
v
1
元
素
(
15
)
(".div1:has(.div2)"); 含有div2的内容的div1元素 (15)
(".div1:has(.div2)");含有div2的内容的div1元素(15)(".div2:parent"); 判断div2有子元素的或者有内容的
(16)
(
"
.
d
i
v
2
"
)
.
p
a
r
e
n
t
s
(
)
;
获
取
d
i
v
2
的
所
有
父
元
素
(
17
)
(".div2").parents(); 获取div2的所有父元素 (17)
(".div2").parents();获取div2的所有父元素(17)(".div2").parentsUntil(“html”); 获取div2的所有父元素中到什么之前的
(18)
(
"
.
d
i
v
1
:
c
o
n
t
a
i
n
s
(
1
)
"
)
;
判
断
元
素
的
后
代
中
有
1
这
个
内
容
的
元
素
(
19
)
(".div1:contains(1)"); 判断元素的后代中有1这个内容的元素 (19)
(".div1:contains(1)");判断元素的后代中有1这个内容的元素(19)(".div4:hidden"); 隐藏的元素,针对display:none或者是不显示的元素
(20)
(
"
:
v
i
s
i
b
l
e
"
)
;
显
示
的
元
素
(
21
)
(":visible"); 显示的元素 (21)
(":visible");显示的元素(21)(":only-child") 只有一个子元素的元素
(22)
(
"
d
i
v
"
)
.
i
s
(
"
.
d
i
v
1
"
)
;
这
个
方
法
得
到
一
个
布
尔
值
,
是
否
在
d
i
v
中
有
类
名
是
d
i
v
1
的
元
素
(
23
)
("div").is(".div1"); 这个方法得到一个布尔值,是否在div中有类名是div1的元素 (23)
("div").is(".div1");这个方法得到一个布尔值,是否在div中有类名是div1的元素(23)(“div”).hasClass(“div1”); 这个方法得到一个布尔值,是否在div中类名是div1的元素
(24)
(
"
l
i
"
)
.
s
l
i
c
e
(
2
,
4
)
;
d
i
v
列
表
中
选
择
第
2
个
到
第
4
个
之
间
的
元
素
(
25
)
("li").slice(2,4); div列表中选择第2个到第4个之间的元素 (25)
("li").slice(2,4);div列表中选择第2个到第4个之间的元素(25)(":text"); type=text的input
(26)
(
"
:
d
i
s
a
b
l
e
d
"
)
;
不
可
用
(
27
)
(":disabled"); 不可用 (27)
(":disabled");不可用(27)(":enabled"); 可用
(28)
(
"
:
c
h
e
c
k
e
d
"
)
;
用
于
i
n
p
u
t
中
c
h
e
c
k
b
o
x
和
r
a
d
i
o
(
29
)
(":checked"); 用于input中checkbox和radio (29)
(":checked");用于input中checkbox和radio(29)(":selected"); 用于下拉菜单的元素
四 、jQuery遍历
1.数组的遍历
$.each(function(index,item){});
2.对象广度遍历
$.each(obj.function(key,value){});
五、jQuery内容
1.html
① ( " d i v " ) . h t m l ( " " ) ; 等 同 于 d i v . i n i n n e r H T M L ② ("div").html(""); 等同于div.ininnerHTML ② ("div").html("");等同于div.ininnerHTML②(“div”).html(); 获取第一个div元素的文本
2.text
①$(“div”).text(""); 将所有列表中的元素的内容和为一个字符串返回
3.on
$(“input”).on(“input”,function(){} input事件侦听
4.val
$(“input”).val(10); 设置value
六、jQuery属性
1.attr
(1)
(
"
d
i
v
"
)
.
a
t
t
r
(
"
a
"
)
;
只
能
获
取
元
素
列
表
中
第
一
个
元
素
的
a
属
性
(
2
)
("div").attr("a"); 只能获取元素列表中第一个元素的a属性 (2)
("div").attr("a");只能获取元素列表中第一个元素的a属性(2)(“div”).attr(“a”,“3”);
给元素赋予属性
2.data
(1)$(“div”).data(“属性名”,“属性值”);
设置在一个jquery映射对象上的
3.prop
(1)
(
"
d
i
v
"
)
.
p
r
o
p
(
"
属
性
名
"
,
"
属
性
值
"
)
;
设
置
了
j
q
u
e
r
y
列
表
中
所
有
D
O
M
的
对
象
属
性
增
加
某
个
属
性
(
2
)
("div").prop("属性名","属性值"); 设置了jquery列表中所有DOM的对象属性增加某个属性 (2)
("div").prop("属性名","属性值");设置了jquery列表中所有DOM的对象属性增加某个属性(2)(“div”).prop(“属性名”);
从列表中取第一个元素的DOM对象属性值
4.总结
(1)attr是设置在DOM标签上的属性
(2)prop是设置在DOM对象上的对象属性
(3)data 是设置在jQuery映射对象上的属性,为了不污染DOM对象的属性
七、jquery的CSS的样式
1.css
(1)
(
"
d
i
v
"
)
.
c
s
s
(
"
w
i
d
t
h
"
,
"
50
p
x
"
)
;
设
置
c
s
s
样
式
(
2
)
("div").css("width","50px"); 设置css样式 (2)
("div").css("width","50px");设置css样式(2)(“div”).css(“width”);
不但可以获取行内样式,还可以获取css计算后的样式
(3)$(“div”).css([“width”,[height],“color”…)
获取第一个元素多个指定的样式值,返回一个对象
2.addClass
(1)
(
"
d
i
v
"
)
.
a
d
d
C
l
a
s
s
添
加
类
名
(
2
)
("div").addClass 添加类名 (2)
("div").addClass添加类名(2)(“div”).removeClass
删除类名
3.width ,height
(1)
(
"
d
i
v
"
)
.
w
i
d
t
h
(
)
内
容
宽
度
(
2
)
("div").width() 内容宽度 (2)
("div").width()内容宽度(2)(“div”).height() 内容高度
(3)
(
"
d
i
v
"
)
.
i
n
n
e
r
W
i
d
t
h
(
)
w
i
d
t
h
+
p
a
d
d
i
n
g
宽
度
(
4
)
("div").innerWidth() width+padding宽度 (4)
("div").innerWidth()width+padding宽度(4)(“div”).outerWidth() width+padding+border宽度
(5)
(
"
d
i
v
"
)
.
o
u
t
e
r
W
i
d
t
h
(
t
r
u
e
)
w
i
d
t
h
+
p
a
d
d
i
n
g
+
m
a
r
g
i
n
+
b
o
r
d
e
r
宽
度
(
6
)
("div").outerWidth(true) width+padding+margin+border宽度 (6)
("div").outerWidth(true)width+padding+margin+border宽度(6)(“div”).offset() 元素相对于页面左上角的位置
设置
(
"
d
i
v
"
)
.
o
u
t
e
r
W
i
d
t
h
(
l
e
f
t
:
500
,
t
o
p
:
500
)
;
(
7
)
("div").outerWidth({left:500,top:500}); (7)
("div").outerWidth(left:500,top:500);(7)(“div”).position() 获取定位位置 (不能进行设置)
(8)
(
"
d
i
v
"
)
.
s
c
r
o
l
l
T
o
p
(
)
获
取
和
设
置
滚
动
条
位
置
设
置
:
("div").scrollTop() 获取和设置滚动条位置 设置 :
("div").scrollTop()获取和设置滚动条位置设置:(“div”).scrollTop(200);
八、jQuery的DOM
1.创建DOM元素
$("<div></div>").appendTo("body").width(50).height(50).css("...");
2.插入
(1)append
①$(“body”) . append(div);
(
"
b
o
d
y
"
)
.
a
p
p
e
n
d
(
"
<
d
i
v
>
<
/
d
i
v
>
"
)
;
这
种
写
法
返
回
b
o
d
y
的
j
Q
u
e
r
y
的
对
象
②
("body") .append("<div></div>"); 这种写法返回body的jQuery的对象 ②
("body").append("<div></div>");这种写法返回body的jQuery的对象②("
这种写法返回的是div的jQuery对象
(2)prepend
$(" "). prependTo(".div1");
插入父元素的第一个子元素位置
(3)after和before
① $(" "). prependTo(".div1");
插入父元素的第一个子元素位置
( " . d i v 1 " ) . p r e p e n d ( " < d i v > < / d i v > " ) ; ② (".div1"). prepend("<div></div>"); ② (".div1").prepend("<div></div>");②(".div1").before(" ")
$(" "). insertBefore(".div1");
插入在兄弟元素前面
3.wrap
(1)
(
"
d
i
v
"
)
.
w
r
a
p
(
"
<
a
>
<
/
a
>
"
)
;
给
每
个
元
素
外
面
的
包
裹
−
−
个
a
标
签
(
2
)
( "div" ).wrap("<a></a>"); 给每个元素外面的包裹- - 个a标签 (2)
("div").wrap("<a></a>");给每个元素外面的包裹−−个a标签(2)( “div” ).wrapAll("");
给所有元素外面包裹一个a标签
(3)
(
"
s
p
a
n
"
)
.
u
n
w
r
a
p
(
)
;
将
包
裹
的
父
元
素
删
除
(
4
)
("span") . unwrap(); 将包裹的父元素删除 (4)
("span").unwrap();将包裹的父元素删除(4)(“div”) . wrapInner("");
给每个div的内容包裹1个a标签
4.clone
(1)
(
"
d
i
v
"
)
.
c
l
o
n
e
(
f
a
l
s
e
)
;
深
复
制
,
但
不
复
制
事
件
(
2
)
("div"). clone(false); 深复制,但不复制事件 (2)
("div").clone(false);深复制,但不复制事件(2)(“div”) .clone(true);
深复制,连事件一起复制
5.删除
(1)
(
"
d
i
v
"
)
.
r
e
m
o
v
e
(
)
;
删
除
元
素
的
时
候
会
将
所
有
元
素
的
事
件
也
删
除
注
销
(
2
)
("div").remove(); 删除元素的时候会将所有元素的事件也删除注销 (2)
("div").remove();删除元素的时候会将所有元素的事件也删除注销(2)(“div”).detach
仅删除元素,事件保留
(3)$(".div1"). empty();
清除元素的所有子元素和内容
6.替换
(1)
(
"
.
d
i
v
1
"
)
.
r
e
p
l
a
c
e
W
i
t
h
(
"
<
a
>
<
/
a
>
"
)
;
a
替
换
d
i
v
1
(
2
)
(" .div1") . replaceWith("<a></a>"); a替换div1 (2)
(".div1").replaceWith("<a></a>");a替换div1(2)("") . replaceA1l(" .div1");
a替换div1
九、jQuery事件
1.添加事件
$(".div1").on("触发事件.命名空间",function(e){});
2.删除事件
$(".div1").off("触发事件.命名空间");
将所有click事件的内容全部删除。
3.传参
$(".div1").on("触发事件",传入的参数,function(e){
e.data //参数存放在e.data里
});
4.抛发事件
(1)抛发事件
$(".div").on(“触发事件”,function(e){});
$(“div”). trigger(“chilema”);
(2)抛发事件带参数
$(".div").on(“触发事件”,function(e,o){
o //o为抛发带的参数
});
$(“div”). trigger(“chilema”,参数);
(3)triggerHandler 和 trigger 的区别
①
$(“form” ) . trigger(" submit" ); 会触发默认事件
$(“form”). triggerHandler(“submit”); 这个不会触发默认事件
②triggerHandler()方法只会影响第-个匹配到的元素,而.trigger()会影响所有。
③triggerHandler()方法会返回当前事件执行的返回值,如果没有返回值,则返回undefined; 而.trigger()则返回当前包含事件触发元素的jQuery对象(方便链式连缀调用)。
5.简写事件
$(“div”).click(function(){});
所有事件都可以简写
6.加载事件
(1)$(document).ready(function(){});
当DOM全部加载完成,图片未加载完成前
十、jquery动画
1. hide 隐藏
$(“div”).hide(毫秒数);
2.show 显示
$(“div”).show(毫秒数);
3.toggle 切换
$(“div”).toggle(毫秒数);
4.slideUP 和 slideDown
(1)slideUp
向上消失
(2)slideDown
向下出现
5.fadeOut 和 fadeIn 和 fadeTo
(1)fadeOut
逐渐显示
(2)fadeIn
逐渐消失
(3)fadeTo
透明到多少
6.animate
数字变化的属性实现动画
十一、jQuery插件
1. jQuery方法重构
$.fn.方法名=function(参数){
return this;};
2.扩展jQuery静态方法
$.extend({
方法名:function(参数){
}})
3.注意
(1)使用闭包
①(function(
)
)
j
Q
u
e
r
y
)
;
自
执
行
函
数
②
避
免
全
局
依
赖
③
避
免
第
三
方
破
坏
④
兼
容
j
q
u
e
r
y
操
作
符
)){ }jQuery); 自执行函数 ②避免全局依赖 ③避免第三方破坏 ④兼容jquery操作符
))jQuery);自执行函数②避免全局依赖③避免第三方破坏④兼容jquery操作符‘和"jQuery’
(2)扩展
①JQuery提供 了2个供用户扩展的“基类" --S extend和$ .fn. extend
②
.
e
x
t
e
n
d
用
于
自
身
方
法
③
.extend用于自身方法 ③
.extend用于自身方法③.fn. extentd用户扩展jquery类
(3)选择器
①尽量使用ld选择器
②样式选择器应该尽量明确指定的tagName,例如className为jq的div,要写成
(
′
d
i
v
.
j
q
′
)
而
不
是
('div.jq')而不是
(′div.jq′)而不是(’.jq’)
十二、jQuery中AJAX
1.格式
最顶层
$.getJSON();
$.getScript();
中间层
$.(“div”).load();
$.get();
$.post();
最底层
$.ajax();
2.最顶层
(1)$.getJSON();
加载JSON;
g
e
t
J
S
O
N
(
"
j
s
o
n
文
件
路
径
"
,
f
u
n
c
t
i
o
n
(
d
a
t
a
)
)
;
(
2
)
getJSON("json文件路径",function(data){}); (2)
getJSON("json文件路径",function(data));(2).getScript();
加载JS;
$.getScript(“js文件路径”,function(){})
3.中间层
(1)$.get();
.
g
e
t
(
"
服
务
器
路
径
"
,
f
u
n
c
t
i
o
n
(
d
a
t
a
)
)
;
(
2
)
.get("服务器路径",function(data){}); (2)
.get("服务器路径",function(data));(2)post();
$.post(“服务器路径”,{参数对象},function(data){
})
(3)load
①通信
1° $(“div”).load(“服务器地址”,{参数对象});
2° $(document).load(“服务器地址”,{参数对象},function(data){});
②加载页面
$(“div”).load("./2、jQuery插件.html")
③加载JS
$(document).load("./a.js",function(data){
var script=document.createElement(“script”);
script.innerHTML=data;
document.body.appendChild(script);
})
④加载JSON
$(document).load("./config.json",function(data){})
4.最底层
(1)$.ajax
$.ajax({
url:“服务器路径”,
tyoe:“POST”,
data:{“数据”,“数据”}
success:function(data){}
})
(2)JSONP
$.ajax({
url:“路径+&cb=callback”,
type:“GET”,
dataType:“jsonp”,
})
function callback(data){}
(3)queryString 序列化
$(“form”).serialize()