还不明白JS中的内置对象吗？快来这里！

来来来，JavaScript核心基础语句送给你们 学JS你不会DOM算真的学会了吗？ 对JavaScript中的 事件 进行疯狂 处理 用BOM来实现轮播图效果 我们来实现创建JavaScript中的自定义对象 JS中构造函数的原型prototype 还不明白JS中的内置对象吗？ 快来这里！ JavaScript中数据如何存储在客户端？带你看看Cookie和WebStorage

一、String

1. 定义方式

语法：

var str = 'welcome'; //基本数据类型string var str = new String('welcome'); //引用数据类型String

使用length属性获取字符串的长度。

2. 常用函数

方法描述charAt(index)返回在指定索引位置的字符，也可使用[索引]的方式charCodeAt(index)返回在指定的位置的字符串的UnicodeindexOf(字符串.index)返回某个指定的字符串值在字符串中首次出现的位置，找不到返回-1lastIndexOf(字符串.index)返回某个指定的字符串值在字符串中最后出现的位置toLowerCase()把字符串转化为小写yoUpperCase()把字符串转化为大写substr(start,length)从起始索引号提取字符串中指定数目的字符substr(start,stop)提取字符串中两个指定的索引号之间的字符slice(strat,end)提取字符串的某个部分，并返回提取道德新字符串split(separator,howmany)把字符串分割为字符串数组trim()去除字符串开头和末尾的空格fromCharCode()将字符串编码转换为字符串，静态方法 var str = 'Hello World'; //1.charAt() 获取指定索引位置的字符 console.log(str.charAt(1)); //索引你从0开始 console.log(str.charAt(str.length-1)); //获取最后一个字符 console.log(str.charAt(24)); //如果找不到，返回空字符串 console.log(str[0]); //等价于str.charAt(0) //2.charCodeAt() 获取指定索引位字符置的Unicode编码 console.log(str.charCodeAt(1)); //3.indexOf() 获取指定索引位置字符的Unicode编码 console.log(str.indexOf('o')); console.log(str.indexOf('ea')); //找不到返回-1 console.log(str.indexOf('o',5)); //索引为5的位置开始向后查找 //4.lastIndeOf() 查找指定的字串在字符串最后一次出现的索引位置 console.log(str.lastIndexOf('o')); //5.toLowerCase()、toUpperCase() 转换为小写/大写 console.log(str.toLowerCase()); console.log(str.toUpperCase()); //原字符串不变 //6.substr() 截取指定长度的字符 console.log(str.substr(2,3)); //从索引为2的字符开始，截取3个字符 console.log(str.substr(2)); //如果省略第二个参数，表示截取到末尾 console.log(str.substr(-5)); //支持负数，表示从倒数第几个开始截取 console.log(str.substr(-5,2)); //7.substring() 截取指定索引范围内的字符 console.log(str.substring(2,3)); //截取索引为[2，3)之间的字符 console.log(str.substring(2)); //如果省略第二个参数，表示截取到末尾 console.log(str.substring(-3)); //不支持负数，会从头开始截取 console.log(str.substring(5，2)); //具有自动交换的功能，等价于str.substring(2,5); //8.slice() 截取指定索引范围内的字符 console.log(str.slice(2,3)); console.log(str.slice(2)); console.log(str.slice(-5)); //不支持负数 console.log(str.slice(5,2); //不具有自动交换的功能 //9.split() 将字符换分割为数组 console.log(str.split(' ')); //以空格进行拆分 console.log(str.split('')); //每个字符之间都进行拆分 console.log(str.split(' ',2)); //第一个参数表示拆分依据，第二个参数表示拆分返回几个数组 //10. trim() 去除字符串首尾空格 console.log(str.trim()); //11.fromCharCode() 将字符编码转换为字符串 console.log(String.fromCharCode(97)); //a

3. 基本包装类型

基本类型的包装类型

为了便于操作基本类型，提供了三个特殊的引用类型：String、Number、Boolean，用来对基本类型进行包装，称为基本包装类型当访问基本类型值时，会自动创建一个对应的基本包装类型的对象，从而能够调用一些方法来操作这些数据当操作基本来行值的语句一经执行完毕，就会立刻销毁创建的包装对象因为有了基本包装类型，所以JS的基本类型值可以被当作对象来访问 /** * 引用类型 */ //使用构造函数，引用类型String var stu = new String('tom'); ste.age = 20; stu.run = function(){ console.log('跑步'); } console.log(stu); console.log(stu.age); stu.run(); /** * 基本包装类型 * string ——> String * number ——> Number * boolean ——> Boolean */ var stu = 'tom'; console.log(stu.prototype); //基本数据类型没有原型prototype //基本数据类型本身是没有方法的，此时能调用方法是因为JS内部自动创建了对应的包装类型 console.log(stu.CharAt(1)); console.log(stu.toUpperCase()); //NUmber和Boolean也是相同的 var num = 8.24; console.log(num.toFixed(1)); //取一位小数 var flag = true; flag.valueOf(); //返回布尔对象的原始值

