目录
jQuery类库
一、jQuery简介
1.特点
- 加载速度更快
一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。
- 选择器更多更好用
丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。
- 一行代码搞定更简介
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。
- 支持ajax请求(重点)
jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。
- 兼容多浏览器
jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
- 插件扩展开发
jQuery有着丰富的第三方的插件
2.使用jQuery的不同方式
- 下载核心文件到本地引入(本地环境,没有网络也可以使用)
- CDN网络资源加载
3.jQuery底层本质
jQuery封装了JS代码,让编写更简单,但是没有原生JS代码运行的更快
- JS代码
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
'red'
pEle.nextElementSibling.style.color = 'green'
- jQuery代码
$('p').first().css('color','yellow').next().css('color','blue')
4.标签对象与jQuery对象
- 不同的对象能调用的方法是不同的,在编写代码的时候一定要知道正在操作的是jQuery对象还是标签对象
- 标签对象与jQuery对象互相转换
可以把jQuery对象看成一个特殊的列表,通过jQuery对象索引取值的方式来获取标签对象
二、jQuery查找标签
1.基本选择器
- id选择器
$('#d1')
- class选择器
$('.c1')
- 标签选择器
$('div')
2.组合选择器
- 寻找id是d1的div标签
$('div#d1')
- 查找含有c1样式类的span标签
$('span.c1')
- 查找div或者span或者p标签
$('span,div,p')
- 查找id是d1,或者class中包含为c1,或者span标签
$('#d1,.c1,span')
3.层级选择器
$('div p') 查找含有div中所有的后代p标签
$('div>p') 查找div里面的儿子p标签
$('div+p') 查找div同级别下面紧挨着的p标签
$('div~p') 查找div同级别下面所有的p标签
4.属性选择器
$('[username]') 查找含有username属性名的标签
$('[username="duoduo"]') 查找含有username属性名且值为“duoduo”的标签
$('div[username="duoduo"]') 查找含有username属性名且值为“duoduo”的div标签
5.基本筛选器
![image-20221207095908427](https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-12-07-015908.png)
筛选器 | 作用 |
---|---|
:first |
第一个 |
:last |
最后一个 |
:eq(index) |
索引等于index的那个元素 |
:even |
匹配所有索引值为偶数的元素,从 0 开始计数 |
:odd |
匹配所有索引值为奇数的元素,从 0 开始计数 |
:gt(index) |
匹配所有小于给定索引值的元素 |
:lt(index) |
匹配所有小于给定索引值的元素 |
:not(元素选择器) |
移除所有满足not条件的标签 |
:has(元素选择器) |
选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) |
- 例子:通过jQuery代码操作返回的都是jQuery对象
$('span')
jQuery.fn.init(6) [span, span, span, span#d2, span, span, prevObject: jQuery.fn.init(1)]
$('span:first')
jQuery.fn.init [span, prevObject: jQuery.fn.init(1)]0: spanlength: 1prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$('span:even')
jQuery.fn.init(3) [span, span, span, prevObject: jQuery.fn.init(1)]0: span1: span2: spanlength: 3prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$('span:gt(3)')
jQuery.fn.init(2) [span, span, prevObject: jQuery.fn.init(1)]
$('span:not(#d1)')
jQuery.fn.init(6) [span, span, span, span#d2, span, span, prevObject: jQuery.fn.init(1)]0: span1: span2: span3: span#d24: span5: spanlength: 6prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)
$('span:has(#d2)')
jQuery.fn.init [prevObject: jQuery.fn.init(1)]
6.表单筛选器
仅限于表单标签内部使用
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
- 表单标签属性
:enabled
:disabled
:checked
:selected
:checked
除了查找到checked
的标签,还会查找到selected
标签
:selected
只会查找到selected
的标签
7.筛选器方法
- 下一个元素:
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
- 上一个元素:
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
- 父亲元素:
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
- 儿子和兄弟元素:
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
- 查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")
![image-20221207172808997](https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-12-07-092809.png)
8.链式操作的本质
为什么在jQuery中为什么可以通过点的操作不断的点属性这种链式操作在python中用代码模拟
通过每次操作之后返回了操作的对象,这样就可以通过对象点方法后继续点方法了,进行链式操作了
class MyClass(object):
def func1(self):
print('执行了func1')
return self
def func2(self):
print('执行了func2')
return self
obj = MyClass()
obj.func1().func2() # None.func2()
三、操作标签
1.class操作
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。
![image-20221207184115089](https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2022-12-07-104115.png)
2.位置操作
$(window).scrollTop()
- 例
$(window).scrollTop()
6618.5
3.文本操作
text() innerText
html() innerHTML
val() value
jQuety对象[0].files files[0]
4.创建标签
document.createElement() $('<a>')
5.属性操作
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
attr
对于动态变化的属性,获取会失真
-
prop和attr的区别:
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的
prop('value') // 获取value属性的值
prop('checked',true); // 设置属性
removeProp('value') // 移除value属性
这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。
总结一下:
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
6.文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点
四、jQuerty事件
1.JS绑定事件与jQuery绑定事件
(1)JS绑定事件
标签对象.on事件名 = function () {
this
}
(2)jQuery事件绑定
- 方式一:
jQuery对象.事件名(function(){
})
- 方式二
jQuery对象.on('事件名', function(){
})
2.常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
3.input框实时监听事件
<input type="text">
<script>
$(":text").on('input',function(){
// alert(123)
console.log($(this).val())
})
</script>
4.克隆事件
clone()
默认不克隆事件,加true就可以
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>克隆</title>
<style>
#b1 {
background-color: deeppink;
padding: 5px;
color: white;
margin: 5px;
}
#b2 {
background-color: dodgerblue;
padding: 5px;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀,点击就送</button>
<hr>
<button id="b2">屠龙宝刀,点击就送</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
// clone方法不加参数true,克隆标签但不克隆标签带的事件
$("#b1").on("click", function () {
$(this).clone().insertAfter(this);
});
// clone方法加参数true,克隆标签并且克隆标签带的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>
- 例子
<button id="d1" style="border: 3px solid dodgerblue">没有克隆的影分身</button>
<hr>
<button id="d2" style="border: 3px solid orange">真正的影分身</button>
<script>
$('#d2').on('click',function (){
$('body').append($(this).clone(true))
})
$('#d1').on('click',function (){
$('body').append($(this.clone()))
})
</script>
5.事件相关补充
(1)阻止后续功能
事件本身有功能了,如何取消本身默认的功能
在事件函数的最后return false
return false; // 常见阻止表单提交等
e.preventDefault()
;
- 取消form表单提交数据的默认功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<form action="">
<p>用户名:
<input type="text">
</p>
<p>
<input type="submit" id="d1">
</p>
</form>
<script>
$('#d1').click(function (event) {
alert('弹出警告框')
return false
// event.preventDefault()
})
</script>
</body>
</html>
(2)事件冒泡
多个标签互相嵌套,并且有相同的功能要执行的时候,会发生事件冒泡的现象
当只想点击span标签发生弹出警告框事件的时候,绑定p标签和div标签的弹出警告框事件也会发生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<div>
<p>
<span>点击span</span>
</p>
</div>
<script>
$('span').click(function (){
alert('span')
})
$('p').click(function (){
alert('p')
})
$('div').click(function (){
alert('div')
})
</script>
</body>
</html>
- 阻止事件冒泡
(3)等待页面加载完毕再执行JS代码
- 完整写法
$(document).ready(function(){
// 在这里写你的JS代码...
})
- 简写
$(function(){
// 你在这里写你的代码
})
(4)事件委托
事件委托是通过事件冒泡的原理,让父标签去捕获子标签的事件
- 将body中的所有的点击事件委托给button标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<button>点我</button>
<script>
// $('button').click(function () {
// alert('速度一定要快!!!')
// })
$('body').on('click','button',function () {
alert('哈哈哈')
})
</script>
</body>
</html>
五、jQuery的简单的动画效果
1.点赞+1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
点赞特效简单示例