jQuery基础（1）
一、jQuery的介绍
1、为什么要使用jQuery？
在用js写代码时，会遇到一些问题，如下：
1）window.onload 事件有事件覆盖的问题，因此只能写一个事件；
2）代码容错性差；
3）浏览器兼容性问题；
4）书写很繁琐，代码量多；
5）代码很乱，各个页面到处都是；
6）动画效果很难实现；
2、什么是jQuery？
jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。
js库就是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。
关于jQuery的相关资料：
官网：http://jquery.com/
官网API文档：http://api.jquery.com/
汉化API文档：http://www.css88.com/jqapi-1.9/
3、学习jQuery，主要是学什么？
初期，主要学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的那些功能API。这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。
4、jQuery的两大特点
a、链式编程：对同一个对象调用方法.show()和.html()可以连写成.show().html()；
b、隐式迭代：意识是在方法的内部进行循环遍历，而不用我们自己再进行循环，简化操作，方便我们调用；
5、jQuery的使用
a、使用jQuery的基本步骤，例如：
<!-- 第一步：引入jquery库 --> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).ready(function () { // 第二步：入口函数 $('#app').click(function () { // 第三步：功能实现代码 alert('jquery的事件处理函数'); }) }); </script>
注意：引入jquery库的代码一定要放在js代码的最上面。
b、jQuery的版本
jQuery 有三个大版本：
1.x版本：最新版为 v1.11.3；
2.x版本：最新版为 v2.1.4（不再支持IE6、7、8）；
3.x版本：目前在持续更新；
下载jQuery包之后里面会有两个文件，一个是jquery-3.3.1.js，一个是jquery-3.3.1.min.js
它们的区别是：
第一个是未压缩版，第二个是压缩版；
平时开发过程中，可以使用任意一个版本，但是，项目上线的时候，推荐使用压缩版；
7、jQuery的入口函数
原生js的入口函数指的是：window.onload = function(){功能代码};
jQuery的入口函数有如下几种写法：
写法一：
// 文档加载完毕，图片不加载的时候，就可以执行这个函数 $(document).ready(function(){ alert(1); // 这里写功能代码 })
写法二（写法一的简化版，常用）：
// 文档加载完毕，图片不加载的时候，就可以执行这个函数 $(function(){ alert(1); // 这里写功能代码 });
写法三：
// 文档加载完毕，图片也加载完毕的时候，再执行这个函数 $(window).ready(function () { alert(1); // 这里是功能代码 })
总结：jQuery入口函数与js入口函数 的区别：
区别一：书写个数不同
js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题；
jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题；
区别二：执行时机不同
js的入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等；
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成；
注意：文档加载的顺序：从上往下，边解析边执行。
8、jQuery的$符号
jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。
jQuery占用了我们两个变量：$ 和 jQuery。运行如下代码：
<script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> console.log($); console.log(jQuery); console.log($ === jQuery); // true </script>
从打印结果可以看出，$ 代表的就是 jQuery，那怎么理解jQuery里面的 $ 符号呢？
$实际上表示的是一个函数名，如下：
$(); // 调用上面我们自定义的函数$ $(document).ready(function(){}); // 调用入口函数 $(function(){}); // 调用入口函数 $("#btnShow") // 获取id属性为btnShow的元素 $("div") // 获取所有的div标签元素
如上所示，jQuery 里面的 $ 函数，根据传入参数的不同，进行不同的调用，实现不同的功能，返回的是jQuery对象。
jQuery这个js库，除了$ 之外，还提供了另外一个函数： jQuery。
jQuery函数跟 $ 函数的关系：jQuery === $。
9、js中的DOM对象 和 jQuery对象的比较（重点，难点）
a、二者的关系：通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。例如：
通过原生js获取元素节点的方式是：
var oApp = document.getElementById("app"); // 通过 id 获取单个元素 var oBox = document.getElementsByClassName("box"); // class 获取的是伪数组 var oDiv = document.getElementsByTagName("div"); // 标签获取的是伪数组
通过jQuery获取元素节点的方式是：
// 获取的是数组，里面包含着原生js中的DOM对象 console.log($('#app')); console.log($('.box')); console.log($('div'));
总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。
b、二者相互转换
1）DOM 对象 转为 jQuery对象
$(js对象);
2）jQuery对象 转为 DOM 对象
jQuery对象[index]; // 方式1（推荐） jQuery对象.get(index); // 方式2
jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能，例如：
$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';
总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。
二、jQuery的选择器
jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。
1、jQuery的基本选择器
|
符号 |
说明 |
|
$(“#demo”) |
选择id为demo的元素 |
|
$(“.liItem”) |
选择所有类名是liItem的元素 |
|
$(“div”) |
选择所有标签为div的元素 |
|
$(“*”) |
选择页面所有元素（少用或者配合其他选择器来使用） |
|
$(“.liItem,div”) |
选择多个指定元素，这里是选择出了类名是liItem和标签是div的元素 |
2、层级选择器
|
符号 |
示例 |
说明 |
|
空格 |
$(“div span”) |
后代选择器，选择所有的后代元素 |
|
> |
$(“div>span”) |
子代选择器，选择所有的子代元素 |
|
+ |
$(“div+p”) |
紧邻选择器，选择紧挨着的下一个元素 |
|
~ |
$(“div~p”) |
兄弟选择器，选择后面的所有兄弟元素 |
注意：层级选择器选择了 选择符后面那个元素，比如，div>p，是选择了“>”后面的p元素。
3、基本过滤选择器
|
符号 |
示例 |
说明 |
|
:eq(index) |
$(“li:eq(1)”) |
选择索引为index的元素（索引从0开始） |
|
:gt(index) |
$(“li:gt(2)”) |
选择索引大于index的元素 |
|
:lt(index) |
$(“li:lt(2)”) |
选择索引小于index的元素 |
|
:odd |
$(“li:odd”) |
选择所有索引号为奇数的元素 |
|
:even |
$(“li:even”) |
选择所有索引号为偶数的元素 |
|
:first |
$(“li:first”) |
选择匹配的第一个元素 |
|
:last |
$(“li:last”) |
选择匹配的最后一个元素 |
4、属性选择器
|
符号 |
说明 |
|
$(“a[href]”) |
选择所有包含href属性的元素 |
|
$(“a[href=’baidu’]”) |
选择href属性值为baidu的所有a标签元素 |
|
$(“a[href!=’baidu’]”) |
选择所有href属性不等于baidu的元素，包括没有href的a标签 |
|
$(“a[href^=’www’]”) |
选择所有href属性值以www开头的元素 |
|
$(“a[href$=’cn’]”) |
选择所有href属性值以cn结尾的元素 |
|
$(“a[href*=’i’]”) |
选择所有href属性值包含i字母的元素 |
|
$(“a[href][title=’我’]”) |
选择所有符合指定属性规则的元素，都符合才会被选中 |
5、筛选选择器
|
符号 |
示例 |
说明 |
|
find(selector) |
$(“#nav”).find(“li”) |
指定元素的所有后代元素（包含子子孙孙） |
|
children() |
$(“#nav”).children(“ul”) |
指定元素的的直接子元素（亲儿子） |
|
siblings() |
$(“#liItem”).siblings() |
查找所有兄弟元素（不包括自己） |
|
parent() |
$(“#liItem”).parent(“ul”) |
查找父元素（亲的） |
|
eq(index) |
$(“li”).eq(2) |
查找索引是index的元素（索引号从0开始） |
三、jQuery的动画效果
jQuery提供了一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。
1、显示/隐藏动画
a、显示
// 方式一：不带参数，直接显示，底层是通过display: block;实现 $("div").show(); // 方式二：通过控制宽高、透明度、display属性，逐渐显示，3秒后显示完毕 $('div').show(3000); // 方式三：关键字，slow（600ms）|normal（400ms）|fast（200ms） $("div").show("slow"); // 方式四：show(毫秒值，回调函数); $("div").show(5000,function () { alert("动画执行完毕！"); // 动画执行完后，立即执行回调函数 });
b、隐藏，同show()对应，也有四种方式，例如：
$(selector).hide(); $(selector).hide(1000); $(selector).hide("fast"); $(selector).hide(1000, function(){});
c、开关式显示/隐藏动画
显示和隐藏的来回切换采用的是toggle()方法：就是show()和hide()方法的切换执行，例如：
$('#btn').click(function(){
$('#box').toggle(1000,function () {
alert('切换完毕')
})
})
2、滑入/滑出动画（类似于生活中的卷帘门）
a、滑入（下拉动画，显示元素）
$(selector).slideDown(speed, 回调函数);
b、滑出（上拉动画，隐藏元素）
$(selector).slideUp(speed, 回调函数);
c、滑入/滑出切换
$(selector).slideToggle(speed, 回调函数);
总结：此动画和后面介绍的淡入/淡出动画也有类似show()和hide()的四种方式。
3、淡入/淡出动画
a、淡入（让元素以渐渐进入视线的方式展示出来）
$(selector).fadeIn(speed, 回调函数);
b、淡出（让元素以渐渐消失的方式隐藏起来）
$(selector).fadeOut(speed, 回调函数);
c、淡入/淡出切换（通过改变透明度，切换匹配元素的显示或隐藏状态）
$(selector).fadeToggle(speed, 回调函数);
4、停止动画
$(selector).stop(false, false);
stop方法有两个参数，有不同的含义：
第一个参数：
true：后续动画不执行；
false：后续动画会执行；
第二个参数：
true：立即执行完成当前动画；
false：立即停止当前动画；
PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多，通常用于在执行动画前，先停掉之前的动画。
5、自定义动画
语法：$(selector).animate({params},speed, 回调函数);
作用：执行一组css属性的自定义动画。
参数说明：
第一个参数表示：要执行动画的CSS属性（必选）；
第二个参数表示：执行动画时长（可选）；
第三个参数表示：动画执行完后，立即执行的回调函数（可选）；
示例：
$("button").click(function(){
var json = {"width": 50, "height": 50, "left": 30, "top": 30, "border-radius": 100};
// 自定义动画
$("div").animate(json, 1000, function(){
alert("动画执行完毕！");
});
})
6、延迟动画
delay(时间,[,queueName]) // 第二个参数可选，例如：
$('#foo').slideUp(300).delay(800).fadeIn(400); // 以300毫秒的卷起动画，暂停800毫秒后有400毫秒的淡入动画
注意：delay()必须要结合动画的方法。