二、Date

1. 定义方式

语法：

var date = new Date(); //定义一个日期对象，表示当前时间 var date = new Date(year,month,day,hour,minute,second); //参数为指定的年、月、日、时、分、秒。 月从0开始，表示1月 var date = new Date(millSeconds); //参数为与1970-01-01相差的毫秒数

2. 常用方法

getFullYear()以四位数字返回年份getMonth()返回月份（0-11），0表示1月getDate()返回一个月中的某一天（1~31）getHours()返回小时（0~23）getMinutes()返回分钟（0~59）getseconds()返回秒数（0~59）getMilliseconds()返回毫秒（0~999）getDay()返回一周中的某一天（0~6，0表示周日）getTime()返回从1970-01-01 00:00:00至今的毫秒数toUTCString()把Date对象转换为世界标准时间的字符串toLocaleString()把Date对象转换为本地时间的字符串

setXxx方法与getXxx方法类似，用于设置对应的值。

//获取时间 var today = new Date(); var year = today.getFullYear(); var month = today.getMonth()+1; var date = today.getDate(); var hour = today.getHours(); var minute = today.getMinutes(); var second = today.getMillisecond(); var day = today.getDay(); var weekday = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; var time = today.getTime(); console.log(year+'年'+month+'月'+day+'日'+hour+':'minute+':'+second+' '+milloSecond+' '+weekday[day]); console.log(time); console.log(today.toUTCString()); console.log(today.toLocalString()); //设置时间 today.setMonth(today.getMonth()+2); today.setDate(8); console.log(today); //Date可以自动调整至正确时间 var date = new Date(2020,4,32); //6月第一天 var date = new Date(2020,4,0); //4月第一天 var date = new Date(2020,2,0); //闰年，2月有29天，两种情况：（1）能被4整除，但不能被100整除（2）能被400整除 var date = new Date(2021,2,0); //平年，2月有28天 //计算某年某月有多少条 var year = prompt('请输入年份：')*1； var month = prompt('请输入月份：')*1; var date = new Date(year,month,0); //表示输入月份的最后一天的日期 console.log(date.getDate()+'天');

制作12小时时钟

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //制作12小时时钟 function showTime(){ var today = new Date(); var year = today.getFullYear(); var month = today.getMonth()+1; var date = today.getDate(); var hour = today.getHours(); var minute = today.getMinutes(); var second = today.getSeconds(); var day = today.getDay(); var weekday = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; var time = today.getTime(); var tip = '上午'; if(hour>12){ hour -=12; tip = '下午'; } var time = year+'年'+month+'月'+date+'日 '+weekday[day]+' '+tip+hour+':'+minute+':'+second; document.getElementById('time').innerHTML = time; } //检查时间，为个位数补0 function checkNum(num){ if(num<10){ return '0'+num; } return num; } window.onload = function(){ setInterval(showTime,1000); } </script> </head> <body> <div id="time"> </div> </body> </html>

三、RegExp

1. 简介

正则表达式是一门独立的语言，有自己的语法，用于检测指定字符串是否符合特定规则。

正则表达式就是用来定义规则的，称为Regular Expression

在JS中提供了RegExp对象，表示正则表达式。

2. 定义方式

创建正则表达式，两种方法：

使用字面量 var reg = /pattren/attribute; 使用构造函数 var reg = new RegExp(pattern,attribute);

说明：

pattern 表示匹配模式，用于指定字符串匹配规则，有元字符、量词、特殊符号组成attribute 表示匹配规则，取值：i忽略大小，g全局匹配，m多行匹配

3. 匹配规则

元字符：

符号描述\s匹配任何的空白字符\S任何非空白字符\d匹配一个数字字符，等价于【0-9】\D除了数字之外的任何字符\w匹配一个数字、下划线或字母字符\W任何非单字字符.匹配除了换行符之外的任意字符

量词：指定字符出现的次数

{n}匹配前一项n次{n,}匹配前一项n次，或者多次{n,m}匹配前一项至少n次，但是不能超过m次*匹配前一项0次或者多次，等价于{0，}+匹配前一项1次或多次，等价于{1，}?匹配前一项0次或1次，也就是说前一项是可选的，等价于{0，1}

