前端开发：5、BOM操作、DOM操作、jQuery类库
JavaScript
一、BOM操作
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
1、window对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。
一些常用的Window方法：
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
111、打开新窗口
wiwindow.open('https://www.sogo.com/','','width=800px,left=200px')
// 可设置打开的网址、打开的窗口的高度、宽度和位置
222、关闭当前窗口
wiwindow.close()
2、navigator对象
浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
nanavigator.appName
// 获取浏览器全称
AD
nanavigator.appVersion
// 获取浏览器厂商和版本的详细信息
navigator.userAgent
// 获取客户端信息（标识自己是一个浏览器）
navigator.platform
// 获取浏览器所在的操作系统
3、screen对象
屏幕对象，不常用
screen.availWidth // 可用的屏幕宽度
screen.availHeight // 可用的屏幕高度
4、history对象
可用来控制当前页面的浏览历史（上一页/下一页）
浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。
history.forward() // 前进一页
history.back() // 后退一页
5、location对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法：
location.href // 获取URL
location.href="URL" // 跳转到指定页面，可以赋值
location.reload() // 重新加载/刷新页面
6、弹出窗
可以再JavaScript中创建三种消息框：警告框、确认框、提示框。
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：
alert('警告的信息')
确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：
confirm('需要确认的信息')
提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：
prompt('提示用户的信息，用户可以进行输入')
7、计时相关
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
单次计时
- 关键词：setTimeout（'JS语句'，毫秒）
语法：
function func(){
alert('嘿嘿嘿')
}
// 设置计时弹窗的时间和JS语句
var t = setTimeout(func，3000)
setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。
- 关键词：clearTimeout（）
语法：
function func(){
alert('嘿嘿嘿')
}
// 设置计时弹窗的时间和JS语句
var t = setTimeout(func，3000)
// 取消弹窗
setTimeout(t)
循环计时
- 关键词：setInterval（'JS语句'，毫秒）
语法：
function func(){
alert('嘿嘿嘿')
}
// 每隔3000毫秒执行一次
var t2 = setInterval(func，3000)
// 取消任务
clearInterval(t2)
二、DOM操作
DOM （Document Object Model）是指文档对象模型，通过它可以访问HTML文档的所有元素
既然DOM操作是通过js代码来操作标签 所以我们需要先学习如何查找标签之后才能给标签绑定一些JS代码(DOM操作)
1、查找标签
标签的命名规范
-
js中查找到的标签可以使用变量名接收，反复使用
-
JS中变量名的命名风格推荐使用小驼峰体
- eg：xxxEle
通过标签ID名查找
let divIdEle = document.getElementById('标签ID名')
通过标签类名查找
通过类查找到的标签可能会有多个，所以找到的标签会以数组的形式进行返回，使用时需要调用索引的方法来定位到标签对象
let spanClassEle = document.getElementsClassName('标签类名')[0]
直接通过标签名查找
通过标签名直接查找标签对象，同样是以数组的形式返回，使用时需要通过索引
let eleName = document.getElementsBytagName('标签名')[0]
其他内置方法
当我们找到指定的标签后，可以使用该标签对象点的方式找到其它标签
| 关键词 | 介绍 |
|---|---|
| parentElement | 查找当前标签的父节点标签 |
| children | 查找当前标签下的所有子标签 |
| firstElementChild | 查找当前标签下的第一个子标签 |
| lastElementChild | 查找当前标签下的最后一个子标签 |
| nextElementSibling | 查找当前标签的下一个兄弟标签 |
| previousElementSibling | 查找当前标签上的第一个兄弟标签 |
2、操作节点
操作节点是指通过DOM查找到标签后，可对标签进行操作，添加标签的属性或编辑标签的文本
JS代码创建标签
// 参数内填入需要创建的标签的元素类名
let aEle = document.createElement('a')
将创建的标签添加至指定标签下
// 1、先查找需要添加标签的父标签
let divEle = document.getElementsClassName('d1')
// 2、通过父标签点的方式进行添加
divEle.appendChild(aEle)
JS代码操作标签属性
1、添加属性
方式一： 只能添加标签默认属性
// 绑定标签的变量名加点属性
标签对象.属性名 = '属性值'
aEle.href = 'htpps://www.baidu.com/'
方式二： 兼容自定义属性和默认属性
// 通关关键词：getAttribute
标签对象.setAttribule('属性值')
aEle.setAttribute('style'，'color:red')
2、删除属性
标签对象.removeAttribule('需要删除的属性名')
aEle.removeAttribute('id')
JS代码操作标签文本
JS操作标签文本有两种方式：
- innerText
- 查看/替换标签内部的文本内容
- innerHtml
- 查看/替换标签内的所有子标签和文本
方式一：
标签对象.innerText = '替换的内容'
aEle.innerText = '开开心心'
方式二：
标签对象.innerText = '替换的内容（可添加标签）'
divEle.innerHtml = '<span> hello! </span>'
3、获取值操作
前面学习了< form > 表单标签可以获取用户输入，传递到后端，那么也我们可以通过JS代码来获取用户当前输入做出对应逻辑判断，例如：用户再输入用户名时，我们可以通过用户的输入来判断用户名是否合法，满足用户名的注册要求
针对用户输入和用户选择的标签
标签对象.value
针对用户上传的文件数据
1、单个文件：
标签对象.files
2、多个文件：
标签对象.fileList // 获取到的是列表 可通过索引取到文件对象
4、class与css操作
1、js操作标签css样式
标签对象.style.属性名 = '属性值'
该方法只能操作标签现有的属性
2、js操作标签class属性
1.新增class值
标签对象.classList.add('值')
2.删除指定的class值
标签对象.classList.remove('值')
3.查询class中是否包含指定值（正确true，错误false） 标签对象.classList.contains('值')
4.查询class中是否包含指定值（错误true，正确false）
标签对象.classList.toggle('值')
5、事件
事件可以理解为，将有某些功能的JS代码绑定在某个标签上，当用户触动、触发该标签时会自动触发绑定的JS代码的功能
常见事件
-
事件函数中的this关键字
- this指代的就是当前被操作的标签对象本身
- 如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化
-
onload方法
- XXX.onload 等待XXX加载完毕之后再执行后面的代码
1、onclick
当用户点击某个对象时调用
2、 onfocus
元素获得焦点时调用
3、onblur
元素失去焦点调用
4、onchange
域的内容被改变
事件案例实战
<input type="text" value="游戏机" id="d1">
<script>
let inputEle = document.getElementById('d1')
inputEle.onfocus = function () {
this.value = ''
}
inputEle.onblur = function () {
this.value = '下次再来哟!'
}
</script>
<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="suBtn">提交</button>
<script>
// 1.查找提交按钮的标签
subEle = document.getElementById('suBtn')
// 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'
}
}
</script>
省:
<select name="" id="d1">
</select>
市:
<select name="" id="d2">
</select>
<script>
let data = {
"河北": ["廊坊市", "邯郸市"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
"安徽": ["芜湖市", "合肥市"],
"上海": ["浦东新区", "静安区"]
}
// 提前查找好省和市的select标签
let proSeEle = document.getElementById('d1');
let citySeEle = document.getElementById('d2');
// 1.获取所有的省信息
for (let pro in data) {
// 2.创建option标签
let proOpEle = document.createElement('option');
// 3.添加文本及属性
proOpEle.innerText = pro;
proOpEle.setAttribute('value', pro);
// 4.将创建好的option标签添加到省下拉框中
proSeEle.appendChild(proOpEle)
}
// 5.给省标签绑定文本域变化事件 onchange
proSeEle.onchange = function () {
citySeEle.innerHTML = ''; // 每次操作市之前清空市数据
// 6.获取用户选择的省信息 根据省获取市信息
let targetProData = this.value;
let cityDataList = data[targetProData];
// 7.循环获取每一个市信息 创建option标签 添加到市下拉框中
for (let i = 0; i < cityDataList.length; i++) {
let cityOpEle = document.createElement('option');
cityOpEle.innerText = cityDataList[i];
cityOpEle.setAttribute('value', cityDataList[i]);
citySeEle.appendChild(cityOpEle)
}
}
</script>
三、jQuery类库
1、简介
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
什么是CND
CND是网络加速服务，内容分发网络
1. 不用担心自己网站访客，在任何时间，任何地点，任何网络运营商，都能快速打开网站。
2. 各种服务器虚拟主机带宽等采购成本，包括后期运维成本都会大大减少。
3. 给网站直接带来的好处就是：流量，咨询量，客户量，成单量，都会得到大幅度提升。
jQuery导入与用法
jQuery导入之后需要使用关键字才可以使用
默认的关键字就是jQuery但是不好输入 >>>:$
jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快
jQuery与JS代码对比
1、JS代码查询标签并修改属性
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color = 'red'
pEle.nextElementSibling.style.color = 'green'
2、jQuery代码查询并修改属性
$('p').first().css('color','yellow').next().css('color', 'blue')
2、标签对象与jQuery对象
注意事项
- 不同的对象能够调用的方法是不同的
- 在编写代码的时候一定要看清楚手上是什么对象
- 两者可以互相转换
- 标签对象转jQuery对象：$(标签对象)
- jQuery对象转标签对象：jQuery对象[0]
