Javascript基础知识整理图文详解

目录

1.对象

2.函数

3. 作用域

4.数组

5,Date对象

 6.Math

 7.字符串的方法

 8.正则表达式

9.DOM

10.事件

 11.定时器

12.类的操作

13.JSON


1.对象

定义:

创建对象:

对象中添加属性:

修改对象中的属性语法是一样的。

 对象中读取属性:

对象中删除属性:

属性名:

任意什么都行但是

例:

       obj["123"]=789;

       var n="123";

       console.log(obj.[n])

    则在控制台输出789

属性值:

可以是任意的数据类型,可以是对象。

in运算符:

 基本数据类型和引用数据类型:

基本数据类型保存的是值,引用数据类型保存的是地址。

 

 对象字面量:

var obj={属性名:属性值,属性名:属性值....}

对于特殊的属性名必须加引号

使用工厂方法创建对象:

(没有构造函数好,所以一般不用)

通过该方法可以大批量的创建对象

例如:

    function createPerson(name,age,gender){

        var obj=new Object();

        obj.name=name;

        obj.age=age;

         obj.gender=gender;

       obj.sayName=function(){

                       alert(this.name);

};

         return obj;

}

var obj2=createPerson();

var obj3=createPerson();

构造函数:

例如:

      function Person(name,age,gender){

          this.name=name;

          this.age=age;

          this.gender=gender;

         this.sayName=function(){

                  alert(this.name);

     };

}

var per=new Person();

var per2=new Person()

per.sayName

问题:如果写在Person对象里面,每次new Person,都会创建sayName方法对象,就会浪费堆存,但如果放在外面,sayName就属于Windows对象,调用所有对象里的sayName都是调用的外部Windows对象中的sayName

原型对象:

 

例如:function Person(name,age,gender){

          this.name=name;

          this.age=age;

          this.gender=gender;

};

Person.prototype.sayName=function(){

                  alert(this.name);

};

var per=new Person();

var per2=new Person()

per.sayName

以后创建函数时,可以将这些对象共有的属性和方法统一添加到构造函数的原型对象中,这样不用分别为每个对象添加,也不会影响到全局作用域,就可以使每个对象具有这些属性和方法。

垃圾回收(GC):

将不再使用的对象设置为null

 instanceof( ):

 

2.函数

函数也是一个对象

函数中可以封装一些功能(代码),在需要的时候执行这些功能。

例如:

       function fun(){

      console.log("这是我的第一个函数");

      document.write("nihao");

}

fun()   调用fun

 

例如:

      var fun2=function(){

                    console.log("你号”);

}

fun2();

函数的参数:

 函数的返回值:

return后没有任何值或者不写return,则返回undefined

例如:两个数相加

     function sum(a,b){

               console.log(a+b);

               return c

  }

var result=sum(1,2)

 立即执行函数: 

 方法:

枚举对象中的属性:

 

3. 作用域

 全局作用域:

声明提前:

 

函数作用域:

 this:

argument( ):

4.数组

 向数  组中添加元素

语法:数组[索引]=值

读取数组中的元素

语法:数组[索引]

数组的长度

向数组最后一个元素添加元素:

语法:数组[数组.length]=值

数组字面量:

语法: [ ]

var arr=[1,3,2,4]

var arr2=new Array(1,2,3)

push方法:

 pop方法:

删除数组的最后一个元素

 unshift:

向数组前增加一个或多个元素并返回数组新的长度

shift():

删除数组第一个元素,并作为返回值返回

数组的遍历:

例如:var arr[" "," "," "];

           for(var i=0,1<arr-length,i++){

console.log(arr[i])

}

forEach():

arr.forEach(fuction(value,index,object){

      console.log(value);

});

slice(): 

 splice:

删除数组中指定元素

 数组去重:

例子:

var arr=[  ]


concat():

join(): 

 reverse():

颠倒数组中元素的顺序

sort():

 

 call( )和apply( ):

5,Date对象

 getDate( ):

获取当前日期是几日

getDay( ):

 getMonth:

 

 getFullYear( ):

获取当前对象年份

getTime( ):

 

 6.Math

 

Math.PI表示圆周率

Math.abs( )取绝对值

 Math.random( ):

Math.pow(x,y)

返回x的y次幂 

Math.sqrt( )

用于对一个数进行开方运算

 7.字符串的方法

charAt( )

根据索引获取指定的字符

charCodeAt( )

获取指定位置字符的字符编码

String.fromCharCode( )

根据字符编码去获取字符

concat( )

用来连接两个或多个字符串

indexOf( ) 

该方法可以检索一个字符串中是否含指定内容

如果字符串中含有该内容,则会返回其第一次出现的索引

如果没有找到指定的内容,则返回-1

LastIndexOf( )
该方法的用法和indexOf( )一样

不同的是indexOf是从前往后找

LastIndexOf是从后往前找

slice

substring( )

 

 split( )

toUpperCase( )

将一个字符串转换为大写并返回

toLowCase( )

将一个字符串转换为小写并返回

 8.正则表达式

 

 字面量

 

[0-9]任意数字

 

 字符串和正则相关的方法

split( )即使不写全局匹配,也会全都拆分

 

search( )只会查找第一个,即使设置全局匹配也没用

 

 

 量词

 

任意字母数字 [A-Za-z0-9]

 

 

9.DOM

 事件

用户和浏览器之间的交互行为

 

 window.οnlοad=function(){

}

DOM查询

 

 innerHTML用于获取元素内部html代码

对于自结束标签,这个属性没有意义

 

 chidNodes属性会获取包括文本节点在内的所有节点,根据DOM标签标签空白也会当成文本节点,firstChild和lastChild也包括获取空白文本节点。

children属性可以获取当前元素的所有子元素;

firstElementChild获取当前元素的第一个子元素;

 

 previousSibling可能获取到空白文本

在document中有一个属性body,它保存的是body的引用。document.documentElement保存的是html根标签,document.all代表页面中所有的元素。

document.querySelector( )   只会返回唯一的元素,若有多个只返回第一个

 document.querySelectorAll( )将符合的元素分装到一个数组中返回

 

 

 

 

 

修改内联样式,内联样式有较高的优先级

 通过style属性设置和读取的都是内联样式,无法读取样式表中的样式

获取元素样式

 

10.事件

事件对象

 

 div跟随鼠标移动

div开启绝对定位后

 事件的冒泡(Bubble)

所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发

通过事件对象取消冒泡

event.cancelBubble=true

事件的委派

 事件的绑定

 事件的传播

 拖拽

 

 

 判断鼠标滚动方向 wheelDelta

例如如果向上滚,box变短

 if(event.wheelDelta>0){

    box.style.height=box.clientHeight-10+"px";

}else{

   box.style.height=box.clientHeight+10"px";

}

键盘事件

keyCode被废除改为key

 

键盘移动div

 

BOM

 

 这些BOM对象是作为window对象的属性保存,可通过window对象使用,也可直接使用。

 11.定时器

 

 延时调用

12.类的操作

 

 

13.JSON

 

 

猜你喜欢

转载自blog.csdn.net/m0_58381610/article/details/125567772