特殊符号：具有特殊含义的符号

符号描述/.../代表一个模式的开始和结束^匹配字符串的开始，即表示行的开始$匹配字符串的结束，即表示行的结束[ ]表示可匹配的列表( )用于分组|表示或者[^]在[ ]中的尖括号表示非

注：[\u4E00-\u9FA5] 用来匹配中文字符

4. 基本方法

方法描述test()测试方法，测试一个字符串是饭否匹配正则表达式的规则，返回true或falseexec()搜索方法，用于在字符串中查找符合正则表达式对象所指定的子字符串，返回找到的结果，若找不到则返回null

String对象的以下方法，支持使用正则表达式：

方法描述search()检索与正则表达式匹配的子字符串，返回第一个匹配的子串的起始位置，若找不到则返回-1match()检索与正则表达式匹配的子字符串，返回第一个匹配结果（无全局标志g）或存放所有匹配结果的数组（有全局标志g）replace()检索与正则表达式匹配的子字符串，然后用第二个参数来替换这些子串，全局标志g有效split()按照正则表达式匹配的字符串作为分隔符 /** * 定义正则表达式 */ //1.使用字面量 var reg = /a/i; //包含字母a，忽略大小写 //2.使用构造函数 var reg = new RegExp('a','ig'); /** * 正则表达式的方法 */ //1.test() 测试方法，测试一个字符串是饭否匹配正则表达式的规则，返回true或false console.log(reg.test('heAllo')); //2.exec() 搜索方法，用于在字符串中查找符合正则表达式对象所指定的子字符串，返回找到的结果，若找不到则返回null console.log(reg.exec('heallAo')); //第一个a console.log(reg.exec('heallAo')); //第二个a //3.匹配规则 var reg = /\d/; //包含一个数字 var reg = /^\d$/; //必须为一个数字 var reg = /\w/; //包含一个数字、字母或下划线 var reg = /^\d{2}$/; //必须为两个数字 var reg = /^\d{2,5}$/; //必须为2~5个数字 var reg = /^a\d*$/; //以a开头，后面只能出现数字，也可以没有数字 var reg = /^a\d+$/; var reg = /^a\d?$/; var reg = /^[abc]$/i; //只能有abc中的一个 var reg = /^(abc)${2}/; //必须为abcabc var reg = /^a|b$/; //ab中的一个 var reg = /^[^abc]$/; //不能有abc中的任何一个 /** * String方法 */ //1.search() 返回索引 var str = 'he23llo wor45ld'; console.log(str.search(/\d{2}/)); //如果找不到返回-1 //2.match() 返回结果 console.log(str.match(/\d{2}/g)); //3.replace() 替换 console.log(str.replace(/\d{2}/g,'xx')); //4.split() 拆分 console.log(str.split(/[ ]/)); //以空格进行拆分

练习

//1.将字符串welcome to javascript中的所有单词首字母变成大写 var str = 'welcome to javascript'; var arr = str.split(' '); for(var i=0;i<length;i++){ var c = arr[i].charAt(0); arr[i] = arr[i].replace(c,c.toUpperCase()); } str = arr.join(' '); console.log(str); //2.将字符串aBC Def World Hello通过操作将其改为HELLO-WORLD-DEF=ABC var str = 'aBC Def World Hello'; str = str.toUpperCase().split(' ').join('-'); console.log(str); //3.假设有一个字符串get-element-by-id,将其转化成驼峰形式getElementById var str = 'get-element-by-id'; var srr = str.split('-'); for(var i=1;i<arr.length;i++){ var c = arr[i].charAt(0); arr[i] = arr[i].replace(c,c.toUpperCase()); } str = arr.join(''); console.log(str); //4.通过原型为String添加新的方法getNumberCount()，返回字符串中数字的个数 String.prototype.getNumberCount() = function(){ var result = this.match(/\d/g); return result.length; } var str = 'he$llo520wor432ldwelcome43242to342'; //5.实现倒计时的功能 function checkNum(num){ if(num<10){ return '0'+num; } return num; } var timer; function showTime(){ var now = new Date(); var tomorrow = new Date(2020,10,11); var seconds = Math.floor((tomorrow.getTime()-new.getTime())/1000); //相隔总秒数 console.log(seconds); if(seconds){ document.getElementById('time').innerHTML = '明天已经到了'; return; } var day = checkNum(Math.floor(seconds/(24*60*60))); //天数 var hour = checkNum(Math.floor(seconds/(60*60)%24)); //小时 var minute = checkNUm(Math.floor(seconds/60%60)); //分钟 var second = checkNum(Math.floor(seconds%60)); //秒数 var time = '距离明天还有：'+day+'天'+hour+'小时'+minute+'分钟'+second+'秒'; document.getElementById('time').innerHTML = time; timer = setTimeout(showTime(),1000); } /*6.提示用户输入一个大于50的正整数，在控制台上输出该数字的所有求和表达式，如：用户输入99，则输出如下： 1+89=90 2+88=90 4+86=90 ... 8+82=90 10+80=90 ... 要求： 1.判断用户的输入是否要求，如果不符合则提示用户用户并重新输入，直到输入符合为止 2.如果第一个加数中包含3或9，则不输出 3.不输出交换值，即如果输出2+88=90，则不输出88+2=90，但87+3=90需要输出 */ var num = Number(prompt('请输出一个大于50的正整数：')); while(isNaN(num) || num<=50 || parseInt(num)!=num){ num = Number(prompt('输入无效，请重新输入一个大于50的正整数：')); } var reg = /[39]/; for(var i=1;i<num;i++){ if(i<=num/2){ if(!reg.test(i)){ console.log(i+'+'+(num-i)+'='+num); } }else{ if(!reg.test(i) && reg.test(num-i)){ console.log(i+'+'+(num-i)+'='+num); } } }

