JS基础2

Posted 2020-10-05 0°

一、JS中的事件

---

（一）JS中的事件分类

---

1、鼠标事件

click/dblclick/onmouseover/onmouseout

2、html事件

onload/onscroll/onsubmit/onchange/onfocus

3、键盘事件

keydown：   键盘按下时触发

keypress：键盘按下并松开的瞬间触发

keyup：        键盘抬起时触发

 

[注意事项]

① 执行顺序：keydown->keypress->keyup

② 当长按时，会循环执行keydown->keypress

③ 有keydown并不一定有keyup，当事件触发过程中，鼠标将光标移走，

     将导致没有keyup

④ keypress只能捕获键盘上的数字、字母、符号键，不能捕获各种符号键，

     而keydown和keyup可以。

⑤ keypress支持区分大小写，keydown和keyup并不支持。

 

[确定触发的按键]

① 在触发的函数中，传入一个参数e，表示键盘事件；

② 使用e.keyCode，取到按键的Ascll码值，进而确定触发按键；

③ 所有浏览器的兼容写法（一般并不需要）：

    var evn = e || event;

     var code = evn.keyCode || evn.which || evn.charCode;

（二）JS中的DOM0事件模型

---

1、内联模型(行内绑定)：直接将函数名作为HTML标签的某个事件属性的属性值；

eg：<button onclick="func()">DOM0内联模型</button>

优点：使用方便。

缺点：违反了w3c关于HTML与javascript分离的基本原则；

2、脚本模型(动态绑定)：在JS脚本中，取到某个节点，并添加事件属性；

优点：实现了HTML与JavaScript的分离；

缺点：同一个节点只能绑定一个同类型事件。如果绑定多个，最后一个生效。

（三）JS中的DOM2事件模型

---

1、添加事件绑定方式：

① IE8之前：btn2.attachEvent("onclick",函数);

② 其他浏览器：btn2.addEventListener("click",函数,true/false);

参数三：false(默认)：表示事件冒泡   true：表示事件捕获

 

③ 兼容写法：if (btn2.attachEvent) {

　　　　　　　　 btn2.attachEvent();

     　　　　   }else{

       　　　　　　 btn2.addEventListener();

    　　　　   }

优点：① 可以给同一节点，添加多个同类型事件；

　　   ② 提供了可以取消事件绑定的函数。

3、取消DOM2事件绑定：

注意：如果要取消DOM2的事件绑定，那么在绑定事件时，处理函数必须

   要使用有名函数，而不能使用匿名函数。

btn2.removeEventListener("click",func2);

btn2.detachEvent("onclick",func2);

 （四）JS中的事件流

---

1、事件冒泡：当某DOM元素触发一种事件时，会从当前节点开始，逐级往上触发其祖

                          先节点的同类型事件，知道DOM根节点。

>>> 什么情况下会产生事件冒泡：

① DOM0模型绑定的事件，全部都是冒泡；

② IE8之前，使用attachEvent()绑定的事件，全部都是冒泡；

③ 其他浏览器，使用addEventListener()添加事件，当第三个参数省略或为

    alse时，为事件冒泡；

2、事件捕获：当某DOM元素触发一种事件时，会从文档根节点开始，逐级向下触发其

                       祖先节点的同类型事件，直到该节点自身。

>>> 什么情况下会产生事件捕获：

① 使用addEventListener()添加事件，当第三个参数为true时，为事件捕获；

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

    　　}

   }

 

4、取消事件默认行为

在IE浏览器中，使用e.returnValue = false;

在其他浏览器中，使用e.preventDefault();

 

兼容所有浏览器的写法：

function eventHandler(e) {

    e = e || window.event;

    // 防止默认行为

    if (e.preventDefault) {

        e.preventDefault(); //IE以外

    } else {

        e.returnValue = false; //IE

    }

}

二、JS中的内置对象

---

（一）JS中的数组

---

1、数组的基本概念？

数组是在内存空间中连续存储的一组有序数据的集合。

元素在数组中的顺序，成为下标。可以使用下标访问数组的每个元素

 

2、如何声明一个数组？

     ① 使用字面量声明：var arr = [];

　　 在JS中，同一数组，可以存储各种数据类型。

　　例如：var arr=[1,"绾",true,null,func];

 

    ② 使用new关键字声明：var arr = new Array(参数);

　　 >>> 参数可以是：

　　a. 参数省略，表示创建一个空数组；

　　b. 参数为一个整数，表示声明一个length为指定长度的数组，

 　　  但是这个length可以随时可变可追加。

        c. 参数为逗号分隔的多个数值，表示数组的多个值。

