进入python的世界_day46_前端——JS之BOM和DOM、jQury
一、BOM*
全称Browser Object Model，意思是通过编写JS代码能和浏览器交互，比如说控制浏览器大小、关闭打开页面、刷新页面、弹出框等等
// 1.打开窗口，可以指定链接，大小
window.open('http://www.baidu.com','','height=400px,width=800px,left=500px')
// 2.关闭窗口，一般只能自己写的
window.close()
// 3.拿到浏览器大部分信息，方便伪装成浏览器
window.navigtor.userAgent
// history对象的方法
//控制网页 前进一页
window.history.forward()
//控制网页返回上一页
window.history.back()
// location对象的方法***后续有用
//获取当前网址
window.location.href
//跳转至 某网页
window.location.href='www.baidu.com'
// 刷新网页
window.location.reload()
// 弹出框系列
// 1.确认框
confirm('霍霍，不是逃跑而是接近我吗？')
//用户点确定 返回True 点取消返回False
// 2.警告框
alert('时间要加速了！')
// 3.提示框
prompt("鸡泥__？") // 括号内可以加第二个元素，设置默认值
//用输入确认 那么 返回值 为输入的值 如果用户点击取消，没有设置默认值的情况下那么返回值为null
计时器相关***
-
定时任务——setTimeout
function func1(){ alert('就是现在，要按下去了！') } let t = setTimeout(func1,3000) // 3000是毫秒，自己计算好时间
-
循环定时任务——setInterval
function func1(){ alert('就是现在，要按下去了！') } let t = setInterval(func1,3000) // 3000是毫秒，自己计算好时间 // 会不停的弹窗，如果想关闭，添加一个停止循环 clearInterval(t) -
二者结合让弹窗执行一段时间后停止
let t function start(){ confirm('想变强吗少年') } t = setInterval(start,5000) // 设置弹窗5S执行一次 function stop(){ clearInterval(t) } setTimeout(stop,10000) // 设置10S后停止弹窗
二、DOM
全称Document Object Model，文档对象模型，通过它可以访问HTML文档的所有元素，有关DOM的代码，一定放在body标签的最后。
1.先学如何查找标签
关键字：getElementBy
// 直接查询
<body>
<div id="d1">div</div>
<div class="c1">div</div>
<div>div</div>
<p class="c1"></p>
<span id="d2">span</span>
</body>
//——————————————————————————————————————————
// 1.根据ID查找
document.getElementById('d1')
<div id="d1">div</div>
// 2.根据class 查找标签
document.getElementsByClassName('c1')
HTMLCollection(2) [div.c1, p.c1] // 返回数组
// 3.根据 标签类型 获取标签
document.getElementsByTagName('div')
//HTMLCollection(3) [div#d1, div.c1, div, d1: div#d1]
// 间接查询
代码自己捏份
<body>
<p>111</p>
<p>222</p>
<div id="d1">
div
<p>div>p
<span>div>p>span</span>
</p>
<span>div>span</span>
<p>div>p</p>
</div>
<span>333</span>
<span>444</span>
</body>
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
2.节点操作*
可以通过JS来操作标签，操作节点了
准备一下素材代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<p id="d2">天气不错！</p>
<a href="https://www.baidu.com/" target="_blank">点这里</a>
</div>
</body>
</html>
//——————————————————————————————————————————————————
// 创建标签对象 （如果不在原代码上写是一次性）
let aEle = document.createElement('a') //创建一个a标签
aEle.href = 'https://www.baidu.com' //给a标签添加 href属性
aEle.innerText = '点我打开百度！' // 给a标签插入文本
let divEle = document.getElementById('d1') // 锁定标签
divEle.appendChild(aEle) // 追加a到div内部
// 尤其注意单词！大小写不能错!
// 如果不想尾部追加，可以使用insertBefore()
// 删除标签对象
先锁定父级，然后锁定子标签，锁定就不打了，锁定后
父级.removeChild(要删除的子标签节点)
// 添加自定义属性
先创建一个img标签，然后锁定找到
//setAttribute 标签可以定义 默认属性也可以定义自定义属性
img1.setAttribute('src','666.png')
img1.getAttribute("src")
img1.setAttribute('hahaha','xixixi')
// 获取标签内所有文本与标签（可以创建子标签）
divEle.innerHTML
//也可以创建子标签，会覆盖掉，这个识别标签语法
divEle.innerHTML= '<h3> 这是innerHTML</h5>'
divEle.innerHTML // 查看一下发现确实识别了标签语法
3.DOM获取值***
这个知识点能干嘛？能在前端获取用户输入的数据后，通过简单的逻辑代码，在前端先校验一次，这样可以减轻后端服务器的运算压力
准备一下素材代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<p >用户名：
<input type="text" id="username">
</p>
<p id="d1">性别：
<input type="radio" name="gender" value="men" id="d11">男
<input type="radio" name="gender" value="women" id="d22">女
<input type="radio" name="gender" value="other" id="d33">其他
</p>
<p>上传文件：
<input type="file" id="file">
</p>
</form>
</body>
</html>
//——————————————————————————————————————————————————
// 1.首先获取到要查找的标签
let inputNameEle = document.getElementById('username')
// 2.获取该标签的值
inputNameEle.value
// 3.获取文件，注意不能用上面的取值的方法
fileEle.files[0]
//如果文件是多个，可以做for循环
4.DOM 操作CSS、 操作类属性
操作CSS，也是锁定标签后再点方法，可以在前端中用JS改样式之类的，不过有些冷门，而且也不合理
// js操作标签class属性
标签对象.classList // 所有class的属性值
标签对象.classList.add() // 添加 标签 class属性值
标签对象.classList.contains() // 判断 标签 class属性值是否存在
标签对象.classList.remove() // 删除 标签 classs属性值
标签对象.classList.toggle()// 当该属性值 不存在时 添加 该属性值 存 在便删除该属性值,反正就是对着干
5.事件***
是HTML4及以上的新特性之一，能给标签绑定了一些额外的功能，花里胡哨起来
| 事件关键字 | 功能 | 应用场景 |
|---|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄 | |
| ondblclick | 当用户双击某个对象时调用的事件句柄 | |
| onfocus | 元素获得焦点 | |
| onblur | 元素失去焦点 | 用于表单验证 |
| onchange | 域的内容被改变 | 通常用于表单元素 |
| onkeydown | 某个键盘按键被按下 | 用于表单，有人按回车 |
| onkeypress | 某个键盘按键被按下并松开 | |
| onkeyup | 某个键盘按键被松开 | |
| onload | 一张页面或一副图像完成加载 | |
| onmousedown | 鼠标按钮被按下 | |
| onmousemove | 鼠标被移动 | |
| onmouseout | 鼠标从某元素移开 | |
| conmouseover | 鼠标移动到某元素之上 | |
| onselect | 在文本框中的文本被选中时触发 | |
| onsubmit | 确认按钮被点击 使用对象是form |
常用的几个：
- onclick
- onfocus
- onblur
- onchange
如何使用：
方式一：绑定给button按钮的属性——标签自己带着事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="showMsg()">选择你的捍卫者</button>
<script>
function showMsg() {
let msg = prompt('确定要入壮丁局吗？')
console.log(msg)
}
</script>
</body>
</html>
方式二：锁定标签后，用句点的形式使用事件——标签不带事件，通过JS引出该标签事件 (推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="button" value="冲冲冲" id="d1">
</form>
<script>
let inputEle = document.getElementById('d1')
inputEle.onclick = function (){
alert('已经没有什么好害怕的了')
}
</script>
</body>
</html>
This 关键字
指代的是当前被操作的标签对象，当前触发事件的标签对象，然后就可以根据这个事件句点很多方法，有点像面向对象里面的self
三、实操练习题
另外开设了一篇，这些实操题现实中应用的也不少
https://www.cnblogs.com/wznn125ml/p/16960683.html
四、jQuery类库
1.介绍
相当于python的某个强大的第三方模块，大佬写的，能兼容多个浏览
2.两种引用方法
官网复制那个一万行左右的代码到本地新建的JS文件中，然后src导入使用
CDN网络资源加载，复制网址https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js引入src ，电脑必须联网
3.使用符号——$
jQuery() >>> $()
4.jQ的选择器
和CSS差不多
// 1.id选择器
$("#d1")
// 2.标签选择器
$("div")
// 3.类选择器
$(".c1")
// 4.层级选择器
$("x y") //x所有的后代
$("x > y");// x所有的子代 儿子
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
5.JS标签对象 和jQ对象的转换
因为后面要多种语言混用，使用标签的句点方法时，一定搞清楚手里拿着的是哪种对象
一句话，JQ对象是前面有啥啥啥的东西，后面跟着一个数组存放标签对象，如果要变标签对象一般用个索引0就OK，而标签对象如果要变成JQ对象，用一个$符号包一下即可
今日单词
element 元素
events 事件
placeholder 提醒
浙公网安备 33010602011771号