jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制—

一、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，只需要将如下代码粘贴到网页中即可：

 <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script><script>console.log($);//判断是否成功引入jQuery</script>

或者这个：

 <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script><script>console.log($);//判断是否成功引入jQuery</script>

如何自己下载获取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作为对象（工具类）调用的例子

 <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script><script>console.log(jQuery === $);//truefunction fn(){}var num = 10// jQuery.isFunction( )  检查是不是函数console.log($.isFunction(num));//falseconsole.log($.isFunction(fn));//true// 可以使用typeof检查类型console.log(typeof fn === "function");//true</script>

2. 将其作为函数调用的例子

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>document</title><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script><script>//  将一个函数作为$的参数// $(function(){//    alert("核心函数~~")// })// alert("核心函数外~~")// 将选择器字符串作为参数$(function(){// 通过jQuery核心函数查询的结果可以直接调用click，因为其是jQUery对象 $("#btn01").click(function(){// alert("你点我干嘛")var btn = document.getElementById("btn01")// 所以为了区分 jQUery对象和DOM原生对象，// 我们一般为 jQUery对象 命名时，会为其加上一个$                var $btn2 = $("#btn01")// 将DOM对象作为参数传进去，可以将DOM对象转换为jQuery对象alert($(btn))//[object Object]alert(btn);//[object HTMLButtonElement]alert($btn2);//[object Object]var $h1 = $("<h1>我是一个标题</h1>")//会根据html代码创建元素alert($h1)//[object Object]，是一个jQuery对象$("div").append($h1)//把创建的h1加入到div中})})     </script>
</head>
<body>    <div></div><button id="btn01" type="button">点我一下</button>
</body>

四、jQuery对象

jQuery对象

- 通过jQuery核心函数获得到的对象就是jQuery对象

- jQuery对象是jQuery中定义的对象，可以将其理解为DOM对象的升级

在jQuery对象中为我们提供了很多简单易用的方法来帮助我们简化DOM操作

- jQuery对象本质上是一个DOM对象的数组（类数组）

可以通过索引获取jQuery 对象中的DOM对象，注意获取的是DOM对象

- 当我们修改jQuery对象，它会自动修改jQuery对象中的所有元素

这一特点称为jQuery的隐式迭代

- 通常情况下，jQuery对象的方法的返回值依然是一个jQuery对象

所以我们可以调用一个方法后继续调用其他的jQuery对象的方法

这一特性称为jQuery对象的链式调用

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>document</title><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script></head>
<body>    <button id="btn01">点我一下</button><ul><li id="swk">孙悟空</li><li id="zbj">猪八戒</li><li>沙和尚</li><li>唐僧</li></ul><script>$("#btn01").click(function(){var $li = $("li")//将其转换为jQuery对象// alert($li.length)// jQuery对象本质上是一个DOM对象的数组（类数组）// alert($li[0].textContent)// 用索引获取jQuery对象中的DOM对象，注意取出来的是DOM对象// $li.text("哈哈哈")//修改jQuery对象中的所有元素var text = $li.text()//读取文本，返回所有标签中的文本内容var id = $li.attr("id")//读取属性，只返回第一个标签的属性alert(text)//读取到其所有内容alert(id)//swk,  读取属性，只返回第一个标签的属性var result = $li.text("新的文本内容")alert(result === $li);//true  通常情况下，jQuery对象的方法的返回值依然是一个jQuery对象// $li.text("新的文本内容")返回jQuery对象，也就是$li$li.text("新的文本内容").css("color","red")//可以调用一个方法后继续调用其他的jQuery对象的方法// jQuery对象的 链式调用})</script>
</body>

五、jQuery对象操作class

addClass( )

- 为jQuery对象添加一个或多个class

- 可以接收一个回调函数作为参数,

回调函数中有两个参数：1.当前元素的索引，2.当前元素的类名

在回调函数中this 就是当前的元素，但this是一个DOM对象，不能调用jQuery对象的方法

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>document</title><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script><style>.box1{width: 200px;height: 200px;background-color: #bfa;}.box2{border: 10px red solid;}.box3{background-color: orange;}</style><script>$(function(){// 为按钮绑定响应函数$("#btn").click(function(){// // 为box1添加class// // addClass()可以为元素添加一个或多个class// $(".box1").addClass(["box2","box3"])//可以使用数组的形式添加多个class//                               // 与"box2 box3"相同//           // 具有隐式迭代的特点，可以为所有的box1类添加class// addClass可以接收一个回调函数作为参数$(".box1").addClass(function(index,className){// alert(index + "--" + className)// 在回调函数中this 就是当前的元素alert(this);//[object HTMLDivElement]// 说明this是一个DOM对象，不能调用jQuery对象的方法if(index % 2 == 0){// 添加box2// this.classList.add("box2") //this是一个DOM对象$(this).addClass("box2")//将this 转换为jQuery对象，可以调用jQuery对象的方法}else{// 添加box3// this.classList.add("box3")$(this).addClass("box3")}})})})</script>
</head>
<body>    <button id="btn">点我一下</button><hr><div class="box1"></div><div class="box1"></div><div class="box1"></div></body>

hasClass( )

- 检查 jQuery对象是否含有某个class

removeClass( )

- 删除jQuery对象的指定class

toggleClass( )

- 切换jQuery对象的指定class

六、addClass补充

addClass（）的回调函数的返回值会成为当前元素的class

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>document</title><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script><style>.box1{width: 200px;height: 200px;background-color: #bfa;}.box2{border: 10px red solid;}.box3{background-color: orange;}</style><script>$(function(){// 为按钮绑定响应函数$("#btn").click(function(){$(".box1").addClass(function(index){// 回调函数的返回值会成为当前元素的class// return ["box2","box3"]if(index % 2 == 0){return "box2"}else{return "box3"}})})})</script>
</head>
<body>    <button id="btn">点我一下</button><hr><div class="box1"></div><div class="box1"></div><div class="box1"></div></body>

七、jQuery对象复制

clone( ) 用来复制jQuery对象

- 只会复制元素本身，不会复制元素的事件

- 在clone( )中传入一个参数true,表示不仅复制元素本身，还包括其事件、数据等

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>document</title><script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script><script>/* 点击按钮，使得孙悟空添加到 list2 中*/$(function(){$("#list li:nth-child(1)").click(function(){alert("孙悟空")})// clone( )用来复制jQuery对象// var $swk = $("#list li:nth-child(1)").clone()// 只会复制元素本身，不会复制元素的事件，所以在list2中添加的孙悟空不会有点击出现“孙悟空"的事件var $swk = $("#list li:nth-child(1)").clone(true)// 在clone()中传入一个参数true,表示不仅复制元素本身，还包括其事件、数据等var $list2 = $("#list2")$("#btn").click(function(){$list2.append($swk)})})</script>
</head>
<body>    <button id="btn">点我</button><hr><ul id="list"><li>孙悟空</li><li>猪八戒</li></ul><ul id="list2"><li>沙和尚</li><li>唐僧</li></ul>
</body>