【前端】 第05回 JS操作与jQuery
目录
1. JS操作
1.1 JS获取用户输入
1.普通数据(输入，选择)
标签对象.value
2. 文件数据(上传)
标签对象.files
标签对象.files[0]
<input type="text" name="" id="d1">
<input type="radio" name="gender" value="male" id="d2">男
<input type="radio" name="gender" value="female" id="d3">女
<select name="" id="d4">
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
</select>
<input type="file" name="file" id="d5">
1.2 JS类属性操作
标签对象.classList 获取所有标签值
标签对象.className 获取所有样式类名（字符串）
标签对象.classList.contains() 存在返回true ,否则返回false
标签对象.classList.add() 添加类
标签对象.classList.remove() 删除类
标签对象.classList.toggle() 存就删除类，否则添加
1.3 JS样式操作
标签对象.style.标签样式属性名
eg: backgroundColor
backgroundImage
2. 事件
2.1 事件理解
HTML4.0的新特性，事件可以理解为是给html标签绑定一些额外的功能（能够触发js代码的运行）
| 值 | 功能 |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄 |
| ondblclick | 当用户双击某个对象时调用的事件句柄 |
| onfocus | 元素获得焦点 |
| onblur | 元素失去焦点 |
| onchange | 域的内容被改变 |
| onkeydown | 某个键盘按键被按下 |
| onkeypress | 某个键盘按键被按下并松开 |
| onkeyup | 某个键盘按键被松开 |
| onload | 一张页面或一幅图像完成加载 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标移到某元素之上 |
| onselect | 在文本框中的文本被选中时发生 |
| onsubmit | 确认按钮被点击，使用的对象是from |
2.2 绑定事件的两种方式
// 方式1：提前写好函数，标签内部指定
function func1(){
alert(123）
}
// 方式2：先查找标签，然后批量绑定
let btnELe = document.getElementById('d1')
btnEle.onclick = function() {
alert(321）
}
方式1案例
<body>
<input type="button" value="快来点我" onclick="func1()">
<button>快来按我</button>
<script>
function func1(){
alert(123)
}
</script>
</body>
方式2案例
<input type="button" value="快来点我" onclick="func1()">
<button id="d1">快来按我</button>
<script>
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
alert(321)
}
</script>
2.3 事件中的关键字this
<input type="button" value="快来点我" ondblclick="func1()">
<button id="d1">快来按我</button>
<script>
// 绑定事件的方式1:提前写好函数 标签内部指定
function func1(){
alert(123)
console.log(this)
}
// 绑定事件的方式2:先查找标签 然后批量绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
alert(321)
console.log(this)
}
2.4 window.onload
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。.onload()函数存在覆盖现象。
2.5 校验用户输入案例
<body>
<p>
<input type="text" id="username">
<span class="errors" style="color: red"></span>
</p>
<p>
<input type="text" id="password">
<span class="errors" style="color: red"></span>
</p>
<button id="btn">提交</button>
<script>
// 1.查找按钮标签
let btnEle = document.getElementById('btn');
// 2. 绑定单击事件
btnEle.onclick = function (){
// 3. 获取用户输入的用户名和密码
let userNameVal = document.getElementById('username').value;
let passWordVal = document.getElementById('password').value;
// 4. 判断用户名和密码是否合法
if(userNameVal === 'jason'){
// 4.1 查找获取用户名的input框下面的span标签
let span1Ele = document.getElementsByClassName('errors')[0];
// 4.2 给span标签添加内部文本
span1Ele.innerText = '用户名不能是jason'
}
// 5.判断密码是否为空
if(passWordVal.length === 0){
// 5.1 查找获取用户名的input框下面的span标签
let span1Ele = document.getElementsByClassName('errors')[1];
// 5.2 给span标签添加内部文本
span1Ele.innerText = '密码不能为空'
}
}
</script>
</body>
2.6 省市联动案列
给标签绑定事件，要注意这个标签有没有功能，要不要执行，可能会冲突也可能不执行或全部执行
<body>
省份:<select name="" id="province">
</select>
市区:<select name="" id="city">
</select>
<script>
let data = {
"北京": ["东城区","西城区","朝阳区"],
"上海": ["黄浦区","虹口区","金山区"],
"河南": ["洛阳市","商丘市","郑州市"],
"河北": ["石家庄市","邯郸市","保定市"]
};
// 提前找好select标签
let proEle = document.getElementById('province');
let cityEle = document.getElementById('city');
// 1.循环获取所有的省信息
for(let pro in data){
// 2.创建option标签
let opEle = document.createElement('option'); //<option></option>
// 3.添加内容文本
opEle.innerText = pro //<option>省份信息</option>
// 4.添加value属性
opEle.setAttribute('value',pro)// <option value='省份信息'>省份信息</>option>
// 5.将上述的option标签添加到第一个select标签内
proEle.append(opEle)
}
// 给省份的下拉框绑定文本域变化事件
proEle.onchange = function (){
// 每次给市区下拉框添加市区信息之前，应该先清空上一次加载的数据
cityEle.innerHTML=''; //把所有的标签清掉
// 1.获取用户选择的省份信息
let currentPro = this.value;
// 2.根据省份获取对应的市区列表数据
let targetCityList = data[currentPro];
// 3.循环获取所有的市信息
for(let i=0;i<targetCityList.length;i++){
// 4.创建option标签
let opEle = document.createElement('option'); //<option></option>
// 5.添加内容文本
opEle.innerText = targetCityList[i]
// 6.添加value属性
opEle.setAttribute('value',targetCityList)
// 7.添加到第二个select标签内
cityEle.append(opEle)
}
}
</script>
</body>
3. jQuery类库
3.1 jQuery 简介
jQuery
- jQuery是一个轻量级、兼容多浏览器的JavaScript库
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“(少写，多做)
jQuery的优势
- 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
- 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
- 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
- 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
jQuery导入
- 使用jQuery必须要先导入，本质其实就是一个js文件
- 本地导入：提前下载文件并导入
- 网路CDN服务：只要计算机能够联网就可以直接导入 bootcdn
- 网址：https://www.bootcdn.cn/
<script
src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jq
uery.js"></script>
注意: 使用CDN的jQuery前提必须要有网络
优点：好处在于无需下载文件，直接走网络请求使用
缺点: 不好的地方在于必须要有网才可以使用
3.2 jQuery基本使用
1. JS与jQuery语法对比
js实现两个标签颜色不同
jQuery实现两个标签颜色不同
2. 查找标签
jQuery() >>> $() 简写
id选择器:
$(#id)
标签选择器：
$("tagName")
class选择器:
$(".className")
配合使用：
$("div.cl") //找到有cl class 类的div标签
所有元素选择器：
$("*")
组合选择器：
$("#id, .className, tagName")
层级选择器：
x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
3.jQuery选择器查找标签之后的结果与js有何区别
结果集都是数组但是功能有区别
1. 如果使用索引取值，那么都是标签对象标签对象无法调用jQuery提供的方法的
2. 标签对象如果想转换成jQuery对象需要使用 $() 转换成jQuery对象的目的是为了使用jQuery提供的更多方法
3.3 选择器
1.基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
2.属性选择性
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
3.表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
4.表单对象属性
:enabled
:disabled
:checked
:selected
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了