JavaScript要点汇总——The Most Important

Posted 2020-09-18

关于javascript的基础变量，运算符的详解以及基本的分支循环嵌套已经在

JS基础变量及JS中的运算符
JS中的循环分支嵌套

说过了，今天我们所说的是做网页中最长用到的东西。内容不算少，要有耐心，慢慢看

 

1.函数的声明及调用：

函数的声明及调用：

使用函数前要先定义才能调用

1.函数定义有三个部分：函数名，参数列表，函数体

定义函数的格式

function 函数名（参数1，参数2,.......）{

函数执行部分；

return 表达式；

}

函数调用的格式：直接调用：函数名（参数一的值，参数二的值，.......）

 

声明调用匿名函数：

1.声明一个匿名函数直接赋给某个事件

事件名=function（）{}

window.onload=function（）{

console.log（“”）；

}

2.使用函数表达式调用匿名函数

 

声明函数表达式：

var func = function(){

console.log(“”)；

}

调用函数表达式： func();

》》使用匿名函数表达式，必须在声明语句后，否则报错

3.使用自执行函数调用匿名函数：

！function（参数一）{}(参数一的值)；——使用任意运算符开头，一般用！

（function（）{}()）;——使用小括号将函数及之后的内容包裹

（function（）{} ）()；——使用括号只包裹匿名函数表达式

三种写法特点：① 结构清晰，开头加！，结尾加（）。不易乱

②可以表明匿名函数与之后的括号为一个整体，推荐使用

③无法表明函数与之后（）为一个整体，不推荐使用

2.函数的几点强调

①函数的声明必须符合小驼峰法则，首字母小写，之后每个单词首字母大写；

②参数列表可以有参数，可以无参数，分别称为有参函数，无参函数；

③声明函数时的参数列表称为形参列表（变量名）；

调用函数时的参数列表称为实参列表（变量值）；

函数中实际有效的参数取决于实参的赋值，未被赋值的形参，将为Undefined

④函数如果需要返回值，可以用return返回结果。

调用函数时，使用var 变量名=函数名；的方式接收返回结果；

如果函数没有返回值，则接受的结果为Undefined；

⑤函数中变量的作用域：

在函数中使用var声明的变量，默认为函数的局部变量，只在函数内部能用；

不用var声明的变量，默认为全局变量（函数中的全局变量必须在函数调用后才能使用）；

函数的形参列表，为函数的局部变量，只在函数内部能用；

⑥函数声明与函数调用没有先后之分，即，调用语句可写在声明语句之前

JS中代码运行，，会先进行检查，装载，即声明变量、函数等操作

然后再进行执行阶段（变量的赋值属于执行阶段）

函数的声明属于检查装载阶段，函数的调用属于执行阶段。所以函数调用在哪无所谓

console.log(num);

var num=10;

funcN();

function funcN(){}

顺序为：

--检查装载--

①var num;————声明变量

② function funcN() ————声明函数

--执行阶段--

③console.log(num);

④ num=10;

⑤funcN();

打印结果为Undefined

函数内部的属性：

【argument对象】

1.作用：用于保存调用函数时所赋值的实参列表；

当我们调用函数并使用实参赋值时，实际上参数已经保存到argument数组中。即使没有形参，也可以使用argument[n]的形式调用参数。

2.arguments数组的个数，取决于实参列表，与形参无关。（顺序从零开始）但当第n个位置的形参、实参、arguments都存在时，形参与arguments 是同步的，即在函数中修改其中一个的值，另一个同步变化

3.argument.callee是argument的重要属性，用来返回argument所在函数的引用：

.argument.callee可以调用自身函数执行；在函数内部调用函数自身的写法被称为递归；

2.JS中的BOM（浏览器对象模型）

window对象的常用方法,均可以省略前面的window.，比如close();
1、prompt：弹窗接受用户输入；
2、alert：弹窗警告；
3、confirm：带有确认/取消  按钮的提示框；
4、close：关闭当前浏览器选项卡
5、open:重新打开一个窗口，传入参数：URL/窗口名称/窗口特征
6、setTimeout：设置延时执行，只会执行一次
7、setInterval：设置定时器，循环每隔n毫秒执行一次
   两个参数：需要执行的function/毫秒
8、clearTimeout: 清除延时
9、clearInterval:清除定时器
   传入参数：调用setInterval时返回一个ID，通过变量接受ID，传入setInterval

其中设置延时执行与设置定时器很常用，下面是他们的用法示例：

