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毫秒的淡入动画