目录
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前提必须要有网络
优点:好处在于无需下载文件,直接走网络请求使用
缺点: 不好的地方在于必须要有网才可以使用