Day 54
今日内容概要
- 一.DOM其他操作
- 1.JS获取用户输入
- 2.JS类属性操作
- 3.JS样式操作(了解)
- 4.JS事件
- (1)什么是事件
- (2)绑定事件的两种方式
- (3)事件中的重点关键字this
- (4)等待文档加载完再执行代码window.onload
- 5.JS事件案例
- (1)校验用户输入
- (2)省市联动
- 二.jQuery类库
- 1.jQuery类库简介
- 2.jQuery基本使用
- (1)JS与jQuery语法对比
- (2)选择器
- (3)jQuery选择器查找标签之后的结果与js有什么区别
- 3.基本筛选器(了解)
- 4.表单筛选器
今日内容详细
一.DOM其他操作
1.JS获取用户输入
普通数据(输入、选择)
标签对象.value
文件数据(上传)
标签对象.files #拿整个文件数组
标签对象.files[0] #返回该文件对象
2.JS类属性操作
let 标签对象 = document.getElementsByClassName('类名')#先把该标签赋值给一个变量名
标签对象.classList#获取该标签所有值
标签对象.classList.contains()#判断该类名是否存在
标签对象.classList.add()#添加一个类属性
标签对象.classList.remove()#删除指定类属性
标签对象.classList.toggle()#类属性存在就删除,不存在就添加
3.JS样式操作(了解即可,不推荐使用)
标签对象.style.标签样式属性名
backgroundColor #改背景颜色
backgroundImage
...
let 标签对象=document.getElementsByTagName('p')[0]
标签对象.style.backgroundColor='red'
4.JS事件
(1)什么是事件？
事件可以简单的理解为是给html标签绑定一些额外的功能,该功能可以触发js代码的运行。这个功能运行过程产生的效果就叫事件
#简单说就是达到某个条件自动触发某个功能
| 事件 | 说明 | 应用场景 |
|---|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄 | 单击某个标签可以跳出某个功能 |
| ondbclick | 当用户双击某个对象时调用的事件句柄 | 双击某个标签可以跳出某个功能 |
| onfocus | 元素获得焦点 | 输入框 |
| onblur | 元素失去焦点 | 用于表单验证，用户离开某个输入框时代表已输入完了，可以对他进行验证 |
| onchange | 域的内容被改变 | 通常用于表单元素，当元素内容被改变时触发。 （select联动） |
| onkeydown | 某个键盘按键被按下 | 当用户在最后一个输入框按下回车键时，表单提交。 |
| onkeypress | 某个键盘按键被按下并松开 | |
| onkeyup | 某个键盘按键被松开 | |
| onload | 一张页面或一副图像完成加载 | |
| onmousedown | 鼠标按钮被按下 | |
| onmousemove | 鼠标被移动 | |
| onmouseout | 鼠标从某元素移开 | |
| onmouseover | 鼠标移到某元素之上 | |
| onselect | 在文本框中的文本被选中时发生 | |
| onsubmit | 确认按钮被点击，使用的对象是form |
(2)绑定事件的两种方式：
//绑定事件的方式1:提前写好函数，标签内部指定
<body>
<input type="button" value="点我" ondblclick="func1()">
<script>
function func1(){
alert(123) /*弹出一个警告框,写123*/
}
</script>
</body>
————————————————————————————————————————————————————————
//绑定事件的方式2:先查找标签，然后批量绑定
<body>
<button id="d1">按我</button>
<script>
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){ /*匿名函数*/
alert(321) /*弹出一个警告框,写321*/
}
</script>
</body>
注:
按钮有两种写法:一：input标签内部写 二:直接写<button></button>
(3)事件中的重点关键字 this
用绑定事件方式2操作时,如果下面打印this：
<body>
<button id="d1">按我</button> #当下面打印this时就会显示出这一行
<script>
let btnEle = document.getElementById('d1')
btnEle.onclick = function (){
alert(321)
console.log(this) #在F12中会打印出当前被操作的标签对象
}
</script>
</body>
/*this指代的是当前被操作的标签对象*/
(4)window.onload 等待文档加载完毕之后再执行一些代码
一般情况下要想给元素绑定事件时要等文档加载完才可以.如果在加载前添加js事件会报错，通俗点就是说事件要在<body>标签最后面写！
如果一定要在<head>中写事件也可以,不过需要加window.onload：
<body>
<script>
window.onload = function () { /*等待文档加载完毕之后再执行一些代码*/
加所有页面js代码
}
</script>
</body>
5.JS事件案例
【需注意】如果使用的pyCharm版本如果较低的话用let会飘红,因为不兼容。需在设置里改为6+可以上下兼容
1.校验用户输入（要求：在页面上输入用户名和密码如果不对则返回红色提示）
点击事件 onclick
<body>
<p>username：
<input type="text" id="username">
<span class="errors" style="color: red"></span>
</p>
<p>password：
<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 spanlEle=document.getElementsByClassName('errors')[0];
//4.2.给span标签添加内部文本
spanlEle.innerText='用户名不能是jason'
}
//5.判断密码是否合法
if(passWordVal.length===0){
//5.1.查找获取用户名的input框下面的span标签
let spanlEle=document.getElementsByClassName('errors')[1];
//5.2.给span标签添加内部文本
spanlEle.innerText='密码不能为空'
}
}
</script>
</body>
2.省市联动
文本域变化事件 onchange
<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] //<option>市区信息</option>
//6.添加value属性
opEle.setAttribute('value',targetCityList[i]) //<option value='市区信息'>市区信息</option>
//7.将上述的option标签添加到第二个select标签内
cityEle.append(opEle)
}
}
</script>
</body>
二.jQuery类库
1.jQuery类库简介
1.兼容多浏览器的JavaScript库
极大的简化JavaScript编程。它的宗旨就是：Write less, do more(少写,多做)
2.优势
轻量的JS框架,核心文件很小不会影响页面加载速度、丰富的DOM选择器使jQuery用起来很方便、链式表达式（将多行变为一行，简化代码）、支持事件，样式，动画、Ajax操作、插件扩展开发。
3.导入jQuery文件方式：
(1)本地导入
#使用jQuery必须要先导入(很容易忘)，本质其实就是下载一个js文件
提前下载文件并导入
<script src="jQuery3.6.js"></script>
(2)网络CDN服务导入
只要计算机能够联网就可以直接导入
打开网站bootcdn>>jquery>>复制第一个
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
#如果想以后打开pycharm文件自动导入jQuery：（需电脑有网）
2.jQuery基本使用
1.JS与jQuery语法对比
2.选择器
jQuery() 可以简写为：$()
id选择器：
$("#id")
标签选择器：
$("tagName")
class选择器：
$(".className")
配合使用：
$("div.c1") //‘找到有c1 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提供的更多方法
案例：
$('p')[0].css('color','red')//【会出错！】因为[0]是获取标签对象,标签对象不能调用jQuery方法！
$('p')[0].style.color = 'red'//标签对象只可以.style再.其他方法
$('p').first().css('color','red')//jQuery对象可以.first().css()来操作
$('p').first().style.color = 'green'//【也会出错！】jQuery对象里没有.style方法！
$($('p')[0]).css('color','orange')//括号内部是标签对象,外面又用$包起来变成jQuery对象,可以.css
3.基本筛选器(了解)
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素(从0开始)
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
:has举例：
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
4.表单筛选器
可以看成是属性选择器优化而来
注意:$(':checked') //会出现错乱,会连带着找到select中的option对象！
$('input:checked') //如果不想则需要在冒号前添加筛选条件 在input中查找
$(:text)
$(:password)
$(:file)
$(:radio)
$(:checkbox)
$(:submit)
$(:reset)
$(:button)
$(:enabled) //可用的
$(:disabled) //禁用的(标签中如果加了disabled则只能看不能修改)
$(:checked) //默认选中 注：会出现错乱,会连带着找到select中的option对象！
$(:selected) //被选中的
作业
1.整理今日内容及博客
2.尝试编写JS时间案例
页面定时器案例
有一个input框 两个按钮 一个开始 一个结束
1.点击开始按钮 input内展示当前时间并按秒数刷新
2.点击结束按钮 input内展示停止
ps:写完之后测试有无bug 连续多次点击开始按钮 再试试能不能结束
思考如何解决
搜索框案例
input内有默认的文本值 用户一旦选择该input想做内容修改
就提前把内容清空
3.自行练习更多事件动作