var timeOutId = setTimeout(function(){
                console.log("setTimeout");
            },5000);
            
setInterval(function(){
                console.log("setInterval");
            },1000);

3.JS中的DOM

[DOM 树节点]

分为三大类：元素节点、文本节点、属性节点

文本节点跟属性节点为元素节点的两个子节点。

通过getElementById：通过ID获取唯一的节点

[查看节点]

1.getElementById("div1")通过id获取唯一节点:多个同名ID只会取第一个

2.getElementsByName()通过Name取到一个数组，包含一到多个节点

使用方式，通过循环，取到每个节点。循环次数，从零开始<数组.length

getElementsByClassName()与getElementsByTagName取到的都是数组，用法同Name

[查看和设置属性节点]

1.查看属性节点：

getAttribute("属性名")；

2.设置属性节点：

setAttribute("属性名"，"属性值")

【JS修改样式 总结】

1.className:为元素设置一个新的class名字； div1.className="class1"

2、 .style.:为元素设置一个新的样式.例如：div1.style.backgroundColor="red"

3.style.cssText:为元素同时修改多个样式.例如：div1.style.cssText="width:100px;"

[查看节点]

1. tagName属性：获取标签的标签名

2. innerhtml属性：设置或者获取节点内部的所有Html代码

3. innerText：设置或者获取节点内部的所有文字

4.JS中的事件

【JS中的事件分类】
1、鼠标事件：click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup
2、键盘事件：
    keydown:键盘按下去触发
    keypress：键盘按下并松开的瞬间触发
    keyup：键盘抬起时触发
    
    [注意事项：（了解）]
    ①执行顺序：keydown-keypress-keyup
    ②长按时，会循环不断地执行keydown-keypress
    ③有keydown事件时,不一定有keyup事件，（事件触发过程中，鼠标移走，可能就没有keyup）
    ④keypress只能捕获字母、数字、符号键，不能捕获功能键；keydown/keyup基本可以捕获所有的功能键（特殊除外）
    ⑤keypress区分大小写，keydown和keyup不区分
    ⑥keydown/keyup区分主键盘和小键盘，keypress不区分
    
【确定键盘触发按键】
1、在触发过程中，传入参数e，代表按键时间；
2、通过e.keyCode，确认按键ASCII码值，进而确定按键；
3、所有浏览器系统的写法（一般不必要）：
    var evn = e||event;//取到键盘事件
    var code = evn.keyCode||evn.which||evn.charCode;//取到按键


【JS中的DOM0事件模型】
1、内联模型：直接将函数名作为HTML标签的某个事件属性的属性值；
    eg:<button onclick="func()">按钮</button>
缺点：违反W3C关于HTML与JavaScript分离的基本原则；
2、脚本模型：在JS脚本中通过事件属性进行绑定；
    eg:window.onload = function(){}
3、局限性：同一节点，只能绑定同类型事件

【JS中的DOM2事件模型】
1、添加事件绑定：
IE10之前：btn1.attachEvent("onclick",函数);
其他浏览器：btn1.addEventListener("onclick",函数,true/false);
            参数三：false(默认)，表示事件冒泡；true,表示事件捕获
兼容写法：
if(btn1.attachEvent){
    btn1.attachEvent();
}else{
    btn1.addEventListener();
}

优点：同一节点，可以添加多个同类型事件的监听器；


【JS中的事件流】
1、事件冒泡：当某DOM元素触发某事件时，会从当前DOM元素开始，逐个触发其祖先元素的同类型事件，直到DOM根节点
DOM0模型，均为事件冒泡；
IE中使用：.attachEvents()添加的事件，均为冒泡；
其他浏览器：.addEventsListener添加的事件，当第三个参数为false时，为冒泡。

2、事件捕获：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型事件，直到触发到当前元素为止；
只有使用.addEventsListener添加的事件时，并设置第三个参数为true时，才进行捕获；

↓  当前元素        ↑
↓           ↑
冒     父元素           捕
↓           ↑
泡     爷爷元素       获
↓           ↑
↓  DOM根节点     ↑

3、阻断事件冒泡(重点):
IE浏览器中：将e.cancelBubble属性设为true；
其他浏览器：调用e.stopPropagation();方法

兼容写法：

function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
    e.stopPropagation(); //IE以外
} else {
    e.cancelBubble = true; //IE
}
}

 下面是一个检测你按键的代码：

document.onkeydown = function(e){
                var evn = e||event;
                var code = evn.keyCode||evn.which||evn.charCode;
                console.log(e);
                console.log("keydown");
                if(code==13){
                    alert("你按了回车");
                }
            }

