文章目录

一、JavaScript的思维导图
二、下载开发工具
三、JavaScript的引入方式（通过标签script进行引入）
- 1.内嵌式
- 2.外链式
- 3.行内式
四、注释
- 1.单行注释
- 2.多行注释
五、鼠标的移入移出
- 1.鼠标的移入
- 2.鼠标的移出
- 3.鼠标移入移出改变背景颜色的实训案例
六、事件的绑定
- 1.在DOM元素中直接绑定
- 2.使用事件监听绑定事件
- - （1）addEventListener（）
  - （2）attachEvent（）
  - 注意：
七、js的输入输出
- 1.(1)alert('输出内容')用于弹出一个警告框，确保用户可以看到某些信息
- 2.console.log（）
- 3.innerHTML和innerText获取标签内部的HTML和文本，但是innerText忽略HTML
- 4.outerHTML 和 outerText 获取标签及标签内部的HTML和文本，但是outerText忽略HTML
- 5.document.write（）输出
- 6.prompt()输入，弹出一个输入框，提示用户输入内容，返回用户输入的内容或缺省值或空串（string类型）。
- 7.confirm确定，多用于删除
- 8.获取元素
- - （1）获取单个元素
  - （2）获取多个元素
  - （3）获取HTML元素
  - （4）获取body
  - （5）获取指定元素
  - 注意：
八、补充：
- 1.使用document获取HTML元素对象
- - （1）直接获取
  - （2）间接获取
- 2.document.querySelector（“css任意选择器”）
- 2.函数中通过function关键词进行定义
- 3.div是样式表中的定位技术
- 4.自动触发事件
- 5.let
- 6.const
九、作业
- 1.单击按钮切换网页背景
- - 注意：
- 2.单击按钮填充内容改变边框
- 3.改变盒子的大小

一、JavaScript的思维导图

在这里插入图片描述

二、下载开发工具

下载GoogleChrome：https://www.google.cn/chrome/
ES6教程连接：https://wangdoc.com/es6/
JavaScript教程连接：https://wangdoc.com/javascript/basic/index.html

三、JavaScript的引入方式（通过标签script进行引入）

1.内嵌式

定义：内嵌式是使用<script>标签包裹的代码，<script>标签可以写在<head>或<body>标签中。通过内嵌式，可以将多行JavaScript代码写在标签中。内嵌式是JavaScript最常用的方式。
实例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JavaScript内嵌式</title><script>alert('内嵌式')</script></head><body></body>
</html>

运行后直接弹出警示框

2.外链式

定义：外链式是指将JavaScript代码写在一个单独的文件中，一般使用“.js”做完后缀名，在HTML页面中使用script标签进行引入，适合代码比较繁琐的情况。
实例：
HTML代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JavaScript外链式</title><script src="outside.js"></script></head><body></body>
</html>

outside代码
页面打开自动弹出警告框：

3.行内式

定义：行内式是指将单行或少量的JavaScript代码写在HTML标签的事件属性中，也可以是以on开头的属性，比如onclick
实例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>JavaScript行内式</title></head><body><input type="button" value="点击此处" onclick="alert('行内式')"/></body>
</html>

实现单击一个按钮后，弹出一个警示框，显示一些提示信息。
注意：
（1）JavaScript中推荐使用单引号。
（2）行内式可读性较差，不适合编写大量代码，不方便阅读。
（3）不适合多层嵌套，一般不推荐使用。

四、注释

1.单行注释

// ，快捷键为Ctrl + /
在这里插入图片描述

2.多行注释

<! --注释内容 --> ，快捷键Ctrl + shift + /
在这里插入图片描述

五、鼠标的移入移出

1.鼠标的移入

主要语句：mouseover

2.鼠标的移出

主要语句：mouseout

3.鼠标移入移出改变背景颜色的实训案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>鼠标移入移出改变背景颜色</title><style>#box{width: 200px;height: 200px;background-color: #ccc;text-align: center;line-height: 200px;margin: 100px auto;}</style></head><body><h1>引入JavaScript的三种方式之一：嵌入式</h1><div id="box">试试鼠标移入移出</div><!-- 嵌入式 --><script>//mouseover、mouseoutdocument.getElementById('box').onmouseover = function(){//元素对象.style.css样式名// document.getElementById('box').style.background = 'pink';// 单行注释:// Ctrl + //*多行注释  Ctrl + Shift + /*/this.style.background = 'pink';}document.getElementById('box').onmouseout = function(){this.style.background = '#ccc';}</script></body>
</html>

六、事件的绑定

1.在DOM元素中直接绑定

onclick（单击事件），onmouseover，onmouseout，onmousedown，onmouseup，ondblclick，onkeydown，onkeypress，onkeyup等

2.使用事件监听绑定事件

addEventListener（）或attachEvent（）

