jQuery —— JavaScript 库

一. JavaScript 库

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

1. jQuery
2. Prototype
3. YUI
4. Dojo
5. Ext JS
6. 移动端的zepto

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

---

---

二. jQuery的概念

🔰jQuery 是一个快速，简洁的JS库，倡导写更少的代码，做更多的事情。
🔰j 就是JS；Query 查询；意思是查询js，把js中的DOM操作进行了封装，我们可以快速的查询使用里面的功能。
🔰jQuery封装了JS常用的功能代码，优化了DOM操作。事件处理。动画设计和Ajax交互。
🔰学习jQuery本质：就是学习调用这些函数（方法）
🔰jQuery出现的目的就是加快前端开发人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。
🔰优点：

1. 轻量级，不会影响页面加载速度
2. 跨浏览器兼容。基本兼容现主流的浏览器
3. 链式编程，隐式迭代
4. 对事件，样式，动画支持，大大简化了DOM操作
5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单，日期控件，轮播图等
6. 免费，开源

(一) jQuery 的下载

🔰官网地址：https://jquery.com/
🔰版本：
1x：兼容IE678等低版本浏览器，官网不再更新
2x：不兼容IE678等低版本浏览器，官网不再更新
3x：不兼容IE678等低版本浏览器，是官网主要更新维护的版本
🔰各个版本的下载：https://code.jquery.com/

---

(二) jQuery的使用步骤

1. 打开网址，点击下载jQuery
   

2. 点击 下载压缩的生产jQuery
   

3. 将出现的代码全选，粘贴到自己创建的jQuery.min.js js文件中，并保存
   

4. 引入jQuery.min.js文件到 index.html文件中

5. 可以使用 jQuery库 进行代码书写了

CDN引入：使用远程CDN资源库在线引入，避免了文件下载（本教程所采用）也可以直接引入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

---

(三) jQuery 的入口函数

1. 
$(function() {
   
	... // 此处是页面DOM加载完成的入口
	$('div').hide(); // 隐藏
})
2. 
$(document).ready(function() {
   
	... // 此处是页面DOM加载完成的入口
})

3. 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部代码资源加载完成，jQuery帮我们完成了封装。
4. 相当于原生JS中的DOMContentLoaded。
5. 不同于原生JS中的load事件是等页面文档，外部的JS文件，css文件，图片加载完毕才执行内部代码。
6. 更推荐使用第一种方式。

---

(四) jQuery 的顶级对象 $

1. $ 是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用$。
2. $是jQuery的顶级对象，相当于原生JS中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。

<script>
	jQuery(document).ready(function() {
     
		jQuery('div').hide();
	})
</script>

---

(五) jQuery 对象和 DOM 对象

1. 用原生JS来获取的对象就是DOM对象；
   var div = document.querySelector('div');
2. jQuery方法获取的元素就是jQuery对象；
   $('div');
3. jQuery对象的本质：利用$对DOM对象包装后生成的对象（伪数组形式存储）；

🔰DOM 对象与jQuery对象之间是可以转换的。
🔰因为原生JS比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

1. DOM对象转换为jQuery对象：$(DOM对象)

$('div')

2. jQuery对象转换为DOM对象：(两种方式)

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

---

---

三. jQuery 常用API

(一) jQuery 选择器

1. jQuery 基本选择器

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

$("选择器") // 里面选择器直接写CSS选择器即可，但是要加引号

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

2. jQuery 层级选择器

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

3. 隐式迭代（重要）

🔰遍历内部DOM元索（伪数组形式存储）的过程就叫做隐式迭代。
🔰简单理解：给匹配到的所有元索进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

// 改变所有的div元素的字体颜色
$("div").css("color", "yellow")
//使用 jQuery 提供的方法（隐式迭代），不用我们自己遍历

4. 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 元素中，选择索引号为偶数的元素

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

重点记住：parent(), children(), find(), siblings(), eq(0

1) 链式编程

链式编程是为了节省代码量,看起来更优雅。

// 普遍写法
$(this).css('color', 'pink')
$(this).siblings('li').css('color', '#fff')

// 链式编程
$(this).css('color', 'pink').siblings().css('color', '#fff')

使用链式编程一定注意是 哪个对象执行样式

---

(二) jQuery 样式操作

1. 操作 css 方法

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

1. 参数只写属性名，则是返回属性值
   $('this').css('color');

2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
   $('this').css('color', 'pink');

3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
   $(this).css({'color': 'white', 'font-size': '20px'});

2. 设置类名样式方法

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

1. 添加类
   $(this).addClass("current")

• 追加类，不影响以前的类名

2. 移除类
   $(this).removeClass('current')

• 对指定的类进行删除

3. 切换类
   $(this).toggleClass('current')

• 对指定的类进行切换

4. 判断类
   $(this).hasClass('current')
   *判断该元素是否有分配该类

(三) jQuery 效果

🔰jQuery给我们封装了很多动画效果。
🔰参数：

• 参数都可以省略，无动画直接显示。
• speed：三种预定的速度之一的字符串（“slow”, “normal”, “fast”）或表示动画时长的毫秒数值（如：1000）
• easing