JavaScript基础知识点导航
1 JavaScript基础
1.1 基本语法
1.2 变量
1.3 数据基本类型
1.4 数据类型转换
1.5 运算符
1.6 if条件语句
1.7 switch条件语句
1.8 while、do-while、for循环
2 函数
2.1 定义函数
2.2 arguments
2.3 函数的类型
2.4 标签和属性
2.5 鼠标事件
3 DOM与DOM编程
3.1 Tab栏
3.2 控制标签css
3.3 控制表单元素的值
3.4 DOM操作
4 数组与对象
4.1 创建数组
4.2 数组方法
4.3 选项卡
4.4 字体图标
4.5 新窗口与用户交互
4.6 定时器
5 对象与正则表达式
5.1 对象
5.2 Date对象
5.3 Math对象
5.4 String对象
5.5 正则表达式
1.JavaScript
1.1 JavaScript基础
1.1.1 基本语法
引入外部的js（JavaScript的简称）文件：。
JavaScript由三部分组成：ECMScript+DOM+BOM。
JavaScript代码写在script标签中，script标签可以写在页面的任意地方。
原则上，能用css解决的问题就不要用js。
如：
<script>
alert(1);
// 弹出框
console.log('在控制台中输出');
// 在控制台中输出
</script>
JavaScript从上到下执行，每行代码结束都要加分号，代码出错后，在错误代码后面的代码将无法执行。
1.1.2 变量
声明变量：var 变量名称，如 var a。
变量：值是可以改变的。
在JavaScript中，是区分大小写的。并且单引号和双引号的用法一模一样，但单引号内不能嵌入单引号，双引号内不能嵌入双引号；单引号内可以嵌入双引号，双引号内可以嵌入单引号。
变量命名规则：
1）、不能以数字开头；
2）、可以由数字、字母、$和下划线_组成；
3）、区分大小写，不能有空格；
4）、长度最大为255个字符；
5）、不能是关键字或者保留字。
单行注释：ctrl+/
多行注释：ctrl+shift+/
变量提升：在JavaScript中，页面加载时，会将用var声明的变量提升到作用域的最前端。但只能提升声明，不能提升赋值。如果变量先赋值再使用，可以省略关键字var。如果先使用变量，再赋值，不可以省略关键字var。
1.1.3 数据基本类型
数据基本类型（5种）：
1）、string字符串类型：用引号括起来的，包括单引号和双引号都是string类型。
2）、number数字类型：比如数字0，1；
3）、Boolean布尔类型：值只有两种可能，true或false；
4）、undefined：未声明或未赋值的变量；
5）、null：标准错误，无法检测。
复合数据类型：object。
&emsp**;typeof(数据/表达式)**，作用是检查数据类型。
isNaN(数据)：判断数据是否为NaN。NaN：not a number 和自身不相等，不等于任何值。
1.1.4 数据类型转换
隐式转换：
数值型+字符型=字符型
布尔型+字符型=字符型
数值型+布尔型=数值型
强制类型转换
var 字符串 = parseInt(数据)：将字符串强制转换为数值类型，只能转换以数字开头的字符串，如果转化成功，则得到一个整数，如果转换失败，得到NaN。
var 字符串 = parseFloat(数据)：将字符串强制转换为数值类型，只能转换以数字开头的字符串，返回的结果是浮点数，如果转换成功，则得到一个浮点数，如果转换失败，则返回NaN。
var 任意类型数据 = Number(数据)：将数据强制转换为数值型，可以转换任何类型的数据，如果要转换字符串类型的数值，只能转换值为数字的字符串，如果转换成功，返回一个数值类型的数据，否则返回NaN。
var 数值类型/布尔类型 = 数据.toString()：将数值类型的数据或者布尔类型的数据强制转换成字符串类型。
1.1.5 运算符
取余运算符：%，应用场景：一般用于分情况进行的唱歌。
补充：在页面（document）中，可以通过Id名的方式获取元素
.οnclick=function(){}，可以给获取到的元素绑定点击事件。
例：红绿灯变色
var a=0;
var obtn=document.getElementById('btn');
var obox=document.getElementById('box');
obtn.onclick=function(){
a++;
console.log(a%3);
if(a%3==0){
obox.style.background = 'red';
}else if(a%3==1){
obox.style.background = 'green';
}else{
obox.style.background = 'yellow';
}
}
关系运算符
=：赋值
双等号：判等，和数据类型无关，只要值相等，就返回为true。和!=一组。
三等号：判等，和数据类型有关，当值和类型都相等时，才返回true。和!==一组。
逻辑运算符
逻辑与：&&，只要遇到null,false,undefined,0其中一种，就会停止代码执行，直接输出最后一次代码执行的结果。
逻辑或：||，只要遇到不是null,false,undefined,0中任意一种，就是终止代码执行，直接输出最后一次代码的执行结果。
例1：console.log(1&&‘null’&&‘hello’&&false&&undefined&&0&&9&&4);
结果为:false
例2：console.log(0||null||undefined||‘hello’||1||2||‘hello’);
结果为：hello
1.1.6 if条件语句
情况1：
if(条件){
当条件为真，存在即为真。当条件为false,null,0,undefined中任意一种时，则表示不存在，不存在即为假。
}
情况2：
If(条件1){
条件1为真时执行的代码
}else if(条件2){
条件1为假，条件2为真时执行的代码
}else{
条件1和条件2都为假时执行的代码
}
例1：输入一个分数，如果分数为90到100，输出等级A；如果分数为80到90，输出等级B；如果分数为70到80，输出等级C；如果分数为60到70，输出等级D；分数低于60，输出等级E；
<script>
var num=prompt('请输入一个分数：');
num=parseFloat(num);
// num=89
if(num<=100&&num>=0){
if(90<=num){
alert('等级A');
}else if(80<=num){
alert('等级B');
}else if(70<=num){
alert('等级C');
}else if(60<=num){
alert('等级D');
}else{
alert('等级E');
}
}else{
alert('请输入正确的分数');
}
</script>
1.1.7 switch条件语句
switch(表示式){
case 情况1:
符合情况1时执行的代码
break;跳出switch语句
case 情况n：
符合情况n执行的代码
break;
default:
默认情况，当前面的情况都不符合时执行的代码
break;
}
例：
<button id="btn">按钮</button>
<script>
var obtn=document.getElementById('btn');
var obox=document.getElementById('box');
var a=0;
obtn.onclick=function(){
a++;
switch (a%3) {
case 0:
obox.style.background = 'red';
break;
case 1:
obox.style.background = 'green';
break;
default:
obox.style.background = 'yellow';
break;
}
}
</script>
1.1.8 while、do-while、for循环
while循环：
while(条件){
条件为真，进入循环体。
}
出现0,null,undefined,false其中任何一种，条件为假循环体。
例1：计算1+2+3+…+100的和
var n=0;
var count=0;
while (n<100) {
n++;
count+=n;
}
console.log(count);
do-while循环：
do{
循环体
}while(条件)
do-while：先执行一次循环体，再判断条件，条件为假时，跳出循环。
while：先判断条件，如果条件，则执行循环体，否则跳出循环。
例1：
var a=0;
var b=0;
while (a<0) {
console.log('A');
}
do{
console.log('B');
b++;
}while(b==2)
for循环：
for(循环初始条件;循环约束条件;循环继续下去的条件){
循环体
}
执行步骤：
1） 、执行循环初始条件，只执行一次。
2） 、执行循环约束条件，如果条件满足，执行循环体，否则跳出循环。
3） 、执行循环体。
4） 、执行循环继续下去的条件
例：九九乘法表
for(var i=1;i<10;i++){
for(var j=1;j<=i;j++){
if(i*j<10){
document.write(j+'*'+i+'='+i*j+' ');
}else{
document.write(j+'*'+i+'='+i*j+' ');
}
}
document.write('<br>');
1.2 函数
函数：将一些可重复使用的并且有特殊功能的代码封装起来。函数具有封装性。
1.2.1 定义函数
$(’.tex’).after(lis);定义函数：
$(’.tex’).after(lis);function 函数名{ 函数体 }
$(’.tex’).after(lis);使用函数：函数名(参数)
$(’.tex’).after(lis);使用函数，即执行函数体中的代码
$(’.tex’).after(lis);普通定义函数:
function add(x,y){
console.log(x+y);
}
add(10,20);
匿名函数:
var a = function(){
console.log(‘A’);
}
a();
1.2.2 arguments
定义函数时，传递的参数为形式参数，称为形参，相当于声明变量。
arguments得到的是使用函数时传递的实参，是一个数组。其中,arguments[0]获取第一个实参,arguments.length是获取实参的个数。函数名.length是获取形参的个数。
而使用函数，传递的参数为实际参数，称为实参，相当于给变量赋值。
例：
<script>
function add(x,y,z){
console.log(arguments);
console.log(arguments[0]);
console.log(arguments[arguments.length-1]);
console.log(add.length);
if(add.length==arguments.length){
}else{
}
}
add(2,3);
</script>
1.2.3 函数的类型
1)、无参无返回值函数
function add(){
console.log(‘a’);
}
2)、有参无返回值函数
function add(x,y){
x+y;
}
3)、无参有返回值
function add(){
var a = 1;
var b = 2;
return a+b;
}
4)、有参有返回值函数
function add(x,y){
return x+y;
}
使用函数时最终得到的是return中的值，函数遇到return会终止执行，如果没有return，浏览器编译时会自动加上return，但返回的值为空。
在JavaScript中，除了在函数中声明的变量，其他的都是全局变量。
1.2.4 标签和属性
通过Id名获取标签：var 变量名 = document.getElementById(‘id名’);
通过Id名获取的标签是唯一的。如果页面中有多个相同的Id名，获取到的是页面中第一个该Id名的标签。
通过标签名获取标签：var 变量名 = document.getElemgntsByTagName(‘标签名’);
通过类名获取标签：var 变量名 = document.getElementsByClassName(‘类名’);
通过name值获取标签：var 变量名 = document.getElementsByName(‘name值’);
通过标签名、类名、name值获取的标签，得到的是一个类数组，就算获取到的标签只有一个，也是类数组。
获取标签属性：标签.getAttribute(‘属性名’);
获取标签属性，得到的是标签属性的值。
新建标签：标签.setAttribute(‘属性名’,’属性值’);
如果有该属性，表示修改属性，如果没有该属性，表示增加属性，可以添加任何属性。
&emsp**;删除属性：标签.removeAttribute(‘属性名’);**
1.2.5 鼠标事件
事件三要素：
事件源.事件类型()=function(){
事件触发后执行的代码
}
onmouseenter鼠标移入onmouseleave鼠标移出
onfocus和onblur事件是表单元素特有
onmouseover和onmoueout一组，会触发子元素；
onmouseenter和onmouseleave一组，不会触发子元素。
<script>
function abb(a){
return document.getElementById(a);
}
abb('box').onmouseenter=function(){
this.style.background = 'yellow';
}
abb('box').onmouseleave=function(){
this.style.background = 'tomato';
}
abb('input').onfocus=function(){
abb('box').style.background = 'black';
}
abb('input').onblur=function(){
abb('box').style.background = 'tomato';
}
</script>
在事件中，this指代事件源。在页面中，this值window对象。
1.3 DOM与DOM编程
1.3.1 Tab栏
tab.css：（主要设置页面样式）
*{
margin: 0px;
padding: 0px;
}
section{
border: 1px solid #DEE1E6;
width: 248px;
margin: 50px auto;
}
#uls{
list-style: none;
overflow: hidden;
}
#uls li{
float: left;
padding: 10px 14.89px;
cursor: pointer;
border-top: 2px solid transparent;
border: 0.34px solid #EBEBEB;
border-left: none;
// position:relative;
}
#uls li:nth-of-type(4){
border-right: none;
}
#box li img{
list-style: none;
height: 150px;
width: 230px;
margin:8px auto;
margin-left:8px;
}
.box>div{
display: none;
position:relative;
}
.box>div ul li p{
width: 200px;
position: absolute;
left:50%;
top: 130px;
margin-left:-100px;
white-space: nowrap;
// color:blue;
// font-weight: bold;
}
#uls li:nth-of-type(1){
border-top: 2px solid green;
border-bottom: none;
}
.box>div:nth-of-type(1){
display: block;
}
.box>div ul li:nth-of-type(1){
list-style:none;
margin-left:0px;
}
.box>div ul li{
margin-left:20px;
}
tab栏.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/tab.css">
</head>
<body>
<section>
<ul id="uls">
<li>热点</li>
<li>娱乐</li>
<li>故事</li>
<li>生活</li>
</ul>
<div class="box" id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</section>
<script>
var lis=document.getElementById('uls').children;
var box=document.getElementById('box').children;
// console.log(lis);
for(var i=0; i<lis.length;i++){
lis[i].setAttribute('index', i);
// 增加属性index，属性值为i代表的值
lis[i].onclick=function(){
var a=this.getAttribute('index');
console.log(a);
// 排他思想：除了自己有特殊表现，其他都一样
// 第一步：先将所有的li的上边框设置为透明色
for(var j=0;j<lis.length;j++){
lis[j].style.borderTop='2px solid transparent';
box[j].style.display = 'none';
}
// 将当前的li的上边框设置为green
this.style.borderTop='2px solid green';
box[a].style.display = 'block';
// 控制对应的内容
}
}
</script>
</body>
</html>
结果为：
1.3.2 控制标签css
标签.style.样式=’样式具体的值’;如果样式出现中横线，如border-radius，将中横线去掉，中横线后面的单词首字母大写，写成borderRadius。如果原来就有该样式，表示修改样式；如果没有，表示增加样式。
例：
<div id="box" style="width: 100px;height: 100px;background: tomato;"></div>
<script>
var box=document.getElementById('box');
box.style.background = 'green';
box.style.borderRadius='50%';
</script>
1.3.3 控制表单元素的值
获取双标签中的内容：标签.innerHTML;
获取表单元素的值：表单元素.value;
修改表单元素的值：表单元素.value=’修改后的值’;
例：有三个input框，一个按钮，点击按钮，将第一个input框和第二个input框的值相加，并把得到的值渲染的第三个input框中（即做一个简单的加法计算器）。
<body>
<input type="text" id="aa1">
<input type="text" id="aa2">
<input type="text" id="aa3">
<button id="btn">按钮</button>
<script>
function abb(a){
return document.getElementById(a);
}
abb('btn').onclick=function(){
var aa1=abb('aa1').value;
aa1=parseFloat(aa1);
var aa2=abb('aa2').value;
aa2=parseFloat(aa2);
console.log(aa1+aa2);
abb('aa3').value=aa1+aa2;
abb('aa1').value='';
}
</script>
</body>
1.3.4 DOM操作
标签.childNodes：获取元素节点的所有子节点，包括文本节点和元素节点。
标签.firstChild ：获取元素节点的第一个子节点，可以是文本节点或者元素节点.
标签.nextSibling：获取下一个统计节点，可以是文本节点或者元素节点。
a.insertBefore(b,c)：追加标签，a是b,c的父级，在c前面插入b。
&emsp**;b.removeChild(b)**：删除标签，a是b的父级，删除b标签。
1.4 数组与对象
1.4.1 创建数组
创建一个空数组：var a = [];
通过对象的方式创建数组：var b = ‘aa’;
创建空数组，长度为10：var c = new Array(10);
创建空数组，长度为2，数组元素为10：var d = new Array(10,2);
通过new Array()方式创建数组，当只有一个值并且值为数字，表示创建一个长度为该数值的空数组，否则值表示为数组元素。
数组名[索引值]：获取某个数组元素，索引值从0开始，数组不能进行取操作，必须精确到某一个数组元素。
数组名[索引值]=’某个值’：如果索引值本身就 存在，表示修改该索引值下的数组元素，如果索引值本身不存在，表示自动扩展数组。
1.4.2 数组方法
数组名.push(新元素)：增加数组元素，将新元素插入到数组后面。
数组名.unshift(新元素)：增加数组元素，将新元素插入到数组前面。
数组名.pop()：删除元素，删除数组中最后一个元素，数组长度减1。
数组名.shift()：删除元素，删除数组中第一个元素，数组长度减1。
delete 数组名[索引值]：删除某个元素，数组长度不变，只是将数组元素置空。
数组名.sort()：将数组按升序的顺序排序。
数组名.reverse()：将数组反向输出。
例：实现数组去重
<script>
var arr=[2,3,'my',5,1,'my',3,6,'my',8,3];
console.log(arr);
var arr2=[];
for(var i=0;i<arr.length;i++){
if(arr2.indexOf(arr[i])==-1){
// 检测元素是否在arr2(空数组)中存在，如果不存在，将元素插入到空数组中
arr2.push(arr[i]);
}
}
console.log(arr2);
</script>
1.4.3 选项卡
选项卡.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box">
<!-- 原则上，能用css解决的问题就不要用js -->
<ul id="uls">
<li>
<p>女装/内衣</p>
<div>女装/内衣</div>
</li>
<li>
<p>男装/户外运动</p>
<div>男装/户外运动</div>
</li>
<li>
<p>女鞋/男鞋/箱包</p>
<div>女鞋/男鞋/箱包</div>
</li>
<li>
<p>美妆/个人护理</p>
<div>美妆/个人护理</div>
</li>
</ul>
</div>
</body>
</html>
style.css
*{
margin: 0px;
padding: 0px;
}
.box{
position: relative;
}
#uls{
list-style: none;
width: 150px;
position: relative;
}
#uls li{
width: 100%;
height: 40px;
background: tomato;
padding: 0 15px;
box-sizing: border-box;
line-height: 40px;
cursor: pointer;
}
#uls li:hover{
background: green;
}
#uls li>div{
position: absolute;
left: 150px;
top: 0;
width: 500px;
height: 300px;
border: 1px solid #000;
display: none;
}
#uls li:hover>div{
display: block;
}
1.4.4 字体图标
字体图标：实际上是文字，显示成图片的样子，文本的样式基本上都可以使用。
字体图标可以通过“阿里巴巴矢量图标”下载，添加入库，在下载的项目中，打开文件： demo_index.html，使用分别有三种方式。如图：
1.4.5 新窗口与用户交互
打开新窗口：window.open(新窗口地址,新窗口名字,新窗口特性)，特性与特性之间用逗号隔开。
用户交互
alert(‘’)：弹出框，用来提示用户;
promt(‘’)：可输入弹出框
confirm(‘’)：可选择弹出框，返回true或者false
1.4.6 定时器
单次定时器
setTimeout(function(){执行的动作},时间:ms)
单次定时器一般用于函数节流。
例：
var timer=setTimeout(function(){
document.body.style.background = 'yellow';
},2000)
多次定时器
setInerval(function(){执行的动作,时间:ms}
多次定时器：在一定的时间间隔内，重复执行某种动作
补充：
生成随机数：Math.random()。生成随机数，范围是0到1，可取0不可取1
例：
<body>
<h1 id="txt"></h1>
<button id="btn1">开始</button>
<button id="btn">停止</button>
<script>
var obtn=document.getElementById('btn');
var obtn1=document.getElementById('btn1');
var arr=['a','b','c','d','e','f','g','h','i','j','k','l','m','n'];
var a=0;
var timer;
obtn1.onclick=function(){
clearInterval(timer);
// 在开始新一次定时器前，清除上一个定时器，避免空间上出现多个定时器
timer=setInterval(function(){
a=Math.random()*arr.length;
// 生成随机数
a=parseInt(a);
console.log(a);
txt.innerHTML=arr[a];
},500)
}
obtn.onclick=function(){
clearInterval(timer);
// 清除多次定时器 clearInterval(定时器名字)
}
</script>
</body>
1.5 对象与正则表达式
1.5.1 对象
数据基本类型：数值、字符、布尔、undefined、null
数据复合类型：object
使用new关键字创建对象：var a = new Object();
使用字面量的方法创建对象：eat:function(a){
console.log(‘准备吃’+a);
}
获取对象属性：对象名字.属性名称 得到的是属性值
&emsp**;使用对象的方法：对象名字.方法名字(参数)**
对象属性成员：包括对象属性和对象方法
1.5.2 Date对象
创建时间对象：new Date();
获取当前系统时间:new Date();
获取年份：new Date().getFullYear();
获取月份，获取到的月份比实际月份少一个月: .getDay()
获取星期，星期日为0：.getDate();
获取日期：.getDate();
创建指定日期的时间对象：new Date(‘2019’,’9’,’2’);
时间对象：.toLocaleString()将时间对象转换成当前系统时间格式的字符串
例：做一个简单的秒杀器，计算当前距离2019年国庆节放假还有多少天，多少个小时，多少分钟，多少秒。
<body>
<h1 id="txt"></h1>
<script>
1day=24hour=24*60min=24*60*60sec=24*60*60*1000ms
1hour=60min=60*60sec=60*60*1000ms
1min=60s=60*1000ms
1s=1000ms
var time=new Date('2019','9','1');
setInterval(function(){
var nowDate=new Date();
var time1=time-nowDate;
// console.log(time1);
// 得到的是两个时间差的毫秒数
var day=parseInt(time1/(24*60*60*1000));
// console.log(day);
var hour=parseInt(time1%(24*60*60*1000)/(60*60*1000));
// console.log(hour);
var min=parseInt(time1%(60*60*1000)/(60*1000));
// console.log(min);
var sec=parseInt(time1%(60*1000)/1000);
// console.log(sec);
txt.innerHTML='距离国庆放假还有'+day+'天'+hour+'小时'+min+'分钟'+sec+'秒';
},1000)
</script>
</body>
1.5.3 Math对象
Math.ceil()：向上取整
Math.floor()：向下取整
Math.round()：四舍五入
1.5.4 String对象
字符串.slice(开始位置,结束位置)：可以取到开始位置的字符，但不可以取到结束位置的字符。
字符串.substr(开始位置,截取字符串的长度)
1.5.5 正则表达式
使用new关键字创建正则对象。new RegExp(匹配修饰符,修饰符)。
第一个值是匹配修饰符，第二个值时修饰符。修饰符中i表示忽略大小写，g表示全局匹配，m表示多行匹配。
正则对象.test(字符串)：检测字符串是否符合正则对象的要求，如果符合，返回true，否则返回false。
使用字面量的方式创建正则对象：/匹配修饰符/修饰符/
**正则对象.exec(字符串)：**检测字符串是否符合正则对象的要求，如果符合，返回符合条件的字符串子串，否则返回null。
字符串.replace(正则表达式,新的字符串) ：替换用新的字符串替换符合正则条件的字符。
^：表示以什么开头。如以数组开头^[0-9];
{2,5}：表示长度为2到5
$：表示以什么结尾。如意数字结尾\d$
例1：去点字符串首尾空格
<script>
var b=' sadfljk ';
var patt=/(^\s*)|(\s*$)/g;
b=b.replace(patt, '');
console.log(b);
console.log(b.length);
</script>
例2：表单验证
<body>
<label for="user">用户名称：</label><input type="text" id="user"><span id="tip">提示</span>
<script>
var user=document.getElementById('user');
var tip=document.getElementById('tip');
var patt=/^[0-9A-Za-z]{6,12}$/g;
user.onblur=function(){
if(patt.test(user.value)){
t.innerHTML='该名字可以使用';
}else{
t.innerHTML='这个名字不可以使用';
}
}
</script>
</body>
扫一扫
8416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
