目录
一、jQuery简介
二、引入jQuery
三、jQuery核心函数
四、jQuery对象
五、jQuery对象操作class
六、addClass补充
七、jQuery对象复制
一、jQuery简介
jQuery是一个快速的、小型的、具有丰富功能的JavaScript库。它的出现使得网页中的DOM、事件、动画、Ajax等操作变得更加简单，“写更少的代码，做更多的事儿”是jQuery一直坚信的开发理念。
库就是一组编写好的代码。这组代码中包含了一些已经定义好的对象和函数。只需要将库引入到页面中，即可直接使用这些对象和函数。
jQuery—— 一个过时的库
所有的库都是为了解决开发时的痛点而存在的。jQuery解决的问题主要有两个：简化DOM操作、解决浏览器的兼容问题。然而随着前端的发展、DOM标准的更新、IE的消亡，这两个问题已经不是什么大问题了，以及React、Vue、Angular大型框架的出现，使用jQuery的机会越来越少，所以没有学习jQuery的必要了。如果比较赶时间，可以跳过jQuery的学习。
二、引入jQuery
使用库就需要先把这组代码引入到页面中，也就是引入库。实际的操作就是通过script标签引入一个外部的js 文件，这一点所有的库都是一样的。
引入jQuery：
1.可以直接下载jQuery脚本文件，然后放入本地服务器，并在网页中通过script 标签进行引入
2.也可以通过公共的cdn引入，使用公共cdn比较简单，以字节跳动静态资源为例，要引入3.x版本的jQuery，只需要将如下代码粘贴到网页中即可：
或者这个：
如何自己下载获取jQuery文件？ 去jQuery官网（jQuery） ，点击下载，然后选择要下载的版本
三、jQuery核心函数
引入jQuery库，其实就是向网页中添加了一个新的函数$（jQuery）
- $ 是jQuery中的核心函数，jQuery的所有功能都是通过该函数来进行的
- 核心函数的功能（两种作用）
1. 将它作为对象使用，此时是一个工具类
- 在核心函数中jQuery为我们提供了多个工具方法
jQuery.isArray( ) 检查是不是数组
jQuery.isFunction( ) 检查是不是函数
jQuery.isNumeric( ) 检查是不是数值
2. 将它作为函数调用，根据不同参数的不同可以发挥不同的作用
jQuery( 函数 ) 将一个函数作为$的参数
- 这个函数会在文档加载完毕之后执行
- 相当于document.addEventListener("DOMContentLoaded",function(){ })
jQuery( 选择器 ) 将选择器字符串作为参数
- jQuery 自动去网页中查找元素
- 作用类似于 document.querySelectorAll( "...")
- 注意：通过jQuery核心函数查询的结果并不是原生的DOM对象，
而是一个经过jQuery包装过的新的对象，这个对象我们称其为jQUery对象 jQuery对象不能直接调用原生DOM对象的方法，
通常我们为jQuery对象命名时，会使用$开头（为了区分 $对象和DOM原生对象)
jQuery( DOM对象) 将DOM对象作为参数
- 可以将DOM对象转换为jQuery对象，从而使用jQuery对象的方法
jQuery( HTML代码 ) 将HTML代码作为参数
- 会根据html 代码来创建元素
注意：上述编写代码时，可以使用$ 代替jQuery
注意：在jQuery中我们设置变量时，使用var ，因为一般使用jQuery说明比较旧的项目，考虑兼容性，同时也尽量避免使用箭头函数
1. 将jQuey作为对象（工具类）调用的例子
2. 将其作为函数调用的例子
四、jQuery对象
jQuery对象
- 通过jQuery核心函数获得到的对象就是jQuery对象
- jQuery对象是jQuery中定义的对象，可以将其理解为DOM对象的升级
在jQuery对象中为我们提供了很多简单易用的方法来帮助我们简化DOM操作
- jQuery对象本质上是一个DOM对象的数组（类数组）
可以通过索引获取jQuery 对象中的DOM对象，注意获取的是DOM对象
- 当我们修改jQuery对象，它会自动修改jQuery对象中的所有元素
这一特点称为jQuery的隐式迭代
- 通常情况下，jQuery对象的方法的返回值依然是一个jQuery对象
所以我们可以调用一个方法后继续调用其他的jQuery对象的方法
这一特性称为jQuery对象的 链式调用
- 孙悟空
- 猪八戒
- 沙和尚
- 唐僧
五、jQuery对象操作class
addClass( )
- 为jQuery对象添加一个或多个class
- 可以接收一个回调函数作为参数,
回调函数中有两个参数：1.当前元素的索引，2.当前元素的类名
在回调函数中this 就是当前的元素，但this是一个DOM对象，不能调用jQuery对象的方法
hasClass( )
- 检查 jQuery对象是否含有某个class
removeClass( )
- 删除jQuery对象的指定class
toggleClass( )
- 切换jQuery对象的指定class
六、addClass补充
addClass（ ）的回调函数的返回值会成为当前元素的class
七、jQuery对象复制
clone( ) 用来复制jQuery对象
- 只会复制元素本身，不会复制元素的事件
- 在clone( )中传入一个参数true,表示不仅复制元素本身，还包括其事件、数据等
- 孙悟空
- 猪八戒
- 沙和尚
- 唐僧
推荐阅读
您阅读本篇文章共花了：
发表评论