2020-04-01

一、jQuery概述

1、jQuery介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

我们使用jQuery可以更好地完成以下操作：

（1）HTML文档操作，对于DOM相关操作的优化

（2）jQuery提供更加方便与丰富的事件处理

（3）jQuery提供简单动画特效

（4）jQuery提供AJAX交互

我们知道，要使用任何一个JS框架，都是需要导入相关的JS文件的。

关于其它常用的JS框架：

（1）AngularJS是一个MVC的JS框架，它提供模板和双向数据绑定

（2）React学习成本比较高，它提供了组件化和虚拟DOM技术

（3）Vue借鉴了二者的优点，小巧灵活，运行效率高

jQuery的插件机制特别丰富，在开发中可以选择非常多的相关插件，简化JS开发。例如，表单校验插件、树形结构插件……

二、jQuery核心函数

1、jQuery(callback)

jQuery(callback)它是“$(document).ready()的简写”

$(document).ready(function(){});页面加载完成后，指定的函数执行

在jQuery的源代码

2、jQuery(html,[ownerDocument])

jQuery(html代码)它的作用是将一个DOM对象包装成jQuery对象

问题：什么是jQuery对象？

我们的jQuery中定义的方法与属性，只有jQuery对象可以调用

这个核心函数的作用是将一个DOM对象包装成了jQuery对象

而它的第一个参数是html代码

它的第二个参数是可选的，用于设置DOM的相关属性

3、jQuery([selector,[context]])

这个函数我们使用它的主要作用是用于在页面上查找，根据CSS选择器

参数1就是CSS选择器，jQuery中提供了九种选择器

参数2的context就是指定要查找的DOM集

4、关于jQuery对象与DOM对象的转换

对于DOM对象-->jQuery对象 ${dom}

对于jQuery对象-->dom对象 jQuery对象[0]或jquery.get(0)

三、jQuery选择器

1、基本选择器

    * #id 根据id属性查找一个元素

    * element 根据元素的标签名查找元素

    * .class 根据元素的class属性查找元素

    * * 匹配所有元素

    * selector1,selector2,selectorN 将每一个选择器匹配到元素合并后一起返回

2）方法总结

html()方法

无参数代表获取元素中的html代码

有参数代表设置元素的html代码

text()方法

无参数代表获取元素中的文本信息

有参数代表设置元素的文本信息

each()方法

可以帮助我们遍历元素，可以传递一个函数each(function(i))，这里的i就代表每一个元素的序号，在函数中可以通过this来获取其DOM对象

index()方法

可以判断元素的序号

2、层级选择器

层级选择器是根据元素的关系来获取，关系是指父子、兄弟关系等

* ancestor descendant

空格 得到元素下的所有子元素（包含直接子元素与间接子元素）

* parent > child

大于号 只获取直接的子元素

* prev + next

加号 只获取紧随在后的一个兄弟元素

* prev ~ siblings

波浪线 获取后边的所有的兄弟元素