用户注册界面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> form { line-height: 30px; } .error { font-size: 12px; color: red; } .success { color: green; } </style> <script> //用户名由数字、字母、下划线、点号、横线、中文字符组成，但只能以字母或数字开头，且长度位3~14位 function checkUsername(){ var reg = /^[\da-z][\u4E00-\u9FA5\w.-]{2,13}$/i; var username = $('usename').value.trim(); if(!reg.test(username)){ $('usernameInfo').innerHTML = '用户名由数字、字母、下划线、点号、横线、中文字符组成，但只能以字母或数字开头，且长度位3~14位'; $('usernameInfo').className = 'error'; return false; } $('usernameInfo').innerHTML = 'ok'; $('usernameInfo').className = 'success'; return true; } //密码只能由数字和字母组成，长度位6~10位 function checkPwd(){ var reg = /^[\da-z]{6,10}$/; var pwd = $('pwd').value; if(!reg.test(pwd)){ $('pwdInfo').innerHTML = '密码只能由数字和字母组成，长度位6~10位'; $('pwdInfo').className = 'error'; return false; } $('pwdInfo').innerHTML = 'ok'; $('pwdInfo').className = 'success'; return true; } //两次输入的密码必须相同 function checkRepwd(){ if($('repwd').value!=$('pwd').value){ $('repwdInfo').innerHTML = '两次输入的密码不一致'; $('repwdInfo').className = 'error'; return false; } $('repwdInfo').innerHTML = 'ok'; $('repwdInfo').className = 'success'; return true; } //手机号，11位，1开头 function checkPhone(){ var reg = /^1[3-9]\d{9}$/; var phone = $('phone').value; if(!reg.test(phone)){ $('phoneInfo').innerHTML = '手机号格式不正确'; $('phoneInfo').className = 'error'; return false; } $('phoneInfo').innerHTML = 'ok'; $('phoneInfo').className = 'success'; return true; } //判断邮箱 function checkEmail(){ var reg = /^\w+@\w+(\.[\da-z]{2,4}){1,2}$/i; //因为.号有特殊意义，需要\.进行转移 var email = $('email').value; if(!reg.test(email)){ $('emailInfo').innerHTML = '邮箱格式不正确'; $('emailInfo').className = 'error'; return false; } $('emailInfo').innerHTML = 'ok'; $('emailInfo').className = 'success'; return true; } function checkAll(){ //如果所有数据都符合要求，则返回true，否则返回false return checkUername()&&checkPwd()&&checkRepwd()&&checkPhone()&&checkEmail(); } function $(id){ return document.getElementById(id); } </script> </head> <body> <h2>用户注册</h2> <form action="success.html" onsubmit="return checkAll()"> 用户名：<input type="text" id="usename" onblur="checkUsername()"><span id="usernameInfo"></span><br> 密码：<input type="password" id="pwd" onblur="checkPwd()"><span id="pwdInfo"></span><br> 确认密码：<input type="password" id="repwd" onblur="checkRepwd()"><span id="repwdInfo"></span><br> 手机号：<input type="text" id="phone" onblur="checkPhone()"><span id="phoneInfo"></span><br> 电子邮箱：<input type="text" id="email" onblur="checkEmail()"><span id="emailInfo"></span><br> <input type="submit" value="注 册"> <input type="reset" value="重 置"> </form> </body> </html>

