第一章 概述

1.jQuery概述

jQuery是JavaScript库。 jQuery是一个快速、简洁的JavaScript库，其设计的总之是“write less，Do More”，即倡导写更少的代码，做更多的事情。
jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。

jQuery的优点：
①轻量级。核心文件才几十kb，不会影响页面加载速度。
②跨浏览器兼容。基本兼容了现在主流的浏览器。
③链式编程、隐式迭代。
④对事件、样式、动画支持，大大简化了DOM操作。
⑤支持插件扩展开发。有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等。
⑥免费、开源。

仓库： 可以把很多东西放在这个仓库中，找东西只需要到仓库里面查找就可以了。
JavaScript库： 即library，是一个封装好的特定的集合（方法和函数），从封装一大堆函数的角度理解库，就是在这个库中，封装了很多定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解JavaScript库： 就是一个JS文件，里面我们对原生的js代码进行了封装，存放在里面，这样我们可以快速高效的使用这些封装好的功能了。
常见的JavaScript库： jQuery Prototype YUI Dojo Ext JS 移动端的zepto

2.区分jQuery的不同版本

1.x ①兼容老版本IE ②文件更大

2.x ①部分IE及以下不支持 ②文件小，执行效率更高

3.x ①完全不再支持IE8及以下版本 ②提供了一些新的API ③提供不包括ajax/动画API的版本

3.jQuery的使用原理

暴露 window.jQuery = window.$ = jQuery

jQuery = function(selector,context){
	return new jQuery.fn.init(selector,context,rootjQuery);
}

4.jQuery的基本使用

①jQuery的入口函数

1.等待页面DOM加载完成的入口,不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
2.相当于原生js中的DOMContentLoaded。
3.不同于原生js中的load事件，它是等页面文档、外部的js文件、css文件、图片加载完毕才执行的内部代码。

$(function(){...});
或者
$(document).ready(function(){...});

②jQuery的顶级对象$

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

③DOM对象和jQuery对象

注意：jQuery对象只能使用jQuery方法，DOM对象则使用原生的javaScript属性和方法。 1.DOM对象： 用原生js获取到的对象。
var btn1 = document.getElementById('btn1');

2.jQuery对象： 用jquery方式获取过来的对象就是jQuery对象，本质：通过$把DOM元素进行了包装。

也许你想一探究竟，为什么DOM和jQuery只能使用各自的方法？ 这里我查看了原生DOM上的一个属性：用来操作样式。 例如：document.getElementById('btn1').style.display = 'none'; 同样在包装后的jQuery对象上查看：没有 jQuery对象多了一个原型，上面就有很多方法,如果想做到和上方同样的事情采用jQuery自己的方式：$("#btn1").hide();

因为原生js比jQuery更大，原生的一些属性和方法jQuery并没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换成DOM对象才能使用。

————相互转换

1.DOM对象转换为jQuery对象:
(1)直接获取标签，得到的就是jQuery对象。
$("video");
(2)已经使用原生js获取DOM对象，将其转换成jQuery对象。
var myvideo = document.querySelector('video');
$(myvideo);
2.jQuery对象转换成DOM对象：
(1)$("video")[0];
(2)$("video").get(0);

第二章 jQuery元素

1.jQuery选择器+筛选方法+排他思想

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery做了封装，以使获取元素统一标准。
$("选择器");里面选择器直接写CSS选择器即可，但是要加引号。
jQuery基本选择器：
ID选择器$("#id"),获取指定ID的元素。
全选择器$('*')，匹配所有元素。
类选择器$(".class"),获取同一类class的元素。
标签选择器$("div"),获取同一类标签的所有元素。
并集选择器$("div,p,li"),选取多个元素。
交集选择器$("li.current"),交集元素。

jQuery层级选择器：
子代选择器$("ul>li"),使用>号，获取亲儿子层级的元素。
后代选择器$("ul li"),使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子元素等。

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).sibling("li");，查找所有的兄弟节点，不包括自己本身。
nextAll([expr])，用法：$(".first").nextAll()，查找当前元素之后所有的兄弟元素。
prevAll([expr])，用法：$(".last").prevAll()，查找当前元素之前所有的兄弟元素。
hasClass(class)，用法：$("div").hasClass("protected")，检查当前的元素是否含有某个特定的类，如果有，则返回true。
eq(index),用法：$("li").eq(2);相当于$("li:eq(2)"):，index从0开始。
一个小案例：鼠标位于li上时，ul的显示和隐藏

$(function(){
    $("ul li").mouseover(function(){
        $(this).children("ul").show();
    }).mouseout(function(){
        $(this).children("ul").hide();
    })
})

另一个小案例：鼠标点击的按钮有颜色，其他没有。

 $("button").click(function(){
         $(this).css("background","green");
         $(this).siblings("button").css("background","");
            })

2.jQuery读取、设置样式+操作类的方法

