BOM与DOM、jQuery类库
目录Window对象
window对象表示浏览器窗口，调用window对象的方法和属性时，可省略window对象的引用。
eg：
window.document.write()
简写：
document.write()
常用的window方法：
window.innerHeight # 查看浏览器窗口的内部高度
window.innerWidth # 查看浏览器窗口的内部宽度
window.open() # 打开新窗口
window.open('https://www.baidu.com/');# ()里填写网址可打开网址，也可设置窗口大小（长宽）
window.close() # 关闭当前窗口
BOM操作
BOM(Browser Object Model)指浏览器对象模型，它让JavaScript具有与浏览器"对话"的能力。
# navigator对象
navigator.appName # web浏览器全称
navigator.userAgent # 标识自己是一个浏览器
# history对象
window.history # 对象包含浏览器的历史
"浏览历史对象，包含用户当前页面的浏览历史，但无法查看具体地址"
history.forward()# 前进一页
history.back() # 后退一页
# location对象
window.location.href
# 获取当前页面所在的网址，也可以再加赋值符号和网址跳转
window.location.reload()
# 刷新当前页面
alert（）# 警告框
confirm() # 确认框
prompt() # 提示框
# 计时事件
# setTimeout()
var t=setTimeout('JS语句',毫秒)
let t = setTimeout(showMsg, 3000) # 3000毫秒之后执行函数
# clearTimeout()
clearTimeout(t) # 取消任务
# setlnterval()
setInterval("JS语句",时间间隔)
s = setInterval(func, 3000) # 每隔3000毫秒执行一次
#clearInterval()
clearInterval(s) # 取消任务
DOM操作
DOM(Document Object Model)指文档对象模型，可通过DOM访问HTML文档的所有元素。
DOM操作是通过JS代码操作标签的，所以要先学会查找标签之后才能给标签绑定JS代码。
# 查找标签
1.直接查找
document.getElementById # 根据ID获取一个标签
document.getElementById('d1')
#标签对象本身
document.getElementsByClassName # 根据class属性获取
document.getElementsByClassName('c1')
# 数组里含有多个标签对象
document.getElementsByTagName # 根据标签名获取标签合集
document.getElementsByTagName('span')
# 数组里含有多个标签对象
2.间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
操作节点
# 创建节点
createElement(标签名)
var cEle=document.createElement("c");
# 添加节点
somenode.appendChild(newnode); # 追加子节点
somenode.insertBefore(newnode,某个节点); # 增加节点至某节点前边
# 属性节点
获取文本节点的值：
var divEle=document.getElementById("d1")
divEle.innerText # 获取标签内部所有的文本内容
divEle.innerHTML # 获取标签内部所有的标签包含文本
设置文本节点的值：
var divEle =document.getElementById("d1")
divEle.innerText="1"
div.innerHTML="<p>2</p>"
# attribute操作标签属性
var divEle=document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
"自带的属性可使用点属性名的方式来获取和设置"
imgEle.src
imgEle.src="..."
获取值操作
1.针对用户输入的和用户选择的标签
标签对象.value/(elementNode.value)
2.针对用户上传的文件数据
标签对象.files/fileList [文件对象、文件对象、文件对象]
标签对象.files[0] # 索引取值得到对应的文件对象
class与css操作
1. JS操作标签CSS样式
标签对象.style.属性名()
2. JS操作标签class属性
className # 获取所有样式类名（字符串）
标签对象.classlist.add(cls) # 添加类
标签对象.classlist.contains(cls)
# 判断是否存在，存在返回true,否则返回false
标签对象.classlist.remove(cls) # 删除指定类
标签对象.classlist.toggle(cls) # 存在就删除，不存在就添加
事件
事件可理解为通过JS代码给html标签绑定一些自定义功能
onclick
# 用户点击某个对象时调用的事件句柄
onblclick
# 用户双击某个对象时调用的事件句柄
onfocus
# 元素获得焦点，输入框的聚焦应用
onblur
# 元素失去焦点，表单验证，当用户离开输入框表示输入完毕，可进行验证
onchange
# 域的内容被改变，用于表单元素。元素内容被改变时触发，会与select联动
onkeydown
#某个键盘按键被按下。
#应用场景: 当用户在最后一个输入框按下回车按键时，表单提交。
onkeypress
# 某个键盘按键被按下并松开。
onkeyup
# 某个键盘按键被松开。
onload
# 一张页面或一幅图像完成加载。
XXX.onload
# 等待XXX加载完毕之后再执行后面的代码
onmousedown # 鼠标按钮被按下。
onmousemove # 鼠标被移动。
onmouseout # 鼠标从某元素移开。
onmouseover # 鼠标移到某元素之上。
onselect # 在文本框中的文本被选中时发生。
onsubmit # 确认按钮被点击，使用的对象是form。
事件绑定方式
方法1：
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
# this为实参，是触发事件的当前元素
# ths为形参，因其处于函数定义过程中
方法2：
<input type="button" value="快快快" id="d1">
<script>
function showMsg() {
let msg = prompt('你确定要这样吗?');
console.log(msg)
}
let inputEle = document.getElementById('d1');
inputEle.onclick = function () {
alert('谁在那里点我!!!')
}
</script>
"""
事件函数中的this关键字
this指代当前被操作的标签对象本身；
若事件函数内有多层嵌套可在一开始用变量存储，防止后续变化
"""
事件案例
<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类库
jQuery是一个轻量级、兼容多浏览器的JavaScript库。
jQuery的宗旨：write less，do more
jQuery的特点：
1.加载速度快
2.选择器更多更好用
3.一行代码走天下（链式表达式）
4.支持Ajax请求（重要）
5.兼容多浏览器
jQuery使用指南：
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，但因不好输入可使用$
jQuery封装JS代码之后能让编写更简单，但有时JS代码在速度上更有优势
js代码与jQuery代码对比
#JS代码：
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
'red'
pEle.nextElementSibling.style.color = 'green'
#jQuery代码：
$('p').first().css('color','yellow').next().css('color','blue')
"""
相较而言，jQuery代码更加简洁，一行代码就写完了
"""
标签对象与jQuery对象
1.不同对象能调用的方法是不同的，编写代码时要分清是标签对象还是jQuery对象
# jQuery对象最前方会带有 jQuery，标签对象开头为标签
2.二者可以互相转换
标签对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]