标签：对象 标签 JavaScript 基础 window let time document
今日内容概要
今日内容详细
BOM操作
window对象
BOM(Browser Object Model)是指浏览器对象模型 它使JavaScript有能力与浏览器进行'对话'
Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。
一些常用的window方法
window.innerHeight 浏览器窗口的内部高度
window.innerWidth 浏览器窗口的内部宽度
window.open() 打开新窗口
window.close() 关闭当前窗口
window的子对象
1.navigator对象
navigator.appName Web浏览器全称
navigator.appVersion Web浏览器厂商和版本的详细字符串
navigator.userAgent 客户端绝大部分信息 爬虫会用
navigator.platform 浏览器运行所在的操作系统
2.screen对象
screen.availWidth 可用的屏幕宽度
screen.availHeight 可用的屏幕高度
3.history对象
history.forward() 前进一页
history.back() 后退一页
4.location对象
location.href 获取当前URL
location.href="URL" 跳转到指定的页面
location.reload() 重新加载当前页面
5.弹出框
alert() 警告框
confirm() 确认框
prompt() 提示框
6.计时器相关操作
setTimeout() 间隔指定时间执行一次
clearTimeout() 取消setTimeout设置
setInterval() 间隔指定时间执行直到被取消
clearInterval() 取消setInterval设置
计时器小案例
function showTime(){
console.log('我运行了')
}
var start = setTimeout(showTime, 1000) // 间隔1000毫秒运行对应函数
var start = setInterval(showTime, 1000)
function stop(){
clearInterval(start)
}
var s = setTimeout(stop, 3000) //间隔3000毫秒后运行终止函数
DOM操作
查找标签
DOM(Document Object Model)是指文档对象模型 通过它可以访问HTML文档的所有元素
既然DOM操作是通过js代码来操作标签 所以需要先学习如何查找标签后才能给标签绑定一些JS代码(DOM操作)
'''
1.JS中变量名的命名风格推荐是驼峰体
2.JS代码查找到的标签如果需要反复使用可以使用变量名接收
'''
1.直接查找
document.getElementById() 根据标签ID获取一个标签
document.getElementByClassName() 根据标签class属性获取标签
decument.getElementByTagName() 根据标签名获取标签合集
2.间接查找
parentElement 父节点标签元素
children 所有字标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibing 上一个兄弟标签元素
操作节点
1.创建节点
createElement(标签名)
var divEle = createElement("div")
2.添加节点
var aEle = createElement("a")
divEle.appendChild(aEle) 追加一个字节点
divEle.insertBefore(aEle, 某个节点) 在某个节点前增加
3.操作标签属性
aEle.href = 'http://www.baidu.com/' 只能添加默认属性
setAttribute() 兼容默认属性和自定义属性
getAttribute() 获取属性对应的数据
removeAttribute() 删除指定属性
4.操作标签文本
.innerText 获取标签内部所有的文本内容
.innerText = '文本' 替换/设置标签内部的文本(不识别标签语法)
.innerHTML 获取标签内部所有的标签包含文本
.innerHTML = '文本' 替换/设置标签内部的文本(识别标签语法)
获取值操作
1.针对用户输入的和用户选择的标签
标签对象.value
2.针对用户上传的文件数据
标签对象.files 一个数组 [文件对象, 文件对象]
标签对象.files[0] 获取到一个文件对象
class与css操作
1.js操作标签css样式
标签对象.style.属性名(当遇到中线则后面的字母大写)
2.js操作标签class属性
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在则返回true 返回则返回false
classList.toggle(cls) 存在就删除 否则添加
事件
事件可以简单的理解为通过js代码给html标签绑定一些自定义的功能
常见事件
onclick 当用户点击某个对象时调用的事件句柄
onfocus 元素获得焦点
onblur 元素失去焦点
onchange 域的内容被改变
绑定事件的多种方式
方式1
<button onclick="showMsg()">来按我啊</button>
方式2
<input type='button' value="快快快" id="d1">
<script>
function showMsg(){
let msg = prompt('你确定要这样吗')
console.log(msg)
}
let inputEle = document.getElementById('d1')
inputEle.onclick = function(){
alert('谁在那里点我')
}
</script>
事件函数中的this关键字
this指代的就是当前被操作的标签对象本身
如果事件函数内有多层嵌套 那么最好在一开始用变量存储一下防止后续变化
onload方法
XXX.onload 等待XXX加载完毕之后再执行后面的代码
事件实战案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="pro" id="d1">
</select>
<select name="city" id="d2">
</select>
<script>
let data = {
"河北": ["廊坊市", "邯郸市"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
"安徽": ["芜湖市", "合肥市"],
"上海": ["浦东新区", "静安区"]
}
// 提前找好省和市的select标签
let proEle = document.getElementById('d1')
let cityEle = 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标签添加到省的下拉框中
proEle.appendChild(proOpEle)
}
// 5.给省标签绑定文本域变化事件 onchange
proEle.onchange = function (){
// 每次操作市之前清空市数据
cityEle.innerHTML = ''
// 6.获取用户选择的省信息 根据省信息获取市信息
let targetPro = this.value
let cityDataList = data[targetPro]
// 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>
</html>
jQuery类库
'''
IE浏览器:前端针对IE有时候需要单独再编写一份代码
'''
jQuery宗旨: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.getElementByTagName('p')[0]
pEle.style.color = 'red'
pEle.nextElementSibling.style.color = 'green'
$('p').first().css('color','yellow').next().css('color','blue')
标签对象与jquery对象
1.不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚手上的是什么对象
2.两者可以相互转换
标签对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="time" placeholder="">
<button id="sta">开始</button>
<button id="sto">暂停</button>
<script>
function getTime() {
let time = new Date()
let year = time.getFullYear()
let month = time.getMonth()
let day = time.getDate()
let hour = time.getHours()
let min = time.getMinutes() < 10?'0'+ time.getMinutes():time.getMinutes()
let s = time.getSeconds() < 10?'0'+ time.getSeconds():time.getSeconds()
return `${year}-${month}-${day} ${hour}:${min}.${s}`
}
let staEle = document.getElementById('sta')
staEle.onclick = function () {
function getT(){
let inpEle = document.getElementById('time')
inpEle.setAttribute('placeholder', getTime())
}
let t = setInterval(getT, 1000)
let stoEle = document.getElementById('sto')
stoEle.onclick = function () {
clearInterval(t)
}
}
</script>
</body>
</html>
标签：对象,
标签,
JavaScript,
基础,
window,
let,
time,
document
From： https://www.cnblogs.com/lzjjjj/p/16960677.html