目录
一、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 === $);//true
function fn(){}
var num = 10
// jQuery.isFunction( ) 检查是不是函数
console.log($.isFunction(num));//false
console.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>