JavaScript入门(四)
哔哩哔哩链接：https://www.bilibili.com/video/BV1YW411T7GX?spm_id_from=333.999.0.0
七、代码讲解部分
01.数组的剩余方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
//arr数组有三个元素
var arr = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["白骨精","玉兔精","蜘蛛精"];
var arr3 = ["二郎神","太上老君","玉皇大帝"];
/*
* concat()可以连接两个或多个数组，并将新的数组返回
* - 该方法不会对原数组产生影响，
* - 不仅可以传数组，还可以传元素，
*/
var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主");
/*
* join()
* - 该方法可以将数组转换为一个字符串
* - 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
* - 在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符
* 如果不指定连接符，则默认使用,作为连接符,如果传个空串"",那么 孙悟空猪八戒沙和尚唐僧
*/
arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
//result = arr.join();
//console.log(typeof result); //String
result = arr.join("@-@");//孙悟空@-@猪八戒@-@沙和尚@-@唐僧
/*
* reverse()
* - 该方法用来反转数组（前边的去后边，后边的去前边）
* - 该方法会直接修改原数组
*/
arr.reverse();
//console.log(arr); 唐僧,沙和尚,猪八戒,孙悟空
/*
* sort()
* - 可以用来对数组中的元素进行排序
* - 也会影响原数组，默认会按照Unicode编码进行排序
*/
arr = ["b","d","e","a","c"];
arr.sort(); //a,b,c,d,e
//arr.reverse(); //e,d,c,b,a
/*
* 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，
* 所以对数字进排序时，可能会得到错误的结果。
*
* 我们可以自己来指定排序的规则
* 我们可以在sort()添加一个回调函数，来指定排序规则，
* 回调函数中需要定义两个形参,
* 浏览器将会分别使用数组中的元素作为实参去调用回调函数
* 使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
* - 浏览器会根据回调函数的返回值来决定元素的顺序，
* 如果返回一个大于0的值，则元素会交换位置 return 1
* 如果返回一个小于0的值，则元素位置不变 return -1
* 如果返回一个0，则认为两个元素相等，也不交换位置 return 0
*
* - 如果需要升序排列，则返回 a-b
* 如果需要降序排列，则返回b-a
*/
arr = [5,4,2,1,3,6,8,7];
arr.sort(function(a,b){
//前边的大,这样的方法麻烦，直接 return a-b
/*if(a > b){
return -1;
}else if(a < b){
return 1;
}else{
return 0;
}*/
//升序排列
//return a - b;
//降序排列
return b - a;
});
console.log(arr);
</script>
</head>
<body>
</body>
</html>
02.函数的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function fun(a,b) {
console.log("a = "+a);
console.log("b = "+b);
//alert(this);
}
var obj = {
name: "obj",
sayName:function(){
alert(this.name);
}
};
/*
* call()和apply()
* - 这两个方法都是函数对象的方法，需要通过函数对象来调用
* - 当对函数调用call()和apply()都会调用函数执行
* - 在调用call()和apply()可以将一个对象指定为第一个参数
* 此时这个对象将会成为函数执行时的this
* - call()方法可以将实参在对象之后依次传递
* - apply()方法需要将实参封装到一个数组中统一传递
*
* - this的情况：
* 1.以函数形式调用时，this永远都是window
* 2.以方法的形式调用时，this是调用方法的对象
* 3.以构造函数的形式调用时，this是新创建的那个对象
* 4.使用call和apply调用时，this是指定的那个对象
*/
//fun.call(obj,2,3);
fun.apply(obj,[2,3]);
var obj2 = {
name: "obj2"
};
/*fun.apply();
fun.call();
fun();*/
//fun.call(obj);
//fun.apply(obj);
//fun();
//obj.sayName.apply(obj2);
</script>
</head>
<body>
</body>
</html>
03.arguments
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 在调用函数时，浏览器每次都会传递进两个隐含的参数：
* 1.函数的上下文对象 this
* 2.封装实参的对象 arguments
* - arguments是一个类数组对象（但不是数组）,它也可以通过索引来操作数据，也可以获取长度
* - 在调用函数时，我们所传递的实参都会在arguments中保存
* - arguments.length可以用来获取实参的长度
* - 我们即使不定义形参，也可以通过arguments来使用实参，
* 只不过比较麻烦
* arguments[0] 表示第一个实参
* arguments[1] 表示第二个实参 。。。
* - 它里边有一个属性叫做callee，
* 这个属性对应一个函数对象，就是当前正在指向的函数的对象
*
*/
function fun(){
//console.log(arguments instanceof Array); false
//console.log(Array.isArray(arguments)); false，检查是不是一个数组
//console.log(arguments[1]); true
//console.log(arguments.length); 2，传了两个实参，fun("hello",true);
console.log(arguments.callee == fun); //true
}
fun("hello",true);
</script>
</head>
<body>
</body>
</html>
04.Date
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* Date对象
* - 在JS中使用Date对象来表示一个时间
*/
//创建一个Date对象
//如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
var d = new Date();
console.log(d);
//创建一个指定的时间对象
//需要在构造函数中传递一个表示时间的字符串作为参数
//日期的格式 月份/日/年 时:分:秒
var d2 = new Date("2/18/2011 11:10:30");
/*
* getDate()
* - 获取当前日期对象是几日
*/
var date = d2.getDate();
/*
* getDay()
* - 获取当前日期对象时周几
* - 会返回一个0-6的值
* 0 表示周日
* 1表示周一
* 。。。
*/
var day = d2.getDay();
/*
* getMonth()
* d2 = new Date("12/18/2011 11:10:30");
* - 获取当前时间对象的月份
* - 会返回一个0-11的值
* 0 表示1月
* 1 表示2月
* 11 表示12月
*/
var month = d2.getMonth();
/*
* getFullYear()
* - 获取当前日期对象的年份
*/
var year = d2.getFullYear();
//console.log(d2);
//console.log("date = "+date);
//console.log("day = "+day);
//console.log("month = "+month);
//console.log(year);
/*
* getTime()
* - 获取当前日期对象的时间戳
* - 时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒
* 到当前日期所花费的毫秒数（1秒 = 1000毫秒）
* - 计算机底层在保存时间时使用都是时间戳
*/
var time = d2.getTime();
//console.log(time/1000/60/60/24/365);
/*var d3 = new Date("1/1/1970 0:0:0");
time = d3.getTime();
console.log(time); // 输出为-28800000
因为计算机这里表示的是中国区的时间，和英国格林威治标准时间相差8个小时
*/
//利用时间戳来测试代码的执行的性能
//获取当前的时间戳
var start = Date.now();
for(var i=0 ; i<100 ; i++){
console.log(i);
}
var end = Date.now();
console.log("执行了："+(end - start)+"毫秒");
</script>
</head>
<body>
</body>
</html>
05.Math
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* Math
* - Math和其他的对象不同，它不是一个构造函数，
* 它属于一个工具类不用创建对象，它里边封装了数学运算相关的
属性和方法（直接用，不用var创建）
* - 比如
* Math.PI 表示的圆周率
*/
//console.log(Math.PI);
/*
* abs()可以用来计算一个数的绝对值
*/
//console.log(Math.abs(-1));
/*
* Math.ceil()
* - 可以对一个数进行向上取整，小数位只要有值就自动进1（不管是几，0除外）
* Math.floor()
* - 可以对一个数进行向下取整，小数部分会被舍掉
* Math.round()
* - 可以对一个数进行四舍五入取整
*/
//console.log(Math.ceil(1.1));
//console.log(Math.floor(1.99));
//console.log(Math.round(1.4));
/*
* Math.random()
* - 可以用来生成一个0-1之间的随机数（不包含0和1，好像可以有0？[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()*10));
//console.log(Math.round(Math.random()*20));
//console.log(Math.round(Math.random()*9)+1);
//console.log(Math.round(Math.random()*8)+2);
//生成1-6之间的随机数
console.log(Math.round(Math.random()*5+1));
}*/
/*
* max() 可以获取多个数中的最大值
* min() 可以获取多个数中的最小值
*/
var max = Math.max(10,45,30,100);
var min = Math.min(10,45,30,100);
//console.log(min);
/*
* Math.pow(x,y)
* 返回x的y次幂
*/
//console.log(Math.pow(12,3)); 表示12的3次方
/*
* Math.sqrt()
* 用于对一个数进行开方运算
*/
console.log(Math.sqrt(2));
</script>
</head>
<body>
</body>
</html>
06.包装类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 基本数据类型
* String Number Boolean Null Undefined
* 引用数据类型
* Object
*
* 在JS中为我们提供了三个包装类（String()、Number()、Boolean()都是构造函数），
通过这三个包装类可以将基本数据类型的数据转换为对象
* String()
* - 可以将基本数据类型字符串转换为String对象
* Number()
* - 可以将基本数据类型的数字转换为Number对象
* Boolean()
* - 可以将基本数据类型的布尔值转换为Boolean对象
* 但是注意：我们在实际应用中不会使用基本数据类型的对象，
* 如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果
* 包装类是浏览器底层自己用的，它需要临时将基本数据类型转换为对象
*/
//创建一个Number类型的对象
//num = 3;
var num = new Number(3);
var num2 = new Number(3);
//console.log(typeof num); object
var str = new String("hello");
var str2 = new String("hello");
var bool = new Boolean(true);
var bool2 = true;
//向num中添加一个属性
num.hello = "abcdefg";
//console.log(str === str2);
var b = new Boolean(false);
/*if(b){
alert("我运行了~~~");
}*/
/*
* 方法和属性只能添加给对象，不能添加给基本数据类型
* 当我们对一些基本数据类型的值去调用属性和方法时，
* 浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法
* 调用完以后，在将其转换为基本数据类型
*/
var s = 123;
s = s.toString(); //在这里，浏览器临时将s包装成number对象使用，然后在
//调用number对象的toString方法,调用完以后，在将其转换为基本数据类型
s.hello = "你好"; //s是基本数据类型，不能有方法和属性，这里将s转换为对象，
//把hello属性添加到s对象中，添加完之后又销毁了，这里称对象1
console.log(s.hello); //undefined，这里又要转换为对象，称其为对象2，
//所以对象1 不等于 对象2
//console.log(typeof s);
</script>
</head>
<body>
</body>
</html>
07.字符串的相关方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建一个字符串
var str = "Hello Atguigu";
/*
* 在底层字符串是以字符数组的形式保存的
* ["H","e","l"，"l","o"]
* 注意Hello Atguigu中间的空格也是保存的，他的索引为5
*/
/*
* length属性
* - 可以用来获取字符串的长度
*/
//console.log(str.length);
//console.log(str[5]);
/*
* charAt()
* - 可以返回字符串中指定位置的字符
* - 根据索引获取指定的字符
* - 和arr[索引]是一样的
*/
str = "中Hello Atguigu";
var result = str.charAt(6);
/*
* charCodeAt()
* - 获取指定位置字符的字符编码（Unicode编码）
*/
//20013 因为“中”在Unicode的编码为20013
result = str.charCodeAt(0);
/*
* String.formCharCode()
* - 可以根据字符编码去获取字符
*/
result = String.fromCharCode(0x2692);
/*
* concat()
* - 可以用来连接两个或多个字符串
* - 对原字符串不会产生影响
* - 作用和+一样
*/
//中Hello Atguigu你好再见
result = str.concat("你好","再见");
/*
* indexof()
* - 该方法可以检索一个字符串中是否含有指定内容
* - 如果字符串中含有该内容，则会返回其第一次出现的索引（即有多个相同的会返回第一个）
* 如果没有找到指定的内容，则返回-1
* - 可以指定一个第二个参数，指定开始查找的位置（即索引）
*
* lastIndexOf();
* - 该方法的用法和indexOf()一样，
* 不同的是indexOf是从前往后找，
* 而lastIndexOf是从后往前找
* - 也可以指定开始查找的位置（是从前往后的索引）
*/
str = "hello hatguigu";
result = str.indexOf("h",1);
result = str.lastIndexOf("h",5);
/*
* slice()
* - 可以从字符串中截取指定的内容
* - 不会影响原字符串，而是将截取到内容返回
* - 参数：
* 第一个，开始位置的索引（包括开始位置）
* 第二个，结束位置的索引（不包括结束位置）
* - 如果省略第二个参数，则会截取到后边所有的
* - 也可以传递一个负数作为参数，负数的话将会从后边计算
*/
str = "abcdefghijk";
result = str.slice(1,4); //bcd
result = str.slice(1); //bcdefghijk
result = str.slice(1,-1); //bcdefghij
/*
* substring()
* - 可以用来截取一个字符串，可以slice()类似
* - 参数：
* - 第一个：开始截取位置的索引（包括开始位置）
* - 第二个：结束位置的索引（不包括结束位置）
* - 不同的是这个方法不能接受负值作为参数，
* 如果传递了一个负值，则默认使用0
* - 而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换
* 即result = str.substring(1,0); 会
变为 result = str.substring(0,1);
*/
//a 相当于result = str.substring(1,0);
result = str.substring(1,-1);
result = str.substring(0,1);
/*
* substr()
* - 用来截取字符串
* - 对原数组也没有影响
* - 参数：
* 1.截取开始位置的索引
* 2.截取的长度
*/
str = "abcdefg";
result = str.substr(3,2); //de
/*
* split()
* - 可以将一个字符串拆分为一个数组
* - 参数：
* -需要一个字符串作为参数，将会根据该字符串去拆分数组
*/
str = "abcbcdefghij";
result = str.split("d");
//console.log(Array.isArray(result)); //true
console.log(result.length); //2
/*
* 如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素
*/
result = str.split("");
//console.log(Array.isArray(result)); //true
//console.log(result[0]);
console.log(result);
str = "abcdefg";
/*
* toUpperCase()
* - 将一个字符串转换为大写并返回
*/
result = str.toUpperCase();//ABCDEFG
str = "ABCDEFG";
/*
* toLowerCase()
* -将一个字符串转换为小写并返回
*/
result = str.toLowerCase();
//console.log(result);
</script>
</head>
<body>
</body>
</html>
08.正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 正则表达式
* - admin@atguigu.com
* - admin@.com adminatguigu.com
* - 邮件的规则：
* 1.前边可以是xxxx乱七八糟
* 2.跟着一个@
* 3.后边可以是xxxx乱七八糟
* 4..com获取其他的乱七八糟
*
* - 正则表达式用于定义一些字符串的规则，
* 计算机可以根据正则表达式，来检查一个字符串是否符合规则，
* 或者将字符串中符合规则的内容提取出来
*/
//创建正则表达式的对象
/*
* 语法：
* var 变量 = new RegExp("正则表达式","匹配模式");
* 使用typeof检查正则对象，会返回object
* var reg = new RegExp("a"); 这个正则表达式可以来检查
一个字符串中是否含有a,注意这里区分大小写
* 在构造函数中可以传递一个匹配模式作为第二个参数，
* 可以是
* i 忽略大小写
* g 全局匹配模式
*/
var reg = new RegExp("ab","i");
var str = "a";
/*
* 正则表达式的方法：
* test()
* - 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，
* 如果符合则返回true，否则返回false
*/
var result = reg.test(str);
//console.log(result);
//console.log(typeof result);//object,除了函数是function以外，其他都是object
console.log(reg.test("Ac")); //false
</script>
</head>
<body>
</body>
</html>
09.正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 使用字面量来创建正则表达式
* 语法：var 变量 = /正则表达式/匹配模式
* 使用字面量的方式创建更加简单
* 但是使用构造函数创建更加灵活
*
*/
//var reg = new RegExp("a","i");
var reg = /a/i;
//console.log(typeof reg);
//console.log(reg.test("abc"));
//创建一个正则表达式，检查一个字符串中是否有a或b
/*
* 使用 | 表示或者的意思
*/
reg = /a|b|c/;
console.log(reg.test(ad)); //true
/*
* 创建一个正则表达式检查一个字符串中是否有字母
*/
//reg = /a|b|c|d|e|f|g/;
/*
* []里的内容也是或的关系
* [ab] == a|b
* [a-z] 任意小写字母
* [A-Z] 任意大写字母
* [A-z] 任意字母
* [0-9] 任意数字
*/
reg = /[A-z]/;
//检查一个字符串中是否含有 abc 或 adc 或 aec
reg = /a[bde]c/;
/*
* [^ ] 除了,只要有其他的非a，b的数都会返回true
*/
reg = /[^ab]/;
reg = /[^0-9]/;
console.log(reg.test("12a3456"));
</script>
</head>
<body>
</body>
</html>
10.字符串和正则相关的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var str = "1a2b3c4d5e6f7";
/*
* split()
* - 可以将一个字符串拆分为一个数组
* - 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
* - 这个方法即使不指定全局匹配，也会全都拆分
* 即 var result = str.split(/[A-z]/);
相当于 var result = str.split(/[A-z]/g);
*/
/*
* 根据任意字母来将字符串拆分
*/
var result = str.split(/[A-z]/); //1,2,3,4,5,6,7
//console.log(result);
/*
* search()
* - 可以搜索字符串中是否含有指定内容
* - 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
* - 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
* - serach()只会查找第一个，即使设置全局匹配也没用
* 即 result = str.search(/a[bef]c/);
设置为 result = str.search(/a[bef]c/g); 也没用
*/
str = "hello abc hello aec afc";
/*
* 搜索字符串中是否含有abc 或 aec 或 afc
*/
result = str.search(/a[bef]c/);
//console.log(result); 6
/*
* match()
* - 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
* - 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
* 我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
* 可以为一个正则表达式设置多个匹配模式，且顺序无所谓
* - match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
*
*
*/
str = "1a2a3a4a5e6f7A8B9C";
//result = str.match(/[a-z]/); a
//result = str.match(/[a-z]/ig); a,a,a,,a,e,f,A,B,C gi即全局匹配有忽略大小写
console.log(Array.isArray(result)); //true
//console.log(result[2]); a
/*
* replace()
* - 可以将字符串中指定内容替换为新的内容
* - 参数：
* 1.被替换的内容，可以接受一个正则表达式作为参数
* 2.新的内容
* - 默认只会替换第一个（即后边有相同的也不会替换掉）
* - 也不会影响到原来的字符串
*/
//result = str.replace(/[a-z]/gi , "@_@"); 1@_@2@_@3@_@4@_@5e6f7@_@8B9C
result = str.replace(/[a-z]/gi , ""); //123456789 使用空串替换字母，即把字母都删了
//console.log(result);
</script>
</head>
<body>
</body>
</html>
01.复习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var str = prompt("请输出任意的内容:");
//var arr = str.split("");
//arr.reverse();
//str = arr.join("");
str = str.split("").reverse().join("");
alert(str);
</script>
</head>
<body>
</body>
</html>
02.正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 创建一个正则表达式检查一个字符串中是否含有aaa
*/
/*
* 量词
* - 通过量词可以设置一个内容出现的次数
* - 量词只对它前边的一个内容起作用
* - {n} 正好出现n次
* - {m,n} 出现m-n次
* - {m,} m次以上
* - + 至少一个，相当于{1,}
* - * 0个或多个，相当于{0,}
* - ? 0个或1个，相当于{0,1}
*/
var reg = /a{3}/; //表示3个a，即aaa
//ababab
reg = /ab{3}/; //表示abbb
reg = /(ab){3}/; //表示ababab
reg = /b{3}/;
console.log(reg.test("bbbb")); //true
reg = /ab{3}c/;
console.log(reg.test("abbbbc")); //false
reg = /ab{1,3}c/; //b出现1次到3次（包含1次和3次）
reg = /ab{3,}c/; //b出现3次以上（包含3次）
reg = /ab+c/; //b至少1个
reg = /ab*c/; //b为0个或多个，相当于有没有都行
reg = /ab?c/; //b为0个或1个，即要么有1个，要么没有
//console.log(reg.test("abbc"));
/*
* 检查一个字符串中是否以a开头，注意和[^a]区别开
* ^ 表示开头
* $ 表示结尾
*/
reg = /^a/; //匹配开头的a
//console.log(reg.test("abcabca")); true
reg = /a$/; //匹配结尾的a
//console.log(reg.test("abcabc")); false
/*
* 如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
*/
reg = /^a$/; //表示a既是开头又是结尾
//console.log(reg.test("a")); true
reg = /^a|b$/; //表示a开头或者b结尾
//console.log(reg.test("bbca")); flase
/*
* 创建一个正则表达式，用来检查一个字符串是否是一个合法手机号
*
* 手机号的规则：
* 1 3 567890123 （11位）
*
* 1. 以1开头
* 2. 第二位3-9任意数字
* 3. 三位以后任意数字9个
*
* ^1 [3-9] [0-9]{9}$
*
*/
var phoneStr = "13067890123";
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));
</script>
</head>
<body>
</body>
</html>
03.正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 检查一个字符串中是否含有 .
* . 表示任意字符
* 在正则表达式中使用\作为转义字符
* \. 来表示.
* \\ 表示\
*
* 注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，
* 如果要使用\则需要使用\\来代替
*
* 如果用字面量则不需要，例如 reg = /\\/; reg = new RegExp("\\\\"); 都表示两个\\
*/
var reg = /\./; //这个才表示单独的点
reg = /\\/;
reg = new RegExp("\\.");
reg = new RegExp("\\\\");
/*
* \w 这是小w
* - 任意字母、数字、_ 即相当于[A-z0-9_]
* \W 这是大W
* - 除了字母、数字、_ 即相当于[^A-z0-9_]
* \d
* - 任意的数字 即相当于[0-9]
* \D
* - 除了数字 即相当于[^0-9]
* \s 这是小s
* - 空格
* \S 这是大S
* - 除了空格
* \b
* - 单词边界
* \B
* - 除了单词边界
*/
reg = /\w/;
reg = /\W/;
reg = /\d/;
reg = /\D/;
reg = /\s/;
reg = /\S/;
/*
* 创建一个正则表达式检查一个字符串中是否含有单词child
*/
reg = /child/;
//console.log(reg.test("hellochildren")); true，所以这里有局限，以下的方法可解决
reg = /\bchild\b/; //给child前后各加了一个单词边界
//console.log(reg.test("hello children")); false
//console.log(reg.test("hello child ")); true
//接收一个用户的输入
//var str = prompt("请输入你的用户名:");
var str = " he llo ";
//去除掉字符串中的前后的空格
//去除空格就是使用""来替换空格
console.log(str);
//str = str.replace(/\s/ , ""); 这只会替换一个空格
//str = str.replace(/\s/g , ""); 加g表示全局匹配模式，这样才会全部
//去掉，但是这样的话中间的空格也会被去掉 " a b " 会变为“ab”
//去除开头的空格
//str = str.replace(/^\s*/, ""); *代表开头的0个或多个，这样就会全部
//去掉，不写*的话只会去掉第一个空格，加g了也是一样
//去除结尾的空格
//str = str.replace(/\s*$/, "");
// /^\s*|\s*$/g 匹配开头和结尾的空格
str = str.replace(/^\s*|\s*$/g,""); //去除开头和结尾的多个空
//格，记得加g，不加的话只会把前面的空格去掉，后面的不会去掉
//或者把*换成+也行，+表示1个或多个
console.log(str);
</script>
</head>
<body>
</body>
</html>
04.邮件的正则
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 电子邮件
* hello .nihao @ abc .com.cn
*
* 任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母（2-5位） .任意字母（2-5位）
*
* \w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
至少3个以上 +表示1次以上 加*表示可有可无 表示A到z,0到9 后面一样的加个括号表示整体可以出现1到2次
*/
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "abc.hello@163.com";
console.log(emailReg.test(email));
</script>
</head>
<body>
</body>
</html>
05.DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
/*
* 浏览器已经为我们提供 文档节点 对象，这个对象是window属性
* 可以在页面中直接使用，文档节点代表的是整个网页（即document就是代表整个网页，
通过它可以获取到网页里的任意一个对象）
*/
//console.log(document);
//获取到button对象,表示获取id为btn的元素
var btn = document.getElementById("btn");
//修改按钮的文字 innerHTML,这里表示要改btn这个对象内部的HTML代码
//console.log(btn.innerHTML); 这里的意思是看能不能获取到
btn.innerHTML = "I'm Button";
</script>
</body>
</html>
06.事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
我们可以在事件对应的属性中设置一些js代码，
这样当事件被触发时，这些代码将会执行
这种写法我们称为结构和行为耦合，不方便维护，不推荐使用
-->
<!--<button id="btn" οnmοusemοve="alert('讨厌，你点我干嘛！');">我是一个按钮</button>-->
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
/*
* 事件，就是用户和浏览器之间的交互行为，
* 比如：点击按钮，鼠标移动、关闭窗口。。。
*/
//获取按钮对象
var btn = document.getElementById("btn");
/*
* 可以为按钮的对应事件绑定处理函数的形式来响应事件
* 这样当事件被触发时，其对应的函数将会被调用
*/
//绑定一个单击事件
//像这种为单击事件绑定的函数，我们称为单击响应函数 ondblclick 双击事件 onmousemove 鼠标移入
btn.onclick = function(){
alert("你还点~~~");
};
</script>
</body>
</html>
07.文档的加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 浏览器在加载一个页面时，是按照自上向下的顺序加载的，
* 读取到一行就运行一行,如果将script标签写到页面的上边，
* 在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载
* 会导致无法获取到DOM对象
*/
/*
* onload事件会在整个页面加载完成之后才触发
* 为window绑定一个onload事件
* 该事件对应的响应函数将会在页面加载完成之后执行，
* 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
* 但这样比写在下方的性能稍逊色，因为它会在页面加载完成后执行，
*
*/
window.onload = function(){
//获取id为btn的按钮
var btn = document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick = function(){
alert("hello");
};
};
</script>
</head>
<body>
<button id="btn">点我一下</button>
<!--<script type="text/javascript">
/*
* 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码
*/
//获取id为btn的按钮
var btn = document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick = function(){
alert("hello");
};
</script>-->
</body>
</html>
08.dom查询
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
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); 11
//变量lis
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
};
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
//alert(inputs.length);
for(var i=0 ; i<inputs.length ; i++){
/*
* innerHTML用于获取元素内部的HTML代码的
* 对于自结束标签，这个属性没有意义（返回空的，啥也没有）
*/
//alert(inputs[i].innerHTML);
/*
* 如果需要读取元素节点属性，
* 直接使用 元素.属性名
* 例子：元素.id 元素.name 元素.value
* 注意：class属性不能采用这种方式，因为class是js中的保留字，不让作为属性名
* 读取class属性时需要使用 元素.className
*/
alert(inputs[i].value);
//alert(inputs[i].className);
}
};
//查找#city下所有li节点
//返回#city的所有子节点
//返回#phone的第一个子节点
//返回#bj的父节点
//返回#android的前一个兄弟节点
//读取#username的value属性值
//设置#username的value属性值
//返回#bj的文本值
};
</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>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
09.练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: greenyellow;
/*设置文本居中*/
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/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];
//创建一个变量，来保存当前正在显示的图片的索引
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 = imgArr.length - 1; //这里是切换到最后一张，即循环
}
img.src = imgArr[index];
//当点击按钮以后，重新设置信息
info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
};
next.onclick = function(){
/*
* 切换到下一张是index自增
*/
index++;
if(index > imgArr.length - 1){
index = 0; //这里是切换到第一张，即循环
}
//切换图片就是修改img的src属性
//要修改一个元素的属性 元素.属性 = 属性值
img.src = imgArr[index];
//当点击按钮以后，重新设置信息
info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
};
};
</script>
</head>
<body>
<div id="outer">
<p id="info"></p>
<img src="img/1.jpg" alt="冰棍" />
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
08.dom查询的css
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
01.dom查询
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
/*
* 定义一个函数，专门用来为指定元素绑定单击响应函数
* 参数：
* idStr 要绑定单击响应函数的对象的id属性值
* fun 事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr , fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
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].innerHTML);
}
};
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
//alert(inputs.length);
for(var i=0 ; i<inputs.length ; i++){
/*
* innerHTML用于获取元素内部的HTML代码的
* 对于自结束标签，这个属性没有意义
*/
//alert(inputs[i].innerHTML);
/*
* 如果需要读取元素节点属性，
* 直接使用 元素.属性名
* 例子：元素.id 元素.name 元素.value
* 注意：class属性不能采用这种方式，
* 读取class属性时需要使用 元素.className
*/
alert(inputs[i].className);
}
};
//为id为btn04的按钮绑定一个单击响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
//获取id为city的元素
var city = document.getElementById("city");
//查找#city下所有li节点
var lis = city.getElementsByTagName("li");
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
};
//为id为btn05的按钮绑定一个单击响应函数
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
//获取id为city的节点
var city = document.getElementById("city");
//返回#city的所有子节点
/*
* childNodes属性会获取包括文本节点在内的所有节点
* 根据DOM标签标签间空白也会当成文本节点
* 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
* 所以该属性在IE8中会返回4个子元素而其他浏览器是9个
*/
var cns = city.childNodes;
//alert(cns.length); //9,因为把li与li之间的空白当成了一个子节点
/*for(var i=0 ; i<cns.length ; i++){
alert(cns[i]);
}*/
/*
* children属性可以获取当前元素的所有子元素
*/
var cns2 = city.children;
alert(cns2.length); //4,这个就不会把空白当成子节点
};
//为id为btn06的按钮绑定一个单击响应函数
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
//获取id为phone的元素
var phone = document.getElementById("phone");
//返回#phone的第一个子节点
//phone.childNodes[0];
//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
var fir = phone.firstChild;
//firstElementChild获取当前元素的第一个子元素（不包括空白文本节点）
/*
* firstElementChild不支持IE8及以下的浏览器，
* 如果需要兼容他们尽量不要使用
*/
//fir = phone.firstElementChild;
alert(fir);
};
//为id为btn07的按钮绑定一个单击响应函数
myClick("btn07",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
//返回#bj的父节点
var pn = bj.parentNode;
alert(pn.innerHTML);
/*
* innerText
* - 该属性可以获取到元素内部的文本内容
* - 它和innerHTML类似，不同的是它会自动将html标签去除（即li）
*/
//alert(pn.innerText);
});
//为id为btn08的按钮绑定一个单击响应函数
myClick("btn08",function(){
//获取id为android的元素
var and = document.getElementById("android");
//返回#android的前一个兄弟节点（也可能获取到空白的文本，即标签前面的空白）
//nextSibling 下一个兄弟节点
var ps = and.previousSibling;
//previousElementSibling获取前一个兄弟元素（不包括空白的文本），IE8及以下不支持
//var pe = and.previousElementSibling;
alert(ps);
});
//读取#username的value属性值
myClick("btn09",function(){
//获取id为username的元素
var um = document.getElementById("username");
//读取um的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.innerText);
//获取bj中的文本节点
/*var fc = bj.firstChild;
alert(fc.nodeValue);*/
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>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
02.全选练习
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</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
for(var i=0 ; i<items.length ; i++){
//通过多选框的checked属性可以来获取或设置多选框的选中状态
//alert(items[i].checked);
//设置四个多选框变成选中状态
items[i].checked = true;
}
//将全选/全不选设置为选中
checkedAllBox.checked = true;
};
/*
* 全不选按钮
* - 点击按钮以后，四个多选框都变成没选中的状态
*/
//2.#checkedNoBtn
//为id为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(){
//将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for(var i=0; i<items.length ; i++){
//判断多选框状态 这个方法比较笨
/*if(items[i].checked){
items[i].checked本身就是个Boolean值，不用items[i].checked == true
//证明多选框已选中，则设置为没选中状态
items[i].checked = false;
}else{
//证明多选框没选中，则设置为选中状态
items[i].checked = true;
}*/
items[i].checked = !items[i].checked; //取反，如果为true，则设置为false
//判断四个多选框是否全选
//只要有一个没选中则就不是全选
if(!items[i].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
}
}
//在反选时也需要判断四个多选框是否全都选中
};
/*
* 提交按钮：
* - 点击按钮以后，将所有选中的多选框的value属性值弹出
*/
//4.#sendBtn
//为sendBtn绑定单击响应函数
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就是谁
*/
//为checkedAllBox绑定单击响应函数
checkedAllBox.onclick = function(){
//true 注意是全等，即值和类型都相等
//alert(this === checkedAllBox);
//设置多选框的选中状态
for(var i=0; i <items.length ; i++){
//相当于 items[i].checked = checkedAllBox.checked;
items[i].checked = this.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>
03.dom查询的其他的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取body标签
//var body = document.getElementsByTagName("body")[0]; [0]表示把第一个取出来
/*
* 在document中有一个属性body，它保存的是body的引用
*/
var body = document.body;
/*
* document.documentElement保存的是html根标签
*/
var html = document.documentElement;
//console.log(html); [object HTMLHtmlElement]
/*
* document.all代表页面中所有的元素,即当前网页文档中的所有元素
*/
var all = document.all;
//console.log(all.length);
/*for(var i=0 ; i<all.length ; i++){
console.log(all[i]);
}*/
//用这种方式也可以获取页面的所有元素，*代表所有元素，
//all = document.getElementsByTagName("*");
//也可以把*改为其他元素，例如div，即获取页面中的所有div个数
//console.log(all.length);
/*
* 根据元素的class属性值查询一组元素节点对象
* getElementsByClassName()可以根据class属性值获取一组元素节点对象，
* 但是该方法不支持IE8及以下的浏览器
*/
//var box1 = document.getElementsByClassName("box1");
//console.log(box1.length);
//获取页面中的所有的div
//var divs = document.getElementsByTagName("div");
//获取class为box1中的所有的div
//.box1 div
/*
* document.querySelector()
* - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
* - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
* - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，
那么它只会返回第一个（即多个class为.box1的也只会返回第一个）
*/
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1")
//console.log(div.innerHTML);
//console.log(box1.innerHTML);
/*
* document.querySelectorAll()
* - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素
封装到一个数组中返回
* - 即使符合条件的元素只有一个，它也会返回数组
*/
box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorAll("#box2");
console.log(box1);
};
</script>
</head>
<body>
<div id="box2"></div>
<div class="box1">
我是第一个box1
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div></div>
</body>
</html>
04.dom增删改
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function() {
//创建一个"广州"节点,添加到#city下
myClick("btn01",function(){
//创建广州节点 <li>广州</li>
//创建li元素节点
/*
* document.createElement()
* 可以用于创建一个元素节点对象，
* 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
* 并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
//创建广州文本节点
/*
* document.createTextNode()
* 可以用来创建一个文本节点对象
* 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*/
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");
/*
* replaceChild()
* - 可以使用指定的子节点替换已有的子节点
* - 语法：父节点.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(){
//获取bj
var bj = document.getElementById("bj");
bj.innerHTML = "昌平";
});
myClick("btn07",function(){
//向city中添加广州
var city = document.getElementById("city");
/*
* 使用innerHTML也可以完成DOM的增删改的相关操作
* 一般我们会两种方式结合使用 btn01和btn07
*/
//city.innerHTML += "<li>广州</li>"; 这可以在后面添加广州，但是是相当于把
//前面的删了然后在重新写，如果前面的绑定了事件就很麻烦
//创建一个li
var li = document.createElement("li");
//向li中设置文本
li.innerHTML = "广州";
//将li添加到city中
city.appendChild(li); //这样对别的就不会产生影响
});
};
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><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
</div>
</body>
</html>
01和04的css
@CHARSET "UTF-8"; ？
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
05.练习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
window.onload = function(){
/*
* 点击超链接以后，删除一个员工的信息
*/
//获取所有额超链接
var allA = document.getElementsByTagName("a");
//为每个超链接都绑定一个单击响应函数
for(var i=0 ; i < allA.length ; i++){
allA[i].onclick = function(){
//点击超链接以后需要删除超链接所在的那行
//这里我们点击那个超链接this就是谁
//获取当前tr
var tr = this.parentNode.parentNode;
//获取要删除的员工的名字
//var name = tr.getElementsByTagName("td")[0].innerHTML;
var name = tr.children[0].innerHTML; //[0]表示获取第一个
//删除之前弹出一个提示框
/*
* confirm()用于弹出一个带有确认和取消按钮的提示框
* 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
* 如果用户点击确认则会返回true，如果点击取消则返回false
*/
var flag = confirm("确认删除"+name+"吗?");
//如果用户点击确认
if(flag){
//删除tr
tr.parentNode.removeChild(tr);
}
/*
* 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
* 但是此时我们不希望出现默认行为，可以通过在响应函数的
最后return false来取消默认行为
或者直接在href的后面直接JavaScript:;
*/
return false;
};
}
};
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
源码获取
至此，我们的JavaScript入门(四)就讲解完成了。下篇我们将结合代码进行介绍JavaScript知识点，源码素材可以通过关注我的微信公众号 我爱学习呀嘻嘻 ，回复关键字JavaScript入门源码素材进行获取哦。
JavaScript入门(一)：JavaScript基础知识
JavaScript进阶链接：
JavaScript进阶(一)：类、对象、构造函数、原型对象、继承
JavaScript进阶(二)：函数、this、严格模式、高阶函数、闭包、递归
JavaScript进阶(三)：正则表达式、ES6语法、ES6内置对象
JavaScript进阶(五)：ES7、ES8、ES9、ES10、ES11新特性
扫一扫
9334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
