BOM操作、DOM操作、jQuery类库
一、BOM操作
BOM（Browser Object Model）是指浏览器对象模型，它使JavaScript有能力与浏览器进行对话1.window对象
浏览器相关配置
1.window.open('https://www.sogo.com/','','width=1000px,left=200px')
打开新窗口，window.open('url地址','打开方式(可以为空)','窗口的大小')
2.window.innerWidth # 浏览器窗口的内部宽度
3.window.innerWidth # 浏览器窗口的内部高度
4.window.close() # 关闭当前窗口2.navigator对象
判定用户使用的浏览器，包含了浏览器相关信息
1.navigator.appName # web浏览器的全称
'Netscape'
2.navigator.appVersion # web浏览器厂商和版本的详细字符串
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
3.navigator.userAgent # 客户端绝大部分信息
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
4.navigator.platform # 浏览器所在的操作系统
'Win32'3.history对象
浏览历史对象
1.history.forward # 向前一页
ƒ forward() { [native code] }
2.history.back # 向后一页
ƒ back() { [native code] }4.location对象
window.location用于获得当前页面的地址(url),并把浏览器重定向到新的页面
1.window.location.href # 获取url
'https://www.sogou.com/'
2.window.location.href='https://www.sogo.com/' # 跳转到指定的页面
3.window.location.reload() # 重新加载页面5.弹出框
1.警告框，确保用户可以得到一些信息
window.alert('有没有好好学习')
undefined
2.确认框，当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
window.confirm('(*❦ω❦)确定吗？')
true
3.提示框，用户需要输入某个值，然后点击确认或者取消按钮才能继续操作
window.prompt('请输入你今天想要做的事情')
'学习，学习，学习，学习，学习，学习，没有了'6.计时相关操作
通过js我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为计时事件
1.setTimeout() # 只执行一次
function showMsg() {
alert('好好学习哦')
}
let t = setTimeout(showMsg,3000) # 多少毫秒起执行第一个参数
2.clearTimeout() # 清除定时器
clearTimeout(t)
3.setInterval() # 无限次执行
4.clearInterval() # 清除定时器
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
let s;
function func() {
alert('好好学习')
}
s = setInterval(func,3000)
function inner() {
clearInterval(s)
}
setInterval(inner,2000)二、DOM操作
1.DOM操作简介
DOM(Document Object Model) 是指文档对象模型，通过它可以访问HTML文档的所有元素
DOM操作是通过js代码来操作标签 我们需要先学习如何查找标签之后才能给标签绑定一些JS代码(DOM操作)
2.查找标签
html代码：
<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>
直接查找：
1.document.getElementById('d1') # 获取标签对象本身
<div id="d1">…</div>
2.document.getElementsByClassName('c1') # 结果是数组里面含有多个标签对象
HTMLCollection [p.c1]
3.document.getElementsByTagName('span') # 结果是数组里面含有多个标签对象
HTMLCollection(7) [span, span, span, span, span, span, span]
间接查找:
1.parentElement 父节点标签元素
2.children 所有子标签
3.firstElementChild 第一个子标签元素
4.lastElementChild 最后一个子标签元素
5.nextElementSibling 下一个兄弟标签元素
6.previousElementSibling 上一个兄弟标签元素3.操作节点
js代码查找到的标签如果需要反复使用可以用变量接收 规律 xxxEle
1.创建节点
let aEle = document.createElement('div')
2.添加节点
var imgEle = document.createElement('img')
undefined
imgEle.setAttribute("src","1.png")
var d1Ele = document.getElementById('d1')
d1Ele.appendChild(imgEle) # 添加节点
3.js代码操作标签属性
let a1Ele = document.createElement('a')
a1Ele.href = 'https://www.sogo.com/'
a1Ele.setAttribute("age",18)
undefined
a1Ele.getAttribute("age")
'18'
4.删除节点
a1Ele.removeAttribute("age")
undefined
5.js代码操作标签文本
a1Ele.innerText="好好学习"
'好好学习'
6.js代码查找div标签并将a追加到div内部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(a1Ele)
文本节点的操作方法：
.innerText # 获取标签内部所有文本内容
.innerText = '文本' # 替换标签内部的文本
.innerHTML # 获取标签内部所有的标签包含文本
.innerHTML = '内容' # 获取标签内部所有的标签包含内容4.获取值操作
1.针对用户输入的和用户选择的标签
语法：标签对象.value
适用于input,select,textarea
2.针对用户上传的文件数据
标签对象.files fileList [文件对象，文件对象，文件对象]
标签对象.files[0] 文件对象
html代码：
<form action="">
<p>
username:
<input type="text" id="d1">
</p>
<p>
choice:
<select name="" id="pro">
<option value="干饭">63336</option>
<option value="学习">64444</option>
<option value="好好学习">66655</option>
</select>
</p>
<p>
file:
<input type="file" id="file">
</p>
</form>
5.类属性操作
1.获取当前标签所有类的值
标签对象.classList
2.判断当前标签是否有这个属性
标签对象.classList.contains() # 存在返回true，否则返回false
3.给当前标签添加一个类值
标签对象.classList.add()
4.删除当前标签指定类的属性
标签对象.classList.remove()
5.存在就删除，否则添加
标签对象.classList.toggle()
6.样式操作
标签对象.style.backgroundColor = 'red' # 将标签的背景色设置为红色
js操作css属性的规律
1.对于没有横线的css属性一般使用style.属性名就好了
obj.style.margin
obj.style.width
obj.style.left
obj.style.postion
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily三、事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
事件简单来说就是给html绑定了一些额外的功能，能够触发js代码的运行1.常用事件
onclick # 当用户点击某个对象时调用事件
ondblclick # 当用户双击某个对象时调用的事件
onfocus # 元素获取焦点
onblur # 元素失去焦点 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange # 域的内容被改变 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown # 某个键盘的键被按下
onkeypress # 某个键盘按键被按下并松开。
onkeyup # 某个键盘按键被松开。
onload # 页面加载完成
onmousedown # 鼠标按钮被按下
onmousemove # 鼠标按钮被移动
onmouseout # 鼠标从某元素移开
onmouseover # 鼠标移到某元素之上
onselect # 在文本框被选中时发生
onsubmit # 确认按钮被点击，使用的对象是form。2.绑定事件的两种方式
<input type="button" value="点我" onclick="func()">
<button id="d1">点一哈</button>
<script>
//绑定事件的方法1：提前写好函数，标签内部指定函数调用，设置点击属性
function func(){
alert('点到了')
}
//绑定事件的方法2：先查找标签，然后批量绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function () {
alert('又点到了')
}
</script>3.事件中的关键字this
<input type="button" value="点我" onclick="func()">
<button id="d1">点一哈</button>
<script>
//绑定事件的方法1：提前写好函数，标签内部指定函数调用，设置点击属性
function func(){
alert('点到了')
console.log(this)
}
//this 是当前操作的document文档
//绑定事件的方法2：先查找标签，然后批量绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function () {
alert('又点到了')
console.log(this)
}
搜索框实例：
<input type="text" value="要点吗" id="d1">
<script>
let inputEle = document.getElementById('d1')
inputEle.onfocus = function () {
this.value = ''
}
inputEle.onblur = function () {
this.value = '欢迎下次再来'
}
</script>4.window.onload
当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
注意：.onload()函数存在覆盖现象。
<script>
window.onload = function(){
页面js代码
}
</script>5.js之校验用户数据
<p>username:
<input type="text" id="d1">
<span style="color: lightblue"></span>
</p>
<p>password:
<input type="text" id="d2">
<span style="color: lightblue"></span>
</p>
<button id="suBtn">提交</button>
<script>
//查找按钮标签
let btnEle = document.getElementById('suBtn')
//绑定单击事件
btnEle.onclick = function () {
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>6.JS事件之省市联动
<body>
省：
<select name="" id="d1">
</select>
市：
<select name="" id="d2">
</select>
<script>
let data = {
'浙江': ['金华', '杭州'],
'上海': ['浦东', '青浦'],
'海南': ['三亚', '海口'],
'四川': ['成都', '德阳'],
'安徽': ['池州', '合肥']
}
let proEle = document.getElementById('d1');
let cityEle = document.getElementById('d2');
//获取所有省的信息
for (let pro in data){
//创建option
let proOpEle = document.createElement('option');
//添加文本及属性
proOpEle.innerText = pro;
proOpEle.setAttribute('value',pro);
// 4.将创建好的option标签添加到省下拉框中
proEle.appendChild(proOpEle)
}
// 5.给省标签绑定文本域变化事件 onchange
proEle.onchange = function () {
//每次操作之前先清空之前的
cityEle.innerHTML = '';
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])
cityEle.appendChild(cityOpEle)
}
}
</script>
</body>四、jQuery
1.jQuery
jQuery是一个轻量级的、兼容多浏览器的java库
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大简化JavaScript编程。2.jQuery的优势
1.一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2.丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3.链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4.事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5.Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6.跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7.插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。3.类库的导入
1.CDN加速服务(在head内的script中加入)
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
2.jQuery官网下载后本地导入
<script src="jquery.js"></script>
注意：使用jQuery必须要先导入，本质就是js文件
"""
jQuery() >>> $()
"""作业
1.校验用户数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<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="d3">提交</button>
<script>
let usernameEle = document.getElementById('d1');
let passwordEle = document.getElementById('d2');
let subBtn = document.getElementById('d3');
subBtn.onclick = function () {
if (usernameEle.value === 'jason'){
usernameEle.nextElementSibling.innerText = '用户名不能是jason'
}
if (passwordEle.value === '123'){
passwordEle.nextElementSibling.innerText = '密码不能是123'
}
}
usernameEle.onfocus = function () {
this.nextElementSibling.innerText = ''
}
passwordEle.onfocus = function () {
this.nextElementSibling.innerText = ''
}
</script>
</body>
</html>
2.页面计时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<input type="text" id="d1">
<button id="startBtn">开始</button>
<button id="stopBtn">结束</button>
<script>
// 先写最简单的起步>>>:点击开始按钮 将那一刻的时间展示到input框中即可
// 想让展示时间的代码能够根据时间的变化反复的执行>>>:循环定时任务
// 再创建结束按钮点击即终止循环定时任务的执行>>>:结束定时任务
let startBtnEle = document.getElementById('startBtn');
let inputEle = document.getElementById('d1');
let stopBtnEle = document.getElementById('stopBtn');
function showTime() {
let currentTime = new Date();
inputEle.value = currentTime.toLocaleString()
}
// 全局定义一个存储计时器的变量名
let t;
startBtnEle.onclick = function () {
if(!t){
t = setInterval(showTime, 1000)
}
}
stopBtnEle.onclick = function () {
clearInterval(t)
t = null;
}
</script>
</body>
</html>手机扫一扫
移动阅读更方便
你可能感兴趣的文章