目录
BOM操作
JavaScript分为 ECMAScript，DOM，BOM
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”
window.open() 打开浏览器窗口
window.open('https://www.sogou.com','','width=800px,left=200px')
window.close() 关闭当前浏览器窗口
navigator.userAgent
标识自己是一个浏览器
history.forward() 前进一页
history.back() 后退一页
window.location.href
获取当前页面所在的网址 也可以在加赋值符号和网址跳转
window.location.reload() 刷新当前页面
alert() 警告框
confirm() 确认框
prompt() 提示框
计时器相关操作(重要)
let t = setTimeout(showMsg, 3000) // 3000毫秒之后执行函数
clearTimeout(t) // 取消任务
s = setInterval(func, 3000) // 每隔3000毫秒执行一次
clearInterval(s) // 取消任务
<body>
<script>
function showMsg(){
alert('快来爬取美女图片吧');
}
let t = setTimeout(showMsg,3000); //等待3秒执行
// clearTimeout(t); //取消任务
let s;
function func(){
alert('哈哈，快来玩啊')
}
s = setInterval(func,3000) //每隔3秒执行一次
function inner(){
clearInterval(s)
}
setTimeout(inner,9000) //9000毫秒后取消间隔告警框
</script>
</body>
DOM操作
DOM （Document Object Model）是指文档对象模型，通过它可以访问HTML文档的所有元素
既然DOM操作是通过js代码来操作标签 所以我们需要先学习如何查找标签之后才能给标签绑定一些JS代码(DOM操作)
查找标签
"""
1.js中变量名的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量接收 规律 xxxEle
"""
document.getElementById('d1') 结果就是标签对象本身
document.getElementsByClassName('c1')
结果是数组里面含有多个标签对象
document.getElementsByTagName('span')
结果是数组里面含有多个标签对象
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
操作节点
代码：
<body>
<div>
<p>今天天气不错 适合晒被子</p>
<a href="#">点我啊</a>
</div>
</body>
// js代码创建一个标签
let aEle = document.createElement('a')
// js代码操作标签属性
aEle.href = 'http://www.lsmpx.com/' 只能添加默认的属性
setAttribute()兼容默认属性和自定义属性
getAttribute("age")
removeAttribute("age")
// js代码操作标签文本
aEle.innerText = '这个很攒劲!'
// js代码查找div标签并将a追加到div内部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(aEle)
.innerText 获取标签内部所有的文本内容
.innerText = '文本' 替换/设置标签内部的文本(不识别标签语法)
.innerHTML 获取标签内部所有的标签包含文本
.innerHTML = '文本' 替换/设置标签内部的文本(识别标签语法)
获取值操作
代码：
<form action="">
<p>username:
<input type="text" id="username">
</p>
<p>province:
<select name="" id="pro">
<option value="干饭">111</option>
<option value="睡觉">222</option>
<option value="学习">333</option>
</select>
</p>
<p>file:
<input type="file" id="file">
</p>
</form>
var iEle = document.getElementById('username')
console.log(iEle.value);
var sEle = document.getElementById("pro")
console.log(sEle.value);
var fEle= document.getElementById("file")
console.log(fEle.value);
class与css操作
代码：
<style>
div {
height: 400px;
width:400px;
border-radius: 50%;
}
.bg_red {
background-color: red;
}
.bg_green {
background-color:greenyellow;
}
</style>
</head>
<body>
<p id="d1">今天周二啦</p>
<div id="d2" class="bg_green bg_red"></div>
</body>
let pEle=document.getElementById('d1')
pEle.style.color = 'blue';
pEle.style.fontSize = '24px';
let divEle = document.getElementById('d2')
divEle.classList
divEle.classList.contains("bg_red")
divEle.classList.toggle('bg_green')
1.js操作标签css样式
标签对象.style.属性名(下划线没有 变成驼峰体)
2.js操作标签class属性
标签对象.classList.add()
标签对象.classList.contains()
标签对象.classList.remove()
标签对象.classList.toggle()
事件
事件可以简单的理解为通过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加载完毕之后在执行后面的代码
代码：
<script>
window.onload = function (){
function showMsg(){
// let msg = prompt('你确定要这样吗?')
// console.log(msg)
console.log(this)
}
let inputEle = document.getElementById("d1");
inputEle.onclick = function (){
// alert('谁在那里点我!!!')
console.log(this.getAttribute('username'))
}
}
</script>
</head>
<body>
<!-- 绑定事件的方式1-->
<!--<button onclick="showMsg()">快按我</button>-->
<!--绑定事件的方式2-->
<input type="button" value="快快快" id="d1" username="jason">
事件实战案例
搜索框实例
<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>
jQuery类库
标签对象与jQuery对象