(╥╯﹏╰╥)ง衣锦还乡、光宗耀祖支撑着我去教室
---------------------不定时的更新叕开始了，且更且珍惜------------------------
我要每次都写一遍：前面的还没补完，以此催促不定时更新的我
------------------------------------------------------------------------------------------------
Ⅰ BOM和DOM简介
☄什么是BOM和DOM？
BOM：Browser Object Model，是指浏览器对象模型，
它使 JavaScript 有能力与浏览器进行“对话”。
DOM ：Document Object Model)，是指文档对象模型，通过它，
可以访问HTML文档的所有元素。
☄为什么要学BOM和DOM
到目前为止，我们已经学过了JavaScript的一些简单的语法。
但是这些简单的语法，并没有和浏览器有任何交互。
也就是我们还不能制作一些我们经常看到的网页的一些交互，
我们需要继续学习BOM和DOM相关知识。
JavaScript分为 ECMAScript，DOM，BOM。
▲补充：
★ windows对象
* 所有浏览器都支持 window 对象。它表示浏览器窗口。
* 如果文档包含框架(frame 或 iframe 标签)，浏览器会为
HTML文档创建一个 window 对象，并为每个框架创建
一个额外的window 对象。
* 没有应用于 window 对象的公开标准，不过所有浏览器
都支持该对象。
* 所有 JavaScript 全局对象、函数以及变量均自动成为
window 对象的成员。
* 全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
* HTML DOM 的 document 也是 window 对象的属性之一。
一些常用的Window方法：
♦ window.innerHeight - 浏览器窗口的内部高度
♦ window.innerWidth - 浏览器窗口的内部宽度
♦ window.open() - 打开新窗口
♦ window.close() - 关闭当前窗口
* Window对象是客户端JavaScript最高层对象之一，
由于window对象是其它大部分对象的共同祖先，
在调用window对象的方法和属性时，
可以省略window对象的引用。
例如：window.document.write()可以简写成：document.write()。
1|2window的子对象
★ navigator对象（了解即可）
浏览器对象，通过这个对象可以判定用户所使用的浏览器，
包含了浏览器相关信息。
navigator.appName // Web浏览器全称 navigator.appVersion // Web浏览器厂商和版本的详细字符串 navigator.userAgent // 客户端绝大部分信息 navigator.platform // 浏览器运行所在的操作系统
★ screen对象（了解即可）
屏幕对象，不常用。
一些属性：
♦ screen.availWidth - 可用的屏幕宽度
♦ screen.availHeight - 可用的屏幕高度
★ history对象（了解即可）
window.history 对象包含浏览器的历史。
浏览历史对象，包含了用户对当前页面的浏览历史，
但我们无法查看具体的地址，可以简单的用来前进或
后退一个页面。
history.forward() // 前进一页
history.back() // 后退一页
★ location对象
window.location 对象用于获得当前页面的地址 (URL)，
并把浏览器重定向到新的页面。
常用属性和方法：
location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载页面
★ 弹出框
可以在 JavaScript 中创建三种消息框：
警告框、确认框、提示框。
警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：
alert("你来了？");
确认框（了解即可）
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮
才能继续进行操作。
如果用户点击确认，那么返回值为 true。
如果用户点击取消，那么返回值为 false。
语法：
confirm("你确定吗？")
提示框（了解即可）
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认
或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。
如果用户点击取消，那么返回值为 null。
语法：
prompt("请在下方输入","你的答案")
★计时相关
通过使用 JavaScript，我们可以在一定时间间隔之后
来执行代码，而不是在函数被调用后立即执行。
我们称之为计时事件。
♦ setTimeout()
语法：
var t=setTimeout("JS语句",毫秒)
setTimeout() 方法会返回某个值。在上面的语句中，
值被储存在名为 t 的变量中。假如你希望取消这个
setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript
语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，
或者对函数的调用，诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数
（1000 毫秒等于一秒）。
♦ clearTimeout()
语法：
clearTimeout(setTimeout_variable)
举个例子：
// 在指定时间之后执行一次相应函数 var timer = setTimeout(function(){alert(123);}, 3000) // 取消setTimeout设置 clearTimeout(timer);
♦ setInterval()
setInterval() 方法可按照指定的周期（以毫秒计）
来调用函数或计算表达式
setInterval() 方法会不停地调用函数，直到 clearInterval()
被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作
clearInterval() 方法的参数。
语法：
setInterval("JS语句",时间间隔)
返回值
一个可以传递给 Window.clearInterval() 从而取消对
code 的周期性执行的值。
♦ clearInterval()
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的
ID 值。
语法：
clearInterval(setinterval返回的ID值)
举个例子：
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);
Ⅱ BOM和DOM的操作
☄BOM操作
操作浏览器，需要调用window对象，它是所有浏览器都支持的对象，
表示的就是浏览器窗口
window对象可以通过点调用子对象
♦ window.navigator
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
♦ window.screen
♦ window.history
history.forward() // 前进一页
history.back() // 后退一页
♦ window.location(重点)
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
♦ 弹出框
警告框(alert)
确认框(confirm)
提示框(prompt)
♦ 计时器相关(重点)
-
-
setTimeout与clearTimeout(设置单次定时触发，清除)
-
setInterval与clearInterval(循环触发，清除)
function f1() {
alert(123);
}
function clear() {
var t = setInterval(f1,3000);
function inner() {
clearInterval(t);
}
setTimeout(inner,9000)
}
clear();
-
☄DOM操作
通过JS代码操作html页面，实现相应效果
要想操作html页面，实现相应动态效果，第一步还是得先解决查找标签的事情
☆ 查找标签
♢直接查找
document.getElementById
document.getElementsByClassName
document.getElementsByTagName
♢间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
js代码在书写时，一定要保证在页面html文件全部加载完毕后
才能正常执行，否则报错。两种解决方式
▪ window.onload = function(里面写js代码)title标签内部
▪ js写在html文档最下方
☆节点操作
• 1.创建节点，2.添加自定义属性，3.添加固有属性，
4.添加到DOM树中浏览器展示
// appendChild 直接尾部添加
// 创建标签
var imgEle = document.createElement('img');
// 设置自定义属性
imgEle.setAttribute('id','i1')
// 设置固有的属性
imgEle.src = 'longzhu.png'
// 添加到DOM树中，让浏览器展示出来
var d1Ele = document.getElementById('d1')
d1Ele.appendChild(imgEle)
• 1.创建节点，2.添加固有属性和标签文本值，
3.指定位置添加标签
// insertBefore 固定位置添加
// 创建标签
var aEle = document.createElement("a")
aEle.href = 'https:www.baidu.com'
aEle.innerText = '点我点我'
// 获取参考点标签
var d3Ele = document.getElementById('d3')
var s1Ele = document.getElementById('s1')
// 在d3标签内部，s1标签上方添加创建的a标签
d3Ele.insertBefore(aEle,s1Ele)
• innerText和innerHTML的区别
// 获取一个标签 var d2Ele = document.getElementById('d2'); // 仅仅能获取到d2标签的内部文本 d2Ele.innerText // 不仅获取文本，标签页全部获取到 d2Ele.innerHTML // 获取标签 var d2Ele = document.getElementById('d2'); // 设置内部文本 d2Ele.innerText = '哈哈' d2Ele.innerHTML = '呵呵' // 设置内部文本(文本中包含标签) d2Ele.innerText = '<h1>我是h1</h1>' // 不认识html标签 d2Ele.innerHTML = '<h1>我是h1</h1>' // 能够识别html标签
• 获取值操作
// 用于获取用户选择或输入的标签
input
select
textarea
// 获取值
demoEle.value
// 设置值
demoEle.value = '我改了'
• class操作
// 注意点：通过class获取到的数据是一个数组，需要通过索引拿到单个对象
// 根据class找到相应的标签对象
var c1Ele = document.getElementsByClassName('c1')[0]
// 获取该标签对象的class属性列表并移除背景红色
c1Ele.classList.remove('bg-red')
// 添加属性
c1Ele.classList.add('bg-green')
// 判断是否存在
c1Ele.classList.contains('bg-green')
c1Ele.classList.contains('bg-red')
// 有则删除，无则添加
c1Ele.classList.toggle('bg-green')
• style样式操作
// 修改高度样式
d1Ele.style.height = '200px'
// 修改宽度样式
d1Ele.style.width = '200px'
// 修改背景色样式
d1Ele.style.backgroundColor = 'blue'
☆ 事件绑定
♢ 两种绑定事件的方法
• 标签内直接调用相应事件函数
• js代码自动查找标签并绑定事件
<div class="bg-red " id="d1"></div> <button id='b1' onclick='change();'>开关1</button> <button id='b2'>开关2</button> <script> // 标签直接绑定事件 function change(){ var d1Ele = document.getElementById('d1'); d1Ele.classLict.toggle('bg-green'); } // 通过JS代码绑定事件 var b2Ele = document.getElementById('b2'); b2Ele.onclick = ()=>{ change(); }
♢ 搜索框案例
<input type="text" value="苹果手机" id="i1"> var i1Ele = document.getElementById('i1'); i1Ele.onfocus = function (ev) { i1Ele.value = ''; // 也可以直接用this this.value = '' }; i1Ele.onblur = function (ev) { i1Ele.value = '苹果电脑'; // 也可以直接用this this.value = '苹果电脑' }
♢ 计时器案例
// 全局变量
var t;
// 步骤1
// 将当前时间填写到i1中
var now = new Date();
var i1Ele = document.getElementById('i1');
i1Ele.value = now.toLocalString();
// 步骤2(点开始，时间动起来)>>>(每隔一秒执行一次展示时间操作)
// 将添加时间的功能封装成一个函数
function showTime(){
var now = new Date();
var i1Ele = document.getElementById('i1');
i1Ele.value = now.toLocalString();
};
// 页面一刷新先展示当前时间
showTime()
// 找到开始按钮，绑定事件
var b1Ele = document.getElementById('b1');
b1Ele.onclick = function(){
// 判断是否已经开启过定时器了
if (!t){
// t指代定时器
t = setInterval(showTime,1000);
}
}
// 步骤3(给停止按钮绑定事件，点击后清除定时器)
var b2Ele = document.getElementById('b1');
b2Ele.onclik = function(){
// 问题来了，清除谁呢？需要有一个变量指代定时器
clearInterval(t)；
}
// 步骤4(如果点击多次开始按钮，发现无法清除定时器)
// 判断定时器是否已开启
♢ 省市联动案例
data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}; // 先提前将两个标签对象查找到 var pEle = document.getElementById('province'); var cEle = document.getElementById('city'); // 先展示省份信息 for (var province in data){ var proEle = document.createElement('option'); proEle.innerText = province; pEle.appendChild(proEle) } // 绑定变化事件 pEle.onchange = function () { // 获取对应的省信息 var currentProvince = pEle.value; // 将之前的省对应的市清除 cEle.innerHTML = ''; // 添加默认的请选择项 var newEle = document.createElement('option'); newEle.innerText = '请选择'; cEle.appendChild(newEle); // 获取当前省对应的市 relCity = data[currentProvince]; // 循环对应的市，添加到市对应的选择框中 for(var i=0;i<relCity.length;i++){ var cityEle = document.createElement('option'); cityEle.innerText = relCity[i]; cEle.appendChild(cityEle) } }
