BOM.DOM
BOM,DOM,jQuery
BOM操作
全称: Browser OBject Model 指浏览器对象模型
window对象
window.open('网址','','width= px,height= px,left=200px') # 打开新窗口
window.close() # 关闭窗口
navigator对象
vavigator.userAgent # 标识自己是一个浏览器
history对象
模拟浏览器的前进后退按钮
history.forward() # 前进一页
history.back() # 后退一页
location对象
window.location.href # 获取当前网址
window.location.href='网址' # 跳转到后面的网址
# 刷新按钮
window.location.reload() # 刷新当前页
弹框系列
# 警告框
alert('警告信息')
"弹框"
# 确认框
confirm('确认信息')
"比较警告框多了一个确定与取消，并拥有返回值，确定=true 取消=false"
# 提示框
prompt('提升信息','可以+默认值')
"填写内容,并有确定与取消 取消=null"
计时相关(重点)
用来编写定时任务。
一次性定时任务
setTimeout（showMsg,1000(毫秒)） # 开启一个定时任务
# 存储定时任务
let t = setTimeout（showMsg,1000(毫秒)）
# 取消定时任务
cLearTimeout(t)
# 代码
<script>
function showMsg(){
alert('欢迎光临')
}
let t = setTimeout(showMsg,1500) # 保存定时任务
clearTimeout(t) # 取消定时任务
</script>
循环定时任务
setInterval(showMsg,1000) # 每隔1000毫秒执行一次
# 保存定时任务
let t = setInterval(showMsg,1000)
# 清除定时任务
cLearInterval(t)
# 函数版
"定义一个循环定时任务函数"
let t;
function func(){
alert('今天星期二')
}
t = setInterval(func,6000)
"用一个普通定时任务函数来结束这个循环任务"
function inner(){
clearInterval(t)
}
setTimeout(inner,12000) # 时间达到12秒自动使用函数内清除定时功能
DOM操作
指文档对象模型，通过它可以访问HTML所有元素。
想通过JS代码来操作标签，先要学习如何查找标签，之后才可以给标签绑定一些JS代码(DOM操作)
DOM操作关键字： document
查找标签
注意事项：
1.js中变量名的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量接收 规律
标签名+Ele
# id查找
document.getElementById('id') # 通过id值获取标签
结果是标签对象本身
let divEle = document.getElementByID('id')
"可以用一个变量名来接收这个查询标签 后面使用只需要引用这个变量名"
# 类查找
document.getElementsByClassName('class值')
结果是数组 含有多个标签对象
# 标签查找
document.getElementsByTagName('标签名')
结果也是一个数组
间接查询
# 准备工作 需要基于一个标签来进行查询操作，通过.的方式
let divele = document.getElementByID('id')
parentElement 父节点标签元素
# 可以用 .的方式获取上一级父标签
children 所有子标签
# 获取所有的儿子标签 可以加索引位获取单个
firstElementChild 第一个子标签元素
# 获取第一个儿子标签
lastElementChild 最后一个子标签元素
# 获取最后第一个儿子标签
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
// js代码创建标签
let aEle = document.createElement('a')
// JS代码操作标签属性
aEle.href = 'http://www.baidu.com/'
setAttribute('属性名','属性值') # 可以添加自定义属性与默认属性
// JS代码操作标签文本
aEle.innerText='这是百度你想啥呢'
// JS代码查找div标签并往div内部加入a标签
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(aEle)
// 把增加的节点放到某个节点的前边。 节点就是标签
divEle.insertBefore(aEle,某个节点);
注意事项：
"""对于标签添加属性 只能添加一些默认属性，不能添加自定义属性"""
.innerText // 可以获取标签内部所有文本
.innerText = '文本' // 替换文本 不识别标签语法
.innerHTML // 获取标签内部所有的HTML标签 包含文本
.innerHTML = '文本' // 替换文本 识别标签语法
获取值操作（重点）
# 在JS中找到标签对象后可以通过.value 找到用户输入或选择的值
let inputEle = document.getElementsByTagName('input')[0]
inputEle.value
# 基于文件来说 .value 只能拿到 字符串内容是当前计算机文件路径(还是假的路径)
.files # 获取文件
.files[0] # 一个文件情况可以获取 文件对象
针对多个文件可以做for循环拿出来
class与css操作
JS操作CSS样式
查找到需要操作的标签后 标签对象.style.属性名(不需要下划线，编程小驼峰体)
标签对象.style.color= '颜色' # 改颜色
标签对象.style.fontSize = '40px' # 改字体大小
# 代码
let spanEle = document.getElementsByTagName('span')[0]
spanEle.style.color='red'
spanEle.style.fontSize='29px'
JS操作class
先获取标签对象(查找到需要操作的标签)
.classList # 查看当前标签所有的class属性值
.classList.contains('属性值') # 判断是否有 属性值
.classList.add('属性值') # 添加属性值
.classList.remove（'属性值'） # 删除属性值
.classList.toggle('属性值') # 有则删 没有添加
事件(重点)
给标签添加一些自定义的功能.
onclick 当用户点击某个对象时调用的事件句柄。
onfocus 元素获得焦点。
onblur 元素失去焦点。
onchange 域的内容被改变。
绑定事件的多种方式
button 按钮标签
方式1 ：
<button onclick="showMsg()">后背好痒啊</button> #单机方式
function showMsg(){
let msg = confirm('你想帮我挠挠吗')；
console.log(msg)
}
方式2：
<input type="button" value="快挠挠吧" id="d1">
let inputEle = document.getElementById('d1');
inputEle.onclick = function(){
alert('好舒服啊')
}
补充说明
事件函数中的this(这个)关键字 通过打印操作可以帮助我们获取当前被触发事件的那个标签
"""必须使用在查询后
如果有嵌套的话必须先提前保存 let currentEle = this 防止后续变化"""
console.log(this.getAttribute('属性')) # 可以获取当前被触发事件的那个标签的属性的值
----------------------------------------------------------------------------------
<input type="button" value="快挠挠吧" id="1">
let inputEle = docment.getElementById('id');
inputEle.onclick = function(){
let currentEle = this # 如果有嵌套的话必须先提前保存防止后续变化
console.log(this) # 可以获取当前被触发事件的标签
# console.log(this.getAttribute('属性'))
}
placeholder = '用户名' 可以设置 搜索框/登录框 默认显示的值
事件练习题
1. 搜索框 显示 默认值，当鼠标点击上去清空，鼠标离开 显示
<input type="text" value="飞机" id="d2"> // 设置搜索框默认显示
<script>
let inputEle = document.getElementById('d2')
inputEle.onfocus = function () { // 元素获得焦点事件，就是鼠标点击上去时设置为空
this.value=''
}
inputEle.onblur = function (){ // 元素失去焦点事件，就是鼠标点击别的地方设置为 大爷不要走
this.value = '大爷，不要走'
}
</script>
====================================================================================
2. 用户登录 登录时的用户名与密码不符 在输入框后方提示
<p>username:
<input type="text" id="d1">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="d2">
<span style="color: brown"></span>
</p>
<button id="suBtn">提交</button>
<script>
//1.查找提交按钮
let subEle = document.getElementById('suBtn')
//2.给按钮绑定点击事件
subEle.onclick = function () {
//3.查找用户输入的标签并获取数据
let userNameEle= document.getElementById('d1')
let passWordEle = document.getElementById('d2')
if(userNameEle.value === 'sb') {
userNameEle.nextElementSibling.innerText = '用户名不可以sb哦'
}
if(passWordEle.value === '123') {
passWordEle.nextElementSibling.innerText = '密码太简单了'
}
}
# 点击输入框修改用户名 提示消失
let userNameEle = document.getElementById('d1')
userNameEle.onfocus = function (){
userNameEle.nextElementSibling.innerText = ''
}
let passWordEle = document.getElementById('d2')
passWordEle.onfocus = function (){
passWordEle.nextElementSibl
===================================================================================
3. 选择省出现对应的市
<p>省:
<select name="" id="d1">
<option value="">请选择</option>
</select>
</p>
<p>市:
<select name="" id="d2"></select>
</p>
<script>
let date = {
"河北": ["廊坊市", "邯郸市"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
"安徽": ["芜湖市", "合肥市"],
}
// 提前查找好省和市的select标签
let proSeEle = document.getElementById('d1');
let citySeEle = document.getElementById('d2');
// 1.获取所有省的信息
for (let pro in date) {
//2.创建option标签
let opTionEle = document.createElement('option');
// 3.添加文本及属性
opTionEle.innerText = pro;
opTionEle.setAttribute('value', pro);
// 4.将创号的option 标签添加到省下拉框内
proSeEle.appendChild(opTionEle)
}
// 5.给省标签绑定文本域变化事件 onchange
proSeEle.onchange = function () {
// 每次操作前清空市数据不然会叠加显示
citySeEle.innerHTML = '';
// 6 获取用户选择的省信息
let targetProData = proSeEle.value;
// 按照获取到的省获取市的信息 字典[]
let cityDataList = date[targetProData]
// 7.循环获取市信息，创建option标签 添加到下拉框内
for (let i = 0; i < cityDataList.length; i++) {
let city0pEle = document.createElement('option');
city0pEle.innerText = cityDataList[i];
city0pEle.setAttribute('value', cityDataList[i]);
citySeEle.appendChild(city0pEle)
}
}
jQuery类库
简介
一个轻量级的，兼容多浏览器的javaScript库。它的宗旨就是写的更少做的更多。
优点
1. 加载速度快
2. 选择器更多更好用
3. 一行代码走天下
4. 支持ajax请求
5. 兼容性强
导入方法
jQuery.com官网先下载核心文件到本地引入，没有网络依然可以使用。
CDN网络资源加载，必须依靠网络使用。
www.bootcdn.cn
https://www.bootcdn.cn/jquery/
# 1.本地引用：
打开源码复制到pycharm的JS文件内
再用script标签引入
# 2.网页引用：
不用复制源码直接把网页复制过去引入
使用方法
jQuery导入之后需要使用关键字才可以使用默认的关键字就是jQuery
jQuery 简化了关键字 使用 $
js代码与jQuery代码对比
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
'red'
pEle.nextElementSibling.style.color = 'green'
$('p').first().css('color','yellow').next().css('color','blue')
标签对象与jQuery对象
在我们日常使用中可能在标签对象与jQuery对象 交互使用，需要提前弄清楚手上的是什么对象
标签对象不能通过.css的方式修改样式，也不能.first 或者.next
但是 也可以通过两者转换实现
"标签对象转jQuery对象"
$(标签对象)
"jQuery对象转标签对象"
jQuery对象[0]
let pEle = document.getElementsByTagName('p')
$(pEle) # 如果有多个标签就+上索引位
