BOM、DOM、两者查找标签的方式和操作标签的方式、操作class和css的方法、事件、jQuery类库

今日内容

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]