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

今日内容

BOM操作#

Copy
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):#

Copy
警告框经常用于确保用户可以得到某些信息
当警告框出现 用户需要点击确定按钮才能继续进行操作

确认框(confirm):#

Copy
确认框用于使用户验证或者接受某些信息
当确认框出现后 用户需要点击确定或者取消按钮才能继续进行操作
如果用户点击确认 返回值为true
如果用户点击取消 返回值为false

提示框（prompt）：#

Copy
提示框经常用于提示用户在进入页面前输入某个值
当提示框出现后 用户需要输入某个值 然后点击确认或者取消按钮才能继续操作
当用户点击确认 返回值为输入的值
当用户点击取消 返回值为null

计时相关(重要)：#

开启定时任务：setTimeout()#

Copy
setTimeout('js语句'，毫秒)

取消定时任务：clearTimeoyt()#

Copy
var t = setTimeout('js语句'，毫秒)
clearTimeout(t)

setTimeout（）会返回一个值 可以用变量名接收它 取消的时候（）里填变量名

循环定时任务：setInterval()#

Copy
setInterval("JS语句",时间间隔 毫秒)

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

取消循环定时任务：clearInterval()#

Copy
let t = setInterval("JS语句",时间间隔 毫秒)
clearInterval(t)

setIntervalt（）会返回一个值 可以用变量名接收它 取消的时候（）里填变量名

DOM操作#

Copy
DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。 

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

查找标签：#

Copy
1.js中变量的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量名接收 规律是xxEle

document.getElementByID	根据ID查找 结果就是标签本身
document.getElementsByClassName	根据类查找 结果是数组里面含有多个标签对象
document.getElementsByTagName	根据标签获取标签合集 结果是数组里面含有多个标签对象

涉及到DOM操作的JS代码应该放在body最下面

间接查找：#

parentElement	父节点标签
children	所有子标签
firstElementChild	第一个子标签元素
lastElementChild	最后一个子标签元素
nextElementSibling	下一个兄弟标签
previousElementsSibling	上一个兄弟标签元素

操作节点#

Copy
//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样式#

Copy
变迁对象.style.属性名（下划线变成驼峰体）

2.js操作标签class属性#

className	获取所有样式类名(字符串)
classList.remove(cls)	删除指定类
classList.add(cls)	添加类
classList.contains(cls)	存在返回true，否则返回false
classList.toggle(cls)	存在就删除，否则添加

事件#

Copy
事件可以简单理解为通过js代码给html标签绑定一些自定义的功能

常见事件：#

onclick	单击触发事件
onfocus	元素获得焦点
onblur	元素失去焦点
onchange	域的内容被改变

绑定事件的多种方式：#

Copy
//方式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关键字：#

Copy
this指代的就是当前被操作的标签对象本身
如果时间函数内有多层嵌套 那么最好在一开始用变量存储一下防止后续变化

window.onload方法
xxx.onload 等待xxx加载完毕之后再执行后面的代码

事件实际案例：#

Copy
input框：
	<input type="text" value="" id="d1" placeholder="用户名">

    <script>
        let inputEle = document.getElementById('d1')
        inputEle.onfocus = function (){
            this.placeholder=''
        }
        inputEle.onblur=function (){
            this.value='下次'
        }

Copy
校验用户名和密码：
<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类库#

Copy
"""
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对象#

Copy
1.不同的对象能够调用的方法是不同的
	在编写代的时候一点过要看清楚是什么对象
2.两者可以互相转换
	标签对象转jQuery对象
    	$(标签对象)
	jQuery对象转标签对象
    	jQuery对象[0]