视频资料：
前言
- JavaScript组件库：
  - 概念：
  - 常见的js组件库
- 原生js和JQuery的对比：
  - 原生js(缺点)：
  - jQuery(优点):
JQuery：

视频资料：

https://www.bilibili.com/video/BV1pt411H7D6
https://www.bilibili.com/video/BV1a4411w7Gx

前言

JavaScript组件库：

概念：

JavaScript库:即library，是一个封装好的特定的集合（方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解︰就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

常见的js组件库

jQuery
Prototype
YUI
Dojo
Ext JS
移动端的zepto

原生js和JQuery的对比：

原生js(缺点)：
不能添加多个入口函数(window.onload),如果添加了多个，后面的会把前面的给覆盖。
原生js的api名字都太长太难记。
原生js有的时候代码冗余。
原生js中有些属性或者方法，有浏览器兼容问题。
原生js容错率比较低，前面的代码出了问题，后面的代码执行不了。

jQuery(优点):
是可以写多个入口函数的。
jQuery的api名字都容易记忆。
jQuery代码简洁(隐式迭代)。
jQuery帮我们解决了浏览器兼容问题。
容错率较高，前面的代码出来了问题，后面的代码不受影响。

JQuery：

jQuery的概念：
jQuery 是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less , Do More”，即倡导写更少的代码，做更多的事情。
j就是JavaScript;Query查询;意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。学习jQuery本质:就是学习调用这些函数(方法)。
jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

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

jQuery的基本使用：

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

各个版本的下载:https://code.jquery.com/

jQuery的使用：

引入JQuery文件：

https://www.aliyundrive.com/s/fCUd9PwjJiu

<script src="jquery.min.js"></script>

JQuery的入口函数：

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

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

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

jQuery的对象

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

用原生JS获取来的对象就是DOM对象
jQuery方法获取的元素就是jQuery对象。
jQuery对象本质是∶利用$对DOM对象包装后产生的对象（伪数组形式存储)。
jQuery对象只能使用jQuery方法，DOM对象使用原生的js属性和方法
两种对象的相互转化
DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

DOM对象转换为jQuery对象︰ $(DOM对象)
```
$(div")
```
jQuery对象转换为DOM对象（两种方式)
```
$('div')[index]          index是索引号
```
```
$('div').get(index)      index是索引号
```
jQuery的常用api：

jQuery选择器
原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准
```
$(“选择器”）     //里面选择器直接写CSS选择器即可，但是要加引号
```
基本选择器
| 名称 | 用法 | 描述 | | —- | —- | —- | | ID选择器 | $(“#id”) | 获取指定ID的元素 | | 全选选择器 | $(‘*’) | 匹配所有元素 | | 类选择器 | $(“.class”) | 获取同一类class的元素 | | 标签选择器 | $(“div”) | 获取同一类标签的所有元素 | | 并集选择器 | $(“div,p,li”) | 选取多个元素 | | 交集选择器 | $(“li.current”) | 交集元素 |

层级选择器

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

筛选选择器：

语法	用法	描述
:first	$(“li:first’)	获取第一个li元素
:last	$(“li:last’)	获取最后一个li元素
:eq(index)	$(“Ii:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	s(“lieven”)	获取到的li元素中，选择索引号为偶数的元素

jQuery样式操作

jQuery设置样式：

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

前端框架

JQuery

视频资料：

前言

JavaScript组件库：

概念：

常见的js组件库

原生js和JQuery的对比：

原生js(缺点)：

jQuery(优点):

JQuery：

jQuery的概念：

JQuery的优点：

jQuery的基本使用：

jQuery的下载：

jQuery的使用：

引入JQuery文件：

JQuery的入口函数：

jQuery的对象

jQuery的顶级对象$

jQuery对象和DOM对象

两种对象的区别

两种对象的相互转化

jQuery的常用api：

jQuery选择器

基本选择器

层级选择器

筛选选择器：

jQuery样式操作

jQuery效果

jQuery属性操作

jQuery文本属性值

jQuery元素操作

jQuery尺寸、位置操作