文章目录
- jQuery
- 1 jQuery简介
- 2 使用jQuery
- 2.1 下载jQuery
- 2.2 引用jQuery
- 3 jQuery的核心函数
- 3.1 作为工具类使用
- 3.2 作为函数使用
- 3.2.1 将一个函数作为$的参数
- 3.2.2 将选择器字符串作为参数
- 3.2.3 将DOM对象作为参数
- 3.2.4 将html代码作为参数
- 4 jQuery对象
- 4.1 获取DOM对象
- 4.2 隐式迭代
- 4.3 链式调用
- 5 jQuery常用方法
- 5.1 jQuery对象复制
- 5.2 添加容器
- 5.3 添加子元素
- 6 事件的处理
- 6.1 绑定事件
- 6.2 冒泡和默认事件
- 6.3 事件委派
jQuery
jQuery官网
1 jQuery简介
jQuery是一个快速的、小型的、具有丰富功能的JavaScript库。它的出现使得网页中的DOM、事件、动画、Ajax等操作变得更加简单。“写更少的代码，做更多的事儿"是jQuery一直坚信的开发理念。
所有的库都是为了解决我们开发时的痛点而存在的。jQuery解决的问题主要有两个：简化DOM操作、解决浏览器兼容问题。然而随着前端的发展、DOM标准的更新、IE的消亡。DOM操作和浏览器兼容性早已不是什么大问题了，再加上React、Vue、Angulari这些大型框架的出现，在实际项目中使用iQuery的机会可以说是少之又少。所以现在jQuery并无学习的必要
为什么还要学习jQuery？
- jQuey比较简单，学习不费很多时间
- jQuery是从原生JS到JS库的一个过渡，可以帮助我们理解其他库
- 技多不压身
2 使用jQuery
2.1 下载jQuery
下载网址：
- 压缩版本：https://code.jquery.com/jquery-3.6.1.min.js
- 原始版本：https://code.jquery.com/jquery-3.6.1.js
常用版本：
2.x使用不多
不同版本主要是对浏览器的兼容不同
- 1.x：兼容IE6,7,8，功能少一些，性能也比较差
- 3.x：兼容IE9+浏览器
2.2 引用jQuery
可以从本地引用或者是从公共cdn服务器引用，都是通过script 标签引用
在本地版本有两种，一种是压缩过的jquery-3.6.1.min.js，这个里面去掉了所有的空格和换行，并且变量也都换成了单个字母，另一种是原版的jquery-3.6.1.js，一般我们在开发环境使用没有压缩的版本，在上线之后使用压缩过的版本，这样加载速度更快
除此之外，我们还可以使用在公共服务器上的jQuery，例如字节的cdn，不仅可以减轻我们服务器的压力，也可以利用浏览器的缓存，减少加载速度
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./scripts/jquery-3.6.1.js"></script> -->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<script>
console.log($)
</script>
</body>
</html>
3 jQuery的核心函数
引入jQuery库，其实就是向网页中添加了一个新的函数$(或者jQuery)
$ 是jQuery中的核心函数，jQuery的所有功能都是通过该函数来进行的
核心函数的功能，有两种作用
- 作为工具类使用
- 作为函数使用
3.1 作为工具类使用
在核心函数中jQuery为我们提供了多个工具方法
- jQuery.contains()
- jQuery.isArray()
- jQuery.isFunction()
- jQuery.isNumeric()
- …
3.2 作为函数使用
3.2.1 将一个函数作为$的参数
- 这个函数会在文档加载完毕之后执行
- 相当于：
document.addEventListener("DOMContentLoaded", function(){})
$(function () {
console.log("$里面")
})
console.log("$外面")
结果
$外面
$里面
3.2.2 将选择器字符串作为参数
- jQuery自动去网页中查找元素，作用类似于
document.querySelectorAll("...") - 注意：
- 通过jQuery核心函数查询到的结果并不是原生的DOM对象，而是一个经过jQuery包装过的新的对象，这个对象我们称其为jQuery对象
- jQuery对象中为我们提供了很多新的方法，方便我们做各种DOM操作，但是jQuery对象不能直接调用原生DOM对象的方法
- 通过我们为jQuery对象命名时，会使用$开头，加以区分
<button id="btn">按钮</button>
<script>
$("#btn").click(function (event) {
console.log("点击了按钮")
console.log(event)
})
</script>
3.2.3 将DOM对象作为参数
可以将DOM对象转换为jQuery对象，从而使用jQuery对象的方法
使用$(domELe)可以将原生DOM对象转化为jQuery对象
var $btn = $("#btn")
var btn = document.querySelector("#btn")
alert($btn) // [object Object]
alert(btn) // [object HTMLButtonElement]
var new$btn = $(btn)
alert(new$btn) // [object Object]
3.2.4 将html代码作为参数
会根据html代码来创建元素（jQuery对象）
var $h1 = $("<h1>我是h1标题</h1>")
4 jQuery对象
- 通过jQuery核心函数获取到的对象就是jQuery对象
- jQuery对象是jQuery中定义的对象，可以将其理解为是DOM对象的升级版，在jQuery对象中为我们提供了很多简单易用的方法，来帮助我们简化DOM操作
4.1 获取DOM对象
-
jQuery对象本质上是一个DOM对象的数组（类数组），可以通过索引获取jQuery对象中的DOM对象
-
通过索引取出来之后得到的就是DOM对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="scripts/jquery-3.6.1.js"></script> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> var $lis = $("li") console.log($lis) // jquery对象 console.log($lis[0])// DOM对象 </script> </body> </html>
-
4.2 隐式迭代
当我们修改jQuery对象时，它会自动修改jQuery中的所有元素，这一特点称为jQuery的隐式迭代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="scripts/jquery-3.6.1.js"></script>
</head>
<body>
<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
</ul>
<script>
var $lis = $("li")
console.log($lis.attr("id"))// 读取属性，只会读取第一个
console.log($lis.text()) // 读取内容
$lis.text("hhaha") // 修改内容
</script>
</body>
</html>
4.3 链式调用
- 通常情况下，jQuery对象方法的返回值依然是一个jQuery对象，所以我们可以在调用一个方法后继续调用其他的jQuery对象的方法，这一特性，称为jQuery对象的 链式调用
- 但是链也不要太长，可读性比较差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="scripts/jquery-3.6.1.js"></script>
</head>
<body>
<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>
</ul>
<script>
var $lis = $("li")
$lis.text("新的内容").css("color", "red") // 链式调用
</script>
</body>
</html>
5 jQuery常用方法
api文档：jQuery API Documentation
中文文档：https://www.jquery123.com/
- 操作class方法
- addClass()：为jQuery对象添加一个或多个class
- hasClass()：检查jQuery对象是否含有某个class
- removeClass()：删除jQuery对象的指定class
- toggleClass()：切换jQuery对象的指定class
- 元素复制
- clone()：复制jQuery元素
- 元素包裹
- unwrap()：去除父元素
- wrap()：添加父元素
- wrapAll()：添加父元素
- wrapInner()：在元素内部增加一层
- 元素内部添加
- append()：添加子元素
- appendTo()：添加到父元素
- prepend()：向前添加子元素
- prependTo()：添加到父元素前
- html()：读取或设置html代码
- text()：读取或设置文本内容
- 元素外部添加
- after()：向后边添加元素
- insertAfter()：将元素添加到某元素的后边
- before()：向前边添加元素
- insertBefore()：将元素添加到某元素的前边
- 删除元素
- detach()：删除元素（保留元素上的事件）
- empty()：删除所有子元素
- remove()：删除元素，同时也会把绑定的时间移除
- 替换元素
- replaceAll()：替换某个元素
- replaceWith()：被某个元素替换
- 元素属性操作
- attr()：设置/获取元素的指定属性，对于布尔值属性会返回实际值
- prop()：设置/获取元素的指定属性，对于布尔值属性会返回布尔值
- removeAttr()：移除属性
- removeProp()：移除属性
- val()：设置/获取元素的value属性
- 样式操作
- css()：读取/设置元素的css样式
- height()：读取/设置元素的高度
- width()：读取/设置元素的宽度
- innerHeight()：读取/设置元素的内部高度
- innerWidth()：读取/设置元素的内部宽度
- outerHeight()：读取/设置元素可见框的高度
- outerWidth()：读取/设置元素可见框的宽度
- offset()：读取/设置元素的偏移量
- position()：读取元素相当于包含块的偏移量
- scrollLeft()：读取/设置元素水平滚动条的位置
- scrollTop()：读取/设置元素垂直滚动条的位置
- 过滤
- eq()：获取指定索引的元素
- even()：获取索引为偶数的元素
- odd()：获取索引为奇数的元素
- filter()：筛选元素
- first()：获取第一个元素
- last()：获取最后一个元素
- has()：获取含有指定后代的元素
- is()：检查是否含有某元素
- map()：获取对象中的指定数据
- slice()：截取元素（切片）
- 其他遍历
- add()：创建包含当前元素的新的jQuery对象
- addBack()：将之前操作的集合中的元素添加到当前集合中
- contents()：获取当前jQuery对象的所有子节点（包括文本节点）
- end()：将筛选过的列表恢复到之前的状态
- not()：从列表中去除符合条件的元素
- 树遍历
- children()：获取子元素
- closest()：获取离当前元素最近的指定元素
- find()：查询指定的后代元素
- next()：获取后一个兄弟元素
- nextAll()：获取后边所有的兄弟元素
- nextUntil()：获取后边指定位置的兄弟元素
- offsetParent()：获取定位父元素
- parent()：获取父元素
- parents()：获取所有的祖先元素
- parensUntil()：获取指定的祖先元素
- prev()：获取前边的兄弟元素
- prevAll()：获取前边所有的兄弟元素
- prevUntil()：获取指定的兄弟元素
- siblings()：获取所有的兄弟元素
5.1 jQuery对象复制
使用clone()完成对象复制
- 参数设置为true为深拷贝，复制事件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./scripts/jquery-3.6.1.js"></script>
<script>
$(function(){
$("#list li:nth-child(1)").click(function(){
alert("孙悟空")
})
/*
clone() 用来复制jQuery对象
*/
var $swk = $("#list li:nth-child(1)").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>
</html>
5.2 添加容器
- unwrap() 删除外层父元素
- 传入参数为需要删除的元素，例如
unwrap("div")如果外层是div则删除，如果不是则不删除
- 传入参数为需要删除的元素，例如
- wrap() 为当前元素添加一个容器
wrap("div")每个元素外面都包一个div
- wrapAll() 为当前的所有元素统一添加容器
wrapAll("div)所有元素都包在同一个div下面
- wrapInner() 为当前元素添加一个内部容器
wrapInner("div")将内部元素包在div下面
5.3 添加子元素
- append()：在当前元素内部最后添加一个元素
- appendTo()：将子元素添加到父元素后边
- prepend()：在当前元素内部最前面添加一个元素
- prependTo()：向父元素的前边添加子元素
- text()：获取/设置元素的文本内容，不传参数就是读，传参数就是改
- html()：获取/设置元素的html代码
append()和appendTo()
- 父元素.append(子元素)
- 子元素.appendTo(父元素)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Document</title>
<style>
#box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
#box2 {
width: 100px;
height: 100px;
background-color: orange;
}
#box3 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script src="./scripts/jquery-3.6.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$("#box1").append("<div id='box2'/>")
// 等价于下面的方法
// $("<div id='box2'/>").appendTo("#box1")
})
})
</script>
</head>
<body>
<button id="btn">点我</button>
<hr/>
<div id="box1">
<div id="box3"></div>
</div>
</body>
</html>
prepend()和prependTo()
- 父元素.prepend(子元素)
- 子元素.prependTo(父元素)
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Document</title>
<style>
#box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
#box2 {
width: 100px;
height: 100px;
background-color: orange;
}
#box3 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<script src="./scripts/jquery-3.6.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$("#box1").prepend("<div id='box2'/>")
// 等价于下面的方法
// $("<div id='box2'/>").prependTo("#box1")
})
})
</script>
</head>
<body>
<button id="btn">点我</button>
<hr/>
<div id="box1">
<div id="box3"></div>
</div>
</body>
</html>
6 事件的处理
事件 - jQuery API 中文文档 | jQuery 中文网 (jquery123.com)
6.1 绑定事件
例如：
-
方式一：直接绑定，类似
ele.onclock = function(){}$().click(function(){})：单击事件$().dbclick(function(){})：双击事件$().mousemove(function(){})：鼠标移动事件
-
方式二：通过on绑定事件，类似于
addEventListener()$().on("click", function(){})
-
方式三：通过one绑定事件，类似于on的使用方式，但是只能触发一次
$().on("click", function(){})
-
取消绑定事件
-
$().off("click", function(){}) -
在off的时候默认去取消掉所有绑定的事件
-
可以使用命名空间解决
$("#btn01").on("click.a", function(){ alert("通过on绑定的事件！") }) $("#btn01").on("click.b", function(){ alert("通过on绑定的事件！2") }) $("#btn02").on("click", function(){ // 只删除第一个绑定的事件 $("#btn01").off("click.a") })
-
6.2 冒泡和默认事件
在jQuery中绑定的事件可以正常的冒泡和取消冒泡
在jQuery的事件响应函数中，同样有事件对象，但是这个对象是经过jQuery包装过的新的对象，包装该对象主要是为了解决兼容性的问题，可以当成普通的event对象使用
取消默认行为和冒泡：
- 在函数中return false
- 使用event.stopPropogation()
$("a").click(function(event){ // 方法一 event.stopPropagation() event.preventDefault() alert(123) // 方法二 // 在jQuery的事件回调函数中，可以通过return false来取消默认行为和冒泡 // return false })
6.3 事件委派
jQuery委托事件比原生的简单很多，通过on绑定事件的时候添加要触发的选择器即可
$(document).on("click",".box1", function(event){
alert("哈哈")
})
可以使用off来删除委托的事件
![[附源码]Python计算机毕业设计Django-中国传统手工艺销售平台](https://img-blog.csdnimg.cn/8ef98439179a44118e1285446de01e50.png)