读取：$("div").css("属性")
设置：$("div").css('属性','值');
注意：必须逗号分隔、属性名一定要加引号、值如果是数字可以不加引号。
设置时参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不加引号,其中值为数字时可以不加引号，如果是复合属性必须采用驼峰命名法。
$("div").css({width:200,height:”20px",backgroundColor:"red"})
例子：所有的button的背景颜色都进行了设置。
$("button").css('background','pink');

设置类样式方法： 1.添加类,追加类名（和原生js的className设置不一样） $("div").addClass("current"); 2.删除类 $("div").removeClass("current"); 3.切换类 $("div").toggleClass("current");

————隐式迭代

能给多个匹配上的元素统一设置： 遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。 简单的理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作。\

3.jQuery效果

jQuery封装了很多动画效果，最为常见的如下：
页面元素显示隐藏：show() hide() toggle()
show()显示语法规范：
show([speed],[easing],[fn])
(1)参数都可以省略，无动画效果直接显示。
(2)speed：三种预定速度之一的字符串（"slow","normal","fast")或标识动画时长的毫秒数（如：100）
(3)easing：（optional）用来指定切换效果，默认是"swing",可用参数"linear"。
(4)fn回调函数，在动画完成时执行的函数，每个元素执行一次。
hide()隐藏语法规范：
hide([speed],[easing],[fn])
toggle()隐藏语法规范：
toggle([speed],[easing],[fn])

滑动：
slideDown([s],[e],[fn]) 下拉
slideUp([s],[e],[fn]) 上拉
slideToggle([s],[e],[fn]) 切换拉

事件切换:
hover([over,]out)
（1）over：鼠标移到元素上要触发的函数。（相当于mouseenter）
（2）out：鼠标移出元素要触发的函数。（相当于mouseleave）
（3）如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数。

淡入淡出效果：
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeToggle([s],[e],[fn])
fadeTo([[speed],opacity,[easing],[fn]])
（1）opacity透明度必须写，取值0~1之间。
（2）speed：三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画时长的毫秒数值（如：1000）.必须写
（3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”。

自定义动画animate：
animate(params,[speed],[easing],[fn])
（1）params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串（“slow”，“normal”，“fast”）或表示动画时长的毫秒数值（如：1000）；
（3）easing：（Optional）用来指定切换效果，默认是“swing”，可用参数是“linear”。
（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

————动画队列及其停止排队方法

1.动画或效果队列 动画或效果一旦触发就会执行，如果多次触发，就造成多个动画或效果排队执行。 2.停止排队 stop()方法用于停止动画或效果。（注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画） 以下例子：先结束上一次动画或效果，再触发下一次。

$(".nav>li").hover(function(){
   $(this).children("ul").stop().slideToggle();
})

4.jQuery属性操作

设置或获取元素固有属性prop()：
所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type。
（1）获取属性
$("a").prop("title","标题")
（2）读取属性
$("a").prop("title")

设置或获取元素自定义属性值attr()
设置：$("div").attr("index",4)类似于原生js中的getAttribute()
读取：$("div").attr("index")类似于原生js中的setAttribute()
$("div").attr("data-index")

H5规定了自定义属性要以 data- 开头作为属性名并且赋值 data-为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过getAttribute 方法获取

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。 $("span").data("uname","andy");是放在内存中，当成一个变量。 $("span").data("uname");获取数据 可以获取h5的自定义属性：这个方法获取data-index不用写data-，而且返回的是数字型。 $("div").data("index")

5.jQuery内容文本值

主要针对元素的内容还有表单的值操作。 1.普通元素内容html()（相当于原生js的innerHTML） html()获取元素内容 html(“内容”)设置元素内容 2.普通元素文本内容text()（相当于原生innerText）、 text()获取元素文本内容 text("文本内容")设置元素的文本内容 3.表单的值val()（相当于原生value） val()获取 val("内容")设置

6.jQuery元素遍历操作

jQuery隐式迭代是对同一类元素做了相同的操作，如果想要给同一类元素做不同操作，就需要用到遍历。
$("div").each(function(index,domEle){xxx;})
（1）each()方法遍历匹配的每一个元素。
（2）里面的回调函数有两个参数：index是每个元素的索引号，demEle是每个DOM元素对象，不是jquery对象。
（3）所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)。

let color = ['red','green','blue'];
$("div").each(function(index,elem){
    $(elem).css("color",color[index]);
})

$.each(object,function(index,element){xxx;})
（1）$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象。
（2）里面的函数有两个参数：index是每个元素的索引号，element遍历内容。

let color = ['red','green','blue'];
$.each($("div"),function(index,elem){
    $(elem).css("color",color[index]);
})

$.each({name:'月',age:3},function(index,elem){
    console.log(index);//输出的是name，age属性名
    console.log(elem);//输出的是月，3属性值
})

7.jQuery创建、添加、删除元素

创建元素： var li = $("<li></li>")动态创建一个li标签

添加元素： 内部添加——父子关系 ——$("ul").append(li);是把元素放入到匹配到的元素内容的最后面。 ——$("ul").prepend(li)是把元素放入到匹配到的元素内容的最前面。

