JavaScript学习1
一、JavaScript应该放在什么位置？
1、行间JS，不推荐使用
优势：直接作用于当前元素，直观
劣势：
1）复用率低（无复用性）。
2）结构分离不够清晰（html、CSS 、JS）。
3）维护不方便，后期修改不方便
代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<!--行间js-->
<div id="box" onclick="alert('这里是红色警告！')"></div>
<!--
onclick - 点击
alert - 弹出
-->
</body>
</html>
执行结果如下：
2、内部JS：一般在学习时候使用。
优点：
1）结构分离清晰
2）可以复用（只存在于当前页面）
3）较利于维护和修改
劣势：
1）多页面之间无法复用。
2）多页面之间的维护较麻烦。
<script> document.querySelector('#box1').onclick = function () { alert(1); } </script>
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="box1"></div>
<!--内部js-->
<script>
document.querySelector('#box1').onclick = function () {
alert(1);
}
</script>
</body>
</html>
执行结果：
3、外部JS：推荐在工作中使用。
main.js文件内容如下：
document.querySelector('#box1').onclick = function () {
alert(1);
}
代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="box1"></div>
<!--外部js-->
<script src="studyjs/main.js"></script>
</body>
</html>
执行效果：
优势：
1）代码分离彻底
2）利于后期维护修改
3）不同页面之间也可以复用
劣势：
增加请求数量
注意：
<script src="studyjs/main.js">
//如果引用了外部的js，那么这里的js的内容放这里不会被执行，如果在当前页面写入js代码需要单独使用
</script>
script标签属性：type="text/javascript"
注意：type属性表示内同类型（MIME类型，学习网址：https://www.runoob.com/http/mime-types.html）
调试：
可以使用console.log(要打印的内容或元素)，确认内容是否正确。
console.log(document.getElementById('btn'));
查看console.log内容的步骤：
1）F12》控制台
2）鼠标右键检查》控制台
获取元素的两种方式：
获取元素的方式一：通过Id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
button{
width: 100px;
height: 50px;
text-align: center;
font: 22px/35px"微软雅黑";
margin:0;
padding: 0;
}
</style>
</head>
<body>
<button id="btn">按钮</button>
<script>
//获取元素一
document.getElementById('btn');
/* JS是区分大小写的
document - 文档
. - 的
getElementById
- get 获取
- Element 元素
- By 通过
- Id
在当前文档中.通过id获取元素
*/
// 调试：在控制台中打印出获取的元素
console.log(document.getElementById('btn'));
</script>
</body>
</html>
获取元素方式二：选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
button{
width: 100px;
height: 50px;
text-align: center;
font: 22px/35px"微软雅黑";
margin:0;
padding: 0;
}
</style>
</head>
<body>
<button id="btn">按钮</button>
<div class="box"></div>
<script>
//获取元素二：通过元素选择器选择
document.querySelector('#btn');
document.querySelector('.box');
console.log(document.querySelector('#btn'));
console.log(document.querySelector('.box'));
/*
* document.querySelector(选择器-CSS中使用的选择器)
* */
</script>
</body>
</html>
总结：通过父级找到子方法
通过父级找到子方法代码实现如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
height: 200px;
background: red;
}
div{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<!--<div id="box"></div>-->
<!--<div id="box"></div>-->
<div>这是第二个盒子</div>
<section class="wrap">
<div>这是第一个盒子</div>
</section>
<script>
// console.log(document.getElementById('box1'));// 获取一个错误的id
// console.log(document.getElementById('box'));
/*
* document.getElementById()
* - 通过ID进行获取
* - 如果获取一个不存在的ID，得到的结果是null
* - getElementById只有document下右，id是当前页面中唯一的
* - 遇到一个符合条件的元素，返回第一个元素
* */
// 通过父级找到子方法有两种如下
console.log(document.querySelector('.wrap').querySelector('div'));
// console.log(document.querySelector('.wrap div'));
/*
* document.querySelector()
* - 通过选择器进行获取
* - 遇到第一个符合条件的元素，返回第一个元素
* - 如果获取一个不存在的ID，得到的结果是null
* - document/parent：通过文档或者父级使用。
* - IE8 以下不可以使用
* */
</script>
</body>
</html>
4、script标签最合适的放置位置
页面读到<body>标签的时候开始解析页面。当页面结构未发生的时候，在<head>标签中的JS代码如果获取元素，将获取失败。
两种解决方案：
1）JS代码放在<head>中，不推荐这样，如果非要这样的话，需要使用窗口加载window.onland(等待窗口加载完成)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
button{
width: 100px;
height: 50px;
text-align: center;
font: 22px/35px"微软雅黑";
margin:0;
padding: 0;
}
</style>
<script>
// null - 获取的元素不存在
// console.log(document.querySelector('#btn');
// console.log(document.getElementById('btn'));
/*
* window.onload - 等待窗口加载
* function (){
* //放置窗口加载完成之后做的事情
* }
* */
window.onload = function () {
// console.log(document.querySelector('#btn'));
console.log(document.getElementById('btn'));
}
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
2）JS代码放在<body>中，让HTML结构先行加载完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
button{
width: 100px;
height: 50px;
text-align: center;
font: 22px/35px"微软雅黑";
margin:0;
padding: 0;
}
</style>
</head>
<body>
<button id="btn">按钮</button>
<script>
/*
* 这里的JS代码会等待前面的body页面的元素先行渲染，然后再加载
* 工作中推荐使用的方法
* */
// console.log(document.querySelector('#btn');
console.log(document.getElementById('btn'));
</script>
</body>
</html>
运行结果：
注意：如果JS代码比较庞大，需要较长的时间读取，会影响页面的加载，造成页面长时间的空白。从用户体验来说，长时间空白会让用户绝对打开的速度很慢，从而造成用户的流失。
案例代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
button {
width: 100px;
height: 50px;
text-align: center;
font: 22px/35px "微软雅黑";
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!--1准备按钮-->
<button id="btn">按钮</button>
<script>
//2获取元素//3绑定事件
document.querySelector('#btn').onclick = function () {
// 4当元素被点击时候，要做的事情
// alert(1);
// 5获取按钮//6修改元素样式：修改背景色
document.querySelector('#btn').style.background = 'red';
}
/*
* onclick - 点击
* function(){ // 点击后要做的事情} - 函数
*
* style 元素的样式
* style 样式
* background 背景（相关样式）
* ele.style.属性 = '属性值'
* */
</script>
</body>
</html>
运行结果如下：
