一、jQuery概述
jquery的概念
jQuery是一个快速简洁的JavaScript库
jQuery封装了JavaScript常用的功能代码,优化了DOM操作,事件处理。动画设计和Ajax交互
优点
- 轻量级,核心文件才几十kb,不会影响页面的加载速度
- 跨浏览器兼容
- 链式编程,隐式迭代
- 对事件,样式,动画支持,大大简化了DOM操作
- 支持插件扩展开发,有着丰富的第三方的插件,例如:树形菜单,日期控件,轮播图等
- 免费,开源
二、jQuery的基本使用
1. jquery的下载
官网地址 :http://jquery.com/
2.jQuery的入口函数
$(function (){
})
$(document).ready(function(){
}})
- DOM加载完毕再去执行js代码
- 相当于原生js’中的DOMContentLoaded
3. jQuery的顶级对象 $
- $是jQuery的别称
- $ 也是jQuery的顶级对象
jQuery对象和DOM对象
- 用原生js获取的对象就是DOM对象
- jQuery方法获取的元素就是jQuery对象
本质:利用$对DOM对象包装后产生的对象(伪数组形式存储)
注意
jQuery只能使用jQuery对象,DOM对象只能使用原生的JavaScript属性和方法
相互转换
- DOM对象转换为jQuery对象
$(DOM对象)
- jQuery对象转换为DOM对象
$(‘div’)[index] (index是索引号)
$(‘div’).get(index) (index是索引号)
三、jQuery常用API
1. jQuery选择器: $(" 选择器 ")
基础选择器
选择器 | 语法 | 说明 |
---|---|---|
ID选择器 | $(“#id”) | 获取指定id的元素 |
全选选择器 | $(“*”) | 匹配所有元素 |
类选择器 | $(" .class") | 获取同一类class的元素 |
标签选择器 | $(" div ") | 获取同一类标签的所有元素 |
并集选择器 | $(" div,p,li ") | 获取多个元素 |
交集选择器 | $(" li.current ") | 交集选择器 |
层级选择器
选择器 | 语法 | 说明 |
---|---|---|
子代选择器 | $(" ul>li ") | 使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素 |
后代选择器 | $(" ul li ") | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
筛选选择器
选择器 | 语法 | 说明 |
---|---|---|
:first | $(" li:first" ) | 获取第一个li元素 |
:last | $(" li:last" ) | 获取最后一个li元素 |
:eq(index) | $(" li:eq(0) ") | 获取到的元素中,选择索引号为0的元素,索引号从0开始 |
:odd | $(" li:odd" ) | 获取到的元素中,选择索引号为奇数的元素 |
:even | $(" li:even" ) | 获取到的元素中,选择索引号为偶数的元素 |
筛选方法
方法 | 语法 | 说明 |
---|---|---|
parent() | $(“li”).parent(); | 查找父级 |
chuildren(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”),最近一级(亲儿子) |
find(selector) | $(“ul”).find(“li”) | 相当于$(“ul li”),后代选择器 |
siblings(selector) | $(“.first”).siblings(“li”) | 查找兄弟节点,不包括自己本身 |
nextAll([expr]) | $(“.first”).nextAll() | 查找当前元素之后所有的同辈元素 |
prevAll([expr]) | $(“.first”).prevAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $(“div”).hasClass(“protected”) | 检查当前元素是否含有某个特定的类,如果有,则返回true |
eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
隐式迭代
给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用
链式编程
节省代码量
$(this).css(“color”,“red”).sibling().css(“color”.“”)
2. jquery样式操作
操作css方法
- 参数只写属性名,则是返回属性值
$(this).css(“color”)
- 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引导
$(this).css(" color",“red”)
- 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号
$(this).css({“color”:“red”,“fontSize“:”20px”})
设置类样式方法
作用等同于classList
- 添加类
$(“div”).addClass(“current”);
- 移除类
$(“div”).remove(“current”);
- 切换类
$(“div”).toggleClass(“current”);
3. jQuery动画
(1) 显示隐藏效果
显示效果
show([ speed ,[easing],[fn]])
- 参数可以省略,无动画直接显示
- speed: 三种预定速度之一的字符串(slow normal fast)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
隐藏语法效果
hide([ speed, [easing] ,[fn]])
- 参数可以省略,无动画直接显示
- speed: 三种预定速度之一的字符串(slow normal fast)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
切换效果
toggle([ speed, [easing] ,[fn]])
- 参数可以省略,无动画直接显示
- speed: 三种预定速度之一的字符串(slow normal fast)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
(2) 滑动效果
显示效果
slideDown([ speed, [easing] ,[fn]])
- 参数可以省略,无动画直接显示
- speed: 三种预定速度之一的字符串(slow normal fast)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
隐藏效果
slideUP([ speed, [easing] ,[fn]])
- 参数可以省略,无动画直接显示
- speed: 三种预定速度之一的字符串(slow normal fast)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
切换效果
slideTaggle([ speed, [easing] ,[fn]])
- 参数可以省略,无动画直接显示
- speed: 三种预定速度之一的字符串(slow normal fast)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
事件切换
hover([over],out)
$(" . nav>li") . hover(function() {
}, function() {
})
- over:鼠标移到元素上要触发的函数(相当于mouseenter)
- out:鼠标移出元素要触发的函数(相当于mouseleave)
- 可以省略over不写
动画队列及其停止排队方法
动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行
停止排队
stop()
stop()方法用于停止动画或者效果
注意:stop()写到动画或者效果的前面,相当于停止结束上一次的动画
(3) 淡入淡出效果
淡入效果
fadeIn([ speed, [easing] ,[fn]])
- 参数可以省略,无动画直接显示
- speed: 三种预定速度之一的字符串(slow normal fast)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
淡出效果
fadeOut([ speed, [easing] ,[fn]])
- 参数可以省略,无动画直接显示
- speed: 三种预定速度之一的字符串(slow normal fast)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
切换效果
fadeToggle([ speed, [easing] ,[fn]])
- 参数可以省略,无动画直接显示
- speed: 三种预定速度之一的字符串(slow normal fast)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
fadeTo([ speed, opacity, [easing] ,[fn]])
- opacity 透明度必须写,取值0~1之间 必须写
- speed: 三种预定速度之一的字符串(slow normal fast)或表示动画时长的毫秒数值(如:1000) 必须写
- easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
(4) 自定义动画animate
animate([ params,[speed], [easing] ,[fn]])
- params:想要更改的样式属性,以 对象形式传递, 必须写。属性名可以不用带引号,如果是符合属性则需要采取驼峰命名法
- speed: 三种预定速度之一的字符串(slow normal fast)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
手风琴案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴案例</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
.king {
width: 852px;
margin: 100px auto;
background: url(images/bg.png) no-repeat;
overflow: hidden;
padding: 10px;
}
.king ul {
overflow: hidden;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.king li.current {
width: 224px;
}
.king li.current .big {
display: block;
}
.king li.current .small {
display: none;
}
.big {
width: 224px;
display: none;
}
.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function () {
$(".king li").mouseenter(function () {
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
$(this).siblings().stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
})
</script>
</head>
<body>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="images/m1.jpg" alt="" class="small">
<img src="images/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/l1.jpg" alt="" class="small">
<img src="images/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/c1.jpg" alt="" class="small">
<img src="images/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/w1.jpg" alt="" class="small">
<img src="images/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/z1.jpg" alt="" class="small">
<img src="images/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/h1.jpg" alt="" class="small">
<img src="images/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/t1.jpg" alt="" class="small">
<img src="images/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
</html>
3. jQuery属性操作
设置或获取元素固有属性值 prop()
获取
prop(“属性”)
设置属性
prop(“属性”,“属性值”)
设置或获取元素的自定义属性值 attr()
获取属性
attr(“属性”)
类似于原生getAttribute()
设置属性
attr(“属性”,“属性值”)
setAttribute()
数据缓存 data()
data()方法可以在指定的元素上存取数据,并不会修改DOM元素结构
附加数据语法
- data(“name”,“value”)
向被选中的元素附加数据
获取数据语法
- data(‘‘name’’)
向被选中的元素获取数据
还可以读取HTML5自定义属性 data-index,得到的是数字型
4. jQuery内容文本值
普通元素获取内容html()(相当于原生innerHTML)
- html() 获取元素内容
- html(“内容”) 设置元素内容
普通元素文本内容text()(相当于原生innerHText)
- text() 获取元素文本内容
- text(“文本内容”) 设置元素的文本内容
input表单获取内容
- val() 获取表单内容
- val“内容”) 设置表单文本内容
其他方法
- parents(“选择器”) 返回祖先元素
- toFixed(2) 保留2位小数
- substr(1) 截取字符串
5. jQuery元素操作
遍历元素
给同一类元素做不同操作
$("div").each(function(index ,domEle){
xxx; } )
$.each(arr,function(){
})
- each()方法遍历匹配的的每一个元素,主要用DOM处理
- 里面的回调函数有2个参数:index是每个元素的索引号;domEle是每个DOM元素对象,不是jQuery对象
- dom元素需要转换为jQuery对象$(donEle)
创建元素
动态创建了一个li
$("<li></li>");
添加元素
内部添加
内部添加并放到内容的最后面
$("ul").append(li);
内部添加并且放到内容的最前面
$("ul").prepend(li);
外部添加
把内容放到目标元素的后面
$("div").after("内容")
把内容放到目标元素的前面
$("div").before("内容")
- 内部添加元素生成之后,他们是父子关系
- 外部添加元素生成之后,他们是兄弟元素
删除元素
删除匹配的元素(本身)
$("div").remove()
删除匹配元素集合中所有的子节点
$("div").empty()
清空匹配的元素内容
$("div").html("")
6.jQuery尺寸、位置操作
jQuery尺寸
属性 | 说明 |
---|---|
width()/height() | 取得匹配元素宽度和高度值,只算width/height |
innerWidth()/innerHeight() | 取得匹配元素宽度和高度值,包含padding |
outerWidth()/outerHeight() | 取得匹配元素宽度和高度值,包含padding和border |
outerWidth(true)/outerHeight(true) | 取得匹配元素宽度和高度值,包含padding和border,margin |
概要
- 以上参数为空,则获取相应值,返回的是数字型
- 如果参数为数字,则修改相应值
- 参数可以不用写单位
jQuery位置
offset()
设置获取元素偏移量
offset()方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系
属性
属性 | 使用 | 说明 |
---|---|---|
top | offset().top | 用于获取距离文档顶部的距离 |
left | offset().left | 用于获取距离文档左侧的距离 |
可以设置元素的偏移量:offset({top:10,left:29})
position()
获取元素对于有定位的父级元素的位置,父级没有定位以文档为准
只能获取不能设置
scrollTop()/scrollLeft()
- 设置获取元素被卷去的头部和左侧
- animate动画函数里面有个scrollTop属性,可以设置位置
- 但是是元素做动画,因此 $(. “body,html” ).animate({scrollTop: 0})
7. jQuery事件
jQuery事件注册
$("div").click(function(){
事件处理程序})
与原生基本一致:mouseover、mouseout、bliur、focus等
jQuery事件处理
on()事件绑定
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
element.on(events,[selector],fn)
- events:一个或多个用空格分隔的事件类型,如“click”或“keydown”
- selector:元素的子元素选择器
- fn:回调函数,即绑定在元素身上的侦听函数
- 利用对象的方式绑定多个事件
优势
-
可以绑定多个事件,多个处理事件处理程序
$ ("div") .on({ mouseover: function() { }, mouseout: function() { }, click: function() { } }) ;
如果事件处理程序相同
$ ("div") . on ("mouseover mouseout", function() { $ (this) . tqggleClass ("current"); }) ;
-
可以事件委派操作,事件委派的定义就是,把原来加给子元素身上得到事件绑定在父元素身上,就是把事件委派给父元素
$('ul') .on('click', 'li', function() { alert( 'hello world!') ; }) ;
-
on可以给未来动态创建的元素绑定事件
off()事件解绑
off()方法可以移除通过on()方法添加的事件处理程序
$("p").off() //解绑怕元素所有事件处理程序
$("p").off("click") //解绑p元素上面的点击事件
$("ul").off(""click","li"); //解绑事件委托
如果有的事件只想执行触发一次,可以使用one()来绑定事件
自动触发事件trigger()
1. $("div").click();元素.事件()
2. $("div").trigger("click")
不会触发元素的默认行为
3. $("div").triggerHandler("click")
jQuery事件对象
element.on(events,[selector],function(event){
})
阻止默认行为
event.preventDefault() 或者 return false
阻止冒泡行为
event.stopPropagation()
jQuery其他事件
jQuery拷贝对象
把某个对象拷贝(合并)给另外一个对象使用,可以使用$.extend()方法
$.extend([deep],target,object1,[objectN])
- deep: 如果设为true为深拷贝,默认为false 浅拷贝
- 浅拷贝:是把被拷贝对象复杂数据类型中的地址给目标对象,修改目标对象会影响被拷贝对象
- 深拷贝:前面加true ,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象
- target:要拷贝的目标对象
- object1:待拷贝到第一个对象的对象
多库共存
问题概述
jQuery使用 $ 作为标识符,随着jQuery的流行,其他js库也会用$作为标识符,一起使用会引起冲突
客观需求
让jQuery与其他的js库不存在冲突,可以同时存在,叫做多库共存
解决方案
- 把里面的$符号同意改为jQuery
- jQuery变量规定新的名称
$.noConflict()
var xx = $.noConflict();
jQuery 的插件
jQuery插件常用的网站
- jQuery插件库
http://www.jq22.com/ - jQuery之家
http://www.htmleaf.com/
jQuery插件使用步骤
- 引入相关文件。(jquery文件和插件文件)
- 复制相关的html、css、js(调用插件)