引入方式
内部脚本
外部脚本
变量
使用let声明变量,弱类型,使用const声明常量
因为箭头函数中this指针有问题,会默认指向父级对象
DOM
文档对象模型,将标记语言的各个部分封装成对应的对象。js通过dom就能够对html进行操作
代码示例:
<body>
<h1>js文档对象模型DOM</h1>
<!-- DOM的思路就是万物皆对象,网页中的所有元素都是一个个对象,通过DOM可以对网页中的元素进行操作。 -->
<!-- DOM的三个主要对象:document、window、element。 -->
<h1 id = "title1">111</h1>
<h1 id = "title2">222</h1>
<h1 id = "title3">333</h1>
<script>
// 修改第一个标题中的文本内容
// 获取到第一个dom对象,调用其方法修改文本内容
document.querySelector("#title1").innerHTML = "修改后的标题1";
let h1 = document.querySelectorAll("h1"); // 获取到一个集合
// 遍历所有h1对象,修改其文本内容
for(let i = 0; i < h1.length; i++){
h1[i].innerHTML = "修改后的标题" + (i+1);
}
</script>
</body>
事件监听
代码示例
<body>
<input type="button" id="btn1" value = "点我一下试试">
<input type="button" id="btn2" value = "点我">
<script>
// 给按钮添加点击事件,新方法,可以多次绑定同一事件
document.querySelector('#btn1').addEventListener('click', () => {
console.log('点就点呗');
});
document.querySelector('#btn1').addEventListener('click', () => {
console.log('再点一次试试');
});
// 给按钮添加点击事件,老方法,只能绑定一次事件,会覆盖
document.getElementById('btn2').onclick = function() {
console.log('老方法,只能绑定一次事件,会覆盖');
}
document.getElementById('btn2').onclick = function() {
console.log('老方法,把前面的覆盖了');
}
</script>
</body>
<script>
// 给上述表格的数据行添加事件监听,实现鼠标进入后变色,使用新语法
let trs = document.querySelectorAll('p');
for(let i = 0; i < trs.length; i++) {
trs[i].addEventListener('mouseenter', function() {
this.style.backgroundColor = 'yellow';
});
trs[i].addEventListener('mouseleave', function() {
this.style.backgroundColor = 'white';
});
}
</script>
常见事件
js代码的优化:大量的监听事件代码功能可复用,减小编写数量