（1）addEventListener（）

语法element.addEventListener（event，function，useCapture）
event：事件名，支持所有DOM事件
function：指定要事件出发时执行的函数。
useCapture：（不是必须的）指定事件是否在捕获或冒泡阶段执行。TRUE：捕获，FALSE：冒泡，默认是FALSE。
eg：

<input type="button" value="click me" id="btnA">
<script>
document.getElementById("btnA").addEventListener("click",hello);
function hello(){
alert("hello world!");
}
</script>

（2）attachEvent（）

语法：element.attachEvent（event，function）
event：事件类型。需要加一个“on”
function：指定要事件接触时执行的函数
eg：

<input type="button" value="click me" id="btn2">
<script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
alert("hello world!");
}
</script>

注意：

常规的事件绑定的话只执行最后绑定的事件，但是事件监听的话可以绑定多个事件而且都可以执行。还可以接触相应的绑定。
普通的不执行：

<input type="button" value="click me" id="btn3">
<script>
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
alert("hello 1"); //不执行
}
btn3.onclick = function(){
alert("hello 2"); //执行
}
</script>

事件绑定的要执行：

<input type="button" value="click me" id="btn4">
<script>
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
</script>

接除相应的绑定：

<input type="button" value="click me" id="btn5"><script>
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//执行了
btn5.addEventListener("click",hello2);//不执行
btn5.removeEventListener("click",hello2);function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
</script>

七、js的输入输出

1.(1)alert(‘输出内容’)用于弹出一个警告框，确保用户可以看到某些信息

在这里插入图片描述

2.console.log（）

console.log（“输入内容”）用于在浏览器的控制台中输出内容
eg：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>js的输入输出</h1><div><i>人工智能</i></div><script type="text/javascript">// (1)alert('输出内容')用于弹出一个警告框，确保用户可以看到某些信息// alert('警告框');// let a = 10;// alert('a')// (2)console.log('输出内容')用于在浏览器的控制台中输出内容。console.log(680);console.log(true);console.log([1,2,3,4,5,6]);console.log({a:1,b:2,c:3});console.table({a:1,b:2,c:3});//以表格的形式输出console.warn("这个是警告输出信息");//输出警告信息console.error("输出错误信息");//这个是错误信息</script></body>
</html>

输出的结果：
最后如果这些信息都不想要了，可以用console.clear（）进行清空。

3.innerHTML和innerText获取标签内部的HTML和文本，但是innerText忽略HTML

eg：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h1>js的输入输出</h1><div id="box"><i>人工智能</i></div><script type="text/javascript">// (1)alert('输出内容')用于弹出一个警告框，确保用户可以看到某些信息// alert('警告框');// let a = 10;// alert('a')// (2)console.log('输出内容')用于在浏览器的控制台中输出内容。console.log(680);console.log(true);console.log([1,2,3,4,5,6]);console.log({a:1,b:2,c:3});console.table({a:1,b:2,c:3});//以表格的形式输出console.warn("这个是警告输出信息");//输出警告信息console.error("输出错误信息");//这个是错误信息console.clear();// (3)innerHTML和innerText获取标签内部的HTML和文本，但是innerText忽略HTMLconst box = document.getElementById('box');console.log(box.innerHTML);console.log(box.innerText);</script></body>
</html>

输出结果：

4.outerHTML 和 outerText 获取标签及标签内部的HTML和文本，但是outerText忽略HTML

在这里插入图片描述

运行的结果：

5.document.write（）输出

在这里插入图片描述

6.prompt()输入，弹出一个输入框，提示用户输入内容，返回用户输入的内容或缺省值或空串（string类型）。

单击取消返回null
第一个参数：提示信息
第二个参数：默认值

7.confirm确定，多用于删除

在这里插入图片描述

两种情况：

8.获取元素

（1）获取单个元素

document.getElementById（）、document.querySelector（css任意选择器）

（2）获取多个元素

document.getElementByClassName（类名）
返回的是满足条件的集合。

（3）获取HTML元素

document.documentElement

（4）获取body

document.body

（5）获取指定元素

实例：获取list01下面的li，然后实现隔行变色

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>获取元素</title><style>ul li{width: 50%;border: 1px solid black;}</style></head><body><!-- ul#list01>li*8 这个直接按tab键就可以直接生成下面的代码 --><!-- ul>(li{$})*4 --><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul id="list01"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><!-- ul.list02>ul*4 --><script>let lis1 = document.getElementsByTagName('li');//获取指定元素下面的元素let lis2 = document.getElementById('list01').getElementsByTagName('li');for(let i=0;i<lis2.length;i++){if(i%2==0){lis2[i].style.backgroundColor = '#ccc';}else{lis2[i].style.backgroundColor = 'white';}}// var oddlis = document.querySelectorAll('ul#list01 li:nth-child(odd)')</script></body>
</html>

