今日内容
BOM操作
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
windows对象
|
|
| window.innerHeight |
浏览器窗口的内部高度 |
| window.innerWidth |
浏览器窗口的内部宽度 |
| * window.open('网址'，'','长度宽度') |
打开新窗口 |
| * window.close |
关闭当前窗口 |
navigator对象
|
|
| *navigator.userAgent |
客户端绝大部分信息（爬虫必备 标识自己是一个浏览器） |
| navigator.appName |
Web浏览器全称 |
| navigator.appVersion |
Web浏览器厂商和版本的详细字符串 |
| navigator.platform |
浏览器运行所在的操作系统 |
history对象
|
|
| history.back() |
后退一页 |
| history.forward() |
前进一页 |
location对象
|
|
| * location.href |
获取当前url |
| * location.herf = 'url' |
跳转到指定页面 |
| * location.reload() |
重新加载页面 |
弹出框
|
|
| alert("") |
警告框 |
| confirm（""） |
确认框 |
| prompt("") |
提示框 |
警告框(alert):
警告框经常用于确保用户可以得到某些信息
当警告框出现 用户需要点击确定按钮才能继续进行操作
确认框(confirm):
确认框用于使用户验证或者接受某些信息
当确认框出现后 用户需要点击确定或者取消按钮才能继续进行操作
如果用户点击确认 返回值为true
如果用户点击取消 返回值为false
提示框（prompt）：
提示框经常用于提示用户在进入页面前输入某个值
当提示框出现后 用户需要输入某个值 然后点击确认或者取消按钮才能继续操作
当用户点击确认 返回值为输入的值
当用户点击取消 返回值为null
计时相关(重要)：
开启定时任务：setTimeout()
setTimeout('js语句'，毫秒)
取消定时任务：clearTimeoyt()
var t = setTimeout('js语句'，毫秒)
clearTimeout(t)
setTimeout（）会返回一个值 可以用变量名接收它 取消的时候（）里填变量名
循环定时任务：setInterval()
setInterval("JS语句",时间间隔 毫秒)
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
取消循环定时任务：clearInterval()
let t = setInterval("JS语句",时间间隔 毫秒)
clearInterval(t)
setIntervalt（）会返回一个值 可以用变量名接收它 取消的时候（）里填变量名
DOM操作
DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
查找标签：
1.js中变量的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量名接收 规律是xxEle
|
|
| document.getElementByID |
根据ID查找 结果就是标签本身 |
| document.getElementsByClassName |
根据类查找 结果是数组里面含有多个标签对象 |
| document.getElementsByTagName |
根据标签获取标签合集 结果是数组里面含有多个标签对象 |
涉及到DOM操作的JS代码应该放在body最下面
间接查找：
|
|
| parentElement |
父节点标签 |
| children |
所有子标签 |
| firstElementChild |
第一个子标签元素 |
| lastElementChild |
最后一个子标签元素 |
| nextElementSibling |
下一个兄弟标签 |
| previousElementsSibling |
上一个兄弟标签元素 |
操作节点
//js代码创建一个标签
undefined
let aEle = document.createElement('a')
//js代码操作标签属性 =>只能添加默认的属性
undefined
aEle.href = 'http://www.baidu.com/'
'http://www.baidu.com/'
//js代码添加文本
undefined
aEle.innerText = '我是小李'
'我是小李'
//js代码查找div标签并将a追加到div底部
undefined
let divEle = document.getElementsByTangName('div')
divEle.appendChild(aEle)
|
|
| createElement |
创建一个标签 |
| somenode.appendChild(newnode) |
追加一个子节点（作为最后的子节点） |
| somenode.insertBefore(newnode,某个节点) |
把增加的节点放到某个节点的前边 |
| somenode.removeChild(要删除的节点) |
删除节点 |
| somenode.replaceChild(newnode, 某个节点) |
替换节点 |
| setAttribute() |
兼容默认属性和自定义属性 |
|
|
| .innerText |
获取标签内部所有文本内容 |
| .innerText = '文本' |
替换/设置标签内部的文本(不识别标签语法) |
| .innerHTML |
获取标签内部所有的标签包含文本 |
| .innerHTML = '文本' |
替换/设置标签内部的文本(识别标签语法) |
获取值操作
1.针对用户输入的和用户选择的标签
标签对象.value
2.针对用户上传文件数据
标签对象.files fileList[文件对象、文件对象、文件对象]
标签对象.files[0] 文件对象
class与css操作
1.js操作标签css样式
变迁对象.style.属性名（下划线变成驼峰体）
2.js操作标签class属性
|
|
| className |
获取所有样式类名(字符串) |
| classList.remove(cls) |
删除指定类 |
| classList.add(cls) |
添加类 |
| classList.contains(cls) |
存在返回true，否则返回false |
| classList.toggle(cls) |
存在就删除，否则添加 |
事件
事件可以简单理解为通过js代码给html标签绑定一些自定义的功能
常见事件：
|
|
| onclick |
单击触发事件 |
| onfocus |
元素获得焦点 |
| onblur |
元素失去焦点 |
| onchange |
域的内容被改变 |
绑定事件的多种方式：
//方式1
<button onclick="showMsg()">快按我</button>
//方式2
<input type="button" value="快快快" id="d1">
<script>
function showMsg() {
let msg = confirm('确定要按吗')
console.log(msg)
}
let inputEle = document.getElementById('d1')
inputEle.onclick=function () {
alert('别乱点')
console.log(inputEle)
}
事件函数中的this关键字：
this指代的就是当前被操作的标签对象本身
如果时间函数内有多层嵌套 那么最好在一开始用变量存储一下防止后续变化
window.onload方法
xxx.onload 等待xxx加载完毕之后再执行后面的代码
事件实际案例：
input框：
<input type="text" value="" id="d1" placeholder="用户名">
<script>
let inputEle = document.getElementById('d1')
inputEle.onfocus = function (){
this.placeholder=''
}
inputEle.onblur=function (){
this.value='下次'
}
校验用户名和密码：
<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="sub">提交</button>
<script>
//1.查找提交按钮的标签
subEle = document.getElementById('sub')
//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'
}
}
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但是不好输入 >>>: $
jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快
js代码与jQuery代码对比
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
'red'
pEle.nextElementSibling.style.color = 'green'
$('p').first().css('color','yellow').next().css('color','blue')
标签对象与jQuery对象
1.不同的对象能够调用的方法是不同的
在编写代的时候一点过要看清楚是什么对象
2.两者可以互相转换
标签对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]