　　new Array(1,2,3)==[1,2,3]

 

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

     ① 读写：通过下标访问元素。下标从0开始  arr[1]="hahaha";

     ② 增删：

a. 使用delete关键字，删除数组的某一个值。删除之后，数组的长度不变

     对应位置变为Undefined。 eg：delete arr[1];

b. arr.pop()：删除数组的最后一个值。相当于arr.length -= 1;

c. arr.shift()：删除数组的第一个值。

d. arr.unshift(值)：在数组的第0个位置新增一个值；

e. arr.push(值)：在数组的最后一个位置新增一个值；

f. 直接访问数组没达到的下标，可以动态追加。

　arr[100]=1; 中间如果有空余下标，将存入Undefined。

 

4、数组中的其他方法：

① join("分隔符号")：将数组用指定分隔符链接为字符串。当参数为空时，

         默认用英文逗号分隔

② concat()：【原数组不会被改变】将数组，与两个或多个数组的值链接为新数组

oncat连接时，如果有二维数组，则至多能拆一层[]

[1,2].concat([3,4],[5,6])->[1,2,3,4,5,6]

[1,2].concat([3,4,[5,6]])->[1,2,3,4,[5,6]]

 

③ push() 数组最后增加一个，unshift(值) 数组开头增加一个。-返回数组的长度；

    pop() 数组最后删除一个，shift() 数组开头删除一个。-返回被删除的值

    【上述方法，均会改变原数组】

 

④ reverse()：【原数组会改变】将数组翻转，倒序输出；

 

⑤ slice(begin,end)：【原数组不会被改变】截取数组中的某一部分，并返回

                   被截取的新数组将

     >>> 传入一个参数，表示开始区间，默认截到数组最后；

     >>> 传入两个参数，表示开始和结束的下标，左闭右开区间（包含begin，不包含end

     >>> 两个参数可以为负数，表示从右边开始数，最后一个值为-1；

 

⑥ sort()：【原数组被改变】将数组进行升序排列；

     >>> 默认情况下，会按照每个元素首字母的ASCII值进行排序；

[3,1,5,12].sort()->[1,12,3,5];

    >>> 可以传入一个比较函数，手动指定排序的函数算法；

   函数将默认接收两个值a,b 如果返回值>0，则证明a>b；

       arr.sort(function(a,b){           

   　　　return a-b;//升序排列

　　　   return b-a;//降序排列

　　});                                             

 

⑦ indexOf(value,index)：返回数组中第一个value值所在的下标，如果没有找到返回-1

    lastIndexOf(value,index)：返回数组中最后一个value值所在的下标，如果没有找到

                                                  返回-1；

>>> 如果没有指定index，则表示全数组查找value；

>>> 如果指定了index，则表示从index开始，向后查找value；

 

⑧ forEach()：专门用于循环遍历数组。接收一个回调函数，回调函数接受两个参数，

第一个参数为数组每一项的值，第二个参数为下标。

【IE8之前，不支持此函数】

   arr.forEach(function(item,index){

　　console.log(item);

　　console.log(index);

  });

 

⑨ map()：数组映射。使用方式与forEach()相同。不同的是，map可以有return

返回值，表示将原数组的每个值进行操作后，返回给一个新数组。

【IE8之前，不支持此函数】

       var arr1=arr.map(function(item){

　　 　　console.log(item);

　　　　 return item+2;

　　});

 

5、二维数组与稀疏数组(了解)

① 二维数组：数组中的值，依然是一个数组形式。

eg：arr = [[1,2,3],[4,5,6]];//相当于两行三列

读取二维数组：arr[行号][列号];

② 稀疏数组：数组中的索引是不连续的。(length要比数组中实际的元素个数大)

 

6、基本数据类型&引用数据类型：

① 基本数据类型：赋值时，是将原变量中的值，赋值给另一个变量。赋值完成后，两个

     变量相互独立，修改其中一个的值，另一个不会变化。

 

② 引用数据类型：赋值时，是将原变量在内存中的地址，赋值给另一个变量。赋值完成

     后，两个变量中存储的是同一个内存地址，访问的是同一份数据，修改其中一个的

     值，另一个也会变化。

 

③ 数值型、字符串、布尔型等变量属于基本数据类型；

     数组，对象属于引用数据类型

 

（二）内置对象

---

1、Boolean类

    也有两种声明方式：

    可以使用字面量方式声明一个单纯的变量。用typeof检测为Boolean类型；

    也可以使用new Boolean() 声明一个Boolean类型的对象。用typeof检测为Object类型

 

2、Number类

    Number.MAX_VALUE 返回Number类可表示的最大值；

     Number.MIN_VALUE 返回Number类可表示的最小值；

 