5. 下拉列表

Select对象：表示HTML表单中的一个下拉列表

属性

length 设置或饭hi下拉列表中选项的数量

selectedIndex 设置或返回下拉列表中被选中项的索引

value 返回下拉列表中被选项的值

options 返回下拉列表中所有的选项，值位Option对象数组（当该数组改变时对应下拉列表中选项也会跟着改变）

方法

add() 向下拉列表中添加一个选项

事件

onchange() 下拉列表的选项改变时触发

Option对象：表示HTML表单中下拉列表的一个选项

属性

text 设置或返回在页面中显示的文本值

value 设置或返回传递给服务器的值

构造函数

Option(文本值，服务器值) 创建一个选项

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> function deoSelect(){ var degree = document.getElementById('degree'); //length属性，设置或返回下拉列表中选项的数量 console.log(degree.length); degree.length = 0; //清空下拉列表 //selectedIndex属性，设置或返回下拉列表中被选中项的索引 console.log(degree.selectedIndex); degree.selectedIndex = 3; //value属性，返回下拉列表中被选中项的值 console.log(degree.value); //option属性，返回下拉列表中所有的选项，值位Option对象数组 var option = degree.options; console.log(options); for(var option of options){ console.log(option.text,option.value); } //在下拉列表的最前面加一个选项 console.log(option[1]); option[1].text = '中专'; options[1].value = 'zhongzhuna'; //添加选项 var option = document.getElementById('option'); option.innerText = '博士'; option.value = 'boshi'; degree.appendChild(option); var option = new Option('博士','boshi'); degree.add(option); //向下拉列表中添加一个选项 var option = new Option('中专','zhongzhuan'); degree.add(option,degree.children[1]); } function doChange(degree){ //var degree = document.getElementById('degree'); //console.log(degree.value); console.log(degree); } </script> </head> <body> <button onclick="deoSelect()">操作下拉列表</button> <br> 学历： <select id="degree" onchange="doChange(this)"> <option value="0">--请选择学历--</option> <option value="gaozhong">高中</option> <option value="dazhuan">大专</option> <option value="benke">本科</option> <option value="yanjiusheng">研究生</option> </select> </body> </html>

省市级联的实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var proviences = [ { id:1001, name:'江苏省', cities:[ { id:1, name:'南京市' }, { id:2, name:'无锡市' }, { id:3, name:'苏州市' }, { id:4, name:'扬州市' } ] }, { id:1002, name:'山东省', cities:[ { id:1, name:'济南市' }, { id:2, name:'威海市' }, { id:3, name:'日照市' }, { id:4, name:'青海市' } ] }, { id:1003, name:'广东省', cities:[ { id:1, name:'广州市' }, { id:2, name:'佛山市' }, { id:3, name:'东莞市' }, { id:4, name:'珠海市' } ] } ]; window.onload = function(){ for(var p of proviences){ var option = new Option(p.name,p.id); $('provience').add(option); } } function changeCity(pid){ //清空城市选项列表 $('city').length = 0; //判断是否未选择省份 if(pid == 0){ $('city').add(new Option('--选择城市--',0)); return; } //判断查找选中省份所对应的城市 for(var p of proviences){ if(p.id == pid){ for(var c of p.cities){ var option = new Option(c.name,c.id); $('city').add(option); } break; } } } function $(id){ return document.getElementById(id); } </script> </head> <body> <select id="provience" onchange="changeCity(this.value)"> <option value="0">--选择省份--</option> </select> <select id="city"> <option value="0">--选择城市--</option> </select> </body> </html>

年月日级联的实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = function(){ //初始化数据 addOption($('year'),1990,2030); addOption($('month'),1,12); addOption($('date'),1,31); //默认显示当前日期 var now = new Date(); $('year').value = now.getFullYear(); $('month').value = now.getMonth()+1; $('date').value = now.getDate(); //为下拉列表绑定事件 $('year').onchange = function(){ changeDate($('year').value,1,1); } $('month').onchange = function(){ changeDate($('year').value,$('month').value,1); } } //实现添加Option的功能 function addOption(select,start,end){ for(var i=start;i<=end;i++){ select.add(new Option(i,i)); } } //实现修改日期的功能 function changeDate(year,month,date){ //计算某年某月的天数 var days = new Date(year,month,0).getDate(); //清空并重新添加天数 $('date').length = 0; addOption($('date'),1,days); $('year').value = year; $('month').value = month; $('date').value = date; } function $(id){ return document.getElementById(id); } </script> </head> <body> <select id="year"></select>年 <select id="month"></select>月 <select id="date"></select>日 </body> </html>