前端学习笔记
今日内容概要
- JS获取用户输入
- JS事件绑定
- JQuery类库
今日内容详细
JS获取用户输入
直接通过标签对象.value获取
let iEle = document.getElementById("i1");
console.log(iEle.value);
let sEle = document.getElementById("s1");
console.log(sEle.value);
let tEle = document.getElementById("t1");
console.log(tEle.value);
获取文件数据的时候:
标签对象.value只能获取到文件路径,而标签对象.files结果是一个数组,可以通过索引获取具体文件对象。
标签对象.files
标签对象.files[0]
JS类属性操作
标签对象.classList //查看所有的类属性
标签对象.classList.remove(cls) //删除指定类
标签对象.classList.add(cls) //添加类
标签对象.classList.contains(cls) //存在返回true,否则返回false
标签对象.classList.toggle(cls) //存在就删除,否则就添加
JS样式操作
语法:标签对象.style.标签样式属性名
divEle.style.backgroundColor="red"
divEle.style.height = '800px'
divEle.style.backgroundImage
JS事件绑定
事件就是给html标签绑定了一些额外的功能,用户在html页面操作达到某个条件会自动触发功能。eg:用户点击某个标签弹出警告框,双击某个标签提示信息。
方法 | 说明 |
---|---|
onclick | 当用户点击某个对象时调用的事件句柄 |
ondblclick | 当用户双击某个对象时调用的事件句柄 |
onfocus | 元素获得焦点。应用:输入框 |
onblur | 元素失去焦点。应用:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. |
onchange | 域的内容被改变。应用:通常用于表单元素,当元素内容被改变时触发.(select联动) |
onkeydown | 某个键盘按键被按下。 应用: 当用户在最后一个输入框按下回车按键时,表单提交. |
onkeypress | 某个键盘按键被按下并松开 |
onkeyup | 某个键盘按键被松开 |
onload | 一张页面或一幅图像完成加载 |
onmousedown | 鼠标按钮被按下 |
onmousemove | 鼠标被移动 |
onmouseout | 鼠标从某元素移开 |
onmouseover | 鼠标移到某元素之上 |
onselect | 在文本框中的文本被选中时发生 |
onsubmit | 确认按钮被点击,使用的对象是form |
给标签绑定事件
<input type="button" value="点我" ondblclick="func1()">
<button id="d1">按我</button>
<script>
// 绑定事件的方式1:提前写好函数 标签内部指定
function func1(){
alert(123)
}
// 绑定事件的方式2:先查找标签 然后批量绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
alert(321)
}
</script>
事件中的关键字this
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
alert(321)
console.log(this)
}
this指代的是当前被操作的标签对象
window.onload
等待文档加载完毕之后再执行一些代码
window.onload = function() {
页面js代码
}
JS事件案例
1.校验用户输入
点击事件 onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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>
</html>
2.省市联动
文本域变化事件 onchange
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- <script src="jQuery3.6.js"></script>-->
</head>
<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[i])
// 7.添加到第二个select标签内
cityEle.append(opEle)
}
}
</script>
</body>
</html>
jQuery类库
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
下载使用:
下载地址:https://jquery.com/
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件,里面写了一些js代码而已。
导入方式
1.本地jQuery文件
不会收到网络影响:直接在本地导入,在html页面上得写导入语句。
2.CDN加速服务
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
需要确保有互联网:min.js压缩之后的文件,容量更小;.js没有压缩的文件,容量稍大。
基本使用:将页面上的两个p标签文本内容一个变成红色 一个变成绿色
// 原生的js代码
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')
jQuery查找标签
基本选择器
基本选择器 | 说明 |
---|---|
$('#d1') | id选择器 |
$('.c1') | class选择器 |
$('p') | 标签选择器 |
组合案例:
$("div.c1") // 找到有c1 class类的div标签
层级选择器
x和y可以为任意选择器
层级选择器 | 说明 |
---|---|
$("x y") | x的所有后代y(子子孙孙) |
$("x > y") | x的所有儿子y(儿子) |
$("x + y") | 找到所有紧挨在x后面的y |
$("x ~ y") | x之后所有的兄弟y |
jQuery选择器查找标签之后的结果与js有何区别
结果集都是数组但是功能有区别
1.如果使用索引取值,那么都是标签对象
标签对象是无法调用jQuery提供的方法的
2.标签对象如果想转换成jQuery对象需要使用$()
转换成jQuery对象的目的是为了使用jQuery提供的更多方法
$('p')[0].css('color','red') //报错
$('p')[0].style.color = 'red' //可以
$('p').first().css('color','red') //可以
$('p').first().style.color = 'green' //报错
$($('p')[0]).css('color','orange') //可以
基本筛选器
基本筛选器 | 说明 |
---|---|
:first | 第一个 |
:last | 最后一个 |
:eq(index) | 索引index位置的那个元素 |
:even | 匹配所有索引值为偶数的元素,从 0 开始计数 |
:odd | 匹配所有索引值为奇数的元素,从 0 开始计数 |
:gt(index) | 匹配所有大于给定索引值的元素 |
lt(index) | 匹配所有小于给定索引值的元素 |
:not(元素选择器) | 移除所有满足not条件的标签 |
:has(元素选择器) | 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) |
案例:
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
属性选择器
属性选择器 | 说明 |
---|---|
$('[name]') | 查找有name属性的标签 |
$('[name="jason"]') | 查找name属性为jason的标签 |
$('div[name="jason"]') | 查找name属性为jason的div标签 |
表单筛选器:专门针对form表单内的标签
可以看成是属性选择器优化而来
原写法 | 简化 |
---|---|
$('input[type="text"]') | $(':text') |
$('[checked="checked"]') | $(':checked') 会将option也找到 |
:text //匹配所有普通文本框
:password //匹配所有密文展示框
:file //匹配所有文件域
:radio //匹配所有单选框
:checkbox //匹配所有多选框
:submit //匹配所有提交按钮,匹配 type="submit" 的input或者button
:reset //匹配所有重置按钮
:button //匹配所有按钮
:enabled //匹配所有可用元素
:disabled //匹配所有不可用元素
:checked //匹配所有选中的被选中元素(复选框、单选框等,select中的option)
:selected //匹配select中的option
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签