一、jQuery概述

1.1JavaScript库

JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，也就是在库里面封装了很多定义好的函数在里面，比如动画animate，hide，show，比如获取元素等

常见的JavaScript库

• jQuery
• Prototype
• YUI
• Dojo
• Ext JS
• 移动端的zepto

 这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的，我们主要学习jQuery

 1.2jQuery的概念

jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“write Less，Do More”

j就是JavaScript；Query是查询，也就是查询js，把js里面的DOM操作进行封装，我们可以快速查询功能

jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互

学习jQuery的本质就是学习如何调用这些函数（方法）

jQuery出现的目的就是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率

优点：

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

二、jQuery的基本使用

2.1jQuery的使用步骤

1. 引入jQuery文件
2. 使用即可 

2.2jQuery的入口函数

jQuery入口函数有两种，第一种是

$(function() {
    ...//此处是页面DOM加载完成的入口
});

 第二种是

$(document).ready(function() {
    ...//此处是页面DOM加载完成的入口
});

推荐使用第一种方法，毕竟看着能少敲几个字母，方便一点

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

2.3jQuery的顶级对象$

1.$是jQuery的别称

$(function() {
    alert(11);
});

jQuery(function() {
    alert(11);
});

也就是说上面两段代码是等价的

2.$同时也是jQuery的顶级对象

2.4jQUery对象和DOM对象

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

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

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

$('div');//$('div')上一个jQuery对象

注意：jQuery对象只能用jQuery方法，DOM对象则使用原生的JavaScript属性和方法

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

4.DOM对象和jQuery对象可以互相转换

 因为原生JS比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，我们想要使用这些属性和方法就需要用到DOM对象与jQuery对象之间的转换

1.DOM对象转换成jQuery对象

$('div');

2.jQuery对象转换为DOM对象

这个有两种方式，第一种是

$('div')[index]//index是索引号

第二种是

$('div').get(index)//index是索引号

三、jQuery常用API

3.1jQuery选择器

1.1jQuery基础选择器

原生JS获取元素方式有很多，而且兼容性不一致，因此jQuery给我们做了封装，统一获取元素的标准

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$("div")	获取同一类标签的所有元素
并集选择器	$("div,p,li")	选取多个元素
交集选择器	$("li.current")	交集元素

1.2jQuery层级选择器

名称	用法	描述
子代选择器	$("ul>li");	使用>号，获取亲儿子层级的元素；注意，不会获取孙子层级的元素
后代选择器	$("ul li");	使用空格，代表后代选择器，获取ul下所有的li元素，包括孙子层级的

jQuery不仅能获取元素，还能给它们设置样式

$("div").css('属性','值');

1.3隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫隐式迭代

也就是给匹配到的所有元素进行循环遍历 ，执行相应的方法，而不用我们再进行循环，简化我们的代码

就比如我们之前学过的排他思想，给所有的先去掉该效果，再给当前选中的加上该效果。之前的方法要遍历所有元素，一个一个去掉，现在我们有隐式迭代，可以不用写那么麻烦

用一个点击该按钮只有它变色的案例来举例：

$(function() {
    //隐式迭代给所有按钮绑定点击事件
    $("button").click(function () {
        //当前元素变化背景颜色
        $(this).css("background", "pink");
        //其余兄弟去掉背景颜色
        $(this).siblings("button").css("background", "");
    })
})
    

1.4jQuery筛选选择器

语法	用法	描述
:first	$('li:first')	获取第一个li元素
:last	$('li:last')	获取最后一个li元素
:eq(index)	$("li:eq(2)")	获取到的li元素中，选择索引号为2的元素，索引号为index
:odd	$("li:odd")	获取到的li元素中，选择索引号为奇数的元素
:even	$("li:even")	获取到的li元素中，选择索引号为偶数的元素

1.5jQuery筛选方法（重点）

语法	用法	说明
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();	查找当前元素之后所有同辈元素
prevAll([expr])	$(".last").prevAll();	查找当前元素之前所有同辈元素
hasClass(class)	$('div').hasClass("protected");	检查当前元素是否含有某个特定的类，如果有，则返回true
eq(index)	$("li").eq(2);	相当于$("li:eq(2)").index，从0开始

注意：它们都是方法，要带括号

案例：盒子的显示与隐藏

$(function() {
    $("li").mouseover(function() {
        var index = $(this).index();//获取当前li的索引号
        $("#content div").eq(index).show();//show()显示元素
        $("#content div").eq(index).siblings().hide();//hide()隐藏元素
    })
})

