前端三剑客之 JavaScript (BOM操作和DOM操作)
BOM操作
// window 操作
window.innerHeight // 浏览器窗口的内部高度
window.innerWidth // 浏览器窗口的内部宽度
window.open() // 打开新窗口
window.close( ) // 关闭当前窗口
window.navigator.appName // Web浏览器全称
window.navigator.appVersion // Web浏览器厂商和版本的详细字符串
window.navigator.userAgent // 客户端绝大部分信息
window.navigator.platform // 浏览器运行所在的操作系统
window.history.forward() // 前进一页
window.history.back() // 后退一页
window.location.href // 当前页面获取URL
window.location.href="URL" // 跳转到指定页面
window.location.reload() // 重新加载页面
// 弹窗
alert() // 警告框
confirm() // 确认框
prompt() // 提示框
// 定时
setTimeout('需要定时的函数',1000); // 设置单次定时触发
clearTimeout(t) // 清除
setInterval('需要定时的函数',1000); // 设置循环触发
clearInterval(t) // 清除
DOM操作
通过JS代码操作html页面，实现相应效果
要想操作html页面，实现相应动态效果，第一步还是得先解决查找标签的事情
查找标签
直接查找
document.getElementById('需要查找的id') // 用id查找
document.getElementsByClassName('需要查找的类名') // 用类名查找
document.getElementsByTagName('需要查找的标签名') // 用标签名查找
间接查找
使用方法：
var dEle = document.getElementById('p1');
dEle.parentElement
parentElement //父节点标签元素
children //所有子标签
firstElementChild //第一个子标签元素
lastElementChild //最后一个子标签元素
nextElementSibling //下一个兄弟标签元素
previousElementSibling //上一个兄弟标签元素
节点操作
-
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') // d1为需要插入的位置标签id 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'
事件绑定
常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
两种绑定事件的方法
- 标签内直接调用相应事件函数
- 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)
}
}
