版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xyyojl/article/details/82764691
- js的代码写在哪里?
- 如何获取操作元素的权力(DOM)
- 操作元素权力一次性,操作100次需要用到变量(给人起文字 = 变量名),变量的命名规范
- 三种声明变量的方式的区别
- 注释
- innerHTML /innerText
- onload/defer
js代码写在哪里?
- 行内,写在标签属性里面,不推荐使用
- 内部,代码需要放在script(双标签)标签里面,script标签的位置任意,解析到script标签的时候,交给js解析器
- 外部js文件,利用src属性引入
- script可以防止于任何位置,不同的位置要注意加载顺序,通常放在head或body结束之前
如何获取操作元素的权力
给一个方法(DOM提供的)/api 传递一个 名字,这个方法会通过这个名字去找到
对应的标签,确定标签存在时,就返回这个标签的操作权力
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box" style="width: 200px;"></div>
<script>
//document.getElementById("box");
/*
通过id获取标签的操作权力
docuement 文档
getElementById("id") 通过id获取元素
必须带括号,不需要加#,因为已经说明是通过id获取
只要是方法的东西都要带括号
*/
//需要给标签注册一个点击事件
//div#box 有一个点击事件 = 小纸条把要做的事全部记录下来
document.getElementById("box").onclick = function(){
//这个花括号里就是 纸条上记录的内容
//第一件事,弹出一个窗口,(BOM)对应的方法控制效果
alert("这是一个弹窗");
//第二件事,点击div的时候,添加内容,操作对象,用完就没有了,第二次使用要重新在写一次
document.getElementById("box").innerHTML = "风屿大帅比";
//需要触发事件,才执行里面的代码,所以一开始没有展示什么
//操作100次,怎么办?设置一些一些专门用来标记的东西
}
</script>
</body>
变量的命名规范
- 不能纯数字
- 不能以数字开头
- 名字严格区分大小写
- 不能使用关键字和保留字(目前没有特殊意义,以后可能会有)
- 可以使用符号 (最好是英文符号,$,_)
- 虽然可以使用中文作为名字,但是非常不推荐使用
- 不能使用四则运算符
变量应该是英文符号或者是英文字母开头,中间可以有数字,但是开头不能有数字或者全部纯数字
可以声明多个变量,变量不一定要马上赋值
声明变量
用来声明变量的关键字: var let const class function import
三个声明变量(var let const)的区别,通常情况下,龙头老大是window
//在script标签里面的第一层,全局变量
/*
var 全局变量 会自动的成为window 的属性
let 和 const 声明的全局变量 不会成为 window的属性 不能在
js出生时带来的一个不好的弊端 尽量不要使用 var 会存在变量提升
let const必须先声明,后使用,不提前声明会报错
let 和 const 的区别
let 声明的 叫做 变量 ,可以被改变
const 声明的 叫做 常量 ,不可以被改变(通过等号重新赋值),恒定
*/
//调试方式console.log()打印日志
//字符串一定要加引号,关键字和变量不需要加引号
var a = 1;
let b = 2;
console.log(b); //打印2
b = 123;
console.log(b); //打印123
const c = 3;
console.log(c); //打印3
c = 4; //会报错,提示不能给常量赋值
什么时候使用let/const?
- let 声明的变量可以重新赋值,需要对它重新赋值
- const 声明的变量不可以重新赋值,不需要对它重新赋值
es6 老版本的浏览器不兼容,IE基本全不兼容
使用第三方工具(webpack)es6转换es5代码,如果es5本身有兼容IE的,就需要自己写
注释
单行注释
//单行注释
多行注释
/*
多行注释
多行注释
*/
###innerHTML和innerText的区别
| innerHTML/innerText | 含义 |
|---|---|
| innerHTML | 可以解析标签,希望解析标签的时候使用 |
| innerText | 就是纯文本 不会解析标签 |
| innerHTML/innerText | 内容没有标签,两者都可以 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box" style="width: 500px;"></div>
<p id="p1"></p>
<script>
let box1 = docuement.getElementById("box");
let p = document.getElementById("p1");
//box1 代表id值为box的 div的操作权力
//box1 就是id值为box的 div 这个标签的本身/本体
//DOM 0级 同类只能绑定一次
box1.onmousernter = function(){
console.log("鼠标进来了");
box1.innerHTML = "<a href="https:www.baidu.com">这是鼠标移入事件的内容</a>";
//拿到box1的id
console.log(box1.id);
//直接对象.style,操作的是行内样式
console.log(box1.style.width);
box1.style.width = "400px";//更改该标签的width值,操作的是行内样式值
}
box1.onmouseleave = function(){
console.log("鼠标出去了");
box1.innerText = "<a href="https:www.baidu.com">这是鼠标移出事件的内容</a>";
p.innerHTML = "123";
}
</script>
</body>
###小提示
//在上面那个代码的基础上,增加上去,放在事件里面
let str = p.innerHTML;//不代表p的本身,代表的p的内容,只是数据而已
//str只是代表p标签里面的内容
//带等号是赋值,不带是设置
str = 1234;//相当于是重置变量的值,不能给p.innerHTML设置为1234
p.innerHTML = 123;//这个才是真正的给p.innerHTML 设置值
p.innerHTML = str;
console.log(str);
onload/defer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script>
let divBox = document.getElementById("box");//获取不到,返回null ==> null不能设置属性
divBox.onclick =function(){
console.log("鼠标移入了");
}
//效果没有出现,按f12==>看一下控制台有没有红叉出现,Uncaught TypeError: Cannot set property 'onclick' of null,属性不能设置为空
//报错类型:报错提示
/*
解决思路:
代码大致是从上往下
不能给null设置属性 ==> 这个对象为null,一定是document.getElementById("box")没有获取到 ==> 标签还没加载 ==> script标签的位置
*/
/*
如果script一定要写在head标签里面
解决办法:
1.把那些内容放在下面这里,window.onload 等待加载完成后才执行
window.onload = function(){
let divBox = document.getElementById("box");
divBox.onclick =function(){
console.log("鼠标移入了");
}
}
2.采用外部js文件
2.1直接把解决办法1的内容放到外部js里面
//1.js内容
2.2延迟加载,等整个文件加载完成以后,也就是defer 在window.onload的之前,只对外部js有用
<script src="1.js" defer></script>
*/
</script>
</head>
<body>
<div id="box"></div>
<script>
console.log(1);//1先执行
</script>
</body>
</html>
注意点
- 写JS代码 严格区分大小写
- 一个环境变量只需声明一次,不需要重复声明 重复声明可能会报错
- 变量第一次使用时,必须声明,后续使用不需要声明
- 变量的使用规则: 必须先声明,后使用
- 语句结束的时候,要加分号;
- js操作标签需要使用DOM,事件是相互独立的
- 只要有特殊含义,就不能加引号,带引号意味着都是文本
- script标签到底放在哪里?最好放在body结束标签之前
- 没有找到标签的原因
- 标签id名写错
- 代码执行到script标签,页面还没加载