在这里插入图片描述

实例的第二种写法：

注意：

document.getElementByTagName（‘标签名’）返回所有这个标签名的元素的集合
document.getElementByClassName（‘class名’）返回所有这个class的元素的集合
document.getElementByName（）返回带有这顶名称的对象集合
以上这三个返回的是集合，如果要设置样式只能对元素进行设置，所以我们要取出集合里面的元素，通过下标的方式取。
document.querySelectorAll（“css任意选择器”）这个也是返回的集合
ul#list01>li6这个代码按Tab键可以生成无序列表的代码：#list01的意思就是ID为list01，>li6的意思就是li在ul下面，并且生成六个li
如果是ul#list02>（li>{$}）*2这里的（li>{$}）意思就是在li下面在生成一个从1开始递增的数列

八、补充：

1.使用document获取HTML元素对象

（1）直接获取

通过ID： widow.document.getElementByID（“id值”）
通过name属性值：document.getElementByName（“name值”）
通过标签名：document。getElementByTagName（“属性名”）
通过class属性值：document.getElementByClassName（“class值”）

（2）间接获取

父子关系：获取父级元素对象
子父关系：获取子元素对象
兄弟关系

2.document.querySelector（“css任意选择器”）

返回第一个（返回文档中匹配到指定的元素或css选择器的第一个对象的引用。）

2.函数中通过function关键词进行定义

具体语法是：

function name（参数1，参数2，参数3）{
要执行的代码}

function其后是函数名和括号（），函数名可以包含字母、数字、下划线和美元符号（规则与变量名相同）

3.div是样式表中的定位技术

4.自动触发事件

window.onload的作用是当页面加载完成后自动触发该事件。
它会清空原有的HTML在生成一个新的HTML
一个页面应该只有一个window.onload事件。
因为代码是从上往下执行的，如果想要把一些其他的代码放在后面执行，就在前面的代码加上onload。
eg：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><style>#box{width: 200px;height: 200px;background-color: #ccc;text-align: center;line-height: 200px;margin: 100px auto;}</style><script>//最后运行这个代码window.onload = function(){document.getElementById('btn').onclick = function(){document.getElementById('box').style.color = 'pink';}}</script></head><body><div id="box">改变颜色</div><div><input id="btn" type="button" value="改变颜色"/></div></body>
</html>

5.let

let关键字允许你声明一个作用域或被限制在块级中的变量、语句或者表达式。
与var不同的是，它声明的变量只能是全局或者整个函数块的
var声明的变量的作用域是整个封闭函数。
eg：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>function varTest(){var a = 1;if(true){var a = 2; //同样的变量console.log(a); //2}console.log(a); //2}function letTest(){let b = 3;if(true){let b = 6;//不同的变量console.log(b)}console.log(b)}</script></body>
</html>

6.const

const声明一个只读的常量。
一旦声明，常量的值就不能改变。
如果修改了引用地址，就会出错：

九、作业

1.单击按钮切换网页背景

源代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="单击随机改变网页的背景颜色"><script type="text/javascript">//console.log(document.querySelector('input'));document.querySelector('input').onclick = function(){//[0,255]let r = Math.floor(Math.random()*256);  //[0,256)  0.4//console.log(r);let g = Math.floor(Math.random()*256);let b = Math.floor(Math.random()*256);//document.body.style.backgroundColor = 'rgb(200,200,200)';//es5//document.body.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';//es6document.body.style.backgroundColor = `rgb(${r},${g},${b})`;}</script></body>
</html>

注意：

Math.floor（）函数总是返回小于等于一个给定数字的最大整数。

console.log(Math.floor(5.85));
//expected output: 5

2.单击按钮填充内容改变边框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>改变盒子的大小</title><style>.box{width: 50px;height: 50px;background-color: #eee;margin: 0 auto;}</style></head><body><div id="box" class="box"></div><script type="text/javascript">var box = document.querySelector('#box');var i = 0;box.addEventListener('click',show);function show(){++i;if(i%2){this.style.width = '200px';this.style.height = '200px';this.innerHTML = '大';}else{this.style.width = '50px';this.style.height = '50px';this.innerHTML = '小';}}</script></body>
</html>

3.改变盒子的大小

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">#lzy{width: 100px;height: 100px;border:1px solid black;margin: 0 auto;}div{text-align: center;margin-top: 30px;}</style>
</head>
<body><div id="hello！" >div标签</div><div><button id="changeb">填充内容改变边框</button></div><script type="text/javascript">window.onload=function(){//给按钮添加点击事件document.getElementById('changeb').onclick=function(){//获取id名为hello！的divdocument.getElementById('hello！').innerHTML = '<b>hello！</b>';document.getElementById('hello！').style.border='2px dotted red';}}</script>
</body>
</html>