jQuery类库
"""
IE浏览器:前端针对IE有时候需要单独再编写一份代码
"""
Write less, do more 写的更少做的更多
1.加载速度快
2.选择器更多更好用
3.一行代码走天下
4.支持ajax请求(重点)
5.兼容多浏览器
准备工作
1.下载核心文件到本地引入(没有网络也可以使用)
<script src="jQuery3.6.js"></script>
2.CDN网络资源加载(必须有网络才可以使用)
https://www.bootcdn.cn/
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
什么是CDN
内容分发网络
jQuery导入之后需要使用关键字才可以使用
默认的关键字就是jQuery但是不好输入 >>>: $
jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快
js代码与jQuery代码对比
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
'red'
pEle.nextElementSibling.style.color = 'green'
$('p').first().css('color','yellow').next().css('color','blue')
标签对象与jQuery对象
1.不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚手上的是什么对象
2.两者可以互相转换
变迁对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]
jQuery查找标签
1.基本选择器
$('#d1') id选择器
$('.c1') class选择器
$('div') 标签选择器
2.组合选择器
$('div#1') 查找id是d1的div标签
$('span.c1') 查看含有c1样式类的span标签
$('div,span,p') 查找div或者span或者p标签
%('#d1,.c1,span') 查找id是d1的或者class含有c1的或者span标签
3.层级选择器
$('div p ') 查找div里面的所有后代p标签
$('div>p') 查找div里面的儿子p标签
$('div+p') 查找div同级别下紧挨着的p标签
$('div~p') 查找div同级别下所有的p标签
4.属性选择器
$('[username]') 查找含有username属性名的标签
$('[username="jason"]') 查找含有username属性名并且值等于jason的标签
$('input[username="jason"]')
5.基本筛选器
:first 第一个
:last 最后一个
:eq(index) 索引的等于index的那个元素
:even 匹配所有索引值为偶数的元素
:odd 匹配所有索引值为奇数的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:not(元素选择器) 移除所有满足not条件的标签
:has(元素选择器) 选取所有包含一个或多个标签在其内的标签(指的是从后代元素中找)
$('li:first') 优化 $('li').first()
6.表单筛选器
$(':text') 选择表单属性为text的表单
$('passoword') 选择表单属性为passowrd的表单
$(':checked') 选择表单属性为checked的表单，但是也会找到selected表单
$('selected') 选择表单属性为selected表单
7.筛选器方法
$('#id').next() 某一个id标签下面的一个标签
$('#id').nextAll() 某一个id标签下面的全部标签
$('#id').nextUntile('#i2') 某一个id标签下面找到后面的id标签位置
$('#id').prev() 某一个id标签上面的一个标签
$('#id').prevAll() 某一个id标签上面的全部标签
$("#id").prevUntil("#i2") 某一个id标签上面找到后面的id标签位置
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
1.class操作
addClass() 添加
removeClass() 移除
hasClass()
tonggleClass()
2.位置操作
$(window).scrollTop()
3.文本操作
text() 相当于js中的 innerText = ''
html() innerHTML = ''
vla() 标签对象.value
jQuery对象[0].files files[0]
4.创建标签
document.createElement() $('<a>')
5.属性操作
attr()/removeAttr() xxxAttribute()
attr针对动态变化的属性获取会失真
prop('checked') prop('selected')
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()// 删除匹配的元素集合中所有的子节点。
jQuery事件
JS绑定事件
标签对象.on事件名 = function(){}
jQuery事件绑定:
方式1:
jQuery对象.事件名(){}
方式2:
jQuery对象.on('事件名',funtion(){})
ps:默认方式1,不行再选择方式2
事件相关补充
1.取消后续事件
事件函数的最后return false即可
2.阻止事件冒泡
事件函数的最后return false即可
3.等待页面加载完毕再执行代码
$(function(){}) 缩略写法
$(document).ready(function(){}) 完整写法
4.事件委托
主要针对动态创建的标签也可以使用绑定的事件
$('body').on('click','button',function(){})
将body内所有的单机事件委托给button标签执行
jQuery动画效果(了解)
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
作业讲解
1.校验用户数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery_ad.js"></script>
</head>
<body>
<div>
<p>username:
<input type="text" id="d3">
<span style="color: red"></span>
</p>
<p>password:
<input type="password" id="d2">
<span style="color: red"></span>
</p>
<button id="d1" value="提交">提交</button>
</div>
<script>
let userEle = document.getElementById('d3')
let bueEle = document.getElementById('d1')
let passEle = document.getElementById('d2')
//给提交按钮绑定单机事件
bueEle.onclick = function (){
if (userEle.value ==='jason'){
userEle.nextElementSibling.innerText = '用户名不能是jason'
}
if (passEle.value === '123'){
passEle.nextElementSibling.innerText = '密码不能是123'
}
}
//给两个input输入绑定聚焦就清掉span的文本
userEle.onfocus = function (){
userEle.nextElementSibling.innerText = ''
}
passEle.onfocus = function (){
passEle.nextElementSibling.innerText = ''
}
</script>
</body>
</html>
2.页面计时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery_ad.js"></script>
</head>
<body>
<div>
<input type="text" id="d2">
<button id="d1" >开始</button>
<button id="d3">结束</button>
</div>
<script>
let startEle = document.getElementById('d1')
let endEld = document.getElementById('d3')
let inputEle = document.getElementById('d2')
//定时任务的函数
function showTime(){
let currentTime = new Date()
inputEle.value = currentTime.toLocaleTimeString()
//这里用对了对象的内置方法将格式化时间转字符串
}
//全局定义一个存储计时器的变量名
let t
startEle.onclick = function (){
if (!t){
t = setInterval(showTime,1000)//表示如果t没有值就绑定循环调用函数，每次增加1秒
}
}
endEld.onclick = function (){
clearInterval(t)//点击结束按钮就暂停循环定时
t = null //清空t
}
</script>
</body>
</html>