1.6 链式编程

链式编程是为了节省代码量，将一些重复代码省略掉了

就比如下面这一段代码用了链式编程

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

如果不用链式编程，代码就会比较冗长

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

 四、jQuery样式操作

4.1操作css方法

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式

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

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

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

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

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

$(this).css(
    {
     "color":"write",
     "font-size":"20px"
});

4.2设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点

1.添加类

$(div").addClass("current");

在代码中简单表示成这样 

$("div").click(function(){
    $(this).addClass("current");
})

 2.移除类

$(div").removeClass("current");

在代码中简单表示成这样 

$("div").click(function(){
    $(this).removeClass("current");
})

 3.切换类

$(div").toggleClass("current");

在代码中简单表示成这样 

$("div").click(function(){
    $(this).toggleClass("current");
})

案例：tab切换栏分析

不要忘记引入jQuery文件！

<script src="jQuery.js"></script>

css部分：

li {
   list-style: none;
   background-color: antiquewhite;
   cursor: pointer;
}

.current {
   background-color: pink;
}

.item {
   display: none;
}

HTML部分：

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>
<div class="item">123</div>
<div class="item">23</div>
<div class="item">12</div>
<div class="item">13</div>

js部分：

$(document).ready(function () {
   // 初始化：选中第一个选项卡并显示对应内容
   $("li:first").addClass("current");
   $(".item:first").show();
   // 绑定点击事件
   $("li").click(function () {
       $(this).addClass("current").siblings().removeClass("current");
       let index = $(this).index();
       $(".item").eq(index).show().siblings(".item").hide();
   });
});

 2.3类操作与className区别

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

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

五、jQuery效果

jQuery给我们封装了很多动画效果，最为常见的如下：

5.1 显示隐藏效果

1.显示效果

1.显示语法规范

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

2.显示参数 

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

 2.隐藏效果

1.隐藏语法规范

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

2.隐藏参数 

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

3.切换效果

1.切换语法规范

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

2.切换参数 

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

 5.2滑动效果

1.下滑效果

1.下滑效果语法规范

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

2.下滑效果参数 

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

2.上滑效果

1.上滑效果语法规范

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

2.上滑效果参数 

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

3.滑动切换效果

1.滑动切换效果语法规范

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

2.滑动切换效果参数 

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

5.3事件切换

hover([over,]out)

1.  over:鼠标移到元素上要触发的函数（相当于mouseenter）

2. out：鼠标移出元素要触发的函数（相当于mouseleave）

事件切换hover就是鼠标经过和离开的复合写法

$(".nav>li").hover(function(){
    $(this).children("ul").slideDown(200);
},function(){
    $(this).children("ul").slideUp(200);
});

事件切换hover如果只写一个函数，那么鼠标经过和鼠标离开都会触发

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

5.4动画队列及其停止排队的方法

1.动画或效果排列

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

2.停止排队

stop()

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

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

5.5淡入淡出效果

1.淡入效果

1.淡入效果语法规范

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

2.淡入效果参数

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

$("button").eq(0).click(function(){
    $("div").fadeIn(1000);
})

2.淡出效果

1.淡出效果语法规范

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

2.淡入效果参数

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

$("button").eq(1).click(function(){
    $("div").fadeOut(1000);
})

3.淡入淡出切换效果

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

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

2.淡入淡出切换效果参数

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

$("button").eq(2).click(function(){
    $("div").fadeToggle(1000);
})

4.渐进方式效果

1.渐进方式调整到指定的不透明度

fadeTo([speed,opacity,[easing],[fn]])

2.效果参数

1. opacity透明度必须写，取值0~1之间
2. speed：三种预定速度之一的字符串（“slow”，“normal”，or“fast”）或表示动画时长的毫秒数值（如：1000）
3. easing：（Optional）用来指定切换效果，默认是“swing”，也就是慢->快->慢，可用参数“linear”，也就是匀速
4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次

$("button").eq(3).click(function(){
    $("div").fadeTo(1000,0.5);
})

$(function(){
    //鼠标进入的时候，其他li标签透明度为0.5
    $(".wrap li").hover(function(){
        $(this).siblings().stop().fadeTo(400,0.5);
    },function(){
        //鼠标离开，其他li透明度改为1
        $(this).siblings().stop().fadeTo(400,1);
    })
});

5.6自定义动画

1.语法

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

2.参数

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

$(function(){
    $("button").click(function(){
        $("div").animate({
            left:500,
            top:300
        })
})