5.JS中的数组与内置对象

1.数组的概念：

数组是在内存中连续存储多个有序元素的结构

元素的顺序，称为下标，通过下标查找对应元素

2.数组的声明：

①通过 字面量声明

var arr1 = [,,,]

JS中，同一数组可以储存多种不同数据类型(一般同一数组只用于存放同一数据类型)

var arr1 = [1,"2",true,{"name":"lyx"},[1,2]];

②通过new关键字声明

var arr2 = new Array(参数);

参数可以：

为空：声明一个没有指定长度的数组；

为数组的长度length：声明一个指定长度的数组，但数组的长度随时可变，可追加。最大长度为0-2^32-1

数组默认的N个值：new Array(1，"2",true)相当于[1,"2",true]

3.数组中元素的读写/增删：

①读写： 通过下标来访问元素。例如 arr2[2];

②增删：

deleta arr[n]删除数组的第N+1个值，但数组长度不变，对应位置的值为Undefined

arr3.push(值)；数组最后增加一个值arr3[arr3.length]=7;

arr3.unshift(值);数组的第零位插入一个值，其余位数顺延

arr3.pop();删除数组最后一位，与delete不同的是POP执行后，数组长度减一。相当于arr3.length-=1

arr3.shift();删除数组第0位，数组长度减一

4.数组中其他常用方法：

①join（"分隔符"）方法，将数组用指定分隔符分隔，转为字符串。参数为空时，默认用逗号分隔

②concat();（原数组不会被改变）将数组与多个数组的值连接为新的数组

[1,2].concat([3,4],[5,6])=[1,2,3,4,5,6];连接时中括号至多拆一层

[1,2].concat([1,2,[3,4]])=[1,2,1,2,[3,4]]；多层中括号，以二维数组的形式存在

③push数组最后增加一个数；unshift数组开始增加一个数，【返回数组最新长度】

pop删除数组最后一个数；shift：删除数组第一个【返回被删除的值】调用上述方法，原数组均被改变

④reverse()；数组反转。逆序排列。（原数组被改变）

⑤slice(begin,end);[原数组不会被改变]截取数组中的某一部分成为新数组，

传递一个参数默认为开始索引，从当前下标开始截取到最后一个;

传递两个参数，截取从begin到end区间，左闭右开；包含begin，不含end

参数可以为负数，负一代表最后一个

⑥sort（function）【原数组会被改变】对数组进行排序，不指定排序方法，默认按首位的ascii码值进行排列

传入排序函数，默认两个参数a.b，如果返回值>0，则a>b;反之返回<0,则a<b

arr3.sort(function(a,b){

return a-b;//升序排列

return b-a;//降序排列

});

⑦indexOf(value，index)；返回数组中第一个value值对应的下标位置，若未找到，返回-1

lastindexOf(value，index)；返回最后一个value值对应的下标位置，------------

>>>>若未指定index参数：默认在数组所有元素中查询，若指定index参数，则从当前index开始，向后查询；

5.二维数组和稀疏数组【了解】

① 稀疏数组：数组并不含有从0开始到length-1的所有索引（它的length值比实际元素个数大）；

② 二维数组:var arr5 = [[1,2,3],[4,5,6],[7,8,9],[0,1,2]];相当于一个四行三列的矩阵

取出二维数组元素：arr[行号][列号]，可使用嵌套循环遍历

6.引用数据类型和基本数据类型

引用数据类型：数组/对象 赋值时是将原变量的地址赋给新变量。两个变量实际上操作的是同一份数据，所以，修改其中一个变量

另一个跟着变化

基本数据类型：赋值时，是将原来变量的值赋给新的变量。两个变量属于不同的内存空间，修改其中一个，互不干扰

 

6.JS中的内置对象

Boolean类

var isTrue = true ;//单纯的变量

var isTrue1 = new Boolean(true);//一个Boolean类型的对象

console.log(isTrue1);

 

Number类

 

Number.MIN_VALUE 可表示的最小数

Number.MAX_VALUE 可表示的最大数

num.toString() 将num转为字符串?

str3=num.toFixed(n);保留n位小数，进行四舍五入，转为字符串?

.valueOf()返回Number对象的基本数字值?

num.tolocaleString()将数字按照本地格式的顺序转为字符串。一般是三个一组加逗号

.toPrecision（n）将数字格式化为指定长度,n=不包含小数点的所有位数和

 

 

var num=1;//Number类型