　toString()：将数值类型转换为字符串类型

　toLocaleString()：将数值按照本地格式顺序转换为字符串，一般从右开始，

                     三个一组加逗号分隔；

　toFixed(n)：将数字保留n位小数，并转为字符串格式；

　toPrecision(n)：将数字格式化为指定长度。n表示不含小数点的位数长度。

                  如果n<原数字长度，则用科学计数法表示；

                  如果n>原数字长度，则小数点后补0；

　valueOf()：返回Number对象的基本数字值；

 

3、String 类

3.1、属性：str.length 返回字符串的长度，字符数

字符串支持类似数组的下标访问方式：str[0];

 

3.2、方法：

toLowerCase()：将字符串所有字符转成小写；

toUpperCase()：将字符串所有字符转成大写；

charAt(n)：截取数组的第n个字符，相当于str[n]；

indexOf("str","index")：查找字串在字符串中出现的位置，如果没有找到返回-1；

     其他同数组的indexOf方法；

lastIndexOf()：同数组

substring(begin,end)：从字符串中截取子串

>>> 传入一个参数，表示从begin开始，到最后；

>>> 传入两个参数，表示从begin到end的区间，左闭右开；

split("分隔符")：将字符串以指定分隔符分隔，存入数组中。传入空""表示将字符串

  的每个字符分开放入数组；

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

>>> 第一个参数，可以是普通字符串，也可以是正则表达式；

>>> 如果是普通字符串，则只替换第一个old。

如果是正则表达式，则可以根据正则的写法要求，进行替换。

 

4、Date 日期类

4.1、new Date()：返回当前最新时间；

new Date("2017,12,12,12:12:12")：返回指定的时间；

4.2、常用方法

getFullYear()：获取4位年份；

getMonth()：获取月份0-11；

getDate()：获取一个月中的第几天 1-31；

getDay()：获取一周中的第几天 0-6,0表示周天

getHours()：获取小时

getMinutes()：获取分钟

getSeconds()：获取秒

            function getTime(){
                var dates=new Date();
                var year=dates.getFullYear();
                var month=dates.getMonth();
                var date1=dates.getDate();
                var day=dates.getDay();
                var weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六",]
                var hours=dates.getHours()<10?"0"+dates.getHours():dates.getHours();
                var minutes=dates.getMinutes()<10?"0"+dates.getMinutes():dates.getMinutes();
                var seconds=dates.getSeconds()<10?"0"+dates.getSeconds():dates.getSeconds();
                
                var div1=document.getElementById("div1");
                div1.innerText=year+"年"+(month+1)+"月"+date1+"日"+weeks[day]
                               +hours+":"+minutes+":"+seconds;
            }
            
            setInterval(getTime,1000);
            window.onload=function(){
                getTime();
            }

（三）自定义对象

---

1、基本概念：

① 对象：对象是拥有一系列无序属性和方法的集合。

② 键值对：对象中的数据，是以键值对的形式存在。对象的每个属性和方法，都对

                           应值得一个键名，以键取值。

③ 属性：描述对象特征的一系列变量，称为属性。【对象中的变量】

④ 方法：描述对象行为的一系列函数，称为方法。【对象中的函数】

 

2、对象的声明：

① 字面量声明：   var obj = {

   　　　　　　　　key1:value1,

  　　　　　　　　 key2:value2,

  　　　　　　　　 func1:function(){}

     　　　　　　 }

>>> 对象中的数据是以键值对形式存储，键与值之间用:分隔。多个键之间用,分隔。

>>> 对象中的键，可以是除了数组/对象以外的任何数据类型。但是，一般我们只用

               普通变量名作为键。

>>> 对象中的值，可以是任何数据类型。包括数组和对象。

② 使用new关键字声明：var obj= new Object();

　　　　　　　　　　　obj.key1=value1;

　　　　　　　　　　　 obj.key2=value2;

　　　　　　　　　　　obj.function=function(){}

 

3、对象中属性和方法的读写：

① .运算符：

      对象内部：this.属性   this.方法()

      对象外部：对象名.属性    对象.方法();

② 通过["key"]调用：对象名.["属性名"] 对象名.["方法名"]();

     >>> 如果键中包含特殊字符，则只能使用第②种方式；

　 >>> 对象中，直接写变量名，默认为调用全局变量。如果需要调用对象自身的属性或者方法。需要使用对象名.属性，或者this.属性。

  　　　person.age   this.age   都可以，但推荐使用this关键字。

③ 删除对象的属性和方法：delete 对象.属性名/方法名

  　delete person.age;

 

ps：不足之处，请多多指教(#^.^#)