什么是JavaScript？
JavaScript是一种脚本编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D动画、滚动播放的视频等等——JavaScript就在其中。
JavaScript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，等等。
JavaScript是一门弱类型语言，用于给HTML页面上添加动态效果与CSS交互，ECMA：相当于js的语言标准，目前最高是ES6.
一、JS基础
1、如何使用js？
- 使用script标签，一般而言是放在head标签中
- 编写js文件，通过script标签中的src属性引入，可以在同一个界面引入多个js文件，执行顺序和引入顺序一致。
2、js的调试？
- 浏览器：控制台(Console)
- console.log()：打印信息
- console.dir()：打印一个对象的所有属性和方法
3、基本语法
JavaScript的语法和Java语言类似，每个语句以;结束，语句块用{}，JavaScript并不强制要求在每个语句的结尾加;
- // 行注释
- /* */块注释
- JavaScript严格区分大小写
4、变量与数据类型
1、变量
a、变量概述
- 变量是用来存放数据的容器
- 通俗来说变量就是一个装东西的盒子
- 我们可以通过变量名获取数据，甚至修改数据
- 本质：变量是程序中在内存中申请的一块用来存放数据的空间，类似于酒店的房间，一个房间就可以看做是一个变量
b、变量使用
使用步骤
1）声明变量
//声明变量
var age;var是一个JS关键字，用来声明变量(Variable变量的意思)，声明变量后，计算机会自动为变量分配内存空间
2）赋值
//赋值，把值存入变量中
age = 18;3）变量的初始化
- 变量的初始化：声明一个变量并赋值
//声明变量同时赋值
var age = 18;4）变量语法扩展
a.更新变量
一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
var age = 18;
age = 66;//最后的结果就是66，因为18被覆盖了b.声明多个变量
var age = 18;
name = ''Mickey;
score = '66';c.声明变量特殊情况
- 只声明，不赋值：undefined
- 不声明，不赋值，直接使用：报错
- 不声明，只赋值，可以正常使用，但是不建议使用，变成了全局变量
5）变量命名规范
- 由字母、数字、下划线、美元符号组成
- 严格区分大小写
- 不能以数字开头
- 不能是关键字
- 变量名必须见名知意
- 遵守驼峰命名法，首字母小写，后面的字母首字母需要大写
2、数据类型
1、数据类型简介
1）为什么需要数据类型
在计算机中，不同的数据所占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
2）变量的数据类型
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：
var age = 10; //这是一个数字型
var name = '张三'; //这是一个字符串在代码运行时，变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型：
var x = 6; //x为数字
var x = "dsada" //x为字符串3）数据类型的分类
JS把数据类型分为两类：
- 简单的数据类型（Number,String,Boolean,Undefined,Null）
- 复杂数据类型（object）
2、简单的数据类型(基本数据类型)
| 简单数据类型 | 说明 | 默认值 |
| Number | 数字型，包含整型和浮点型值，如21、0.21 | 0 |
| Boolean | 布尔值类型，如true、false，等价于1和0 | false |
| String | 字符串类型，如"张三"注意js里面，字符串都带引号 | "",'',`` |
| Undefined | var a;声明了变量a但是没有给值，此时a = undefined | undefined |
| Null | var a = null;声明了变量a为空值 | null |
- 2.1数字型Number
JavaScript数字类型既可以保存整数，也可以保存小数(浮点数)。
3、运算符
| 符号 | 含义 |
| || | 或者 |
| && | 并且 |
| % | 求余 |
| / | 除法 |
| * | 乘法 |
| - | 减法 |
| + | 加法 |
| == | 转换类型比较内容 |
| === | 强比较，比较类型与内容 |
4、js中的弹窗
| alert | 提示框 |
| confirm | 询问框 |
| prompt | 输入框 |
5、js中的基本语法
1、if结构用法
if(条件1){
//条件1正确要执行的代码
//否则进入下一个条件2
}else if(条件2){
//条件2正确要执行的代码
}else{
//如果以上条件都不成立执行的代码
}2、switch结构用法
switch (expression) {
case value1:
// 当 expression 的结果与 value1 匹配时，执行此处语句
[break;]
case value2:
// 当 expression 的结果与 value2 匹配时，执行此处语句
[break;]
...
case valueN:
// 当 expression 的结果与 valueN 匹配时，执行此处语句
[break;]
[default:
// 如果 expression 与上面的 value 值都不匹配，执行此处语句
[break;]]
}3、while结构用法
let n = 0;
while (n < 3) {
//每进入一次循环就n加一次1
n++;
}
console.log(n);
// 当while循环执行结束打印n的值4、for结构用法
let str = '';
//str是一个字符串
for (let i = 0; i < 9; i++) {
//每进来一次就用str拼接一次i的值
str = str + i;
}
console.log(str);
// 最后打印结果为 012345678二、函数与window对象
一、函数
函数的定义：类似于Java中的方法，是完成特定任务的代码语句块。
1、系统函数
eval(<表达式>)
//得到一个文本框的值(表单)
例: var sname = eval("document.form.sname.value");
parseInt("字符串")
//将字符串类型转换为整型数字
例：var s = parseInt("99元")，s的值为99类型为数字类型
parseFloat("字符串")
//将字符串转换为浮点型数字
isNaN()
//用于检查其参数是否为非数字
alert(isNaN("22"))
2、自定义函数
2.1无参函数
function 函数名(){
//javaScript代码
}
2.2有参函数
function 函数名(参数1，参数2，···){
//JavaScript代码
}
2.3带返回值函数(无参)
function 函数名(){
return 返回值或者变量
}
2.4 带返回值函数(有参)
function 函数名(参数1,参数2,...){
return 返回值或变量;
}
3、函数的调用
3.1外部调用
<button οnclick="mya()">点我吧</button>
3.2内部调用
<script>
function mya(){
alert("哈哈哈，你被骗了吧")
}
mya()
</script>
3.3函数调用函数
<script>
function mya(){
alert("你好，帅哥")
}
function myb(){
mya()
}
</script>
注意：函数不可以跨页面调用。但可以通过将函数写入js文件，页面调用该js文件，通过js代码重用来实现。
二、函数实现代码的重用
重用的概念：重复使用
1、获得文本框的值：
var ia = document.getElementById("id").value
2、为文本框赋值：
document.getElementById("id").value = "111111"
三、局部变量和全局变量
- 局部变量：写在方法体的里面的变量称为局部变量。
- 全局变量：写在方法体外面的变量称为全局变量。
四、window对象
常用属性：
screen：有关客户端的屏幕和显示性能问题
history：有关客户端访问过的URL的信息
location：有关当前URL的信息
常用方法：
prompt：显示可提示用户输入框的对话框
alert：显示带有提示信息和确定按钮的对话框
confirm：显示一个带有提示信息、确定和取消按钮的对话框
--window.open("1.html");//打开新的指定页面【注意路径级别】
--location.href("1.html");//不打开新页面的前提下直接进入新页面
--location.reload();//刷新当前页面
--window.close();//关闭当前页面
--history.back();//返回 必须有历史记录 history.go(-1)
--history.forward();//前进 必须有历史记录 history.go(1)
常用事件：
onload：一个页面或一个图像完成加载
onmouseover：鼠标移到某元素之上
onclick：点击事件
onkeydown：某个按键按下
onchange：域的内容被改变
五、匿名调用函数
匿名函数：没有名字的函数
例如：
onload()
1、<body οnlοad="myf()">//直接放在body里 等body加载完毕后才执行
2、function test(){
alert("哈哈哈")
}
window.onload = test;
3、window.onload = function (){
alert("哈哈哈")//匿名函数
}
六、时间对象
Date对象：时间对象、日期对象
格式：
var 日期对象 = new Date(参数)
//获得当前日期，参数格式：MM DD,YYYY,hh:mm:ss:ms
//案例
var today = new Date();//返回当前日期函数
var tdate = new Date("september 1,2015,12:23:33");Date对象的方法：
setXxx：设置时间
getXxx：得到时间
Xxx包括：
FullYear：当前年
Month：0~11（一月至11月）
Day：0~6（星期几）
Date：1~31（日）
Hours：0~23（小时）
Seconds和Minutes：0~59（分钟）
案例：
var today = new Date(); 获取当前时间
var year = today.getFullYear(); 得到年
var month = today.getMonth(); 得到月
var day = today.getDay(); 得到星期几
var date = today.getDate(); 得到日
var hh = today.getHours(); 得到时
var mm = today.getMinutes(); 得到分
var ss = today.getSeconds(); 得到秒//将字符串的值写入到html中某个ID中
var dd=year+"年"+month+"月"+date+"日";
var da=document.getElementById("da");
da.innerHTML=dd; //innerHTML获取对象的内容或向对象插入内容让时间一直在显示：setInterval()方法
function mm(){
setInterval("函数名",1000);
//每隔1秒自动执行
setTimeout("函数名",1000);
//等待1秒后执行一次
}面试题：setInterval()与setTimeout()的区别
思考：当页面加载时就显示时间（onload）
七、数学函数
Math.abs(x) //返回数的绝对值
Math.ceil(x) //返回比x大的最小整数 Math.ceil(34.5)--35
Math.floor(x) //返回比x小的最大整数 Math.floor(34.5)--34
Math.random() //返回0~1之间的随机数
Math.round(x) //四舍五入取整
Math.sqrt(x) //返回数的平方根三、DOM编程
1、DOM基础介绍
1.1、概述
- DOM（Document Object Model）：文档对象模型；是w3c组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。
- w3c已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
- 其实就是操作html中的一部分标签的一些能力，或者说是一整套操作文档流的属性和方法集合。
我们可以操作哪些内容
1、获取一个元素
2、移除一个元素
3、创建一个元素
4、向页面里面添加一个元素
5、给元素绑定一些事件
6、获取元素的属性
7、给元素添加一些css样式
8、······
1.2、DOM树
- DOM的核心对象就是document对象。里面储存着专门用来操作元素的各种方法。
- DOM：页面中的标签，我们通过js获取到以后，就把这个对象叫做DOM对象。
- DOM树整个文档以树状结构出现出来的，整个文档是一个文档节点。每一个标签是一个元素节点，包含在元素中的文本是文本节点。每一个属性是一个属性节点，注释属于注释节点。
HTML DOM 能通过JavaScript进行访问（也可以用过其他编程语言）。在DOM中，所有HTML元素都被定义为对象。我们可以通过JavaScript对这些对象操作，改变HTML元素的内容。
2、查找 HTML DOM元素
- 通过ID获取（getElementById）
- 通过name属性获取（getElementsByName）
- 通过标签名获取（getElementsByTagName）
- 通过类名获取（getElementsByClassName）
- 通过html的方法获取（document.documentElement）
- 通过body的方法获取（document.body）
- 通过选择器获取一个元素（querySelector）
- 通过选择器获取一组元素（querySelectorAll）
2.1、getElementById()
使用getElementById()方法可以获取带有ID的元素对象
<div id="oDiv">dahkkfjahkrw</div>
<script>
var oDiv = document.getElementById("oDiv");
console.log(oDiv)
</script>2.2、getElementsByClassName()
- 通过元素的类名（class的值）是项目中最常用的一种方法，但是在ie6-ie8中会报错。获取多个的这几个方法，即使你获取的只有一个，它也是类数组，也是一个集合，如果想用其中的第一个，你也要通过索引拿出来用
- 若页面上没有对应的类名，那么我们得到的就是一个空集合
- 若页面上有一个或多个对应的类名，那么我们得到的就是一个或多个元素组成的集合
console.log(document.getElementsByClassName('div2'));
console.log(document.getElementsByClassName('div2')[0]);
console.log(document.getElementsByClassName('div2')[1]);
console.log(document.getElementsByClassName('div2')[2]);
2.3、getElementsByTagName()
使用getElementsByTagName()方法可以返回带有指定标签名的对象集合
document.getElementsByTagName("标签名")注意事项：
- 因为得到的是一个对象的集合，所以想要操作里面的元素就需要遍历
- 得到元素对象是动态
还可以获取某个元素（父元素）内部所有指定标签名的字元素。
element.getElementsByTagName("标签名")注意：父元素必须是单个对象（必须指明是哪一个元素对象）。获取的时候不包括父元素自己。
【案例】使用该方法得到所有的input标签，如果是text就给value赋值aa，如果是button就使用onmouseover打印呵呵
2.4、getElementsByName
getElementsByName() 方法可返回带有指定名称的对象的集合。
getElementsByName() 方法可返回带有指定名称的对象的集合。
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
【案例】使用该方法得到所有的input标签然后打印value值
2.5 通过HTML5新增的方法获取
//根据类名返回元素对象集合
document.getElementsByClassName('类名');
//根据指定选择器返回第一个元素对象 切记 里面的选择器需要加符号
document.querySelector('选择器');
//根据指定选择器返回
document.querySelectorAll('选择器');2.6 获取特殊元素（body、html）
获取body元素
document.body获取html元素
document.documentElement;3、改变HTML元素【内容】
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等操作。注意以下都是属性。
| 方法 | 描述 |
| element.innerHTML=new html content | 改变元素的HTML内容 |
| element.innerTEXT = new text | 改变元素的文本内容 |
| element.attribute = new value | 改变HTML元素的属性值 |
| element.setAttribute(attribute,value) | 改变HTML元素的属性值 |
| element.hasAttribute(attribute) | 判断元素是否有该属性 |
| element.removeAttribute(attribute) | 删除元素属性 |
| element.style.property = new style | 改变HTML元素样式 |
3.1、element.innerHTML
元素属性 innerHTML 就是元素的 HTML 代码，当查找到元素后，可以对其 innerHTML 属性进行重新赋值修改。
<div>
<h1>Hello World</h1>
</div>
<script>
var h1 = document.querySelector("div");
// 将原本的div里边的所有HTML内容更改，如果没有子元素，InnerHTML 就会修改该元素下的 Text 内容
h1.innerHTML = "<h2>2020-05-05</h2>";
</script>
// 输出结果
2020-05-053.2、element.innerText
<h1>Hello World</h1>
<script>
var h1 = document.querySelector("h1");
// 只更改文本，HTML 不解析，同时去除空格和换行
h1.innerText = "<h2>2020-05-05</h2> ABC";
</script>
// 输出结果
<h2>2020-05-05 ABC</h2>3.3、element.attribute改变元素属性值
这里的 attribute 是代词，具体要看元素有什么属性，比如 a 链接就有 href 属性，所以使用的时候需要用 element.href 来改变。
<div>
<a href="https://www.163.com">网址</a>
</div>
<script>
var a = document.querySelector("a");
a.href = "https://www.qq.com";
</script>3.4、element.setAttribute改变元素属性值
还可以通过 element.setAttribute 方法来改变元素属性值
element.setAttribute(attribute, value)-
attribute：属性名
-
value：属性值
<div>
<a class="hightlight" href="https://www.163.com">网址</a>
</div>
<script>
var a = document.querySelector("a");
a.setAttribute("href", "https://www.qq.com");
// 用 .属性方法更改 class 属性使用 className
// 注意空格，这里是增加一个class
a.className += " hidden";
// 用 setAttribute 更改 class 属性直接用 class
// 也可以直接写上两个属性
a.setAttribute("class", "hightlight hidden");
</script>常用元素属性
-
innerText
-
innerHTML
-
src
-
href
-
id, alt, title
3.5、element.hasAttribute
通过 element.hasAttribute 判断元素是否有指定属性
<a href="index.php" data-index="1">123</a>
<script>
var d = document.querySelector("a");
// 返回 true
console.log(d.hasAttribute("href"));
</script>3.6、element.removeAttribute
<a href="index.php" data-index="1">123</a>
<script>
var d = document.querySelector("a");
d.removeAttribute("data-index");
</script>3.7、style.property 修改样式
使用元素中的 style 属性可以修改该元素的样式。如 a.style.fontSize，a.style.display。修改的样式直接作用在行内CSS样式中，
-
修改样式的属性名需要改写，将横杠从CSS属性名中去除，然后将横杠后第一个字母大写，如：background-color 写成 backgroundColor
-
属性值都是字符串，设置时必须包括单位
<div>
<a href="https://www.163.com">网址</a>
</div>
<script>
var a = document.querySelector("a");
a.style.fontSize = "24px";
</script>控制元素隐藏与显示
// visibility属性 visible 表示元素是可见的 hidden 表示元素是不可见的
// object.style.visibility="值"
// display属性 none 表示此元素不会被显示 block 表示此元素将显示为块级元素，此元素前后会带有换行符
// object.style.display="值"例：Tongle 切换背景效果
-
通过类名切换背景
-
也可以通过 document.body.style.backgroundColor 属性切换背景颜色
<style>
.cls {
background-color: coral;
}
</style>
<body>
<button>切换</button>
<script>
var btn = document.querySelector("button");
btn.addEventListener("click", function () {
if (document.body.className == "") {
document.body.className = "cls";
} else {
document.body.className = "";
}
});
</script>
</body>4、经典案例
4.1、图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片切换</title>
<script type="text/javascript">
//数组的方式定义 保存所有的图片的名称
var images = [
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg",
"img/5.jpg"];
var index = 0;
//声明一个变量保存定时器
var timer = null;
//加载函数
window.onload = function(){
//获取图片标签 调用src重新赋值
var oImg = document.querySelector("img");
//封装一个函数 保存下一张的代码
function next(){
index++;
if(index >= images.length){
index = 0;//归0
}
oImg.src = images[index];//0 1 2 3 4
console.log(index);
}
//手动点击下一张 进行切换
var nextBtn = document.getElementById("nextBtn");
//设置点击事件
nextBtn.onclick = function(){
next();
};
//手动点击上一张 进行切换
var backBtn = document.getElementById("backBtn");
//设置点击事件
backBtn.onclick = function(){
index--;
if(index < 0){
index = images.length-1;//归0
}
oImg.src = images[index];//0 1 2 3 4
console.log(index);
};
//自动切换的按钮
var autoBtn = document.getElementById("autoBtn");
autoBtn.onclick = function(){
window.clearInterval(timer);
//设置定时器
timer = window.setInterval(function(){
next();
},2000);
};
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function(){
window.clearInterval(timer);
}
};
</script>
</head>
<body>
<!-- 调用src属性 对象.属性 -->
<img src="img/1.jpg" alt="" width="300" height="300">
<hr>
<button id = "backBtn">上一张</button>
<button id="nextBtn">下一张</button>
<button id="autoBtn">自动切换图片</button>
<button id="closeBtn">关闭切换图片</button>
</body>
</html>4.2、树型菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QQ列表</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul{
list-style:none;
}
#oDiv{
width: 200px;
height: 1000px;
margin: 0 auto;
background-color: pink;
}
ul li{
width: 200px;
height: 45px;
border: 1px solid red;
text-align: center;
line-height: 40px;
cursor:pointer
}
.oUl{
background-color: yellow;
color: red;
display:none
}
</style>
<script type="text/javascript">
function addClick(id){
var elms = document.getElementById(id);
if(elms.style.display == 'none'){
elms.style.display = 'block'
}else{
elms.style.display = 'none'
}
}
</script>
</head>
<body>
<div id="oDiv">
<ul>
<li onclick="addClick('one')">我的好友</li>
<ul class = "oUl" id="one">
<li>梅超风</li>
<li>东方不败</li>
<li>张无忌</li>
<li>谢逊</li>
</ul>
<li onclick="addClick('two')" >我的基友</li>
<ul class = "oUl" id="two">
<li>aaa</li>
<li>vvv</li>
<li>ccc</li>
<li>eee</li>
</ul>
<li>我的老婆</li>
<ul class = "oUl">
<li>西施</li>
<li>杨玉环</li>
<li>王昭君</li>
<li>小小小</li>
</ul>
<li>我的黑名单</li>
<ul class = "oUl">
<li>梅超风</li>
<li>东方不败</li>
<li>张无忌</li>
<li>谢逊</li>
</ul>
</ul>
</div>
</body>
</html>4.3、全选功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="all" type="checkbox">全选
<hr>
<!-- <input onclick="myclick();" type="checkbox" name="hobby" value="a">打豆豆
<input onclick="myclick();" type="checkbox" name="hobby" value="b">玩电影
<input onclick="myclick();" type="checkbox" name="hobby" value="c">看美女
<input onclick="myclick();" type="checkbox" name="hobby" value="d">撸游戏
<input onclick="myclick();" type="checkbox" name="hobby" value="e">玩铁 -->
<input type="checkbox" name="hobby" value="a">打豆豆
<input type="checkbox" name="hobby" value="b">玩电影
<input type="checkbox" name="hobby" value="c">看美女
<input type="checkbox" name="hobby" value="d">撸游戏
<input type="checkbox" name="hobby" value="e">玩铁
<script type="text/javascript">
//获取全选
var all = document.getElementById("all");
all.onclick = function() {
//获取所有的子复选框
var son = document.getElementsByName("hobby")
//遍历所有的子复选框得到每个checked
for (var i = 0; i < son.length; i++) {
console.log(son[i].checked);
son[i].checked = all.checked;
}
};
// 为所有的子复选框设置对应的点击事件
function myclick() {
//获取所有的子复选框
var flag = true;
var son = document.getElementsByName("hobby");
for (var i = 0; i < son.length; i++) {
if (son[i].checked == false) {
flag = false;
break;
}
}
var all = document.getElementById("all");
all.checked = flag;
}
var son = document.getElementsByName("hobby");
for (var i = 0; i < son.length; i++) {
son[i].setAttribute("index", i)
son[i].onclick = function() {
console.log(son[this.getAttribute('index')].value);
}
}
</script>
</body>
</html>4.4、选项卡功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0px;padding: 0px;list-style: none}
#container{
width: 512px;
height: 302px;
border: 1px solid red;
margin: 0 auto;
}
#container .nav{
width: 510px;
height: 40px;
border: 1px solid blue;
}
#container .content{
width: 510px;
height: 260px;
border: 1px solid yellow;
}
ul li{
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid orange;
}
.active{
background-color: red;
color: yellow;
}
.content div{
display: none;
}
</style>
</head>
<body>
<div id="container">
<div class="nav">
<ul>
<li class="active">aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
</div>
<div class="content">
<div style="display: block">aaaaaaaaaa</div>
<div>bbbbbbbbbbb</div>
<div>cccccccccccc</div>
<div>ddddddddddd</div>
<div>eeeeeeeeee</div>
</div>
</div>
<script type="text/javascript">
//获取页面上所有的li标签
var oLis = document.getElementsByTagName('li');
//content
var content = document.querySelector('.content');
var oDivs = content.querySelectorAll('div');
console.log(oDivs);
// console.log(oLis);
for(var i = 0;i<oLis.length;i++){
//循环时 可以根据自定义索引设置值
//setAttribute();设置标签的属性值
//getAttribute() 获取属性的值
oLis[i].setAttribute('index',i);
oLis[i].onclick = function(){
console.log(this.getAttribute('index'));
// console.log(this.innerHTML);
//排它思想
//将所有的li标签上的样式全部清空
for(var i = 0;i<oLis.length;i++){
//className 设置css类选择器
oLis[i].className = '';
}
//清空样式后，可以根据this获取当前点击的li
// console.log(this.innerHTML)
this.className = 'active';
// alert(i);
//
for(var i = 0;i<oDivs.length;i++){
oDivs[i].style.display = 'none';
}
oDivs[this.getAttribute('index')].style.display = 'block';
};
}
</script>
</body>
</html>四、DOM编程进阶
一、DOM节点操作基础介绍
1.1、为什么学习节点操作？
获取页面元素。
-
利用DOM提供的方法获取元素
-
document.getElementById() -
document.getElementsByTagName() -
document.querSelector等 -
逻辑性不强、繁琐
-
-
利用节点（Node）层级关系获取元素
-
利用父子兄弟节点关系获取元素
-
逻辑性强，但兼容性差
-
1.2、节点概述
-
网页中的所有内容都是节点（标签、属性、文本、注释等等），在DOM中，节点使用Node来表示。
-
HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
一般的，节点至少拥有nodeType(节点类型)、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
-
元素节点 nodeType为1
-
属性节点nodeType为2
-
文本节点nodeType为3（文本节点包含文字、空格、换行等）
【总结】我们在实际开发中，节点操作主要操作的是"元素节点"。
二、节点层级
2.1、父级节点
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
node.parentNode-
parentNode属性可返回某节点的父节点，注意是最近的一个父节点
-
如果指定的节点没有父节点则返回null
2.2、子节点
parentNode.childNodes(标准)parentNode.childNodes返回包括指定节点的子节点的集合，该集合为即时更新的集合
注意：返回值里面包括了所有的子节点，包括元素节点，文本节点等。
如果想到获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes
var ul = document.querySelector('ul');
for(var i = 0; i < ul.childNodes.lenth; i++) {
if(ul.childNodes[i].nodeType == 1) {
//ul.childNodes[i] 是元素节点
console.log(ul.childNodes[i]);
}
}重点掌握
parentNodes.children(非标准)
parentNodes.children是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回（重点掌握）虽然children是一个非标准，但是已经得到了各个浏览器的支持，因此放心使用
parentNode.firstChild
firstChild返回第一个子节点，找不到就返回null，同样，也是包含所有的节点
parentNode.lastChild
lastChild返回最后一个子节点，找不到就返回null，同样，也是包含所有的节点
parentNode.firstElementChild
firstElementChild返回第一个子元素节点，找不到则返回null
parentNode.lastElementChild
lastElementChild返回最后一个子元素节点，找不到则返回null
注意：后面两个方法有兼容性问题，IE9以上才支持
// 1.firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2.firstelementChild 返回第一个元素节点
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);实际开发的写法 既没有兼容性问题还能返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length-1]);2.3、兄弟节点
所有节点
node.nextSibling
nextSibling返回当前元素的下一个兄弟节点，找不到i则返回null，同样，也是包括所有节点
node.previousSibling
previousSling返回当前元素下一个兄弟元素节点，找不到则返回null
node.previousElementSibling
previousElementSibling返回当前元素上一个兄弟节点找不到则返回null
注意：这两个方法有兼容性问题，IE9以上才支持
解决兼容性问题：自己封装一个兼容性函数
function getNextElementSibling(element){
var el = element;
while(el = el.nextSibling){
if(el.nodeType === 1){
return el;
}
}
}三、节点操作
3.1、创建节点
document.createElement("tagName");document.createElement()方法创建有tagName指定的HTML元素。因为这些元素原先不存在是根据我们的需求动态生成的，所以我们也称为动态创建元素节点
var li = document.createElement("li");3.2、添加节点
node.appendChild(child)node.appendChild()方法将一个节点添加到指定的父节点的子节点末尾。类似于css里面的after伪元素
node.insertBefore(child,指定元素)// 2.添加节点 node.appendChild(child) node 父级 child子级
// 后面追加元素，类似数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3.添加节点 node.insertBefore(child,指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);3.3、删除节点
node.removeChild(child)node.removeChild() 方法从DOM中删除一个子节点，返回删除的节点``
// 1.获取元素
var ul = document.querySelector('ul');
// 2.删除元素 node.removeChild(child);
ul.removeChild(ul.children[0]);3.4、复制节点（克隆节点）
node.cloneNode()node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
注意：
-
如果括号参数为空或者为false，则是浅拷贝，即只是克隆复制节点本身，不克隆里面的子节点
-
如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点
node.cloneNode(); //浅拷贝，不复制内容，只复制标签
node.cloneNode(true); //深拷贝，复制内容、复制标签3.5、三种创建元素的区别
-
document.write()
-
element.innerHTML
-
document.createElement()
区别
document.write是直接将内容写在页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
例：
var btn = document.querySelector('button');
btn.onclick = function() {
document.write('<div>臭猪</div>');
} 
页面重写了！！
innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘 innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂 createElement() 创建多个元素效率稍低一点点，但是结构更清晰 总结：不同浏览器，innerHTML效率要比creatElement高
var inner = document.querySelector('.inner');
var arr = [];
for(var i=0;i<=100;i++) {
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');四、JavaScript之表格对象
在网页中我们可能会经常看到用表格做出来的东西，我们有时候可能要对表格进行操作，当然我们可以通过DOM获得表格对象后对其子节点进行操作，但是大家可能都知道有一种简单方法，那就是DOM中的文档对象，也就是获得表格对象后进而获得某个行对象或者某个单元格对象。
4.1、HTML DOM Table 对象
4.1.1、table对象
-
Table 对象代表一个 HTML 表格。
-
在 HTML 文档中 <table> 标签每出现一次，一个 Table 对象就会被创建。
4.1.2、table对象集合
W3C： W3C 标准。
| 集合 | 描述 | w3c |
| cells | 返回包含表格中所有单元格的一个数组 | No |
| rows | 返回包含表格中所有行的一个数组 | Yes |
4.1.3、table对象方法
| 方法 | 描述 | W3C |
| deleteRow(index下标) | 从表格中删除一行 | Yes |
| insertRow(index下标) | 从表格中插入一个新行。innerHTML createElement | Yes |
4.2、HTML DOM td/th对象
4.2.1、td对象
td 对象代表了 HTML 中数据单元。
在 HTML 表格中每个 <td> 标签都会创建一个 td 对象。
4.2.2、th对象
th 对象代表了 HTML 标准中的表头单元。
HTML 中每个 <th> 标签都会创建一个 th 对象。
4.2.3、td/th对象属性
W3C: W3C 标准。
| 属性 | 描述 | W3C |
| abbr | 设置或返回单元格中内容的缩写版本 | Yes |
| align | 已废弃。设置或返回单元格内部数据的水平排列方式。 | D |
| axis | 设置或返回相关单元格的一个逗号分隔的列表 | Yes |
| background | 已废弃。设置或返回表格的背景图片 | D |
| bgColor | 已废弃。设置或返回表格的背景颜色 | D |
| cellIndex | 返回单元格在某行的单元格集合中的位置 | Yes |
| ch | 设置或返回单元格的对齐字符 | Yes |
| chOff | 设置或返回单元格的对齐字符的偏移量 | Yes |
| colSpan | 单元格横跨的列数 | Yes |
| headers | 重置或返回header-cell的id值 | Yes |
| height | 已废弃。设置或返回单元格的高度 | D |
| noWrap | 已废弃。nowrap属性规定表格单元格中的内容不换行 | D |
| rowSpan | 设置或返回单元格可横跨的行数 | Yes |
| vAlign | 设置或返回表格单元格内数据的垂直排列方式 | Yes |
| width | 已废弃。设置或返回单元格的宽度。 | D |
4.3、HTML DOM tr 对象
4.3.1、tr对象
tr 对象代表了 HTML 表格的行。
HTML文档中出现一个 <tr> 标签，就会创建一个tr对象。
4.3.2、tr对象集合
W3C：W3C标签
| 集合 | 描述 | W3C |
| cells | 返回表格中所有<td>和<th>元素的集合 | Yes |
4.3.3、tr对象属性
| 属性 | 描述 | w3c |
| align | 已废弃。设置或返回在行中数据的水平排列 | D |
| bgColor | 已废弃。设置或返回表格行的颜色 | D |
| ch | 设置或返回在行中的单元格的对齐字符 | Yes |
| chOff | 设置或返回在行中单元格的对齐字符的偏移量 | Yes |
| height | 已废弃。设置或返回在单元格的对齐字符的偏移量 | Yes |
| rowIndex | 返回该行在表中的位置 | Yes |
| sectionRowINdex | R返回在tBody、tHead或tFoot中，行的位置 | Yes |
| vAlign | 设置或返回在行中的数据的垂直排列方式 | Yes |
4.3.4、tr对象方法
| 方法 | 描述 | w3c |
| deleteCell() | 删除行中的指定单元格 | Yes |
| insertCell() | 在一行中的指定位置插入一个空的元素 | Yes |
五、JavaScript与css的交互
1、JavaScript常用事件事件
| 名称 | 描述 |
| onclick | 当用户单击某个对象时调用事件 |
| onmouseover | 鼠标移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| onmousedown | 鼠标按钮按下事件 |
| onmouseup | 鼠标松开事件 |
| onblur | 在输入框上鼠标失去焦点事件 |
| ondblclick | 鼠标双击事件 |
| onkeydown | 键盘按下事件 |
| onkeyup | 键盘松开事件 |
2、操作css
1、使用style属性，css属性名字需要进行驼峰命名
css：background-color
js：backgroundColor
2、改变元素的class属性，class是关键字
js中操作的时候全部使用className
六、表单验证
1、简单验证
- 使用String类型来对数据格式进行判断
要求：
1、完成用户名和密码的验证
2、长度最大为10
3、给出未填写提示
4、给出判断提示
2、正则验证
使用正则表达式来对数据格式进行判断
1、正则的规则
内容：
数字[0-9]：\d
非数字^[0-9]：\D
数字+英文+下划线[0-9a-zA-Z_]：\w
非数字+英文+下划线^[0-9a-zA-Z_]：\W
任意字符：.
次数：
0~1次：?
至少一次：+
0~任意次：*
\d{5}：五个数字
\d{5,10}：最少五次，最多十次
2、正则的注意事项
- 规则必须以/^开头
- 规则必须以$/结尾
- 规则只需要\d,而不是\\d
- 定义正则对象：var rex = /^\d{5}$/
- 使用正则对象：rex.test("123")
3、正则的使用
添加失去焦点事件
1、用户名是否为字母全小写，且位数在5~10位
2、密码可以是数字+英文+.，且位数在5~10位
挑战：实现密码等级显示：
- 有小写字母，等级加1
- 有大写字母，等级加1
- 有数字，等级加1
- 有.，等级加1
3、邮箱验证
- www.wsdsg@foxmail.com
- wsdsg@foxmail.com
3、省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select name="" id="s1"></select>
<select name="" id="s2"></select>
</body>
<script>
let sf = ['湖南省', '广东省', '广西省', '湖北省']
let cs = []
cs['湖南省'] = ['长沙市', '娄底市', '永州市', '娄底市']
cs['广东省'] = ['深圳市', '广州市', '佛山市', '东莞市']
cs['广西省'] = ['桂林市', '柳州市', '南宁市', '北海市']
cs['湖北省'] = ['武汉市', '黄山市', '荆州市', '黄冈市']
//初始化省份
for (let s of sf) {
s1.innerHTML += `<option value="` + s + `">` + s + `</option>`
}
//绑定城市
let d = s1.value
let dd = cs[d]
for (let s of dd) {
s2.innerHTML += `<option value="` + s + `">` + s + `</option>`
}
//添加改变事件
s1.onchange = function() {
let c = cs[this.value]
s2.innerHTML = ''
for (let s of c) {
s2.innerHTML += `<option value="` + s + `">` + s + `</option>`
}
}
</script>
</html>
1721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