外部添加——兄弟关系 ——$("div").after(div)是把元素放到匹配到的元素后面。 ——$("div").before(div)是把元素放到匹配到的元素前面。

删除元素： element.remove()//删除匹配的元素 element.empty()//删除匹配的元素集合中的所有的子节点 element.html("")//清空匹配的元素内容

8.jQuery尺寸

jQuery尺寸： width()/height() 取得匹配元素宽度和高度值，只算width/height innerWidth()/innerHeight() 取得匹配元素宽度和高度值，包括padding outerWidth()/outerHeight() 取得匹配元素宽度和高度值，包括padding、border outerWidth(true)/outerHeight(true) 取得匹配元素宽度和高度值，包括padding、border、margin 以上参数为空，则是获取相应值，返回的是数字型。 如果参数为数字，则是修改相应值。

9.jQuery位置

位置主要有三个：offset()、position()、scrollTop()、scrollLeft() offset() （1）offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。 （2）该方法有2个属性left、top。offset().top()用户获取距离文档顶部的距离，offset.left()用户获取距离文档左侧的距离。 （3）可以设置元素的偏移：offset({top:20,left:20})

$(".son").offset({
	top:200,
	left:200
})

如果父亲设置了position:reactive,子元素设置了position:absolute，也并不影响，还是返回相对于文档的偏移。 position() （1）用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。 （2）这个方法只能获取不能设置偏移。

scrollTop() （1）设置或返回被选元素被卷去的头部。 （2）元素.scrollTop()读取，元素.scrollTop(100)设置

第三章 jQuery事件

1.jQuery事件注册

单个事件注册 element.事件(function(){}) $("div").click(function(){事件处理程序}) 事件和原生基本一致：比如mouseover,mouseout,blur,focus,change,keydown,keyup,resize,scroll等

2.事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数。 element.on(events,[selector],fn) 1.events：一个或多个用空格分割的事件类型,如"click"或"keydown"。 2.selector:元素的子元素选择器。 3.fn：回调函数，即绑定在元素身上的侦听函数。

$("div").on({
    mouseenter:function(){
        $(this).css("color","blue");
    },
    click:function(){
        $(this).css("color","purple");
    },
    mouseleave:function(){
        $(this).css("color","red");
    }
})

   $("div").on("mouseenter mouseleave",function(){
           $(this).toggleClass("current");
   })

————on可以实现事件委托（委派）

事件委派的定义是：把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。 事件绑定在父元素身上，但是触发的对象是子元素。

$("ul").on("click","li",function(){
	alert(11);
});

————on可以给未来动态创建的元素绑定事件

像以前用click，对于后添加的元素，是没有绑定事件的。 on对于后添加的元素可以实现绑定事件，但其实是借助于事件委托，不委托给父元素也不行。

$("ol").on("click","li",function(){
	alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);

3.事件处理off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序。 $("div").off()解除元素上所有事件 $("div").off("click")解除元素上的点击事件 $("div").off("click","li")解绑事件委托

4.事件处理one()绑定事件，只能触发一次

如果有的事件只想触发一次，可以使用one()来绑定事件。

5.自动触发事件

有的事件希望自动触发，比如轮播图自动播放功能，可以利用定时器自动触发，不必用鼠标点击。 1.元素.事件() $("div").click() 只要页面一刷新就调用。 2.元素.trigger("事件") $("div".trigger("click")) 3.元素.triggerHandler("事件")——不会触发元素的默认行为 $("div").triggerHandler("click")

6.事件对象

事件被触发，就会有事件对象的产生。 element.on(events,[selector],function(event){}) 阻止默认行为：event.preventDefault()或者return false 阻止冒泡：event.stopPropagation()

第四章 其他

1.jQuery对象拷贝

如果想把某个对象拷贝（合并）给另一个对象使用，此时可以使用$.extend()方法。 `$.extend([deep],target,object1,[objectN])` （1）deep：如果设为true为深拷贝，默认false为浅拷贝。 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象。 深拷贝把里面的数据完全复制一份给目标对象，如果里面又不冲突的属性，会合并到一起。 （2）target：要拷贝的目标对象。 （3）object1：待拷贝到第一个对象的对象。

2.jQuery多库共存

jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用$，这样一起使用会引起冲突。 需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。 （1）把里面的$符号统一改为jQuery，比如jQuery("div"); （2）jQuery变量规定新的名称：$.noConflict() var suibian = $.noConflict();相当于把原来的$释放了。 suibian("span")

3.jQuery插件

jQuery功能比较有限，想要复杂的特效效果，可以借助于jQuery插件完成。 注意：这些插件也是依赖于jQuery来完成的，所以必须先引入jQuery文件，因此也称为jQuery插件。 jQuery插件常用的网站： （1）jQuery插件库jq22 （2）jQuery之家jQuery之家

4.图片的懒加载

图片使用延迟加载，可以帮助减轻服务器负载。 当我们页面滑动到可视区域，再显示图片。