JavaScript入门(四)
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); //Stringresult = 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); objectvar 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对象中，添加完之后又销毁了，这里称对象1console.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的编码为20013result = 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); //bcdresult = str.slice(1); //bcdefghijkresult = 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)); //trueconsole.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();//ABCDEFGstr = "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以外，其他都是objectconsole.log(reg.test("Ac")); //falsescript>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 或 aecreg = /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@_@8B9Cresult = 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//abababreg = /ab{3}/; //表示abbbreg = /(ab){3}/; //表示abababreg = /b{3}/;console.log(reg.test("bbbb")); //truereg = /ab{3}c/;console.log(reg.test("abbbbc")); //falsereg = /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")); truereg = /a$/; //匹配结尾的a //console.log(reg.test("abcabc")); false/** 如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式*/reg = /^a$/; //表示a既是开头又是结尾//console.log(reg.test("a")); truereg = /^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><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> 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 Documenttitle><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//变量lisfor(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>IOSli><li id="android">Androidli><li>Windows Phoneli>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是否小于0if(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 Documenttitle><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);//变量lisfor(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/** 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>IOSli> <li id="android">Androidli><li>Windows Phoneli>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(){//获取四个多选框itemsvar items = document.getElementsByName("items");//获取全选/全不选的多选框var checkedAllBox = document.getElementById("checkedAllBox");/** 全选按钮* - 点击按钮以后，四个多选框全都被选中*///1.#checkedAllBtn//为id为checkedAllBtn的按钮绑定一个单击响应函数var checkedAllBtn = document.getElementById("checkedAllBtn");checkedAllBtn.onclick = function(){//遍历itemsfor(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.#checkedRevBtnvar 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(){//遍历itemsfor(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 = 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中的divdiv>div><div class="box1"><div>我是box1中的divdiv>div><div class="box1"><div>我是box1中的divdiv>div><div class="box1"><div>我是box1中的divdiv>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 Documenttitle><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function() {//创建一个"广州"节点,添加到#city下myClick("btn01",function(){//创建广州节点 广州 //创建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");//获取cityvar 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");//获取cityvar city = document.getElementById("city");/** replaceChild()* - 可以使用指定的子节点替换已有的子节点* - 语法：父节点.replaceChild(新节点,旧节点);*/city.replaceChild(li , bj); });//删除#bj节点myClick("btn04",function(){//获取id为bj的节点var bj = document.getElementById("bj");//获取cityvar city = document.getElementById("city");/** removeChild()* - 可以删除一个子节点* - 语法：父节点.removeChild(子节点);* * 子节点.parentNode.removeChild(子节点);*///city.removeChild(bj);bj.parentNode.removeChild(bj); //这种方式更为便捷});//读取#city内的HTML代码myClick("btn05",function(){//获取cityvar city = document.getElementById("city");alert(city.innerHTML);});//设置#bj内的HTML代码myClick("btn06" , function(){//获取bjvar bj = document.getElementById("bj");bj.innerHTML = "昌平";});myClick("btn07",function(){//向city中添加广州var city = document.getElementById("city");/** 使用innerHTML也可以完成DOM的增删改的相关操作* 一般我们会两种方式结合使用 btn01和btn07*///city.innerHTML += "广州 "; 这可以在后面添加广州，但是是相当于把//前面的删了然后在重新写，如果前面的绑定了事件就很麻烦//创建一个livar 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就是谁//获取当前trvar 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){//删除trtr.parentNode.removeChild(tr);}/** 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，* 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为或者直接在href的后面直接JavaScript:;*/return false;};} };
script>
head>
<body><table id="employeeTable"><tr><th>Nameth><th>Emailth><th>Salaryth><th> th>tr><tr><td>Tomtd><td>tom@tom.comtd><td>5000td><td><a href="javascript:;">Deletea>td>tr><tr><td>Jerrytd><td>jerry@sohu.comtd><td>8000td><td><a href="deleteEmp?id=002">Deletea>td>tr><tr><td>Bobtd><td>bob@tom.comtd><td>10000td><td><a href="deleteEmp?id=003">Deletea>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">Submitbutton>td>tr>table>div>
body>
html>
源码获取
至此，我们的JavaScript入门(四)就讲解完成了。下篇我们将结合代码进行介绍JavaScript知识点，源码素材可以通过关注我的微信公众号 我爱学习呀嘻嘻 ，回复关键字JavaScript入门源码素材进行获取哦。
JavaScript入门(五)：结合代码讲解④
JavaScript入门(六)：结合代码讲解⑤
JavaScript入门(一)：JavaScript基础知识
JavaScript入门(二)：结合代码讲解①
JavaScript入门(三)：结合代码讲解②
JavaScript进阶链接：
JavaScript进阶(一)：类、对象、构造函数、原型对象、继承
JavaScript进阶(二)：函数、this、严格模式、高阶函数、闭包、递归
JavaScript进阶(三)：正则表达式、ES6语法、ES6内置对象
JavaScript进阶(四)：ES6特性
JavaScript进阶(五)：ES7、ES8、ES9、ES10、ES11新特性
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！