var num1=new Number(1);//Object类型

var str = num.toString();//String类型

var str2=num.toLocaleString();

var str3=num.toFixed(2);

console.log(Number.MAX_VALUE)

num.valueOf();

 

字符串类String

1.属性：

.toLowerCase();所有字符转为小写。

.toUpperCase();所有字符转为大写。

.charAt(n);截取字符串中的第n个字符。

.indexOf("查询子串"，index)；查询从index开始的第一个子串的索引，没找到，返回-1.

.substring(begin,end);截取子串，只写一个参数，从begin开始到最后，

写两个参数从begin开始到end,左闭右开

.replace("old","new");将字符串中的第一个old,替换为new;

第一个参数可以是字符串，也可以是正则表达式（普通字符串将只匹配第一个，正则表达式则根据

具体情况区分）

.split("");将字符串通过指定分隔符分为数组。传入""空字符串将把单个字符存入数组

 

var str = "i old A shuaiGe";

var xiaoxie = str.toLowerCase();

str.charAt(0);

str.indexOf();

str.substring();

var rep=str.replace("old","new");

console.log(rep);

Date类

1. new Date();拿到当前最新时间；

new Date("2017,4,4,14:58:12");设置指定时间

2.常用方法：

.getFullYear():获取4位年份

.getMonth();获取月份0~11

.getDate();获取一个月中的某一天1——31

.getDay();获取一周中的某一天。0——6

.getHours() 返回 Date 对象的小时 (0 ~ 23) 1 2 3

.getMinutes() 返回 Date 对象的分钟 (0 ~ 59) 1 2 3

.getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

 7.JS中的自定义对象

 1、基本概念：
①对象：对象包含一系列无序属性和方法的集合；
②键盘对：对象中的数据，是以键盘对的形式存在的，以键取值；
③属性：描述对象特征的一系列变量。【对象中的变量】
④方法：描述对象行为的一系列方法。【对象中的函数】
2、对象的声明：
①字面量声明：
var obj = {
    key1:value1,  //属性
    key2:value2,
    func:function(){}  //方法
}
=-=对象中的键，可以是任何数据类型，但，一般用作普通变量名（不需要""）即可
=-=对象中的值可以是任何数据类型,但，字符串的话必须用""包裹
=-=多组键值对之间用英文逗号分隔，键值对的键与值之间用英文:分隔
new关键字：
var liSi = new Object();
liSi.name = "李四";
liSi.say = function(){
    console.log("我是:"+this.name);
}
3、对象中属性和方法的读写
①.运算符:
对象内部：this.属性名       this.方法名()
对象外部：对象名.属性名       对象名.方法名()
②通过["key"]调用 : 对象名["属性名"]()
>>>如果key中包含特殊字符，则无法使用第①中方式，必须使用第二种；
>>>对象中，直接写变量名，默认为调用全局变量，如果需调用对象自身属性，则需要通过this关键字
③删除对象的属性和方法：delete 对象名.属性/方法名

8.正则表达式

1.正则表达式包括两部分：

①定义的正则表达式规则

②正则表达式的模式（g/i/m）

2.正则表达式的声明

①字面量的声明： var reg=/表达式规则/表达式模式 /white/g

②new关键字声明：var reg=new RegExp("表达式规则","表达式模式")

var reg=new Regexp("white","g")

3.正则表达式常用方法：

.text():检测字符串是否匹配某个正则模式，返回true、false；

4.正则表达式的常用模式：

g 全局匹配，不加g默认非全局匹配，只匹配第一个符合条件的字符串（例："www".replace(/w/,"#")>>>#ww）

i 忽略大小写。不加i默认为需要匹配大小写

例："aAa".replace(/A/,"#")>>>a#a

"aAa".replace(/a/i,"#")>>>#Aa

m 匹配多行模式。字符串多行显示，每行都有开头结尾

例子"abc "#bc

abc".replace(/^a/g,"#")>>>abc"

"abc "#bc

abc".replace(/^a/gm,"#")>>>#bc"

 

下边是一个邮箱底色正则判断：

var email=document.getElementById("mail").value;

            var reg3=/^\\w+\\@[a-zA-Z0-9]{2}[a-zA-Z0-9]?\\.[a-z]{2}[a-z]?$/
            if(reg3.test(email)){
                console.log("right");
            }
            else{
                console.log("wrong");
            }

OK喽，相信会了这些，写一些原生的JS去实现功能已经不成问题了！个人感觉最重要的还是学会去取节点，能取到想到的节点，什么事都好说。。。