目录
BOM操作
BOM(Browser object Model) 是指浏览器对象模型 它使javascript有能力与浏览器对话
window对象
- window.innerHeight 浏览器窗口的内部高度
- window.innerWidth 浏览器窗口的内部宽度
- window.open() 打开新窗口
- window.close() 关闭当前浏览器窗口
window的子对象
浏览器对象 通过这个对象可以判断用户所有使用的浏览器 包含浏览器相关信息
navigator.appName //浏览器的全称
navigator.appVersion //浏览器厂商和版本的详细信息
history.forward() //前进页
history.back //后退页
window.location.href //获取当前页面所在的网址 也可以再加赋值符号和网址跳转
window.location //刷新当前页面
弹出框
创建删三种消息框：警告框、确认框、提示框
警告框：
alert("你是哪个？")；
确认框：
confirm('点不点？');
提示框:
prompt('请选择你答案','答案')
计时相关
可以在一定时间间隔之后来执行代码 而不是函数在调用后立即执行 称为计时事件
setTimeout()
语法：
var t = setTimeout('js语句',毫秒)
第二个参数指示从当前多少毫秒后执行的一个参数(1000毫秒等于1秒)
clearTimeout()
语法：
clearTimeout(setTimeout_variabel)
例如：
//在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(？？？)}, 3000)
//取消setTimeout设置
clearTimeout(timer);
setinterval()
按照指定的周期来调用函数或计算表达式
语法：
setInterval('JS语句',时间间隔)
clearInterval()
可取消由setInterval()设置的timeout
语法：
clearInterval(setiterval返回的Id值)
例如：
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
DOM操作
是指文档对象模型 通过它可以访问HTML文档的所有元素 是通过js代码来操作标签
查找标签
- js中变量名的命名风格推荐使用驼峰体
- js代码查找到的标签如果需要反复使用可以用变量名接收规律 xxxEle
直接查找
document.getElementById 根据ID获取一个标签
如：
document.getElementById('d1')
//结果就是标签对象本身
document.getElementsByClassName 根据class属性获取
如：
document.getElementsByTagName('span')
//结果是数组里面含有多个标签对象
间接查找
标签对象的方法
parentElement 父节点标签元素
children 所有子标签
firstElementchild 第一个子标签元素
lastElementSinling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
操作节点
js代码创建一个标签
let aEle = document.createElement('a')
js代码操作标签属性
aEle.href = 'https://www.baidu.com/' // 只能添加创建标签的默认属性
setAttribute('age', '18') //兼容默认属性和自定义属性
getAttribute('age')
removeAttribute('age')
js代码操作标签文本
aEle.innerText = '你在开玩笑嘛'
js代码查找div标签并将a追加到div内部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendchild(aEle) //添加节点
获取标签内部所有的文本内容
innerText 获取标签内部所有的文本内容
innerText = '文本' 替换/设置内部所有的标签包含文本
获取标签内部所有的标签包含文本
innerHTML 获取标签内部所有的标签包含文本
innerHTML = '文本' 替换/设置标签内部的文本(识别标签语法)
获取值操作
1. 针对用户输入的用户选择的标签
标签对象.value
2. 针对用户上传的文件数据
标签对象.files 拿到的是 fileList [文件对象、文件对象、文件对象]
标签对象.files[0] 文件对象
class的操作
js操作标签class属性
标签对象.classList.add() 添加类
标签对象.classList.contains() 存在返回true 否则返回false
标签对象.classList.remove() 删除指定类
标签对象.classList.toggle() 存在就删除 否则添加
指定CSS操作
js操作标签css样式
标签对象.style.属性名(下划线没有 变成驼峰体)
如:
标签对象.style.margin
标签对象.style.width
事件
事件可以简单的理解为通过JS代码给HTML标签绑定一些自定义的功能
常见事件：
onclick 当用户点击某一个对象时调用的事件句柄
onfocus 元素获得焦点
onblur 元素失去焦点
onchange 域的内容被改变
绑定事件的多种方式：
方式1：
<button onclik='showinfo()'>快点击我</button>
方式2：
<input type='button' value='点点点' id='d1'>
<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加载完毕之后再执行后面的代码
事件实战案例
实战一：
<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类库
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more
优势：
- 加载速度快
- 选择器更多更好用
- 一行代码走天下
- 支持ajax请求(重点)
- 兼容多浏览器
类库下载
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
jQuery导入之后需要使用关键字才可以使用
默认的关键字就是jQuery但是不好输入 >>>: $
jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快
js代码与jQuery代码对比：
js代码
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
'red'
pEle.nextElementSibling.style.color = 'green'
jQuery代码 $('p').first().css('color','yellow').next().css('color','blue')
标签对象与jQuery对象
1.不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚手上是什么对象
2.两者可以互相转换
标签对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]