标签：类库 jQuery DOM 对象 标签 js let document
-
BOM操作
-
DOM操作
-
查找标签
-
操作节点
-
class与css操作
-
事件
-
事件实战案例
-
jQuery类库
-
标签对象与jQuery对象
BOM操作
全称:Browser Object Model
指浏览器对象模型 它可以让js有能力与浏览器进行交互
# 打开页面
window.open('https://www.baidu.com','','width=800px,height=800') //定义窗口尺寸
#打开子页面
子页面的操作其实就是可以通过一些手段传递给父页面(父子联动)
# 关闭当前浏览器页面
window.close()
# 其他功能
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 标识自己是一个浏览器
navigator.platform // 浏览器运行所在的操作系统
window.history.forward() # 前进一页
window.history.back() # 后退一页
window.location.href # 获取当前页面所在的网址 也可以再加赋值符号和网址跳转
window.location.reload() # 刷新页面
window.location.href = url # 跳转到指定页面
# 弹框系列
# 警告框
alert()
# 确认框
confirm()
确认(true) 取消(false)
# 提示框
pormpt()
获取用户输入的内容 也可以通过第二个参数添加默认值
# 计时器相关操作(重要)
'''单次定时'''(setTimeout)
function showMsg() {
alert('miss you')
}
let t = setTimeout(showMsg,3000) # 3000毫秒之后执行showMsg函数
clearTimeout(t) # 取消定时器
'''循环定时'''(setInterval)
function showMsg() {
alert('miss you')
}
let s = setInterval(showMsg,3000) # 重复执行showMag函数 每隔3秒一次
'''规定时间内展示'''
function showMsg() {
alert('miss you')
}
let t = setInterval(showMsg,3000)
function clearMsg(){
clearInterval(t)
}
setTimeout(clearMsg,9000)
由于DOM是操作页面上的HTML代码 但是HTML页面加载顺序是从上往下
所以如果想要我们的代码能够正常执行 必须要先等待html页面加载完毕
解决的措施之一:
将script标签写在body内最下方
DOM操作
DOM （Document Object Model）是指文档对象模型，通过它可以访问HTML文档的所有元素
既然DOM操作是通过js代码来操作标签 所以我们需要先学习如何查找标签之后才能给标签绑定一些JS代码(DOM操作)
查找标签
"""
1.js中变量名的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量接收 规律 xxxEle
"""
# 通过id值查找标签
document.getElementById('d1')
结果就是标签对象本身
# 通过class值查找标签
document.getElementsByClassName('c1')
结果就是数组里面含有多个标签对象
# 通过标签名查找标签
document.getElementsByTagName('span')
结果是数组里面含有多个标签对象
'''间接查找'''
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
操作节点
//js创建一个a标签
let aEle = document.createElement('a')
//js代码设置href属性
aEle.href = 'https://baidu.com/'
//js代码操作标签文本
aEle.innerText = '神奇的海螺'
//js代码查找div标签并将a标签追加到div内部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(aEle)
'''
标签可以有默认的属性,例如id、class等,设置的时候可以直接使用点的方式
divEle.id = 'd1'
也可以有自定义属性,例如username,password等 设置的时候需要使用 setAttribute
'''
setAttribute() 兼容设置默认属性和自定义属性
getAttribute() 获取指定属性
removeAttribute() 移除指定属性
# innerText与innerHTML的区别
.innerText 获取标签内部所有的文本内容
.innerText = '文本' 替换/设置内部的文本(不识别标签语法)
.innerHTML 获取标签内部所有的标签包含文本
.innerHTML = '文本' 替换/设置标签内部的文本(识别标签语法)
获取值操作
1.获取用户输入的和用户选择的标签
标签对象.value
2.获取用户上传的文件数据
标签对象.value # 这个只能获取到文件路径，用处不大
标签对象.files # 结果为一个数组,可以通过索引获取具体文件对象
事件
事件可以简单的理解为通过js代码给html标签绑定一些自定义的功能
常见事件
onclick 当用户点击某个对象时调用的事件句柄
onfocus 元素获得焦点
onblur 元素失去焦点
onchange 域的内容被改变
......
绑定事件的多种方式
方式1:
<body>
<button onclick="showMag()">小朋友来玩呀</button>
<script>
function showMag() {
alert('打麻药 腰子嘎啦')
}
</script>
</body>
方式2:
<body>
<input type="button" value="快快快" id="d1">
<script>
let inputEle = document.getElementById('d1')
inputEle.onclick = function (){
alert('上快乐牌刀片！')
}
</script>
</body>
事件函数中的this关键字
this指代的就是当前被操作的标签对象本身
如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化
onload方法
XXX.onload 等待XXX加载完毕之后再执行后面的代码
事件实战案例
<body>
<input type="text" value="天天游乐城" id ="d1">
<script>
let inputEle = document.getElementById('d1')
inputEle.onfocus = function () {
this.value= ''
}
inputEle.onblur = function () {
this.value='欢迎下次光临！'
}
</script>
</body>
<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="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 === '窝嫩蝶'){
userNameEle.nextElementSibling.innerText = '你就这样起名字？'
}
if (passWordEle.value ==='123'){
passWordEle.nextElementSibling.innerText = '密码能这么敷衍吗？'
}
}
</script>
</body>
# 省市联动
<body>
省:
<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>
</body>
jQuery类库
'''基本'''
1.兼容多浏览器
IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
2.封装了js代码
核心代码也就几十KB 加载速度快 极大的提升编写效率
3.宗旨
"Write less, do more."
4.Ajax交互
异步提交 局部刷新
'''版本区别'''
1.x:兼容IE678
2.x:不兼容IE678
3.x:不兼容IE678 学习直接使用最新版即可
'''下载使用'''
下载地址:https://jquery.com/
1.下载核心文件到本地引入(没有网络也可以使用)
<script src="jQuery3.6.js"></script>
2.CDN网络资源加载(必须有网络才可以使用)
https://www.bootcdn.cn/
'''导入方式'''
1.本地jQuery文件
不会收到网络影响
2.CDN加速服务
需要确保有互联网
min.js 压缩之后的文件 容量更小
.js 没有压缩的文件 容量稍大
'''什么是CDN'''
内容分发网络
'''基本使用'''
将页面上的两个p标签文本内容一个变成红色 一个变成蓝色
js代码
let p1Ele = document.getElementsByTagName('p')[0]
let p2Ele = document.getElementsByTagName('p')[1]
p1Ele.style.color = 'red'
p2Ele.style.color = 'blue'
jQuery代码
$('#d1').css('color','red').next().css('color','blue')
标签对象与jQuery对象
1.不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚手上是什么对象
2.两者可以互相转换
标签对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]
标签：类库,
jQuery,
DOM,
对象,
标签,
js,
let,
document
From： https://www.cnblogs.com/super-xz/p/16961831.html