JQuery概述
JavaScript库
JavaScript库:即library,是一个封装好的特定的集合(方法和函数)。即在库中封装了很多预先定义好的函数,如动画animate、hide、show,获取元素等。
如JQuery就是为了快速方便的操作DOM,几面基本都是函数(方法)。
常见的JavaScript库
- JQuery
- Prototype
- YUI
- Dojo
- Ext JS
- 移动端的zepto
这些库都是对原生JavaScript的封装,内容都是用JavaScript实现的。
JQuery概念
是一个快速、简洁的JavaScript库,对JS中的DOM操作封装,可以快速查询使用里面的功能。
JQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
本质:调用函数(方法)
JQuery优点
- 轻量级,核心文件几十kb,不影响页面加载速度
- 跨浏览器兼容
- 链式编程、隐式迭代
- 对事件、样式、动画支持,简化了DOM操作
- 支持插件扩展开发。有丰富的第三方插件:树形菜单、日期控件、轮播图等
- 免费、开源
JQuery基本使用
JQuery下载
JQuery入口函数
$(function() {
... //页面DOM加载完成的入口,推荐使用
});
$(document).ready(function(){
... //页面DOM加载完成的入口
});
- 实现功能相同。都是等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,JQuery帮我们完成了封装。
- 相当于js中的DOMContentLoaded
- 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码
jQuery的顶级对象$
- 是 j Q u e r y 的 别 称 , 代 码 中 可 用 是jQuery的别称,代码中可用 是jQuery的别称,代码中可用代替jQuery
- 是 j Q u e r y 的 顶 级 对 象 , 相 当 于 原 生 J a v a S c r i p t 中 的 w i n d o w 。 把 元 素 利 用 是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用 是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用包装成jQuery对象,就可以调用jQuery的方法。
jQuery对象和DOM对象
- 用原生JS获取来的对象为DOM对象
var myDiv = document.querySelector('div');
//myDiv是DOM对象
console.dir(myDiv);
- 用jQuery方法获取的元素就是jQuery对象
$('div');
console.dir($('div'));
// $('div')是一个jQuery对象
-
jQuery对象本质:利用$对DOM对象包装后产生的对象(伪数组形式存储)
-
jQuery对象只能使用jQuery方法,DOM对象则使用原生的JavaScript属性和方法
myDiv.style.display = 'none';
$('div').style.display = 'none';//报错,$('div')是jQuery对象不能使用原生js的属性和方法
myDiv.hide();//报错,myDiv是一个DOM对象不能使用jQuery里面的hide方法
- DOM对象与jQuery对象之间可以相互转换
原生js比jQuery更大,原生的一些属性和方法jQuery没有封装,要想使用这些属性和方法需要把jQuery对象转换成DOM对象才能使用。
DOM对象转换成jQuery对象:$(DOM对象)
$(‘div’);
<vodeo src="mov.mp4"></video>
//直接获取视频
$('video');
//已经使用原生js获取过来DOM对象
var myvideo = document.querySelector('video');
$(myvideo);
jQuery对象转换成DOM对象(两种方式)
$(‘div’)[索引号]
$(‘div’).get(索引号)
$('video')[0].play();
$('video').get(0).play();
jQuery常用API
jQuery选择器
jQuery基础选择器
$("选择器") //里面选择器直接写CSS选择器即可,但是要加引号
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $("#id") | 获取指定ID元素 |
全选选择器 | $("*") | 匹配所有元素 |
类选择器 | $(".class") | 获取同一类class的元素 |
标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”) | 选取多个元素 |
交集选择器 | $(“li.current”) | 交集元素 |
jQuery层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $(“ul>li”); | 使用>号,获取亲儿子层级的元素;注意: 并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下所有的li元素,包括孙子等 |
隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程
给匹配到的所有元素进行循环遍历,执行相应的方法,不用再进行循环。简化操作,方便调用。
jQuery设置样式
$("div").css('属性','值')
举例:
//获取四个div元素
console.log($("div"));
//给四个div设置背景颜色为粉色(jQuery对象不能使用style)
$("div").css("background-color","pink")
jQuery筛选选择器
名称 | 用法 | 描述 |
---|---|---|
:first | $(‘li:first’) | 获取第一个li元素 |
:last | $(‘li:last’) | 获取最后一个li元素 |
:eq(index) | $(“li:eq(2)”) | 获取到li元素中,选择索引号为2的奇数,索引号index从0开始 |
:odd | $(“li:odd”) | 获取到li元素中,选择索引号为奇数的元素 |
:even | $(“li:even”) | 获取到li元素中,选择索引号为偶数的元素 |
jQuery筛选方法
名称 | 用法 | 描述 |
---|---|---|
parent() | $(“li”).parent() | 查找父级 |
children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”),最近一级(亲儿子) |
find(selector) | $(“ul”).find(“li”) | 相当于$(“ul li”),后代选择器 |
siblings(selector) | $(“first”).siblings(“li”) | 查找兄弟节点,不包括自己本身 |
nextAll([expr]) | $(“first”).nextAll() | 查找当前元素之后所有的同辈元素 |
prevtAll([expr]) | $(“last”).prevtAll() | 查找当前元素之前的所有同辈元素 |
hasClass(class) | $(“div”).hasClass(“protected”) | 检查当前的元素是否含有某个特定的类,如果有,则返回true |
eq(index) | $(“li”).eq(2) | 相当于$(“li:eq(2”),index从0开始 |
jQuery里面的排他思想
排他思想:当前元素设置样式,其余的兄弟元素清除样式
jQuery样式操作
操作css方法
- jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式
- 参数只写属性名,则是返回属性值
$(this).css("color");
- 参数是 属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css("color","red");
- 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号
$(this).css({
wdith: 400,
heighe: 400,
backgroundColor: "red"
//如果是复合属性必须采取驼峰命名法;如果值不是数字需要加引号
});
类操作和className区别
原生js中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作,不影响原先的类名。
jQuery效果
显示隐藏效果
显示语法规范
show([speed,[easing],[fn]])
- 显示参数
- 参数都可以省略,无动画直接显示
- speed:三种预定速度之一的字符串(“slow”,“normal” or “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear"
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
隐藏语法规范
hide([speed,[easing],[fn]])
- 隐藏参数(同显示)
- 参数都可以省略,无动画直接显示
- speed:三种预定速度之一的字符串(“slow”,“normal” or “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear"
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
切换语法规范
toggle([speed,[easing],[fn]])
- 切换参数(同显示)
- 参数都可以省略,无动画直接显示
- speed:三种预定速度之一的字符串(“slow”,“normal” or “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear"
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
滑动效果
下滑效果语法规范
slideDown([speed,[easing],[fn]])
上滑效果语法规范
slideUp([speed,[easing],[fn]])
滑动切换效果语法规范
slideToggle([speed,[easing],[fn]])
- 参数
- 参数都可以省略,无动画直接显示
- speed:三种预定速度之一的字符串(“slow”,“normal” or “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear"
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
动画队列极其停止排队方法
- 动画或效果队列
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
- 停止排队
stop()
- stop()方法用于停止动画或效果
- 注意:stop()写到动画或者效果的前面,相当于停止结束上一次的动画
淡入淡出效果
淡入效果语法规范
fadeIn([speed,[easing],[fn]])
淡出效果语法规范
fadeOut([speed,[easing],[fn]])
淡入淡出切换效果语法规范
fadnToggle([speed,[easing],[fn]])
- 参数
- 参数都可以省略,无动画直接显示
- speed:三种预定速度之一的字符串(“slow”,“normal” or “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear"
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
自定义动画 animate
- 语法
animate(params,[speed],[easing],[fn])
- 参数
- params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采用驼峰命名法。其余参数都可以省略。
- speed:三种预定速度之一的字符串(“slow”,“normal” or “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear"
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
jQuery属性操作
设置或获取元素的固有属性值 prop()
元素固有属性:元素本身自带的属性,如元素里面的href,如元素里面的type
- 获取属性语法
prop("属性")
- 设置属性语法
prop("属性","属性值")
设置或获取元素自定义属性值 attr()
自定义属性:用户自己给元素添加的属性。如:给div添加index=“1”
- 获取属性语法
attr("属性") //类似原生getAttribute()
- 设置属性语法
attr("属性","属性值") //类似原生setAttribute()
数据缓存 data()
data()方法可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新,之前存放的数据都将被移除。
data()里面的数据存放在元素的内存里
- 附加数据语法
data("name","value") //向被选元素附加数据
- 获取数据语法
date("name") //向被选元素获取数据
jQuery内容文本值
主要针对元素的内容和表单的值操作。
- 普通元素内容 html() (相当于原生inner HTML)
html() //获取元素的内容
html("内容") //设置元素的内容
- 普通元素文本内容 text() (相当于原生innerText)
text() //获取元素的文本内容
text("文本内容") //设置元素的文本内容
- 表单的值 val() (相当于原生value)
val() //获取元素的表单值
val("表单内容") //设置元素的表单值
jQuery元素操作
主要是遍历、创建、添加、删除元素操作。
遍历元素
jQuery隐式迭代是对同一类元素做同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。
- 语法1:
$("div").each(function(index, domEle){ xxx; })
- each()方法遍历匹配的每一个元素,主要用DOM处理,each每一个。
- 里面的回调函数有2个参数:index是每个元素的索引号;demEle是每个DOM元素对象,不是jQuery对象。
- 要想使用jQuery方法,需要给这个DOM元素转换为jQuery对象$(domEle)。
- 回调函数第一个参数一定是索引号,可以自己指定索引号名称;第二个参数一定是DOM元素对象,DOM对象没有css方法,需要转换成jQuery对象。
- 语法2:
$each(object, function(index, element) { xxx; })
- $each()方法可用于遍历任何对象。主要用于数据处理,比如数组、对象
- 里面的函数有2个参数:index是每个元素的索引号;element遍历内容
创建元素
- 语法:
$("<li></li>"); //动态创建了一个<li>
添加元素
- 内部添加
element.append("内容") //把内容放入匹配元素内部最后面,类似原生appendChild
element.prepend("内容") //把内容放入匹配元素内部最前面
- 外部添加
element.after("内容") //把内容放入目标元素后面
element.before("内容") //把内容放入目标元素前面
内部添加元素,生成之后是父子关系
外部添加元素,生成之后是兄弟关系
删除元素
element.remove() //删除匹配的元素(本身)
elememt.empty() //删除匹配的元素集合中所有的子节点
element.html("") //清空匹配的元素内容
jQuery尺寸、位置操作
jQuery尺寸
语法 | 用法 |
---|---|
width()/height() | 取得匹配元素宽度和高度值,只算 width/height |
innerWidth()/innerHeight() | 取得匹配元素宽度和高度值,包含 padding |
outerWidth()/outerHeight() | 取得匹配元素宽度和高度值,包含padding、border |
outerWidth(true)/outerHeight(true) | 取得匹配元素宽度和高度值,包含padding、border、margin |
- 以上参数为空,则是获取相应值,返回的是数字型
- 如果参数为数字,则是修改相应值
- 参数可以不写单位
jQuery位置
位置主要有三个:offset()、position()、scrollTop()/scrollLeft()
1. offset() 设置或获取元素偏移
- offset() 方法设置或返回被选元素相对于文档的偏移位置,跟父级没有关系
- 该方法有2个属性 left、top。offset().top用于获取距离文档顶部的距离;offset().left用于获取距离文档左侧的距离
- 可以设置元素的偏移:offset({ top: 10, top: 30});
2. position()获取元素偏移
- position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准
- 该方法只能获取,不能设置偏移
3. scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
- scrollTop() 方法设置或返回被选元素被卷去的头部
- scrollLeft() 方法设置或返回被选元素被卷去的左侧
jQuery事件
jQuery事件注册
单个事件注册
- 语法:
element.事件(function(){})
$("div").click(function(){ 事件处理程序 })
其他事件和原生基本一致。如:mouseover、mouseout、blur、change、keydown、keyup、resize、scorll等。
例:
单个事件注册
$("div").click(function(){
$(this).css("background","pink")
});
$("div").mouseenter(function(){
$(this).css("background","cornflowerblue")
});
jQuery事件处理
事件处理 on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
- 语法
element.on(events, [selector], fn)
- events:一个或多个用空格分隔的事件类型,如"click"或"keydown"
- selector:元素的子元素选择器
- fn:回调函数,即绑定在元素身上的侦听函数
例:
//事件处理on
$("div").on({
mouseenter: function(){
$(this).css("background","pink")
},
click: function(){
$(this).css("background","red")
},
mouseleave: function(){
$(this).css("background","skyblue")
},
});
- on() 方法优势1:
可以绑定多个事件,多个处理事件处理程序。
$("div").on({
mouseover: function(){};
mouseout: function(){};
click: function(){};
});
如果事件处理程序相同
$("div").on("mouseover mouseout", function(){
$(this).toggleClass("current");
});
- on() 方法优势2:
可以事件委派操作。事件委派的定义:把原来加给子元素身上的事件绑定在父元素身上,就是把事件派给父元素。
$("ul").on("click", "li", function(){
slert("hello wirld");
});
- on() 方法优势3:
动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件。
事件处理 off() 解绑事件
off() 方法可以移除通过on() 方法添加的事件处理程序。
$("p").off() //解绑p元素所有事件处理程序
$("p").off("click") //解绑p元素上面的点击事件,后面的foo是侦听函数名
$("ul").off("click","li") //解绑事件委托
如果有的事件只想触发一次,可以使用one() 来绑定事件。
$("p").one("click") //只能触发事件一次
自动触发事件 trigger()
可以利用定时器自动触发右侧按钮点击事件,不用鼠标点击触发。
element.click() //1. 简写形式
element.trigger("type") //2. 自动触发模式
element.triggerHandler(type) //3. 自动触发模式,不会触发元素的默认行为
$(function() {
$("div").on("click", function() {
alert(11);
});
// 自动触发事件
// 1. 元素.事件()
// $("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus", function() {
$(this).val("你好吗");
});
// $("input").triggerHandler("focus");
});
jQuery事件对象
事件被触发,就有事件对象产生。
element.on(event, [selector], gunction(event) {})
阻止默认行为:event.preventDefault() 或 return false
阻止冒泡:event.stopPropagation()
jQuery其他方法
jQuery拷贝对象
如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend()
方法
- 语法:
$.extend([deep], target, object1, [objectN])
- deep:如果设为true 为深拷贝,默认为false 浅拷贝
- target:要拷贝的目标对象
- object1:待拷贝到第一个对象的对象
浅拷贝:把被拷贝的对象的复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象
深拷贝:把里面的数据完全复制一份给目标对象,修改目标对象不会影响被拷贝对象;如果里面有不冲突的属性,会合并到一起
多库共存
jQuery使用$
作为标识符,当其他js库也用$
作为标识符时会音器冲突。
多库共存:让jQuery和其他的js库不存在冲突,可以同时存在。
- 解决方案:
- 把里面的
$
符号统一改为jQuery。如jQuery("div")
- jQuery变量规定新的名称:
$.noConflict()
var xx = $.noConflict();
jQuery插件
jQuery 功能有限,想要更复杂的特效效果,可以借助jQuery插件完成。
注意:这些插件也是依赖jQuery来完成的,所以必须要先引入jQuery文件,因此也称为jQuery插件。
- 常用插件网站:
- jQuery插件库 http://www.jq22.com/
- jQuery之家 http://www.htmleaf.com/