jQuery简介
"""
jQuery内部封装了原生的js代码(还额外的添加了很多的功能)
能够让你通过书写更少的代码完成js操作
类似于Python的模块 在前端模块不叫模块，叫“类库”
兼容多个浏览器
jQuery的宗旨
write less do more
然你用更少的代码完成更多的事情
jQuery要学习的内容
选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点)
jQuery下载
https://jquery.com/download/
直接把文档复制粘贴到一个js文件就行了
"""
jQuery下载
https://jquery.com/download/
直接把文档复制粘贴到一个js文件就行了
jQuery的两种导入方式
第一种：本地文件导入
把jq的js文件用script导入即可，src填jq文件所在的本地
第二种：网络导入（要有网络才可以使用）
直接引入jQuery提供的CDN服务（基于网络直接导入）
CDN：内容分发网络
有免费的也有收费的
前端免费的CDN网站：https://www.bootcdn.cn/
导入jQuery：
# 1、没有压缩过的
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
# 2、压缩过的
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
jQuery基本语法
jQuery(选择器).action()
秉持着jQuery的宗旨，jQuery可以简写为$
jQuery() == $()
jq与js对比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../jQuery3.6/compressed.js"></script>
<title>Title</title>
</head>
<body>
<p id="d1">JavaScript和jQuery的对比</p>
<script>
// 使用原生js改变p标签的颜色
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// 使用jq框架改变p标签的颜色
$('p').css('color','green')
</script>
</body>
</html>
jQuery查找标签
基本选择器
<body>
<div>
<span></span>
<p class="c1"></p>
</div>
<span id="d1"></span>
<script>
// id选择器
$('#d1')
// class选择器
$('.c1')
// 标签选择器
$('span')
"""一定要区分开"""
// jq对象转成js的标签对象
$('#d1')[0]
// js的标签对象转成jq对象
$(document.getElementById('d1'))
</script>
</body>
所有通过jq选择器选择的对象叫jq对象，就相当于一个个的列表，要通过索引取值取出对应的标签
组合选择器/分组与嵌套
<body>
<span class="c1"></span>
<span></span>
<div>
<span></span>
<span></span>
<p>
<span></span>
</p>
</div>
<span id="d1"></span>
<span></span>
<script>
// 后代选择器，div下所有的span
$('div span')
// 儿子选择器，div下一级别的所有span
$('div>span')
// 毗邻选择器，div同级别下的第一个span
$('div+span')
// 弟弟选择器，div同级别下所有的span
$('div~span')
// 同时选择多个标签
$('#d1,.c1,div,p span')
</script>
基本筛选器
<body>
<ul>
<li id="d1">101</li>
<li>102</li>
<li>103</li>
<li>104</li>
<li>105</li>
<li class="c1">106</li>
<li>107</li>
<li>108</li>
<li>109</li>
<li>110</li>
</ul>
<div>div1
<p>div>p</p>
</div>
<div>div2</div>
<script>
// 拿到ul下所有的li，返回一个jq对象，数组的形式
$('ul li')
// jq对象中的第一个标签
$('ul li:first')
// jq对象中的最后一个标签
$('ul li:last')
// 根据索引找到标签，括号内填索引
$('ul li:eq(0)')
// 找到jq对象中索引为偶数的标签，索引0包含在内
$('ul li:even')
// 找到jq对象中索引为奇数的标签
$('ul li:odd')
// 找到jq对象中索引大于2的标签，括号内填索引
$('ul li:gt(2)')
// 找到jq对象中索引小于2的标签，括号内填索引
$('ul li:lt(2)')
// 筛选出jq对象中除了id为d1的所有标签
$('ul li:not("d1")')
// 筛选出包含p标签的div标签
$('div:has("p")')
</script>
</body>
属性选择器
自定义的属性和标签自带的属性都可以，自带的属性例如color、background、font-size等等
<body>
<input type="text" username="egan">
<input type="text" username="json">
<div username="json"></div>
<script>
// 选择属性中有username的标签，自定义的属性和标签自带的属性都可以
$('[username]')
// 选择属性是username，且值为json的标签
$('[username="json"]')
// 选择div标签中有属性为username，且值为json的标签
$('div[username="json"]')
</script>
</body>
表单筛选器
表单属性筛选器：
表单属性筛选器：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象筛选器：
表单对象筛选器：
:enabled
:disabled
:checked # 注意使用他的时候的特殊性，最好写成$('input:checked')
:selected
<body>
<form action="">
<p>账号：<input type="text"></p>
<p>密码：<input type="password"></p>
<input type="button" value="登录">
<select name="" id="">
<option value="">111</option>
<option value="">222</option>
<option value="" selected>333</option>
</select>
<p>
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
</p>
</form>
<script>
// 在form表单中，$('[type]="text"')可以简写成以下形式
$(':text')
// 以下同理
$(':password')
$(':button')
// 特殊情况：会把属性值为checked和selected的都选上
// 如果只要含有checked属性值的可以写成$('input:checked')
$(':checked')
// 选择属性值有selected的
$(':selected')
</script>
</body>
选择器方法
# 找到下一个同级别标签
next()
# 找到同级别下面所有的标签
nextAll()
# 从当前标签开始到往下直到符合条件的标签（顾头不顾尾）
nextUntil('选择器')
# 上一个
prev()
prevAll()
prevUntil('选择器')
# 父标签
parent()
parents()
parentsUntil('选择器')
# 找到所有的子标签
children()
# 找到所有同级别的标签
siblings()
# 从某个区域筛选出想要的标签
find('选择器')
<body>
<span id="d1">span</span>
<span>span</span>
<div id="d2">div
<span>div>span</span>
<p>div>p
<span id="d3">div>p>span</span>
</p>
<span>div>span</span>
</div>
<span>span</span>
<span>span</span>
<span class="c1">span</span>
<script>
// 找到下一个同级别标签
$('#d1').next()
// 找到同级别下面所有的标签
$('#d1').nextAll()
// 从当前标签开始到往下直到类名为c1的标签，不包含c1（顾头不顾尾）
$('#d1').nextUntil('.c1')
// 找到下一个同级别标签
$('.c1').prev()
// 找到同级别上面所有的标签
$('.c1').prevAll()
// 从当前标签开始到往上直到id为d2的标签，不包含d2（顾头不顾尾）
$('.c1').prevUntil('#d2')
// 找到当前标签的父标签
$('#d3').parent()
// 找到当前标签的所有父标签
$('#d3').parents()
// 从当前标签开始，找到标签为body的所有父标签，不包含body（顾头不顾尾）
$('#d3').parentsUntil('body')
// 找到所有的子标签
$('#d2').children()
// 找到所有同级别的标签
$('#d2').siblings()
// find从某个区域筛选出想要的标签
$('div').find('p')
// div下第一个span标签，等价于$('div span:first')
$('div span').first()
// div下最后一个span标签，等价于$('div span:last')
$('div span').last()
// div除了id为d3的span标签，等价于$('div span:not("d3")')
$('div span').not('#d3')
</script>
</body>
jQuery操作标签
操作类
# js操作类
classList.add() 添加类
classList.remove() 删除类
classList.contains() 判断类是否存在
classList.toggle() 类存在则删除，不存在则添加
# jq操作类
addClass() 添加类
removeClass() 删除类
hasClass() 判断类是否存在
toggleClass() 类存在则删除，不存在则添加
操作css
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<script>
// 一行代码把第一个p标签变为红色，第二个p标签变为绿色，第三个p标签变为黄色
$('p').first().css('color','red').next().css('color','green').next().css('color','yellow')
</script>
</body>
# jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
# jQuery对象调用jQuery方法之后返回的还是当前jQuery对象，也就是继续调用其他方法
Python代码解释为什么jQuery可以链式操作
"""
class MyClass(object):
def func1(self):
print('func1')
return self
def func2(self):
print('func2')
return self
obj = MyClass()
obj.func1().func2()
"""
位置操作
# offset() 标签相对于浏览器窗口的位置
# position() 标签相对于父标签的位置
# scrollTop() 滚动条距离浏览器顶部的距离
# scrollLeft() 滚动条距离浏览器左边的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../jQuery3.6/compressed.js"></script>
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
div{
position:relative;
top:200px;
left:200px;
}
p{
position:absolute;
top:100px;
left:100px;
}
</style>
</head>
<body>
<div>div
<p>ppppp</p>
</div>
<script>
// 标签距离浏览器窗口的距离 {top: 300, left: 300}
$('p').offset()
// 标签距离父标签的距离 {top: 100, left: 100}
$('p').position()
// 滚动条距离浏览器顶部的距离
$(window).scrollTop()
// 括号内写数值就是设置距离
$(window).scrollTop(200)
// 滚动条距离浏览器左边的距离
$(window).scrollLeft()
// 括号内写数值就是设置距离
$(window).scrollLeft(100)
</script>
</body>
</html>
尺寸
# 标签内文本的高度和宽度
height()
width()
# 标签内文本+padding的高度和宽度
innerHeight()
innerWidth()
# 标签内文本+padding+边框的高度和宽度
outerHeight()
outerWidth()
<style>
div{
height: 100px;
margin:10px;
padding:10px;
border:5px solid;
}
</style>
</head>
<body>
<div>ddd</div>
<script>
// 标签内文本的高度和宽度，不包含margin、padding和边框
$('div').height()
$('div').width()
// 包含padding
$('div').innerHeight()
$('div').innerWidth()
// 包含padding和边框
$('div').outerHeight()
$('div').outerWidth()
</script>
</body>
文本操作
"""js""" """jQuery"""
# 查看标签内的文本内容
innerText() text()
# 查看标签内的HTML结构
innerHtml() html()
<body>
<div>
<p>
天道崩塌，我陈平安唯有一剑，可搬山，断江，倒海，降妖，镇魔，敕神，摘星，摧城，开天
</p>
</div>
<script>
// 查看标签内的文本内容
$('div').text()
// 括号内添加字符串就是修改文本内容
$('div').text('遇事不决，可问春风')
// 查看标签内的HTML结构
$('div').html()
// 括号内写HTML代码可以识别
$('div').html('<h1>言念君子，温其如玉</h1>')
</script>
</body>
获取值操作
# js
.value()
# jquery
.val()
<body>
<input type="text" value="初始默认值">
<input type="file">
<script>
// 获取值
$(':text').val()
// 修改值
$(':text').val('修改默认值')
// 与js一样，文件不能通过.value的方式获取
$(':file').val()
// 要先把jQuery对象转为js的标签对象，然后用js的标签方法获取文件
$(':file')[0].files[0]
</script>
</body>
属性操作
# js
setAttribute() 修改属性
getAttribute() 获取属性
removeAttribute() 删除属性
# jQuery
attr(属性名,属性值) 修改属性
attr(属性名) 获取属性
removeAttr(属性名) 删除属性
prop() 判断属性是否存在
"""
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox、radio、option是否被选中用prop
"""
<body>
<div id="d1"></div>
<input type="checkbox" value="111" id="d2">
<input type="checkbox" value="222" checked id="d3">
<input type="checkbox" value="333" id="d4">
<input type="radio" value="men" name="age" id="d5">男
<input type="radio" value="women" name="age" id="d6">女
<script>
// 查看属性
$('div').attr('id')
// 修改/添加属性
$('div').attr('id','d2')
$('div').attr('class','c1')
// 删除属性
$('div').removeAttr('id')
// prop适用于用户是否选中CheckBox、radio、option等等
// 判断标签是否有checked属性，返回布尔值
$('#d2').prop('checked')
// 把checked属性添加到标签中
$('#d2').prop('checked',true)
// 移除checked属性
$('#d2').prop('checked',false)
</script>
</body>
文档处理
# js
createElement('p') 创建标签
appendChlid() 内部尾部追加标签
# jQuery
$('<p>') 创建标签
append() 内部尾部追加标签
appendTo() 内部尾部追加标签
prepend() 内部头部追加标签
prependTo() 内部头部追加标签
after() 放在某个标签的后面（同级）
insertAfter() 放在某个标签的后面（同级）
before() 放在某个标签的前面（同级）
insertBefore() 放在某个标签的前面（同级）
remove() 删除当前标签及他的子标签，也就是从DOM树中删除了
empty() 空标签内的所有东西，类似于.html('')
<body>
<div id="d1">
<p id="d2"></p>
<span></span>
<p></p>
</div>
<script>
// 创建标签
let $pEle = $('<p>')
// 内部尾部追加
$('#d1').append($pEle)
$pEle.appendTo($('#d1'))
// 内部头部追加
$('#d1').prepend($pEle)
$pEle.prependTo($('#d1'))
// 添加到某个标签后面
$('#d1').after($pEle)
$pEle.insertAfter($('#d1'))
// 添加到某个标签前面
$('#d1').before($pEle)
$pEle.insertBefore($('#d1'))
// 删除当前标签及他的子标签，也就是从DOM树中删除了
$("#d1").remove()
// 清空标签内的所有东西，类似于.html('')
$("#d1").empty()
</script>
</body>
jQuery事件
绑定事件的两种方式
<body>
<button id="d1">雪中悍刀行</button>
<button id="d2">剑来</button>
<script>
// 第一行种
$('#d1').click(function () {
alert('徐凤年')
})
// 第二种，功能更强大，支持事件委托
$('#d2').on('click',function () {
alert('陈平安')
})
</script>
</body>
click事件：克隆事件（clone：jQuery的克隆方法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../jQuery3.6/compressed.js"></script>
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
#d1{
height: 100px;
width: 100px;
border-radius:20px;
border:2px solid blue;
}
</style>
</head>
<body>
<button id="d1">
影奥义！分身！
</button>
<script>
$('#d1').on('click',function(){
// this指当前被操作的标签
// clone：克隆，默认只克隆HTML和css，但是加了参数true后就会把事件也克隆了
$(this).clone(true).insertAfter(this)
})
</script>
</body>
</html>
click事件：模态框事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../jQuery3.6/compressed.js"></script>
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
.bottom{
font-size:24px;
}
.zhong{
position:fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color:rgba(0,0,0,0.5);
height: 100%;
width: 100%;
z-index:1;
}
.top{
position:fixed;
top: 150px;
left: 400px;
width: 600px;
height: 400px;
background-color: lightgreen;
border-radius:50px;
z-index: 2;
}
.guanbi{
display:none;
}
</style>
</head>
<body>
<button class="bottom">百度一下你就知道</button>
<div class="zhong guanbi"></div>
<div class="top guanbi">
<p>账号：<input type="text"></p>
<p>密码：<input type="password"></p>
<button class="but">关闭</button>
</div>
<script>
let $botEle = $('.bottom')
let $zhongEle = $('.zhong')
let $topButEle = $('.but')
let $topEle = $('.top')
$botEle.on('click',function(){
$zhongEle.removeClass('guanbi')
$topEle.removeClass('guanbi')
});
$topButEle.on('click',function(){
$zhongEle.addClass('guanbi')
$topEle.addClass('guanbi')
})
</script>
</body>
</html>
click事件：菜单栏事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../jQuery3.6/compressed.js"></script>
<title>Title</title>
<style>
.move{
width: 30%;
height: 100vh;
background-color:#d576ba;
text-align:center;
}
.list{
margin:0 auto;
width:50%;
}
.list:hover{
cursor:pointer;
}
.items{
border:2px solid green;
border-radius:10px;
margin-top:5px;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div class="move">
<div class="list">菜单一
<div class="items">111</div>
<div class="items">222</div>
<div class="items">333</div>
</div>
<div class="list">菜单二
<div class="items">111</div>
<div class="items">222</div>
<div class="items">333</div>
</div>
<div class="list">菜单三
<div class="items">111</div>
<div class="items">222</div>
<div class="items">333</div>
</div>
</div>
<script>
// 先把菜单栏下面的div影藏
$('.items').addClass('hide')
$('.list').on('click',function(){
// 给当前点击的.list标签的子标签调用toggleClass方法
$(this).children().toggleClass('hide')
})
</script>
</body>
</html>
scroll事件（监听屏幕滚动）：返回顶部按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../jQuery3.6/compressed.js"></script>
<title>Title</title>
<style>
div{
width:100vw;
height: 400px;
}
button{
height: 50px;
width: 50px;
background-color: white;
position:fixed;
right:20px;
bottom:20px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="background-color: red"></div>
<div style="background-color: yellow"></div>
<div style="background-color: green"></div>
<div style="background-color: blue"></div>
<button class="hide">返回顶部</button>
<script>
// scroll：监听屏幕滚动事件
$(window).on('scroll',function(){
// 当滚动条距离顶部大于300时移除hide类，返回顶部的按钮显示出来
if($(window).scrollTop() > 300){
$('button').removeClass('hide')
}else{
// 当滚动条距离顶部小于300时，隐藏按钮
$('button').addClass('hide')
}
})
// 点击事件，点击按钮返回页面顶部
$('button').on('click',function(){
$(window).scrollTop(0)
})
</script>
</body>
</html>
click事件：自定义登录校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../jQuery3.6/compressed.js"></script>
<title>Title</title>
</head>
<body>
<p>
账号：<input type="text" id="name">
<span style="color:red"></span>
</p>
<p>
密码：<input type="password" id="word">
<span style="color:red"></span>
</p>
<button class="but">登录</button>
<script>
let $name = $('#name')
let $word = $('#word')
$('.but').on('click',function(){
// 获取两个input中的值
let username = $name.val()
let password = $word.val()
// 判断username框中是否有内容
if(!username){
$name.next().text('账号不能为空')
}
// 判断password框中是否有内容
if(!password){
$word.next().text('密码不能为空')
}
})
// input框获取焦点事件
$('input').focus(function(){
// 当input框获取焦点时清空span标签中的文本
$(this).next().text('')
})
</script>
</body>
</html>
input事件：实时监控input输入的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../jQuery3.6/compressed.js"></script>
<title>Title</title>
<style>
.c1{
height: 50px;
width: 120px;
color:red;
border:1px solid black;
border-radius:10px;
margin-top:10px;
text-align:center;
}
.hide{
display:none;
}
</style>
</head>
<body>
账号：<input type="text">
<div class="c1 hide">当前账号不匹配</div>
<script>
// 定义一个本地账号
let name = 'liu'
// 实时监控input框中的值
$(':text').on('input',function(){
// 把监控到的值赋值给user
let user = this.value
// 判断input是否为空
if(user !== ''){
// input没有值隐藏提示框
$('.c1').removeClass('hide')
}else{
// input有值显示提示框
$('.c1').addClass('hide')
}
// 判断input中输入的值是否等于我们本地存的值
if(user === name){
$('.c1').css('color','green').text('匹配成功')
}else {
$('.c1').css('color','red').text('当前账号不匹配')
}
})
</script>
</body>
</html>
hover事件：鼠标移入移出事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../jQuery3.6/compressed.js"></script>
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
text-align:center;
border:1px solid red;
}
span{
width: 200px;
height: 50px;
border:1px solid black;
}
</style>
</head>
<body>
<div>鼠标移进来试试</div>
<span>看我</span>
<script>
// hover只能用第一种方法设置事件
// hover的括号内可以写两个函数也可以只写一个函数
// 写两个函数的时候第一个函数代表鼠标移入事件，第二个函数代表鼠标移出事件
// 写一个函数的时候移入和移出都是同一个事件，也就是一个事件会触发两次
$('div').hover(
// 这是鼠标移入的事件
function(){
$('span').text('我进来了')
},
// 这是鼠标移出的事件
function(){
$('span').text('我又出去了')
}
)
</script>
</body>
</html>
keydown事件：监听键盘按键事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../jQuery3.6/compressed.js"></script>
<title>Title</title>
<style>
div{
margin:0 auto;
text-align: center;
}
span{
border-radius: 10px;
border:1px solid gold;
margin:5px;
}
</style>
</head>
<body>
<div>按下键盘来看看键盘对应的编码是多少把</div>
<script>
// 监听键盘按键事件，函数的参数中要传event参数
$(window).on('keydown',function(event){
// event.keyCode就是获取键盘按键对应的编码
let an = event.keyCode
$('<span>').text('该键盘对应的编码是：'+an).insertAfter($('script'))
})
</script>
</body>
</html>
jQuery对象的其他方法
clone() 克隆当前标签的HTML和css，在括号内添加参数true就可以把事件也克隆了
jQuery事件
click() 点击事件
scroll() 监听屏幕滚动
focus() input框获取焦点事件
input() 实时监听input框中的内容变化
hover() 括号内写两个函数的时候第一个函数代表鼠标移入事件，第二个函数代表鼠标移出事件，写一个函数的时候移入和移出都是同一个事件，也就是一个事件会触发两次
keydown() 监听键盘按键事件