jQuery 框架介绍
目录
jQuery简介
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，
优化HTML文档操作、事件处理、动画设计和Ajax交互
jQuery的核心特性可以总结为：
具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
一.补充
1.DOM操作标签
DOM操作，动态创建标签并添加页面
var aEle = document.createElement('a') # 创建a标签
'a见明知意a标签 Ele互联网缩写'
aEle.herf = 'https://www.baidu.com' # 通过a标签设置href属性
aEle.innerText = '点击进入百度' # 设置文本内容
------------------------------------------------------------
查找标签添加标签
var divEle = document.getElementById('q1') # 通过id查找q1
divEle.append(aEle) # 内部标签添加标签
------------------------------------------------------------标签设置默认属性
id class 设置时候可以通过点的方式
divEle.id = 'c1'
标签自定义属性
name pwd 点后 setAttribute('name','pwd')
获取指定属性
divEle.getAttribute('name')
移除指定属性
divEle.removeAttribute('pwd')
'innerText与innerHTML区别'
获取值的时候
innerText只会获取文本内容
innerHTML获取文本和标签
设置值的时候
innerText不识别标签语法
innerHTML识别标签语法
2.获用户输入值操作
'获取input、option、textarea 用户输入的值'
1.获取普通值数据
标签对象.value
2.获取文件数据
标签对象.value # 只能获取到文件路径
标签对象.files # 结果是一个数组可以通过索引取值获取文件对象
3.属性操作
标签对象.classList # 查看所有的类属性
标签对象.classList.add() # 添加类属性
标签对象.classList.remove() # 移除类属性
标签对象.classList.contains() # 判断是否含有某个类属性
标签对象.classList.toggle() # 有则移除 无则添加(比较另类)
标签对象.style.属性名 # 可以修改标签对象的样式
4.事件
# 事件就是达到某个条件 自动触发的功能
'用户点击某个标签弹出警告框，双击某个标签提示框，或自动跳转等'
# 单击事件01
<body>
<p onclick='showMsg'>onclick是绑定单击事件的</p>
<script> 'js方法写在最下方'
function.showMsg(){alert('绑定函数通过在绑定给p标签')}
</script>
</body>
# 单击时间02
<body>
<p>onclick是绑定单击事件的</p>
<script> 'js方法写在最下方'
var pEle = document.getElementsByTagName('p')[0];
pEle.onclick = function(){alert('获取P标签索引0在绑定方法')}
</script>
</body>
'事件函数默认参数 this指代被当前操作对象本身'
5.事件案例
# 给普通按钮绑定时间，触发效验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>请输入用户名:
<input type="text" id="q1">
<span style="color: crimson" id="c1"></span>
</p>
<p>请输入你的密码:
<input type="text" id="q2">
<span style="color: darkblue" id="c2"></span>
</p>
<input type="button" value="注册" id="c3">
<script>
let c3Ele = document.getElementById('c3')
c3Ele.onclick = function (){
let q1Val = document.getElementById('q1').value;
let q2Val = document.getElementById('q2').value;
if (q1Val === 'thn'){
let c1SpanELE = document.getElementById('c1')
c1SpanELE.innerText = '用户名不能为thn'
}
if (q2Val === '123'){
let c2SpanEle = document.getElementById('c2')
c2SpanEle.innerText = '密码不能为123'
}
}
</script>
</body>
</html>
# 搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="q1" value="这是搜索框">
<script>
let inputEle = document.getElementById('q1')
inputEle.onfocus = function (){
this.value = ''
}
inputEle.onblur = function (){
this.value = '苹果13'
}
</script>
</body>
</html>
# 滚动条联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>省
<select name="" id="c1">
</select>
</p>
<p>市
<select name="" id="c2">
</select>
</p>
<p>
<script>
let c1Ele = document.getElementById('c1')
let c2Ele = document.getElementById('c2')
let data = {
"河南":["郑州","焦作"],
"山东":["烟台","青岛"],
"北京":["朝阳","海淀"]
};
for (let proVal in data){
c3Ele = document.createElement('option')
c3Ele.innerText = proVal
c3Ele.value = proVal
c1Ele.append(c3Ele)
}
c1Ele.onchange = function (){
c2Ele.innerText = '';
let q1 = this.value;
let q2list = data[q1];
for (let i=0;i<q2list.length;i++){
c4Ele = document.createElement('option');
c4Ele.innerText = q2list[i]
c4Ele.value = q2list[i]
c2Ele.append(c4Ele)
}
}
</script>
</p>
</body>
</html>
二.jQuery下载地址与其他
下载地址:https://jquery.com/
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件 里面写了一些js代码而已
1.导入方式
1.本地jQuery文件
不会收到网络影响
2.CDN加速服务
需要确保有互联网
min.js 压缩之后的文件 容量更小
.js 没有压缩的文件 容量稍大
3.jQuery基本使用
'p标签内有两个属性标签索引0 1 分别获取 修改对应标签颜色'
let p1Ele = document.getElementsByTagName('p')[0]
let p2Ele = document.getElementsByTagName('p')[1]
p1Ele.style.color = 'red'
p2Ele.style.color = 'green'
----------------------------jQuery方法-------------------------------------
$('#d1').css('color','red').next().css('color','green')
2.jQuery查找标签方式
1.基本选择器
$('#d1') # id选择器
$('.c1') # class选择器
$('p') # 标签选择器
$('div#d1') # div标签内的id
$('div,#d1,.c1') # div标签内的id 内的 class
$("x y") # x的所有后代y（子孙）
$("x > y") # x的所有儿子y （儿子）
$("x + y") # 找到所有紧挨在x后面的y
$("x ~ y") # x之后所有的兄弟y
2.基本筛选器
$('ul li') # 查看所有ul下的li属性
$('ul li:first') # 只要第一个li属性
$('ul li:last') # 只要最后一个li属性
$('ul li:eq(2)') # 索引取到第三个li属性 0~10
$('ul li:odd') # 所有奇数li属性 0 1 3 5
$('ul li:even') # 所有偶数li属性 2 4 6 8
$('ul li:gt(2)') # 索引大于2的li属性 10-3 7个
$('ul li:lt(2)') # 索引小于2的li属性 10-8 2个
$('ul li:not(li)') # 取反更换条件有li属性就不要了
$('ul:has(#d1)') # 查看内部含有id是d1的ul标签
3.属性选择器
$('[name]') # 修改属性里含有name属性
$('[name="qqq"]') # 修改精确到name属性里的qqq
$('div[name="qqq"]') # 修改div里的name属性里的qqq
4.表单筛选器
专门针对form表单内的标签
$('input[type="text"]')
筛选器简化
$(':text')
$(':checked') # 会将option也找到
$(':selected') # 只会找到option标签
5.筛选器方法
同级别往下查找
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#c1")
同级别网上查找
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#c1")
查找父标签
$("#id").parent()
$("#id").parents()
$("#id").parentsUntil()
查找儿子和兄弟
$("#id").children() # 儿子们
$("#id").siblings() # 兄弟们(同级别所有标签)
6.链式操作
对象在调用完一个方法之后返回的还是一个对象
$('#d1').parent().parent().parent()
相同的方法可以再次调用
$('#d1').parent().parent().next().parents()
不用的方法也可以重复调用
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）