目录
BOM操作与DOM操作
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。
BOM（浏览器对象模型）
window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
一些常用的Window方法：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.open()
window.open('https://www.sogo.com/','','width=800px,left=200px')
window.close()
关闭当前浏览器窗口
navigator.userAgent
标识自己是一个浏览器
history.forward()
前进一页
history.back()
后退一页
window.location.href
获取当前页面所在的网址 也可以再加赋值符号和网址跳转
window.location.reload()
刷新当前页面
alert()
警告框
confirm()
确认框
prompt()
提示框
设置定时任务
在等待一定时间间隔后执行指定的任务。
timeTask = setTimeout(function(){
alert("警告警告！！")
}, 3000) // 传入函数任务和延迟时间（时间单位为毫秒）
clearTimeout(timeTask) // 取消定时任务（不执行任务）
循环定时任务
loopTask = setInterval(function(){
alert("警告警告！！")
}, 3000) // 每三秒弹出一次警告窗
setTimeout(function(){
clearInterval(loopTask) // 结束指定的循环的任务
}, 10000) // 到十秒了结束循环任务
总结：
方法 说明
setTimeout(func, time) 设置定时任务，提交函数任务和延迟时间
clearTimeout(task) 关闭定时任务不执行，task是setTimeout()的返回对象
setInterval(func,interval_time) 设置循环定时任务，提交函数任务和间隔时间
clearInterval(loop_task) 关闭循环定时任务，loop_task是setInterval()的返回对象
DOM操作
DOM （Document Object Model）是指文档对象模型，通过它可以访问HTML文档的所有元素
既然DOM操作是通过js代码来操作标签 所以我们需要先学习如何查找标签之后才能给标签绑定一些JS代码(DOM操作)
查找标签
"""
1.js中变量名的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量接收 规律 xxxEle
"""
document.getElementById('d1')
结果就是标签对象本身
document.getElementsByClassName('c1')
结果是数组里面含有多个标签对象
document.getElementsByTagName('span')
结果是数组里面含有多个标签对象
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
操作节点
创建节点
我们可以通过js动态的创建一个标签节点：createElement("标签类型")
let divEle = document.createELement("div") // 创建一个div标签
添加节点
创建好的节点可以插入html文档流中：
// js代码查找div标签并将a追加到div内部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(aEle)
删除节点和替换节点
需要分别找到父节点和要删除或替换的节点，然后通过父节点删除或替换子节点。
somenode.removeChild(要删除的节点); // 删除节点
somenode.replaceChild(newnode, 某个节点); // 替换节点
设置节点属性*
获取和设置文本节点的值：
.innerText 获取标签内部所有的文本内容
.innerText = '文本' 替换/设置标签内部的文本(不识别标签语法)
.innerHTML 获取标签内部所有的标签包含文本
.innerHTML = '文本' 替换/设置标签内部的文本(识别标签语法)
attribute操作
// 对于标签对象中原本没有的属性也可以进行操作的attribute操作
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 对于标签已经有的属性可以通过点的方式：
inputEle.value // 拿到value值
inputEle.value="blabla"
/*这类操作就可以拿到用户输入的内容并做些简单的判断和做出一些即时的判断*/
获取值操作
1.针对用户输入的和用户选择的标签
标签对象.value
找select
2.针对用户上传的文件数据
标签对象.files fileList [文件对象、文件对象、文件对象]
标签对象.files[0] 文件对象
class与css操作
1.js操作标签css样式
标签对象.style.属性名(下划线没有 变成驼峰体)
2.js操作标签class属性
标签对象.classList.add()
标签对象.classList.contains() # 判断有没有这个属性
标签对象.classList.remove()
标签对象.classList.toggle() # 如果有这个属性就删掉 没有就添加
事件
在网页节点上发生的一些变化都可以称之为事件，我们可以通过js代码在触发这些事件的时候对节点进行操作。
常见事件
onclick：点击某标签时触发，经常用于空白button
onfocus：获取焦点时触发
onblur：失去焦点时触发
焦点常应用于表单标签，用户操作时的动效设计
onchange：域的内容发生变化时触发，如select标签选择的选项发生变化。
onload：等待页面、图片加载出来触发 window.onload
页面加载完成意味着所有的标签节点都在DOM树中了
绑定事件的多种方式
<!--绑定事件的方式1-->
<button onclick="showMsg()">快按我</button>
<!--绑定事件的方式2-->
<input type="button" value="快快快" id="d1">
<script>
function showMsg() {
// let msg = prompt('你确定要这样')
// console.log(msg)
console.log(this)
}
let inputEle = document.getElementById('d1');
inputEle.onclick = function () {
// alert('谁在那里点我')
console.log(this.getAttribute('username'))
}
</script>
事件函数中的this关键字
this指代的就是当前被操作的标签对象本身
如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化
onload方法
XXX.onload 等待XXX加载完毕之后再执行后面的代码
事件实战案例
# input焦点事件
<input type="text" value="游戏机" id="d1">
<script>
let inputEle = document.getElementById('d1')
inputEle.onfocus = function () {
this.value = ''
}
inputEle.onblur = function () {
this.value = '下次再来哟!'
}
</script>
# 校验用户数据
<p>username:
<input type="text" id="d1">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="d2">
<span style="color: red"></span>
</p>
<button id="suBtn">提交</button>
<script>
// 1.查找提交按钮的标签
subEle = document.getElementById('suBtn')
// 2.给按钮标签绑定点击事件
subEle.onclick = function (){
// 3.查找获取用户输入的标签并获取数据
let userNameEle = document.getElementById('d1')
let passWordEle = document.getElementById('d2')
if(userNameEle.value === 'jason'){
userNameEle.nextElementSibling.innerText = '用户名不能是Jason'
}
if(passWordEle.value === '123'){
passWordEle.nextElementSibling.innerText = '密码不能是123'
}
}
</script>
# 省市联动
省:
<select name="" id="d1">
</select>
市:
<select name="" id="d2">
</select>
<script>
let data = {
"河北": ["廊坊市", "邯郸市"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
"安徽": ["芜湖市", "合肥市"],
"上海": ["浦东新区", "静安区"]
}
// 提前查找好省和市的select标签
let proSeEle = document.getElementById('d1');
let citySeEle = document.getElementById('d2');
// 1.获取所有的省信息
for (let pro in data) {
// 2.创建option标签
let proOpEle = document.createElement('option');
// 3.添加文本及属性
proOpEle.innerText = pro;
proOpEle.setAttribute('value', pro);
// 4.将创建好的option标签添加到省下拉框中
proSeEle.appendChild(proOpEle)
}
// 5.给省标签绑定文本域变化事件 onchange
proSeEle.onchange = function () {
citySeEle.innerHTML = ''; // 每次操作市之前清空市数据
// 6.获取用户选择的省信息 根据省获取市信息
let targetProData = this.value;
let cityDataList = data[targetProData];
// 7.循环获取每一个市信息 创建option标签 添加到市下拉框中
for (let i = 0; i < cityDataList.length; i++) {
let cityOpEle = document.createElement('option');
cityOpEle.innerText = cityDataList[i];
cityOpEle.setAttribute('value', cityDataList[i]);
citySeEle.appendChild(cityOpEle)
}
}
</script>
jQuery类库
"""
IE浏览器:前端针对IE有时候需要单独再编写一份代码
"""
Write less, do more 写的更少做的更多
1.加载速度快
2.选择器更多更好用
3.一行代码走天下
4.支持ajax请求(重点)
5.兼容多浏览器
准备工作
1.下载核心文件到本地引入(没有网络也可以使用)
<script src="jQuery3.6.js"></script>
2.CDN网络资源加载(必须有网络才可以使用)
https://www.bootcdn.cn/
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
什么是CDN
内容分发网络
jQuery导入之后需要使用关键字才可以使用
默认的关键字就是jQuery但是不好输入 >>>: $
var $variable = jQuery对像
var variable = DOM对象
$variable[0] // jQuery对象可以转成DOM对象
jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快
js代码与jQuery代码对比
let pEle = document.getElementsByTagName('p')[0] // 拿到p标签
pEle.style.color = 'red' // 将p标签的内容颜色改为红
pEle.nextElementSibling.style.color = 'green' // 将p标签的下一个标签的颜色改为绿
$('p').first().css('color','yellow').next().css('color','blue') // 将p标签的颜色改为黄，它的下一个标签改成蓝
标签对象与jQuery对象
1.不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚手上是什么对象
2.两者可以互相转换
标签对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]