77.arguments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
在调用函数时，浏览器每次都会传递进两个隐含的参数
1.函数的上下文对象this
2.封装实参的对象arguments
-arguments是一个类数组对象，它可以通过索引来操作数据，也可以获取长度
-在调用函数时，我们所传递的实参都会在arguments中保存
-arguments.length可以用来获取实参的长度
-我们即使不定义实参，也可以通过arguments来使用实参
只不过比较麻烦
arguments[0] 表示第一个实参
arguments[1] 表示第二个实参
-它里面有一个属性叫做callee
这个属性对应一个函数对象，就是当前正在指向的函数对象
*/
function fun(a,b){
// console.log(arguments instanceof Array);//不是数组
// console.log(Array.isArray(arguments));flase
// console.log(arguments[1]);//0
console.log(arguments.callee == fun);//true
}
fun("hello",true);
</script>
</head>
<body>
</body>
</html>
78.date对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
Date对象
-在JS中使用Date对象来表示一个时间
*/
//创建一个Date对象
//如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
var d = new Date();
//创建一个指定的时间
//需要在构造函数中传递一个表示时间的字符串作为参数
//日期的格式:月/日/年 时 ：分 ：秒
var d2 = new Date("6/23/2022 11:10:30");
/*
getDate()
-获取当前日期对象是几日
*/
var date = d2.getDate();
/*
getDay()
-获取当前日期对象是周几
-会返回一个0-6的值
0表示周日
1表示周一
。。。
*/
var day = d2.getDay();
/*
getMonth()
-获取当前时间对象的月份
-会返回一个0-11的值
0表示1月
1表示2月
11表示12月
5表示6月
*/
var month = d2.getMonth();
var year = d2.getFullYear();
/*
getTime()
-获取当前日期对象的时间戳
-时间戳,指的是从格林威治标准时间的1970年1月1日，0时0分0秒
到当前日期所花费的毫秒数（1秒=1000毫秒）
-计算机底层在保存时间时都是时间戳
*/
var time = d2.getTime();
// console.log("time = " + time );//time = 1655953830000
// var d3 = new Date("1/1/1970 0:0:0");
// time = d3.getTime();
// console.log(time);
//利用时间戳来测试代码执行的性能
//获取当前的时间戳
var start = Date.now();
for(var i = 0 ; i < 100 ; i++){
console.log(i);
}
var end = Date.now();
console.log("执行了："+(end - start)+"毫秒" );
</script>
79.Math方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
Math
-Math和其他函数的对象不同，他不是一个构造函数
它属于一个工具类不用创建对象，它里面封装了数学相关的属性和方法
-比如
Math.PI表示的圆周率
*/
// console.log(Math.PI);
/*
abs()可以用来计算一个数的绝对值
*/
console.log(Math.abs(-1));//绝对值为1
/*
math.ceil()
-可以对一个数进行向上取整，小数位只有有值就自动进1
math.floor()
-可以对一个数进行向下取整，小数部分会被舍掉
math.round()
-可以四舍五入取整
*/
// console.log(Math.ceil(1.1));//2
// console.log(Math.floor(1.99));//1
/*
Math.random()
-可以用来生成一个0-1之间的随机数
-生成一个0-1之间的随机数
-生成一个0-10之间的随机数
-生成一个0-x之间的随机数
Math.round(Math.random()*x)
规律：
-生成一个1-10
-生成一个x-y之间的随机数
Math.round(Math.random()*(y-x)+x)
*/
for(var i = 0; i < 100; i++ ){
// console.log(Math.round(Math.random()*20));
// console.log(Math.round(Math.random()*9)+1);//生成1-10的数
// console.log(Math.round(Math.random()*8)+1);//生成2-10的数
//生成1-6的随机数
// console.log(Math.random()*5+1);
}
/*
max()可以获取多个数中的最大值
*/
var max = Math.max(10,45,30,100);
var min = Math.min(10,45,30,100);
// console.log(max);
/*
Math.pow(x,y)
返回x的y次幂
*/
// console.log(Math.pow(12,3));
/*
Math.sqrt()
用于对一个数组进行开方运算
*/
console.log(Math.sqrt(4));
</script>
</head>
<body>
</body>
</html>
80.包装类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
基本数据类型
String Number Boolean Null Undefined
引用数据类型
Object
在js中我们可以提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象
String()
-可以将基本数据类型字符串转换为String对象
Number()
-可以将基本数据类型的数值转换为Number对象
Boolean()
-可以将基本数据类型的数值转换为Boolean对象
但是注意，我们在实际开发中不会使用基本数据类型的对象
如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预料的结果
*/
//创建一个Number类型的对象
// num = 3;
var num = new Number(3);
var str = new String("hello");
var bool = new Boolean(true);
var bool2 = true;
//向number中添加一个属性
num.hello = "abcdefg";
// console.log(bool == bool2);//== ： true ===：false
/*
方法和属性之间能添加给对象，不能添加给基本数据类型
当我们对一些接班数据类型的值去调用属性和方法时，
浏览器会临时使用包装类将其转化为对象，然后在调用对象的属性和方法
调用完之后，再将其转换为基本数据类型
*/
var s = 123;
s = s.toString();
console.log(s);//123
console.log(typeof s);//String
</script>
</head>
<body>
</body>
</html>
81.字符串的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
//创建一个字符串
var str = "hello Atguigu ";
/*
在底层字符串是以字符数组的形式保存的
["H","e","l"]
*/
console.log(str[5]);
/*
length属性
-可以用来获取字符串的长度
*/
/*
charAt()
--可以返回字符串中指定位置的字符
--根据索引获取指定的字符
*/
str = "Hello Atguigu";
var result = str.charAt(6);
/*
charCodeAt()
获取指定位置的字符的字符编码（unicode编码）
*/
result = str.charCodeAt(1);
/*
String.formCharCode()
-可以根据字符编码去获取字符
*/
result = String.fromCharCode(20045);
/*
concat()
--可以用来连接两个或多个字符串
作用+一样
*/
result = str.concat("你好","再见！");
/*
lastindexof（）类似
indexof()
-该方法可以检索一个字符串中是否含有指定内容
-如果字符串中含有该内容，则会返回其第一次出现的索引
如果没有找到指定的内容，则返回 -1
-可以指定一个第二个采纳数，指定开始查找的位置
*/
str = "hello atguigu";
result = str.indexOf("a");
/*
SubString()
-可以用来截取一个字符串，可以slice()类似
-参数
-第一个：开始截取位置的索引（包括开始的位置）
-第二个：结束位置的索引（不包括结束位置）
-不同的是这个方法不能接受负值作为参数
如果传递了一个负值，则默认使用0
-而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换
*/
result = str.substring(0,1);
/*
substr()
-用来截取字符串
-参数：
1.截取开始位置的索引
2.截取的长度
*/
result = str.substr(0,1);
/*
split()
-可以将一个字符串拆分成一个数组
-参数：
-需要一个字符串作为参数，将会根据该字符串去拆分数组
*/
str = "abc,bcd,efg,hij";
result = str.split("d");
/*
如果传递是一个空串作为参数，则会将每个字符都拆分为数组中的一个元素
*/
result = str.split("");
// console.log(result[0]);//abc,bc
/*
toUpperCase()
将一个字符串转换成大写并返回
不会影响原
*/
/*
toLowerCase()
将一个字符串转换成小写并返回
*/
</script>
</head>
<body>
</body>
</html>
82.正则表达式简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
正则表达式
邮件验证规则：
1.
2.
3
--正则表达式用于定义一些字符串的规则：
计算机可以根据正则表达式，来检查一个字符串是否符合规则
获取将字符串中符合规则的内容提取出来
*/
//创建正则表达式对象
/*
var 变量 = new RegEpx("正则表达式","匹配模式");
使用typeOf检查正则对象，会返回object
var reg = new RegExp("a");这个正则表达式可以检查一个字符串中是否含有a
在构造函数中可以传递一个匹配模式作为第二个参数
*/
var reg = new RegExp("a");
var str = "a";
/*
正则表达式的方法：
test()
-使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
如果符合则返回true,否则返回false 严格区分大小写
*/
var result = reg.test(str);
console.log(reg.test("bcabc"));
</script>
</head>
<body>
</body>
</html>
83.正则语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
//创建一个正则表达式，检查一个字符串是否有a或b
/*
使用|表示或者的意思
*/
reg = /a|b|c/;
/*
创建一个正则表达式检查一个字符串中是否有字母
*/
//reg = /a|b|c|d|e|f|g/;
/*
[]里的内容也是或的关系
[ab] == a|b
[a-z]任意小写字母
[A-Z]任意大写字母
[A-z]任意字母
[0-9]任意数字
*/
reg = /[ab]/;
console.log(reg.test("d"));
</script>
</head>
<body>
</body>
</html>
84.字符串和正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
var str = "1a2b3c4d5e6f";
/*
split()
可以将一个字符串拆分为一个数组
方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
这个方法即使不指定全局匹配，也会全都拆分
*/
/*
根据任意字母来将字符串拆分
*/
var result = str.split(/[A-z]/);
/*
search()
--可以搜索字符串中是否含有指定内容
--如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
--它可以接受一个正则表达式1作为参数，然后会根据正则表达式去检索字符串
--search()只会查找第一个，即使设置全局匹配也没用
*/
/*
match()
-可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
-默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
可以为一个正则表达式设置多个匹配模式，且顺序无所谓
-match（）会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
*/
str = "1a2a3a4d5e6f7A8B9C";
result = str.match(/[a-z]/ig);
// console.log(result[2]);
/*
replace()
--可以将字符串中指定内容替换为新的内容
--参数：
1.被替换的内容，可以接受一个正则表达式作为参数
2.新的内容
--默认只会替换第一个
*/
// result = str.replace(/a/gi,"@_@");
result = str.replace(/a/gi,"@_@");
console.log(result);
</script>
</head>
<body>
</body>
</html>
85.正则表达式的语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
创建一个正则表达式检查一个字符串中是否含有aaa
*/
/*
量词
-通过量词可以设置一个内容出现的次数
-量词只对它前边的一个内容起作用
-{n}正好出现n次
-{m,n}出现m-n的次数
+ 至少一个，相当于{1,}
*/
var reg = /aaa/;
/*
^ 表示开头
$表示结尾
*/
reg = /^a/;//匹配开头的a
reg = /a$/;//匹配结尾的a
/*
如果正则表达式中同时使用^ $ 则要求字符串必须完全符合正则表达式
*/
reg = /^a$/;
// console.log(reg.test("a"));
/*
创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
手机号规则：
1 3 567890123（11位）
1.以1开头
2.第二位3-9任意数字
3.三位任意数字9个
^1 [3-9] [0-9]{9}$
*/
var phoneStr = "13967890123";
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));
</script>
</head>
<body>
</body>
</html>
86.正则表达式的语法2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
检查一个字符串中是否含有.
.表示任意字符
在正则表达式中使用\作为转义符
\.来表示
\\表示 \
注意使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符
如果要使用\则需要使用\\来代替
*/
var reg = /\./;
reg = /\\/;
reg = new RegExp("\.");
// console.log(reg.test("!@#!@#!"));
// console.log(reg);
/*
\w
-任意字母、数字、_
\W
-除了字母、数字、_ [^A-z0-9_]
\d
-任意的数字[0-9]
\D
-除了数字[^0-9]
\s
-空格
\S
-除了空格
\b
-单词边界
\B
-除了单词边界
*/
reg = new RegExp("\.");
reg = /\d/;
reg = /\D/;
reg = /\s/;
reg = /\S/;
/*
创建一个正则表达式检查一个字符串中是否含有单词child
*/
reg = /\bchild\b/;
// console.log(reg.test("hello children"));
//接受一个用户的输入
var str = prompt("请输入你的用户名：");
var str = " hello ";
//去除掉字符串中的空格
//去除空格就是使用 " "来替换空格
console.log(str);
// str = str.replace(/\s/g,"");
//去除开头的空格
// str = str.replace(/^\s*/,"");
//去除结尾的空格
// str = str.replace(/\s*$/,"");
//综合去除
str = str.replace(/^\s*|\s*$/g,"");
console.log(str);
</script>
</head>
<body>
</body>
</html>
87.邮件的正则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
电子邮件
hello .nihao @ abc .com.cn
任意字母下划线，任意字母数字下划线@ 任意字母数字 任意字母（2-5位）
\w{3,} (\.\w+) @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
*/
var emaiReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "[email protected]";
console.log(emaiReg.test(email));
</script>
</head>
<body>
</body>
</html>
88.DOM简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id = "btn">我是一个按钮</button>
<script type="text/javascript">
/*
文档操作对象模型
*/
//获取button对象
var btn = document.getElementById("btn");
//修改按钮的文字
btn.innerHTML = "我是按钮！"
</script>
</body>
</html>
89.事件的简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <button id = "btn" onclick="alert('别点我！')">我是一个按钮</button> -->
<button id = "btn">我是一个按钮</button>
<script type="text/javascript">
/*
将js代码编写到页面的下面就是为了可以在页面加载完毕以后再执行js代码
文档操作对象模型
*/
//获取button对象
var btn = document.getElementById("btn");
//绑定一个单击事件，像这种为单击事件绑定的函数，我们称之为单击响应函数
btn.onclick = function(){
alert("你还点~");
}
</script>
</body>
</html>
90.dom查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
/*
定义一个函数，专门用来为指定元素绑定单击响应函数
参数：
idStr 要绑定单击响应函数的对象的id属性值
fun事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr , fun){
var btn = document.getElementById(idStr);
btn.onclick = function(){
var bj = document.getElementById("bj");
alert(bj.innerHTML);
}
}
window.onload = function(){
//id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//查找#bj节点
var bj = document.getElementById("bj");
//打印bj
//innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查找所有li节点
//getElementsByTagName()可以根据标签名来获取一组数组元素节点对象
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个，也会封装到数组中进行返回
var lis = document.getElementsByTagName("li");
//打印lis
alert(lis.length);
//变量lis
for(var i = 0; i < lis.length; i++){
alert(lis[i]);
}
};
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查找name = gender的所有节点
var inputs = document.getElementsByName("gender");
alert(inputs.length);
}
//为id为btn07的按钮绑定一个单击响应函数
myClick("btn07",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
//返回#bj的父节点
var pn = bj.parentNode;
// alert(pn.innerHTML);
/*
innerText
该属性可以获取到元素内部的文本内容
它和innerHTML类似，不同的是它会自动将html去除
*/
// alert(pn.innerText);
});
//为id为btn08的按钮绑定一个单击响应函数
myClick("btn08",function(){
//获取id为android的元素
var and = document.getElementById("android");
//返回#android的前一个兄弟节点(也可能获取空白的文本)
var ps = and.previousSibling;
//previousElementSibling获取前一个兄弟元素，IE8以下不支持
// var pe = and.previousElementSibling;
alert(ps);
});
//读取#username的value属性值
myClick("btn09",function(){
//获取id为username的元素
var um = document.getElementById("username");
//读取num的value属性值
//文本框的value属性值,就是文本框中填写的内容
alert(um.value);
});
//设置#username的value属性值
myClick("btn10",function(){
//获取id为username的元素
var um = document.getElementById("username");
um.value = "今天天气真不错哦~";
});
//返回#bj的文本值
myClick("btn11",function(){
//获取id为bj的元素
var bj = document.getElementById("bj");
// alert(bj.innerHTML);
alert(bj.firstChild.nodeValue);
});
};
</script>
</head>
<body>
<div id = "total">
<div class="inner">
<p>
你喜欢哪个城市？
</p>
<ul id = "city">
<li id = "bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
</body>
</html>
91.图片切换练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: yellowgreen;
/*
设置文本居中
*/
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
点击按钮切换图片
*/
//获取两个按钮
var prev = document.getElementById("prev");
var next = document.getElementById("next");
/*
要切换图片就是要修改img标签里的src属性
*/
//获取img标签
var img = document.getElementsByTagName("img")[0];
//创建一个数组，用来保存图片路径
var imgArr = ["img/3.webp","img/4.webp","img/5.webp","img/6.webp","img/7.webp","img/8.webp"];
//创建一个变量，来保存当前正在显示的图片的索引
var index = 0;
//获取id为info的P元素
var info = document.getElementById("info");
//设置提示文字
info.innerHTML = "一共"+imgArr.length +"张图片，当前第 "+ (index + 1) +" 张";
//分别为两个按钮绑定单击响应函数
prev.onclick = function(){
/*
切换到上一张，索引自减
*/
index --;
//判断Index是否小于0
if(index < 0){
index = 0;
}
img.src = imgArr[index];
//当点击按钮以后，重新设置信息
info.innerHTML = "一共"+imgArr.length +"张图片，当前第 "+ (index + 1) +" 张";
};
next.onclick = function(){
/*
切换到上一张，索引自增
*/
index ++;
//判断Index是否小于0
if(index > imgArr.length - 1){
index = imgArr.length - 1;
}
//要修改一个元素的属性 元素.属性 = 属性值
img.src = imgArr[index];
//当点击按钮以后，重新设置信息
info.innerHTML = "一共"+imgArr.length +"张图片，当前第 "+ (index + 1) +" 张";
};
};
</script>
</head>
<body>
<div id="outer">
<p id="info">一共五张图片，当前是第一张</p>
<img src = "img/3.webp" alt = "冰棍" />
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
92.全选练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
//获取四个多选框items
var items = document.getElementsByName("items");
//获取全选和全不选的多选框
var checkedAllBox = document.getElementById("checkedAllBox");
/*
全选按钮
-点击按钮以后，四个多选框全都被选中
*/
//1.#checkedAllBtn
//为id为checkedAllBtn的按钮绑定一个单击响应函数
// var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function () {
//获取四个多选框items
var items = document.getElementsByName("items");
//遍历items
for (var i = 0; i < items.length; i++) {
//通过多选框的checked属性可以来获取或设置多选框的选中状态
//设置四个多选框变成选中状态
items[i].checked = true;
}
//将全选/全不选设置为选中
checkedAllBox.checked = true;
}
//2.#checkedNoBtn
/*
全不选按钮
-点击按钮以后，四个多选框都变成没选中状态
*/
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function () {
for (var i = 0; i < items.length; i++) {
//将四个多选框设置为没选中状态
items[i].checked = false;
}
//将全选/全不选设置为不选中
checkedAllBox.checked = false;
}
//3.#checkedRevBtn
/*
反选按钮
-点击按钮以后，选中的没选中，没选中的变成选中
*/
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function () {
for (var i = 0; i < items.length; i++) {
// //判断多选框状态
// if(items[i].checked ){
// //证明多选框已选中，则设置为没选中状态
// items[i].checked = false;
// }else{
// //证明多选框没选中，则设置为选中状态
// items[i].checked = true;
// }
items[i].checked = !items[i].checked;
}
checkedAllBox.checked = true;
for (var j = 0; j < items.length; j++) {
//判断四个多选框是否全选
//只要有一个没选中就不是全选
if (!items[j].checked) {
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
//一旦进入判断，则已经得出结果，不用再继续执行循环
break;
}
}
};
//4.#sendBtn
/*
提交按钮：
-点击按钮以后，将所有选中的多选框的value属性值弹出
*/
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function () {
//遍历items
for (var i = 0; i < items.length; i++) {
//判断多选框是否选中
if (items[i].checked) {
alert(items[i].value);
}
}
}
//5.#checkedAllBox
/*
全选/全不选 多选框
-当它选中时，其余的也选中，当它取消时其余的也取消
在事件响应函数中，响应函数是给谁绑定的this就是谁
*/
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function () {
//设置多选框选中的状态
for (var i = 0; i < items.length; i++) {
items[i].checked = checkedAllBox.checked;
}
}
//6.#items
/*
如果四个多选框全都选中，则checkedALlBox也应该选中
如果四个多选框没有选中，则checkedALlBox也不应该选中
*/
//为四个多选框分别绑定点击事件响应函数
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
//将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for (var j = 0; j < items.length; j++) {
//判断四个多选框是否全选
//只要有一个没选中就不是全选
if (!items[j].checked) {
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
//一旦进入判断，则已经得出结果，不用再继续执行循环
break;
}
}
};
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="兵乓球" />兵乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
93.dom其他方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
//获取body标签
var body = document.getElementsByTagName("body")[0];
/*
在document中有一个属性body,它保存的是body的引用
*/
var body = document.body;
/*
var html = document.documentElement;
保存的是根标签html
*/
/*
documnet.all代表页面中所有的元素
*/
var all = document.all;
// for(var i = 0; i < all.length ; i++){
// console.log(all[i]);
// }
// all = document.getElementsByTagName("div");
// console.log(all);
/*
根据元素的class属性值查询一组元素节点对象
*/
//获取页面中所有的div
// var divs = document.getElementsByClassName("div");
//获取class为box1中的所有的div
//.box1 div
/*
docment.querySelector()
-需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点的对象
*/
var div = document.querySelector(".box1 div");
/*
document.querySelectorAll()
-该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
-即使符合条件的元素只有一个,他也会返回数组
*/
box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorAll("#box2");
console.log("div: " + div.innerHTML);
}
</script>
</head>
<body>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</body>
</html>
94.dom增删改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
// 创建一个广州节点，添加到#city下
myClick("btn01", function () {
//1、创建广州节点（创建li元素节点，创建广州文本节点）
/*
document.createElement();
可以用于创建一个元素节点对象，
它需要一个标签名作为参数，将会根据该标签名创建元素节点对象
并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
//2、将广州添加到city下
/*
可以用来创建一个文本节点对象
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*/
var gzText = document.createTextNode("广州");
/*
将gzText设置li的子节点
appendChild()
-向一个父节点中添加一个新的子节点
-用法：父节点.appendChild(子节点)
*/
li.appendChild(gzText);
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
});
// 将广州节点插入到#bj前面
myClick("btn02", function () {
//创建一个广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/*
insertBefore()
-可以在指定的子节点前插入新的子节点
-语法：
父节点：insertBefore(新节点，旧节点);
*/
city.insertBefore(li, bj);
});
// 使用广州节点替换#bj节点
myClick("btn03", function () {
//创建一个广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/*
insertBefore()
-可以在指定的子节点前替换新的子节点
-语法：
父节点：replaceChild(新节点，旧节点);
*/
city.replaceChild(li, bj);
});
// 删除#bj节点
myClick("btn04",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/*
removeChild()
-可以删除一个子节点
-语法：
父节点，removeChild(子节点)
子节点：.parentNode.removeChild(子节点);
*/
// city.removeChild(bj);
bj.parentNode.removeChild(bj);
});
// 读取#city内的HTML代码
myClick("btn05",function(){
//获取city
var city = document.getElementById("city");
alert(city.innerHTML);
});
// 设置#bj内的HTML代码
myClick("btn06",function(){
//获取city
var city = document.getElementById("city");
bj.innerHTML = "昌平";
});
};
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市？
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个广州节点，添加到#city下</button></div>
<div><button id="btn02">将广州节点插入到#bj前面</button></div>
<div><button id="btn03">使用广州节点替换#bj节点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#bj内的HTML代码</button></div>
</div>
</body>
</html>