jQuery

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的顶级对象$

1. $是jQuery的别称，代码中可用$代替jQuery
2. $是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。

jQuery对象和DOM对象

1. 用原生JS获取来的对象为DOM对象

var myDiv = document.querySelector('div');
//myDiv是DOM对象
console.dir(myDiv);

2. 用jQuery方法获取的元素就是jQuery对象

$('div');
console.dir($('div'));
// $('div')是一个jQuery对象

3. jQuery对象本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）

4. jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法

myDiv.style.display = 'none';

$('div').style.display = 'none';//报错，$('div')是jQuery对象不能使用原生js的属性和方法

myDiv.hide();//报错，myDiv是一个DOM对象不能使用jQuery里面的hide方法

5. 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方法来修改简单元素样式;也可以操作类，修改多个样式

1. 参数只写属性名，则是返回属性值

$(this).css("color");

2. 参数是 属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css("color","red");

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({
    wdith: 400,
    heighe: 400,
    backgroundColor: "red" 
    //如果是复合属性必须采取驼峰命名法；如果值不是数字需要加引号
});

类操作和className区别

原生js中className会覆盖元素原先里面的类名。

jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

jQuery效果

显示隐藏效果

显示语法规范

show([speed,[easing],[fn]])

• 显示参数

1. 参数都可以省略，无动画直接显示
2. speed：三种预定速度之一的字符串（“slow”,“normal” or “fast”）或表示动画时长的毫秒数值（如：1000）
3. easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次

隐藏语法规范

hide([speed,[easing],[fn]])

• 隐藏参数（同显示）

1. 参数都可以省略，无动画直接显示
2. speed：三种预定速度之一的字符串（“slow”,“normal” or “fast”）或表示动画时长的毫秒数值（如：1000）
3. easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次

切换语法规范

toggle([speed,[easing],[fn]])

• 切换参数（同显示）

1. 参数都可以省略，无动画直接显示
2. speed：三种预定速度之一的字符串（“slow”,“normal” or “fast”）或表示动画时长的毫秒数值（如：1000）
3. easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次

滑动效果

下滑效果语法规范

slideDown([speed,[easing],[fn]])

上滑效果语法规范

slideUp([speed,[easing],[fn]])

滑动切换效果语法规范

slideToggle([speed,[easing],[fn]])

• 参数

1. 参数都可以省略，无动画直接显示
2. speed：三种预定速度之一的字符串（“slow”,“normal” or “fast”）或表示动画时长的毫秒数值（如：1000）
3. easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次

动画队列极其停止排队方法

• 动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

• 停止排队

stop()

1. stop()方法用于停止动画或效果
2. 注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画

淡入淡出效果

淡入效果语法规范

fadeIn([speed,[easing],[fn]])

淡出效果语法规范

fadeOut([speed,[easing],[fn]])

淡入淡出切换效果语法规范

fadnToggle([speed,[easing],[fn]])

• 参数

1. 参数都可以省略，无动画直接显示
2. speed：三种预定速度之一的字符串（“slow”,“normal” or “fast”）或表示动画时长的毫秒数值（如：1000）
3. easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次

自定义动画 animate

• 语法

animate(params,[speed],[easing],[fn])

• 参数

1. params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法。其余参数都可以省略。
2. speed：三种预定速度之一的字符串（“slow”,“normal” or “fast”）或表示动画时长的毫秒数值（如：1000）
3. easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear"
4. 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; })

1. each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个。
2. 里面的回调函数有2个参数：index是每个元素的索引号；demEle是每个DOM元素对象，不是jQuery对象。
3. 要想使用jQuery方法，需要给这个DOM元素转换为jQuery对象$(domEle)。
4. 回调函数第一个参数一定是索引号，可以自己指定索引号名称；第二个参数一定是DOM元素对象，DOM对象没有css方法，需要转换成jQuery对象。

• 语法2：

$each(object, function(index, element) { xxx; })

1. $each()方法可用于遍历任何对象。主要用于数据处理，比如数组、对象
2. 里面的函数有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)

1. events：一个或多个用空格分隔的事件类型，如"click"或"keydown"
2. selector：元素的子元素选择器
3. 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])

1. deep：如果设为true 为深拷贝，默认为false 浅拷贝
2. target：要拷贝的目标对象
3. object1：待拷贝到第一个对象的对象

浅拷贝：把被拷贝的对象的复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
深拷贝：把里面的数据完全复制一份给目标对象，修改目标对象不会影响被拷贝对象；如果里面有不冲突的属性，会合并到一起

多库共存

jQuery使用$作为标识符，当其他js库也用$作为标识符时会音器冲突。

多库共存：让jQuery和其他的js库不存在冲突，可以同时存在。

• 解决方案：

1. 把里面的$符号统一改为jQuery。如 jQuery("div")
2. jQuery变量规定新的名称：

$.noConflict()       
var xx = $.noConflict();

jQuery插件

jQuery 功能有限，想要更复杂的特效效果，可以借助jQuery插件完成。

注意：这些插件也是依赖jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。

• 常用插件网站：

1. jQuery插件库 http://www.jq22.com/
2. jQuery之家 http://www.htmleaf.com/