Javascript-极速入门指南-2-BOM与DOM操作
内容概要
- BOM操作
- BOM操作基础
- DOM操作
- jQuery类库
BOM操作
BOM操作基础
BOM(Browser Object Model) 是指浏览器对象模型，它使用Javascript有能力与浏览器进行'对话'
- 打开新网页
window.open('http://www.baidu.com') 并且可以填写参数控制打开新网页的大小
window.open('http://www.baidu.com','','width=200px,height=200px') - 关闭当前浏览器窗口
window.close() - 标识自己是一个浏览器
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36'
- 前进一页
history.forward() - 后退一页
history.back() - 获取当前页面所在的网址,也可以再加赋值符号和网址跳转
window.location.href
'chrome-extension://nnnkddnnlpamobajfibfdgfnbcnkgngh/newtab/index.html'
刷新当前页面
window.location.reload
警告框
alert()
确认框
confirm()
提示框
prompt()
计时相关操作
1.定时执行任务setTimeout
let time = setTimeout(showMsg,2000) // 2000毫秒(2秒)之后执行showMsg函数
clearTimeout(time) // 取消计时任务
例：
function showMsg(){
confirm('你好')
}
let notice = setTimeout(showMsg,2000)
notice
2.定时重复执行setInterval
let time = setInterval(showMsg,2000) //每次间隔2000毫秒(2秒)执行一次showMsg函数
clearIntervals(time) // 取消重复任务
例：
function showMsg(){
confirm('你好')
}
let time = setInterval(showMsg,2000)
time
DOM操作
DOM（Document Object Model）是指文档对象模型，通过它可以访问HTML文档的所有元素
DOM操作是通过JS代码来操作标签，所以我们需要先学习如何使用JS代码查找标签
之后我们才能给一些标签绑定JS代码(DOM操作)
查找标签
// 1.在JS中 变量名的命名风格推荐为驼峰体(小驼峰 => showMsg)
// 2.JS中查找到的HTML标签如果需要反复使用可以通过变量名来进行接收！ 规律为： xxxEle /*Elements（元素）*/
我们写一些html代码辅助我们演示下面的查找标签功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span>span</span>
<span>span</span>
<div id="d1">div
<span>div>span</span>
<p class="c1">div>p
<span>div>p>span</span>
</p>
<span>div>span</span>
</div>
<span>span</span>
<span>span</span>
</body>
</html>
页面样式
- ID查找器
document.getElementById('d1')
因为id在标签中是唯一的，所以Element不需要加s复数
结果就是标签对象本身
- 类名查找器
document.getElementsByClassName('c1')
结果是数组里面含有多个标签对象
- 标签查找器
document.getElementsByTagName('span')
结果是数组里面含有多个标签对象
还有比较多的查找方式，不一个一个演示了！
| 方法名称 | 说明 |
|---|---|
| parentElement | 父节点标签元素 |
| children | 所有子标签 |
| firstElementChild | 第一个子标签元素 |
| lastElementChild | 最后一个子标签元素 |
| nextElementSibling | 下一个兄弟标签元素 |
| previousElementSibling | 上一个兄弟标签元素 |
操作节点(标签)
创建一个标签
let spEle = document.createElement('span')
给标签添加默认属性
spEle.className('s2')
只能添加默认的属性
兼容默认属性和自定义属性
spEle.setAttribute(name,'xiaoming')
操作标签内部文本内容
spEle.innerText('牛郎织女66')
将某个标签追加到标签内部
let divEle = document.getElementsByTagName('div')[0] //因为查询到的是数组，所以需要通过索引取值第一个div标签
divEle.appendChild(spEle) // 将刚刚在测试的标签spEle添加进入div标签
| 方法名 | 说明 |
|---|---|
| innerText | 获取标签内部所有的文本内容 |
| innerText = '文本' | 替换/设置标签内部的文本(不识别标签语法) |
| innerHTML | 获取标签内部所有的标签包含文本 |
| innerHTML = '文本' | 替换/设置标签内部的文本(识别标签语法) |
获取值操作
同样的我们先编写一下关于获取值操作的html代码，方便我们接下来的演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="">
<p>username:
<input type="text" id="username">
</p>
<p>action:
<select name="" id="action">
<option value="上天">1</option>
<option value="下地">2</option>
<option value="入海">3</option>
</select>
</p>
<p>file:
<input type="file" id="文件">
</p>
</form>
</body>
</html>
针对用户输入的和用户选择的标签
标签对象.value
针对用户上传的文件数据
标签对象.value
标签对象.files
标签对象.files[0]
需要通过此方法获取文件对象，如果有多选的文件对象会自动组成数组！需要通过索引来获取文件对象。
class与css操作
1、 js操作标签css样式
标签对象.style.属性名(下划线没有 变成驼峰体)
`inputNameEle.style.color='blue'`
2、js操作标签class属性
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
classList.contains(cls) // 存在返回true，否则返回false
classList.toggle(cls) // 存在就删除，否则添加
事件
事件我们可以简单的理解为通过 'js' 代码给 'html' 标签绑定一些自定义的功能
常见事件
onclick 当用户点击某个对象时调用的事件句柄
onfocus 元素获得焦点
onblur 元素失去焦点
onchange 域的内容被改变
...... ......
绑定事件的多种方式：
方式1
<input type="text" id="username" onclick="showMsg()">
// 在需要绑定事件的 标签 中 添加事件属性，并绑定触发函数
<script>
function showMsg(){
confirm("what's your name?")
}
</script>
方式2
function showMsg(){
confirm("what's your name?")
}
let InputNameEle = document.getElementById('username') // 通过id找到标签
InputNameEle.onclick = showMsg //通过标签对象点onclick事件，让事件绑定函数即可
事件中的 this
事件函数中的this关键字
this指代的就是当前被操作的标签对象本身
如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化
代码示例：
<body>
<input type="text" id="username">
<script>
let InputNameEle = document.getElementById('username')
InputNameEle.onclick = function (){
this.style.color='green'
confirm('看颜色~')
}
</script>
</body>
onload方法
XXX.onload 等待XXX标签加载完毕之后再执行后面的代码
事件实战案例
看了这么多了，做点小练习！！巩固一下前面的知识点吧！
练习1
使用焦点事件及失去焦点事件，对按钮标签进行处理，
当鼠标单击按钮时，显示 内容 游戏
当鼠标移除按钮框外时 显示 内容 下次再来
// 1. 首先我们应该创建按钮标签，在上面填写内容
// 2.编写js代码 通过id选择器选择该标签
// 3.通过绑定onclick事件与onblur事件完成需求
<input type="button" value="请点我！" id="button">
<script>
let InputButtonEle = document.getElementById('button')
InputButtonEle.onfocus = function () {
this.value='游戏'
}
InputButtonEle.onblur = function (){
this.value='下次再来！'
}
</script>
练习2
获取用户输入账号和密码
判断用户输入是否为固定的账号和密码
如若输入正确提示登录成功
如若不是提示登录失败
//1.获取输入用户名/密码/提交按钮 标签 对应的标签对象
//2.利用onclick事件 在onclick函数中编写验证账号密码是否正确的if判断
username: <input type="text" id="username" placeholder="请输入您的用户名"> <br>
password: <input type="password" id="password" placeholder="请输入您的密码"> <br><br>
<input type="button" id="res" value="点击此处提交">
let InputButtonEle = document.getElementById('res')
InputButtonEle.onclick= function () {
let InputNameEle = document.getElementById('username')
let InputPasswordEle = document.getElementById('password')
if (InputNameEle.value === 'xiaoming' &&
InputPasswordEle.value === '123') {
confirm('登录成功')
}
else{
confirm('登录失败')
}
}
练习3
省市联动
我们现在的需求为：现有两个选择省份以及区的下拉框
要求我们在选择省份之后，省份对应的区下拉框内容需要显示出来
<form action="">
<select name="province" id="province">
</select>
<select name="district" id="district">
</select>
</form>
<script>
let data = { // 定义省市数据集
"深圳": ["南山区", "罗湖区"],
"北京": ["朝阳区", "海淀区"],
"山东": ["青岛市", "烟台市"],
"安徽": ["芜湖市", "蚌埠市"],
"上海": ["浦东新区", "静安区"]
}
let selectProELe = document.getElementById('province')
let selectDisEle = document.getElementById('district')
for (let province in data){ //循环获取省份信息
let proOpEle = document.createElement('option') // 动态根据data数据来创建option标签
proOpEle.innerText=province // 修改下拉框文本域
proOpEle.setAttribute('value',province) // 设置标签value值
selectProELe.appendChild(proOpEle) //将option标签添加到下拉框标签内
}
selectProELe.onchange= function () { //文本域变化事件
selectDisEle.innerText='' //每次选择完省份之后，需要把区的内容情况，不然区的内容会一直重复添加在下拉框中
let districtDataList = data[this.value] //获取省份对应的区信息
for (let i in districtDataList){ // 循环区域信息，准备获取省份对应的区域信息
let disOpEle = document.createElement('option')
disOpEle.innerText=districtDataList[i]
disOpEle.setAttribute('value',districtDataList[i])
selectDisEle.appendChild(disOpEle)
}
}
类库 jQuery 简介
jQuery的宗旨: Write less, do more 写的更少做的更多
jQuery的特点为：
1.加载速度快
2.选择器更多更好用
3.一行代码走天下
4.支持ajax请求(重点)
5.兼容多浏览器
jQuery 使用教程
jQuery下载与安装
jQuery类似python中的模块
由于浏览器默认只认识html css js
不认识jquery 需要要使用需要先导入
官网下载：https://jquery.com/
-
下载核心文件到本地引入(没有网络也可以使用)
<script src="jQuery3.6.js"></script>
-
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 -
jQuery基本介绍
jQuery导入之后需要使用关键字才可以使用
默认的关键字就是jQuery但是不好输入 >>>: $
jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快
js代码与jQuery代码对比
//js代码
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color = 'red'
pEle.nextElementSibling.style.color = 'green'
//jQuery代码
$('p').first().css('color','yellow').next().css('color','blue')
标签对象与jQuery对象
1.不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚手上是什么对象
2.两者可以互相转换
标签对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]
浙公网安备 33010602011771号