jQuery
介绍
- jQuery是一个快速、简洁的JavaScript框架,宗旨是写得少,做的多。
- 它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
- 核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
大致为 :选择器,文档处理,属性操作,类操作,遍历,事件,动画,Ajax,存储 等。
jQuery选择器
-
基本选择器
#id id匹配
.class 类匹配
Element 元素名匹配
∗ 匹配所有元素
E1,E2,E3 分组匹配 -
层次选择器
$(“E1 E2”) 选择E1下所有E2
$(“E1> E2”) 选择E1下的子E2,的元素
$(“E1+ E2”) 选择E1后紧相邻的
$(“E1~ E2”) 选择E1之后的所有
补充说明:
( “ E 1 + E 2 ” ) 可 以 用 (“E1 + E2”)可以用 (“E1+E2”)可以用(E1).next(E2)代替
( “ E 1 E 2 ” ) 可 以 用 (“E1 ~ E2”)可以用 (“E1 E2”)可以用斜体样式(E1).nextAll(E2)代替 -
过滤选择器
-
通过特定的过滤规则来筛选出需要的DOM元素,以冒号(:)开头。
-
3.1 基本过滤选择器
:first
:last
:not(E1) 去除所有E1选择器匹配的元素
:even 偶数
:odd 奇数
:eq(index) 索引值是index
:gt(index) 索引值大于index的元素
:lt(index) 索引值小于index的元素
:header 所有标题元素
:animated 正在执行动画的所有元素 -
3.2 内容过滤选择器
:contains(text) 含有text文本内容的元素
:empty 不包含子元素或文本的空元素
:has(E1) 包含有(E1选择器匹配的元素) 的所有元素
:parent 含有子元素或文本的元素 -
3.3 可见性过滤选择器
:hidden 所有不可见元素
:visible 所有可见元素 -
3.4 属性过滤选择器
[attribute] 拥有此属性的元素
[attribute=value] 属性值为value的元素
[attribute!=value] 属性值不为value的元素
[attribute^=value] 属性值以value开始的元素
[attribute$=value] 属性以value值结束的元素
[attribute*=value] 属性中含有value的元素
[A1][A2]…A[N] 用属性选 择器合并成一个复合属性选择器。满足多个条件。 -
3.5 子元素过滤选择器
:nth-child(index/even/odd) 父元素下的第index素或奇偶元素
:first-child 每个父元素的第1个子元素
:last-child 每个父元素的最后1
:only-child 某个元素是它父元素中惟一的子元素, 将会被匹配. 如果元素中含有其他元素,则不会被匹配
:nth-child() -
3.6 表单对象属性过滤选择器
:enabled 所有可用元素
:disabled 所有不可用元素
:checked 所有被选中的元素(单选框,复选框)
:selected 所有被选中的选项元素(下拉列表)
- 表单选择器
:input 匹配所有 元素
:text 所有单行文本框 集合元素 $(“:text”)
:password 所有密码框 集合元素 $(“:password”)
:radio 所有单选框 集合元素 $(“:radio”)
:checkbox 所有复选框 集合元素 $(“:checkbox”)
:submit 匹配所有提交按钮 集合元素 $(“:submit”)
:image 匹配所有图像按钮 集合元素 $(“:image”)
:reset 匹配所有重置按钮 集合元素 $(“:reset”)
:button 匹配所有按钮 集合元素 $(“:button”)
:file 匹配所有文件域 集合元素 $(“:file”)
:hidden 匹配所有不可见元素 集合元素 $(“:hidden”)
文档处理
-
内部插入
append / appendto 向后追加
prepend / prependto 向前追加(最上边)world!")
html( )
:获取匹配元素集合中第一个元素的HTML内容并返回字符串
text()方法
获取匹配元素集合中每个元素的内容并返回字符串
val()方法
元素的值通过 value 属性设置的。多用于 input 元素。 -
外部插入
before / insertBefore
此方法将参数指定的内容插入到匹配元素集合中的每个元素之前,并返回jQuery对象。 -
删除
remove()方法
移除被选元素,包括所有文本和子节点
detach()方法
移除被选元素,包括所有文本和子节点detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。
empty()方法
从被选元素移除所有内容,包括所有文本和子节点。 -
替换
replaceWith()方法
用指定的 HTML 内容或元素替换被选元素
例:$(“p”).replaceWith(“Hello world!”); -
复制
.clone()方法
例: ( " b o d y " ) . a p p e n d ( ("body").append( ("body").append((“p”).clone()); -
包装
1.wrap()方法
例:$(“p”).wrap("单个p");
2.wrapAll()方法
$(selector).wrapAll(wrapper) 在指定的 HTML内容或元素中放置 所有 被选的元素
3.unwrap()方法
$(selector).unwrap() 删除被选元素的父元素
4.wrapInner()方法
$(selector).wrapInner(wrapper)使用指定的HTML 内容或元素,来包裹每个被选元素中的所有内容
属性操作
- 元素属性操作
-
获取/设置
attr()方法
设置或获取被选元素的属性值/自定义属性返回属性值
获取属性 例: ( " i m g " ) . a t t r ( " w i d t h " ) ; 设 置 属 性 例 : ("img").attr("width"); 设置属性 例: ("img").attr("width");设置属性例:(“img”).attr({“width”:“180”,‘height’:‘150’}); – 大号变为json对象
prop() 方法
设置或返回被选元素的属性和值(计算过的) -
删除属性
removeAttr()方法
从被选元素中移除属性例:$(“p”).removeAttr(“id”)
removeProp() 方法
移除由 prop() 方法设置的属性。
- 样式属性操作
1. 设置样式
CSS()方法 :计算过的样式
设置或返回被选元素的一个或多个样式属性。
$(“p”).css(“background-color”) #获得
$(“p”).css(“background-color”,‘red’)#设置
2. 位置
offset()方法
返回或设置匹配元素相对于文档的偏移(位置)
$(selector).offset().left/top 获取
$(selector).offset({x:100,y:100}), 设置 自动设置成了定位
position()
返回匹配元素相对于父元素的位置(偏移)
此方法只对可见元素有效。
scrollLeft()
返回或设置匹配元素的滚动条的水平位置
$(“div”).scrollLeft(100);
scrollTop()
返回或设置匹配元素的滚动条的垂直位置
$(“div”).scrollTop(100);
3. 尺寸
width()
返回或设置匹配元素的宽度
innerWidth()
返回元素的宽度,该方法包含padding,但不包含 border 和margin
outerWidth()
返回元素的高度,包含 padding 和border
outerWidth(true)
返回元素的高度,包含 padding 和border 和margin
类操作
1. 添加类 addClass()
向被选元素添加一个或多个类。
例子:$("p:first").addClass("intro");
2. 移除类 removeClass()
从被选元素移除一个或多个类。
例子:$("p").removeClass("intro");
3. toggleClass()
有就删除,没有就添加
例子:$("p").toggleClass("main");
4. 检查是否含有 hasClass()
检查被选元素是否包含指定的class
例子:alert($("p:first").hasClass("intro"));
遍历
$.each(遍历对象,function( index,遍历对象中的元素){ })
- 1. 向上遍历
parent()
返回被选元素的直接父元素。
parents()
返回被选元素的所有祖先元素,可以加区间
$(“span”).parents(“ul”); 返回所有 元素的所有祖先并且它是
-
元素
parentsUntil()
法返回介于两个给定元素之间的所有祖先元素。
$("#big2").parentsUntil(“#big0”).css(“background-color”,“green”);
- 2. 向下遍历
children()
方法返回被选元素的所有直接子元素
find()
返回被选元素的后代元素,一路向下直到最后一个后代。
$(“div”).find("*"); 返回div所有后代
- 3. 水平(同级)
1.siblings()
返回被选元素的所有同胞元素。
2.next()
法返回被选元素的下一个同胞元素。
3.nextAll()
返回被选元素的所有跟随的同胞元素。
4.nextUntil()
返回介于两个给定参数之间的所有跟随的同胞元素。
不包括匹配的元素本身
5.prev(), prevAll() & prevUntil()
上一个 与前面用法一样,方向相反
过滤
1**. first()**
返回被选元素的首个元素
2. last()
返回被选元素的最后一个元素
3. eq()
返回被选元素中带有指定索引号的元素
eg:
(
"
d
i
v
"
)
.
e
q
(
3
)
.
c
s
s
(
"
b
a
c
k
g
r
o
u
n
d
−
c
o
l
o
r
"
,
"
g
r
e
e
n
"
)
;
∗
∗
4.
f
i
l
t
e
r
(
)
∗
∗
允
许
您
规
定
一
个
标
准
。
不
匹
配
这
个
标
准
的
元
素
会
被
从
集
合
中
删
除
,
匹
配
的
元
素
会
被
返
回
例
如
:
("div").eq(3).css("background-color","green"); **4. filter()** 允许您规定一个标准。不匹配这个标准的元素 会被从集合中删除,匹配的元素会被返回 例如:
("div").eq(3).css("background−color","green");∗∗4.filter()∗∗允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回例如:(".parent div").filter(":odd").css(“color”,“red”);
5. not()
返回不匹配标准的所有元素
get方法与eq方法
get()返回dom eq()返回Jquery
区别:eq返回的是一个jquery对象 get返回的是一个html 对象数组
each()
$(selector).each(function(index){})
可以遍历指定的元素集合,通过回调函数返回遍历元素的序列号
事件
- 加载事件
(相当于js中的onload)
全写 ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 简 写 (document).ready(function(){}) 简写 (document).ready(function())简写(function(){}) ,, 写法二$(()=>{ })
- onload和ready区别
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。
2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
3.简化写法
window.onload没有简化写法
( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 可 以 简 写 成 (document).ready(function(){})可以简写成 (document).ready(function())可以简写成(function(){});
-
事件类型
blur、focus、load、resize、scroll、
unload、click、dblclick、mousedown、
mouseup、mousemove、mouseover、
mouseout、mouseenter、mouseleave、
change、select、submit、keydown、
keypress、keyup、error等。 -
事件绑定
bind
bind(type、[data]、function)
Type为事件类型
data为方法传递的参数,可以忽略.
function是用来绑定的处理函数.
例如:为id为hot 的div的元素绑定单击事件。
$(“#hot”).bind(“click”,function(){
alert(“层被点击”);
})
on
$(selector).on(event,childselector,data,function)
bind跟on绑定事件的区别:
on 阻止了事件冒泡
绑定单个事件
bind(“事件名”,function(){})
on(“事件名”,function(){})
绑定多个事件
on({“事件名1”:function(){},”事件名2”:function()
{}})
一次绑定多个事件
$(“div”).bind(“mouseover mouseout”,function(){
$(this).toggleClass(“over”);
})
一次性绑定事件
one(“事件名”,function(){})
hover()
合成事件,方法触发
hover(enter,leave)
用于模拟光标悬停事件.当光标移动到元素上时,
会触发指定的第一个函数,当光标移出这个元素
时,触发指定的第二个函数.
4. 常见事件
mouseenter 进入
mouseleave 离开
与js区别
mouseenter事件和mouseover的区别关键点就是:冒泡的方式处理问题mouseover 会冒泡,触发父节点的mouseover事件
mouseenter 只会在绑定它的元素上被调用,而不会在后代节点上被触发 -
事件移除
unbind
$(“#pos”).unbind(“click”);
off
off(“事件名”)
6. 事件冒泡
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
阻止事件冒泡的方法
在绑定的事件中加入event参数并在函数中增加ent.stopPropagation()调用就可以阻止事件冒泡。也可以使用return false阻止冒泡。
event.preventDefault();
作用是阻止默认行为
7. 模拟事件
$(“seletor”).trigger(“event”)
会触发默认行为
$(“seletor”).triggerHandler(“event”)
不会触发默认行为
实现通过一个事件去操作另一个事件的执行,为了调用自定义的事件(通常与bind或者on事件合作)
模拟操作可以使用trigger()方法来完成。
例如:
$(“#pos”).click(function(){
$(“#btn”).trigger(“click”);//模拟操作触发的#btn
的click事件.
})
模拟事件可以实现传参数给操作的事件
**trigger(type [,data])**方法有两个参数,
第一个参数是要触发的事件类型,第二个参数是传递给事件处理函数的附加数据,以数组的形式传递.
$(“#btn”).bind(“click”,function(event,mes,mes2)
{
alert(mes+”,”+mes2);
})
$(“#btn”).trigger(“click”,[“Hello”,”World!”]);
注意:在事件绑定时的event参数是不可
以省略的.但在调用时可以不指定。
动画
1,隐藏、显示
$("p").hide();
$("p").show();
$("p").toggle();
2,淡入、淡出
$("p").fadeIn();
$("p").fadeOut();
$("p").fadeTo();
例:$("p").fadeTo(1000,0.4);
$("p").fadeToggle();
3,划入、划出
$("p").slideDown();
$("p").slideUp();
$("p").slideToggle();
4,自定义动画
提供easing参数swing开头结尾慢,中间快 (默认)linear (匀速)
$("div").animate({left:'250px'},
3000,"linear",callback);
$(“#pos”).animate({left:”+=20px”,height:”+=20px”},fast function(){ });
5,停止动画
$("p").stop();
停止第一个动画
$("p").stop(stopAll,goToEnd);
停止所有动画
eg:$("p").stop(true,true);
stopAll : true
是否停止全部
gotoEnd : true
是否允许完成当前的动画
6,延迟动画
$("p").delay("slow").fadeIn();
eg:delay(1000)
$(selector).delay(duration)
7,判断元素是否处于动画状态
$(“#ele”).is(“:animated”)
说明:动画是顺序执行的。
AJAX
function AJAX(path) {
$.ajax({
type: 'get',
url: path,
dataType: 'jsonp',
success: function(data) {
console.log('请求成功!', data)
},
error: function() {
console.log('请求失败!')
}
})
}
AJAX('https://apis.map.qq.com/output=jsonp');
异步方法
.done( )
.fali( )
.always( )
.then( )
存储
cookie
使用插件
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
三种方式:
-
添加一个"会话cookie"
$.cookie(‘the_cookie’, ‘the_value’); -
创建一个cookie并设置有效时间为 7天
$.cookie(‘the_cookie’, ‘the_value’, { expires: 7 }); -
创建一个cookie并设置 cookie的有效路径
$.cookie(‘the_cookie’, ‘the_value’, { expires: 7, path: ‘/’ }); -
读取cookie
$.cookie(‘the_cookie’); -
删除cookie
$.cookie(‘the_cookie’, null); //通过传递null作为cookie的值即可 -
可选参数
$.cookie(‘the_cookie’,‘the_value’,{
expires:7,
path:’/’,
domain:‘jquery.com’,
secure:true
})
expires:(Number|Date)有效期;设置一个整数时,单位是天;也可以设置一个日期对象作为Cookie的过期日期;
path:(String)创建该Cookie的页面路径;
domain:(String)创建该Cookie的页面域名;
secure:(Booblean)如果设为true,那么此Cookie的传输会要求一个安全协议,例如:HTTPS;
注意:cookie是基于域名来储存的。要放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。