JavaScript用法及笔记

最新推荐文章于 2023-11-14 15:17:07 发布

阿波罗呀

最新推荐文章于 2023-11-14 15:17:07 发布

阅读量425

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46348847/article/details/107933182

版权

JavaScript

浏览器的组成：

shell部分
内核部分

渲染引擎（语法规则和渲染）
JS引擎
其他模块

主流浏览器

IE··············内核··············trident
chrome·············内核···········webkit/blink
firefox··········内核··············Gecko
opera···········内核·············presto
safari··········内核··············webkit

js的逼格（ecmascript）

一，解释性语言

编译 C C++

优点：速度快

不足：一致性不好（不夸平台）

解释：javascript php

优点：夸平台

不足：稍微慢

java

.java–javac–>编译–> .class—>jvm—解释执行

二，单线程

三，ECMA标注

如何引入JS、

页面内嵌

为了符合web标准结构，样式，行为相分离，通常采用外部引入

js基本语法

一，变量：

变量声明（varible）

声明，赋值分解
单——var

命名规则

变量名以英文字母，下划线，$开头
变量名可以包含英文字母，下划线，$，数字
不可以用系统的关键字（有特殊语法的含义），保留字作为变量名

二，值类型——数据类型

不可改变的原始值（栈数据)······存放在stack（栈）中

number,string（字符串类型,需要用单引号或者双引号引起来）,
Boolean（布尔类型：true或者false）,
undefined(定义类型),
null

引用值（堆数据）············存放在heap（堆）中

array（数组类型）
用方括号括起来，arr=[ ]
object（对象类型）
function

三，JS语法基本规则

语句后面要用分号结束（函数，for循环，if语句后面不要用分号）
js语法错误会引发后续代码的终止，但不会影响其他JS代码块
书写格式要规范，“= + / -”两边都应该有空格

错误分为两种错误：

低级错误（语法解析错误）
逻辑错误（标准错误）

JS运算符

比较运算符

“>”, “<”, “==”, “>=”, “<=”, “!=”
比较结果为布尔值（boolean）
字符串比较的是Ascll码值
A=65 , a=97······························相差32
NaN不等于任何值，也不等于其自身

逻辑运算符

“&&·····与”, “||······或” “!······非”
运算结果为真实的值

逻辑运算符的比较原则：
先看运算符左边的数值，若左边的值转化为布尔值的结果为真，那么它会看右边的表达式的结果，然后如果两个表达式的话，只会看到第二个表达式，就返回该表达式的值；当第一个表达式的布尔值为false时，则直接返回第一个表达式的值（未转化为布尔值之前的值）

被认定为false的值（被转化为布尔值的结果）

undefined, null, NaN, “”, 0, false

条件语句

if，if else if

if<----->&&转化

X = parseInt（window.prompt(‘input’)）·······················设置输入框

for（循环）
while，do while

条件语句的补充

switch case
break
continue

初始引用值

数组（array）

数组里面的内容用英文逗号隔开，引用数组时从0开始

arr.length····················表示数组的长度

arr[i]=1···················表示对数组进行修改

对象（object）

属性名叫key，属性值叫value，中间用冒号连接
赋值方法：属性值.属性名=“新的值”

编程形式的区别

面向过程
面向对象

typeof（操作符）

六种数据类型

1.（基础值） number， string，Boolean，

2，undefined，object，function
，注意：null通过typeof 输出的也是object

3，typeof的两种写法：1），typeof(XXX) ; 2),typeof XXX(用空格隔开)

var demo=“null”；

var num= Number(deme)

console.log(typeof(num) + “:” +num)

···················表示将字符串类型转化为数字类型

类型转换

1，显示类型转换

Number(mix)
parseInt(string,radix（基底）)·············转化成整型················radix取值：2~36，当出现数字与字母一起时，只看数字不看字母
parseFloat(string)················转化成浮点数（小数）················当出现数字与字母一起时，只看数字不看字母
toString(radix)
String(mix)
Boolean()

typeof的语法

typeof是一个运算符，有2种使用方式：typeof(表达式)和typeof 变量名，第一种是对表达式做运算，第二种是对变量做运算。

typeof的返回值

typeof运算符的返回类型为字符串，值包括如下几种：

1. 'undefined'              --未定义的变量或值

2. 'boolean'                 --布尔类型的变量或值

3. 'string'                     --字符串类型的变量或值

4. 'number'                  --数字类型的变量或值

5. 'object'                    --对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理)

6. 'function'                 --函数类型的变量或值

简单的示例

console.log(typeof a); //‘undefined’

console.log(typeof(true)); //‘boolean’

console.log(typeof ‘123’); //‘string’

console.log(typeof 123); //‘number’

console.log(typeof NaN); //‘number’

console.log(typeof null); //‘object’

var obj = new String();

console.log(typeof(obj)); //‘object’

var fn = function(){};
‘
console.log(typeof(fn)); //‘function’

console.log(typeof(class c{})); //‘function’

typeof(typeof(a))……………………………返回的是字符串，因为里面的a没有定义，里面的typeofa返回的是undifined，所以undifined的返回值为字符串string。

   总结：typeof运算符用于判断对象的类型，但是对于一些创建的对象，它们都会返回'object'，有时我们需要判断该实例是否为某个对象的实例，那么这个时候需要用到instanceof运算符，后续记录instanceof运算符的相关用法。

函数

定义

函数声明（详细看下方）
函数表达式

组成形式

函数名称
参数（形参，实参）
返回值

1，函数声明:

 function theFirstName(){
     
 }

2，函数表达式

1）命名函数表达式

 var text = function abc(){
     document.write("b")
 }

2）匿名函数表达式 ··············统称为函数表达式

 var demo = function (){
     document.write("b")
 }

参数

形式参数对于实际参数时，多出来的数输出undifined，

当形式参数少于实际参数时，按顺序分配显示实际参数，但是，所有的实际参数被系统安排在了一个arguments，仍然可以使用控制台显示出。

递归

递归需要注意的两点：1)找规律； 2）找出口（已知的值）

求n的阶层：n! = *(n-1)!

function  mul(n) {
    if(n==1) {
        return 1
    }
    return n*mul(n-1);
}

求非普列：fb(n) == fb(n-1) + fb(n-2)

function fb(n) {
    if(n ==1 || n == 2){
        return 1
    }
    return  fb(n-1) + fb(n-2)
}

互相嵌套的函数，外层函数不能访问里层函数，里层函数可以访问外层函数，越往里的权限越大

JS运行三部曲

语法分析
预编译
解释执行

函数声明整体提升:functuon 函数名（）{ }提到最前边执行
变量，声明提升

预编译前奏

imply global 暗示全局变量：即任何变量，如果过变量未经声明就赋值，此变量就为全局对象所有。 a == 10 ————————> window.a =10
一切声明的全局变量，全是window 的属性。 var a = 123————> window.a = 123

预编译四部曲

创建A0对象（函数的作用域对象）
找到形参和变量声明，将变量和形参名作为A0属性名，值为undefined
将实参值和形参统一
在函数体里面找到函数声明，赋值予函数体

作用域精解

[[scope]]:每个javascript 函数都是一个对象，对象中有些属性可以访问，但有些不可以，这些属性仅供javascript引擎存取，[[scope]]就是这些隐性语言之一。

[[scope]]：指的是作用域，其中存储了运行期上下文的集合。

作用域链：[[scope]]中所存储的执行网期上下文对象的集合，这个集合呈链式链接，这种链式链接叫做作用域链。

运行期上下文：当函数执行时，会创建一个称为执行期上下文的内部对象。一个执行期上下文定义了一个函数执行时的环境，函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，当函数执行完毕，它所产生的执行上下文被销毁。

查找变量：从作用域链的顶端依次向下查找。

闭包的缺点

当内部函数被保存到外部时，将会生成闭包。闭包会导致原有的作用域链不释放，造成内存泄漏

闭包的优点

实现公有量··············eg：函数累加器
可以做缓存（存储结构）·················eg：eater
可以实现封装，属性私有化··················eg：person（）
模块化开发，防止污染全局变量

立即执行函数

定义：此类函数没有声明，在一次执行后立即释放，适合做初始化工作。

立即执行函数的两种格式：

1. (function () {} () )····················W3C建议使用这种格式   
 
2.(function () {} ) ()

只有表达式才能被执行函数执行

对象

属性的增（push），删，查，改。
对象的创建方法

字面量:var obj = {} ···········plainObject
构造函数1，系统自带：new Object（）；Number（）；Bolean();String();Date()

2,自定义：命名规则：大驼峰式命名规则；

function Person() {

}

var person = new person
Object.create(原型)方法

例句：

function Student (name,age,sex){
    this.name = name ;
    this.age = age ;
    this.sex = sex ;
}
var student = new Student("zhangsan",18,"male")

构造函数内部原理

在函数体最气前面隐式的加上this = {}
执行 this.XXX = XXX
隐式的返回this

包装类

new String()
new Boolean()
new Number()

例句：

var num = 4;
num.len = 3;
console.log(num.len);

例子：计算某个字符的字符串的竖向

var str = "abcd邓"；
functio bytesLength(str){
    var count = 0;
    for (var i=0;i < str.length; i++){
        if (str.charCodeAt(i) >255) {
            count +=2;
        } else {
            count ++
        }
    }
}

原型

定义：原型是function对象的一个属性，它定义了构造函数制造出来的对象的公共祖先通过该构造函数产生的对象，可以继承该原型的属性和方法，原型也是对象。
利用原型的特点和概念，可以提取公有属性。使用xxx.prototype.XXX; 比如：Person.prototype.name
对象如何查看原型————>隐式属性_proto_
对象如何查看对象的构造函数————>constructor

Person.prototype.name = “abc”

function Person() {

}
var person = new Person();

原型链：

object.prototype 是所有对对象的最终原型，当访问object.prototype.__proto__时，执行结果为null

在原型上面一直叠加原型形成原型链，连接的节点为__proto__,访问顺序为先进后远，

var obj = {}·············等于·············var obj = new Object()

例子：

Grand.prototype.lastName = "ji" 
function Grand(){
    
}
var grand = new Grand()

Father.prototype = grand;
function Father(){
    this.name = "hehe"
}
var father = new Father();

Son.prototype = father
function Son (){
    
}
var son = new Son()

toString的用法

Object.prototype.toString
Number.prototype.toString
Array.prototype.toString
Bolean.prototype.toString
String.prototype.toString

call用法······改变this指向，借用别人的本质实现自己的功能

例如下面两种用法：输出的结果为：前面与对象一样，后面的结果与括号内的类型一样。

Object.prototype.toString.call(123)
——————>[object Number]
Object.prototype.toString.call(true)
——————>[object Bolean]

例句：

function Person (name,age,sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}
function Student(name,age,sex,tel,grade){
    Person.call (this,name,age,sex);
    //其中Person.call与下面三条语句相等;
    //且与上面的Person函数相等
    //this.name = name;
    //this.age = age;
    //this.sex = sex;
    this.tel = tel;
    this.grade = grade;
}
var student = new Student("sunny",123,"male",125,2018)

例句：

function Wheel(wheelSize,style){
    this.wheelSize = wheelSize;
    this.style = style;
}
function Sit(c,sitColor){
    this.c = c;
    this.sitColor = sitColor;
}
function Model(height,width,len){
    this.height = height;
    this.width = width;
    this.len = len;
}
function Car (wheelSize,style,c,sitColor,height,width,len){
    Wheel.call(this,wheelSize,style);
    Sit.call(this,c,sitColor);
    Model.call(this,height,width,len);
}
var car = new Car(100,"花里花哨"，"真皮"，"red",1800,1900,4900)；

其他关键字的用法

ceil：表示向上取整；就算小数点后面是0.1也要向上取整；例如： Math.ceil(123.234)——————>124
floor:表示向下取整；就算小数点后面是0.9也要向下取整；例如：Math.floor(123.999)——————>123
random：表示产生(0~1)的随机数；
可正常计算的范围：小数点前16位，后16位；
test（）—————等于————test.call()

apply:···········改变this指向

用法与call基本一致；但是，其不同点是不能一个一个的传值，而只能穿一个数组形式的值，当存在多个不同的值的时，应使用中括号键将它组成数组形式

例如：

function Wheel(wheelSize,style){
    this.wheelSize = wheelSize;
    this.style = style;
}
function Sit(c,sitColor){
    this.c = c;
    this.sitColor = sitColor;
}
function Model(height,width,len){
    this.height = height;
    this.width = width;
    this.len = len;
}
function Car (wheelSize,style,c,sitColor,height,width,len){
    Wheel.apply(this,[wheelSize,style]);
    Sit.apply(this,[c,sitColor]);
    Model.apply(this,[height,width,len]);
}
var car = new Car(100,"花里花哨"，"真皮"，"red",1800,1900,4900)；

call和apply的区别：

传参列表不同。

继承(inherit)发展史

1. 传统形式————>原型链：过多的继承了没用的属性

例如：

Grand.prototype.lastName = "ji" 

function Grand(){
    
}

var grand = new Grand()

Father.prototype = grand;

function Father(){
    this.name = "hehe"
}

var father = new Father();

Son.prototype = father

function Son (){
    
}

var son = new Son()

2. 借用构造函数：1，不能继承借用构造函数的原型，2，每次构造函数都要多走一个函数；

例如：

function Person (name,age,sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}
function Student(name,age,sex,tel,grade){
    Person.call (this,name,age,sex);
    this.tel = tel;
    this.grade = grade;
}
var student = new Student("sunny",123,"male",125,2018)

3. 共享原型：不能随便改动自己的原型

例如：

Father.prototype.lastName = "Deng";
function Father(){
}
function Son(){
}
//Son.prototype = Father.prototype
//var son = new Son;
function inherit(target,origin){
    target.prototype = origin.prototype
}
inherit(Son,Father)
var son = new Son;

4. 圣杯模式：使用中间函数进行连接；

例如：

Father.prototype.lastName = "Deng";
function Father(){
}
function Son(){
}
function inherit(target,origin){
    function F(){}
    F.prototype = origin.prototype;
    target.prototype = new F();
    terget.prototype.constructor = target;
    terget.prototype.uber = origin.prototype;
}
inherit(Son,Father)
var son = new Son;
var father = new Father()

命名空间

作用：管理变量，防止污染全局变量，适用于模块化开发

例如：

var org = {
   department1 : {
       jicheng : {
           name = "abc",
           age = 123
       },
       xuming : {
           
       }
   },
   department2 : {
       laowang : {
           name = "abc",
           age = 123
       },
       xueer : {
           
       }
   },
}

附加知识：jQery 用$引用HTML代码，例如：

$("div").css("background-color","red").width(100).height(100);

jQery引用：

var deng = {
    smoke : function(){
        console.log("Smoking,····xuan cool!!!");
        return this;
    },
    drink : function(){
        console.log("drinking,····ye cool!!!");
        return this;
    },
    perm : function(){
        console.log("perming,····cool!!!");
        return this;
    }
}
deng.smoke().drink().perm();

属性表示方法

obj.pror
obj[“prop”]

例句：

var deng = {
    wife1 : {name : "xiaoliu"},
    wife2 : {name : "xiaozhang"},
    wife3 : {name : "xiaomeng"},
    wife4 : {name : "xiaowang"},
    sayWife : function (num) {
        return this["wife" + num];
    }
}

对象枚举(遍历，enumeration)

for in······prop非固定，obj为上面的值

var obj = {
    name : "12349",
    age : 123,
    sex : "male",
    height : 180,
    weighe :75
}
for (var prop in obj){
     console.log(obj[prop]);     
}

1.hasOwnProperty···········obj.hasOwnProperty(prop）用来判断对象是否为布尔值

var obj = {
        name: "12349",
        age: 123,
        sex: "male",
        height: 180,
        weighe: 75,
        _proto_: {
            lastName: "deng"
        }
    }
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop) {
            console.log(obj [prop] );
        }
    }

2.in

"height" in obj···················返回结果为true,false;

3.instanceof

A instanceof B //A对象是不是B构造函数构造出来的,返回结果是true,false;
//看A对象的原型链上有没有B的原型

function Person (){

}
var person = new Person

This

函数预编译过程：this————> window
全局作用域里：this————>window
call/apply可以改变函数运行时this的指向
obj.func();func()里面的this指向obj；

argument

argument.callee············指向函数自身引用

例句：argument.callee用于返回函数体test；

function test () {
    console.log(argument.callee);
}
test()

例句：计算n=100的阶乘

var num = ( function (n) {
    if (n == 1 ) {
        return 1;
    }
    return n* arguments.callee(n - 1);
}(100))

func.caller···············用于指代函数在哪种环境被调用；

浅层克隆（clone）

格式：

function clone (origin,target){
    var target = target ||{}
    for (var prop in origin ) {
         target[prop] = origin[prop]
     }
     return target;
}
clone(origin,target)

克隆要点顺序

遍历对象：for （var prop in obj）

判断是不是原始值·······//使用typeof，若为object为原始值，否则为引用值
判断是数组还是对象··········//instanceof，tostring，constructor
建立相应的数组或者对象
递归

深层克隆（deepclone）

例如:

var obj (){
    name : "abc",
    age : 123,
    card : ["vise","master"],
    wife : {
        name = "bcd",
        son : {
            name : "aaa"
        }
    }
}
var obj1 = {
    <!--name  : "abc" //obj.name,-->
    <!--age : 123,-->
    <!--card : ["vise","master"]//obj.card[0],obj.card[1],-->
    <!--wife : {-->
    <!--    name : "bac",-->
    <!--    son :{-->
    <!--        name : "aaa"-->
    <!--    }-->
    <!--}-->
}
function deepClone(origin,target) {
    var target = target ||{}；
      toStr = Object.prototype.toString,
      arrStr = "[object Arrary]";
    for (var prop in origin) {
        if (origin.hasOwnPrototype(prop)) {
            if (orgin[prop] !== "null" && typeof(origin[prop]) == "object"){
                <!--if (toStr.call(origin[prop]) == arrStr ) {-->
                <!--    target[prop] = [];-->
                <!--}else {-->
                <!--    target[prop] = {};-->
                <!--}-->
                target[prop]=toStr.call(origin[prop]) == arrStr ？ []:{}
                
               deepClone(origin[prop],target[prop])
            } else {
            target[prop] = origin[prop];
            }
    }
    return target; 
}

数组

数组的定义

new Array(length/content);
字面量

数组的读和写

arr[num]//不可以溢出读
arr[num]= xxx;//可以溢出读

例子：

var arr1 = [10]················表示arr1中只有一个数组10；

var arr = new Array [10]···············里面的传参表示数组的长度，而不是数组里面的值；

数组的常用方法

改变原数组

push(在数组末端添加一个或多个值)，pop（在数组末端删除一个值）,
shift（在数组最前端减少值）,unshift（在数组最前端添加一个或多个值）,
sort,（给数组里面的无序数值升序排序，）
sort.reverse(给数组里面的无序数值降序排序)
reverse（倒序返回原数组的值）,
splice（从第几位开始，截取多少长度，在切口处添加新的数据）

例句：splice：表示在三后面添加有个数字4；

var arr = [1,2,3,5];
arr.splice(3,0,4);//从第三位开始，截取0个数值，添加一个4，

arr.sort 的使用：

必须写两个形参；
看返回值：1），当返回值为负数时，那么前面的数放在前面； 2），为正数时，那么后面的数放前面； 3），为0时，则不动；

arr.sort 使用的例子1：

var arr = [20,2,10,13,4,8,9];
arr.sort (function (a,b)) {
    if (a > b) {
        return 1;
    }else{
        return - 1;
    }
}

例句2：

var cheng = {
        name: "ji",
        age: 18,
        sex: 'male'
    }
    var deng = {
        name: "laodeng",
        age: 40,
        sex:'male'
    }
    var zhang = {
        name: "xiaozhang",
        age: 20,
        sex: 'male'
    }
    var arr = [cheng, deng, zhang];
    arr.sort(function (a, b) {
        return a.age - b.age;
    });

例子：给下列字符串进行排序：

var arr = ['ac','shj','dhkdjfh','dhialhdyaui','shfsifhyiu','jhaflagfailgf'];
arr.sort(function(a,b) {
return a.length - b.length;
});

例句：给一个有序的数组乱序；

 var arr = [1,2,3,4,5,6,7,8];
 arr.sort( function(){
     return Math.random()-0.5;
 });

不改变原数组

concat,join————>toString,slice

concat:用于将两个或者多个数组连接到一起，但不破坏原有的数组形式；

例如：

var arr = [1,2,3,4,5,6];
var arr1 = [7,8,9];
arr.concat (arr1);//把后面的数组拼到前面的数组的后面
toString:将数组形式转化为字符串形式；
slice：截取数组；格式：slice（从该位开始截取，截取到该位）；当参数为一个数时，表示从该位一直截取到最后一位；当没有参数时，表示截取整个数组；

例如：

var arr = [1,2,3,4,5,6,7];
arr.slice(1,2)

join：表示使用join后面参数的形式进行连接数组的内容；括号内必须使用字符串形式""；当括号内无值时，则默认使用逗号连接；

例如：

var arr = [1,2,3,4,5,6,7];
  arr.join("&");
  //结果为："1&2&3&4&5&6"

split:表示按括号里面的内容进行拆分；

类数组：

可以利用属性名模拟数组的特性；
可以动态的增长length属性；
如果强行让类数组调用push方法，则会根据length属性值的位置进行数组的扩充；

类数组的基本形式：//属性为索引（数字）属性，必须有length属性，最好加上push的方法

例句：

   var obj = {
    "0" : "a",
    "1" : "b",
    "2" : "c" ,
    "lenght" : 3,
    "push" ：Array.prototype.push，
    "splice" : Array.prototype.splice
    }

push的调用方法格式：

Array.prototype.push = function (target) {
    obj[obj.length] = target;
    obj.length ++;
}

类数组的使用：

例如：

var obj = {
   "2" : "a",
   "3" : "b" ,
   "lenght" : 2,
   "push" ：Array.prototype.push，
   }
 obj.push("c";)
obj.push("d";);
//输出结果为： "2" : "c"； "3" : "d" ；"lenght" : 4

使用 for（var prop in obj ){console.log(obj[prop])} 可以把对象内的所有的对象都显现出来；

数组去重：

去重的方法：

分两类，原始值，引用值；
区分引用值；

封装type题目：

function type (target) {
    var template = {
        "[object Array]" :"array",
        "[object Object]" :"object",
        "[object Number]" :'number-object',
        "[object Boolean]" :'boolean-object',
        "[object String]" :'string-object'
    }
    if (target ==== null) {
        return null;
    }
    if(typeof(target) == 'function' ) {
        return 'function';
    }else if (typeof (target) == "object" )
}

或者：

function type (target) {
    var template = {
        "[object Array]" :"array",
        "[object Object]" :"object",
        "[object Number]" :'number-object',
        "[object Boolean]" :'boolean-object',
        "[object String]" :'string-object'
    }
    if (target ==== null) {
        return null;
    }else if(typeof(target) == "object" ) {
        var str = Object.prototype.toString.call(target);
        return template[str];
    }else  {
        return typeof (target);
    }

}

数组去重

例子1：

var arr = [1,1,1,1,2,2,2,4,4,4,4,6,7,7,4];
//var obj = {
    1 : "abc",
    2 ："xxx",
    4 : "xxx",
    6 : "xxx",
    7 : "xxx"
}

去重格式：

Array.prototype.unique = function (){
    var temp = {},
    arr = [],
    len = this.length;
    for(var i =0; i < len ; i ++) {
        if (!temp[this[i]]) {
            temp [this[i]] = 'abc';
            arr.push(this[i]);
        }
    }
    return arr；
}

try…catch

格式：

try{
  
}catch(e) {
 //error error.message  error.name————>error
};

语法：

在try里面的发生错误，不会执行错误后的try里面的代码，直接忽略后续代码；
catch用于在控制台中显示错误信息；当try中出现错误语法时，系统直接跳过try错误的后面来到catch里面执行，将错误信息显示到控制台。
如果try里面没有错误，则不会执行catch；

1), try…cahth 使用例子：

try {
    console.log('a');
    console.log(b);
    console.log('c');
}catch(e) {//error  error.message  error.name ————>error
    console.log (e.name + ":" + e.message);//alert`····弹出窗给用户；
}
console.log('d');

error.name 的六种值对应的信息：

EvalError:eval（）的使用与定义不一致；
RangeError:数值越界；
ReferenceError:非法或不能识别的引用数值；（未经声明就使用时）
SyntaxError:发生语法解析错误；
TypeError:操作数类型错误；
URIError:URI处理函数使用不当；

es5标准模式：

es3.0和es5.0产生冲突的部分就用es5.0

“use strict”·············必须写在页面的最顶端或者函数内部的最顶端；

不再兼容es3的一些不规则语法，使用全新的es5规范。
两种用法：1)，全局严格模式；2)，局部函数内严格模式；

就是一行字符串，不会对不兼容严格模式的浏览器产生影响；
不支持with,argument.callee,func.caller,变量赋值前必须声明，局部this必须被赋值（Person.callee(null/undefined)）赋值什么就是什么），拒绝重复属性和参数；

es5.0的使用例子：

"use strict";
 function test () {
     console.log(argumnet.callee);
 }
test ();

with的用法：

使用with时，括号内的参数会改变原型链(作用域)的顺序，括号内的参数将会是with的调用函数；

例子：

var obj = {
    name : "obj"
}
var name = 'window';
function test (){
    var name = 'scope';
    with (obj) {
    console.log(name);
    }
}
test ();//输出结果为with函数中调用的obj对象，输出的结果为："obj";

eval用法：它能把eval（括号内的字符串当成代码执行；

DOM基本操作（一）

什么是DOM

DOM————> Document Object Model
DOM定义表示和修改文档所需的方法，DOM对象即为宿主，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有称DOM是对html以及xml的标准编程接口。

对直接的增删查改

查看字节

document代表整个文档；
document.getElementRyld() //元素id在ie8以下的浏览器，不区分大小写，而且也返回匹配name属性的元素；
.getElemmentsByName() //标签名；
getElementsByName; //,需注意，只有部分标签name可生效（表单，表单元素，img，iframe）
.getElemmentsByClassName() //类名——>ie8和ie8以下的ie版本中没有，可以多个class一起使用；
.querySelector() //CSS选择器，在ie7和ie7以下的版本中没有；
```
var div = document.querySelector('div>span strong');
```
.querySelectorAII() // CSS选择器，在ie7和ie7以下的版本中没有；选出来的内容是对原内容的复制，不具有实时性；

语法：

setInterval(function() {},100)···········表示每隔100毫秒运行function函数；数字越小运动的越快；
将新的定义的div插入到body里面：
var Newdiv = document.createElement(‘div’);
document.body.appendChild(Newdiv)

DOM基本操作（二）

遍历节点树：

parentNode————>父节点（最顶端的parentNode为#document);
childNodes————>子节点们
firstChild————>第一个子节点
lastChild————>最后一个子节点
nextSibling ————>后一个兄弟点
previousSibling ————>前一个兄弟点

基于元素节点树的遍历：

parentElement————>返回当前元素的父元素节点（ie不兼容）；
children————>只返回当前元素的元素子节点
node.childElementCount === node.children.length 当前元素节点的子元素节点个数（ie不兼容）；
firstElementChild ————> 返回第一个元素节点（ie不兼容）；
lastElementChild ————> 返回最后一个元素节点（ie不兼容）；
6.nextElementSibling/previousElementSibling————>返回后一个/前一个兄弟元素节点（ie不兼容）

节点的四个属性

nodeName：元素的标签名，以大写形式表现，只读；
nodeValue：text节点或comment（注释）节点的文本内容，可读写；
nodeType：该节点的类型，只读；
attributes：Element节点的属性集合；

节点的一个方法：

node.hasChildNodes（）················元素有没有子节点，返回结果为TRUE,False；

封装查找兄弟元素的函数

function retSibling(e, n) {
        while (e && n) {
            if (n > 0) {
                if (0 && e.nextElimentSibling) {
                    e = e.nextElimentSibling;
                } else {
                    for (e = e.nextElimentSibling; e && e.nodeType != 1; e = e.nextElimentSibling);
                }
                n--;
            } else {
                if (e.previousElementSibling) {
                    e = e.previousElementSibling;
                } else {
                    for (e = e.previousSibling; e && e.nodeType != 1; e = e.previousSibling);
                }
                n++;
            }
        }
        return e;
    }

DOM结构树

Document.prototype 是HTMLDocument的原型；

HTMLDocument.prototype.prototype = {
proto : Document.prototype
}
document ————>HTMLDocument.prototype————>Document.prototype
document.documentElement == HTML
document.body == 标签；
document.head == 标签；

节点类型

元素节点————————1
属性节点————————2
文本节点————————3
注释节点————————8
document————————9
DocumentFragment————————11

DOM基本操作（三）

DOM基本操作(一)：

getElementById方法定义在Document.prototype上，即Element节点上不能使用

2.getElementByTagName方法定义在Document.prototype和Element.prototype;

3.HTMLDocumnt.prototype定义了一些常用的属性，body，head，分别指代标签；

4.getElementByName方法定义在HTMLDocument上，即非html中的document不能使用（xml document，Element）

DOM基本操作(二)：

增：

document.createElement();
document.createTextNode();
document.createComment();
document.createDocumentFragment();

插：(剪切)

XXX.appendChild();
XXX.insertBefore(a,b);

删：

parent(xxx).removeChild();
child(xxx).remove;

替换：

parent(xxxx).replaceChild(new,origin);

DOM基本操作(三)

Element节点的一些属性：

xxx. innerHTML（添加HTML代码）；
innerText(火狐不包容)/textContent(版本太老)；

Element节点的一些方法：

xxx.setAttribute(‘属性名’，‘属性值’)···············设置行间属性；
xxx.getAttritube(‘属性名’)··················输出行间属性的属性值；

封装insertAfter函数

Element.prototype.insertAfter = function ( targetNode , afterNode ){
    var beforeNode = afterNode.nextElementSibling;
    if ( beforeNode == null){
        this.appendChild(targetNode);
    }else{
        this.insertBefore ( targetNode, beforeNode);
    }
}

date对象用法

Date的get用法

Date()···········返回当日的日期和时间。
getDate()···········从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()···········从Date 对象返回一周中的某一天 (0 ~ 6)；
getMonth()···········从 Date 对象返回月份 (0 ~ 11)。
getMonth()···········从 Date 对象返回月份 (0 ~ 11)。
getFullYear()···········从 Date 对象以四位数字返回年份。
getFullYear()···········从 Date 对象以四位数字返回年份。
getYear()···········请使用 getFullYear() 方法代替。
getYear()···········请使用 getFullYear() 方法代替。
getHours()···········返回 Date 对象的小时 (0 ~ 23)。
getMinutes()···········返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()···········返回 Date 对象的秒数 (0 ~ 59)；
getMilliseconds()···········返回 Date 对象的毫秒(0 ~ 999)。
getTime()···········返回 1970 年 1 月 1 日至今的毫秒数。

Date的set用法

setDate()···········设置 Date 对象中月的某一天 (1 ~ 31)
setMonth()···········设置 Date 对象中月份 (0 ~ 11)
setFullYear()···········设置 Date对象中的年份（四位数字）
setYear()···········请使用 setFullYear() 方法代替
setHours()···········设置 Date 对象中的小时 (0 ~ 23)
setMinutes()···········设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()···········设置 Date 对象中的秒钟 (0 ~ 59)
setMilliseconds()···········设置 Date 对象中的毫秒 (0 ~ 999)
setTime()···········以毫秒设置 Date 对象。

Js定时器

setInterval
setTimeout：推迟一段时间后才执行
clearInterval
clearTimeout
全局对象window上的方法，this指向window；
setInterval(“cosole.log(‘a’);” ,1000)············另外一种形式写法，执行括号内的语法；

使用例子1：定时停止；

var i = 0;
 var timer = setInterval(function(){
     console.log(i ++ );
     if(i > 20){
         clearInterval(timer);
     }
 },10);

使用例子2：

<!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>
    input {
        border: 1px solid black;
        font-size: 20px;
        text-align: right;
        font-weight: bold;
    }
</style>
</head>
 <body>
    minutes:<input type="text" value="0">
    seconds:<input type="text" value="0">
    <script>
        var minutesNode = document.getElementsByTagName('input')[0];
        var secondsNode = document.getElementsByTagName('input')[1];
        var minutes = 0,
        seconds = 0;
       var timer = setInterval(function () {
        seconds++;
        if (seconds == 60) {
            seconds = 0;
            minutes ++;
        }
        secondsNode.value = seconds;
        minutesNode.value = minutes;
        if(minutes == 3){
            clearInterval(timer);
        }
    }, 10)
    </script>
</body>
</html>

如何绑定事件处理函数

ele.onxxx = function (event) {}·······this指向自身

兼容性很好，但是一个元素的同一事件上只能绑定一个处理程序；
基本等同于写在HTML行间上；

obj.addEventListener(事件类型，处理函数,false);·······this指向自身

IE9以下不兼容，可以为一个事件绑定福讴歌处理程序（处理函数）

obj.attachEvent(‘on’ + type（事件）,fn)；·······this指向window

Ie独有，一个时间可以绑定多个处理程序；

事件绑定的兼容性封装方法

function addEvent(elem, type, fn) {
        if (elem.addEventListener) {
            elem.addEventListener(type, fn, false)
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, function () {
                fn.call(elem);
            });
        }else{
            elem['on'+type]= fn ;
        }
    }

解除事件处理程序

ele.onclick = false/‘’/null;
ele.removeElementListener(type,fn,false);
ele.detachEvent(‘on’+ type,fn);
注：若绑定匿名函数，则无法解除；

事件处理模型——事件冒泡，捕获

事件冒泡：

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）；

事件捕获：

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（自顶向下）；

触发顺序，先捕获，后冒泡

focus,blur,change,submit,reset,select等事件不冒泡；

content.addEventListener('click', function () {
      console.log('content')
  }, false);

当为false时，属于事件冒泡；当为true时，属于事件捕获；

取消冒泡和阻止默认事件

取消冒泡

W3C标准eventPropagation(),但不支持ie9标准；

 var wrapp = document.getElementsByClassName('wrapp')[0];
    wrapp.onclick = function(e){
        //e.stopPropagation();
        e.cancelBubble = true;
        this.style.background = "green";
    }

ie独有的eventcancelBubble = true;
封装取消冒泡函数：stopBubble(event);

function cancelHandle(e) {
    if (e.preventDefault{
        e.preventDefault();
    } else if (e.returnValue) {
        e.returnValue = true;
    } 
}

阻止默认事件

默认事件有————表单提交，a标签跳转，右键菜单(oncontext)等；
return false，以对象属性的方式注册的时间才生效；
event.preventDefault():W3C标准，ie9以下不兼容；
event.returnValue = false;
封装阻止默认事件的函数：cancelHandle(event)

事件对象

event || window.event用于IE；
事件源对象:

event.target···················火狐使用
event.srcElement··················IE使用；
chrome都有以上两种；

兼容性写法：

var event = e || window.event;
var target = event.target||event.Element;

事件委托

利用事件冒泡和事件源对象进行处理；
优点：

性能不需要循环，所有的元素一个个绑定事件；
灵活，当有新的子元素时不需要重新绑定属性；

例句：

  var ul = document.getElementsByClassName('ul')[0];
    ul.onclick = function (e) {
        var event = e || window.event;
        var target = event.target || event.src.Element;
        console.log(target.innerText);
    }

事件分类

鼠标事件
click, mousedown, mousemove, mouseup, contextmenu, mouseover（鼠标触摸到区域）, mouseout（鼠标离开触摸区域） mouseenter（鼠标触摸到区域）, mouseleave（鼠标离开触摸区域）;
用button来区分鼠标的按键，0<左键>/1<滚轮>/2<右键>·················mousedowe mouseup 只有这两个才能区分；
DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键；
如何解决mousedown和click的冲突；

封装方块移动

   //方块移动
    // var div = document.getElementsByTagName('div')[0];
    //     var disX,
    //         disY;
    //     div.onmousedown = function (e) {
    //         disX = e.pageX - parseInt(div.style.left);
    //         disY = e.pageY - parseInt(div.style.top);
    //         document.onmousemove = function (e) {
    //             var event = e || window.event;
    //             div.style.left = e.pageX - disX + "px";
    //             div.style.top = e.pageY - disY + "px";
    //         }
    //         document.onmouseup = function () {
    //             div.onmousemove = null;
    //         }
    //     }

键盘事件

键盘事件
keydown,keyup,keypress;
keydown > keypres >keyup;
keydown 和keypress 的区别：

keydown可以响应任意键盘按钮，keypress只可以响应字符类键盘按键
keypress返回ASSCII码，可以转化为响应字符；

文本操作事件

input,focus,blur,change

input.oninput = function (e){
console.log(this.value);
}

窗体操作类（window上的事件）

scroll，load；

正则表达式RegExp

正则表达式的作用:

匹配特殊字符或有特殊搭配原则的字符的最佳选择。

两种创建方式

直接量var reg = /XXXXX/
New RegExp();

其他知识详见W3School网；

检验一个字符串首尾是否含有数字：
```
var reg = /^ /d | /d  $/
```
检验一个字符串首尾是否含有数字：
```
var reg = /^ \d [\s\S] * \d $/
```
匹配aaaa形式的表达式：（\1)表示匹配前面一个表达式的内容；
```
var reg = / (\w) \1 \1 \1 /g
```
匹配aabb形式表达式：
```
var reg = / (\w) \1  (\w) \2 /g
```

替换aabb的位置：

var reg = /(\w) \1 (\w) \2 /g;
var string = aabb;
cosole.log (str.replace(reg,"$2$2$1$1"));
//cosole.log (str.replace(reg, function(){
 //    return $2 + $2 + $1 + $1
//}));

正则表达式的应用

将the-first-name 变成小驼峰式写法

var reg = / -(\w) /g;
var string = "the-first-name";
console.log(str.replace(reg,function($,$1){
    return $1.toUpperCase();
}));

查找具有修饰性的应用：查找后面跟着b的a的表达式：

var str = "abaaaaa";
var reg = /a(?=b)/g;
//当等号换位感叹号！时，表示不跟着a的表达式；

操作字符串的方法：

str.toUpperCase()···············转化成大写字母
str.toLowerCase()··················转化成小写字母

字符串去重

var  str = aaaaaaaaabbbbbbbbcccccccc
 var reg = /(\w)\1*/g;
 console.log(str.replace(reg,"$1")）；

JavaScript补充

JavaScript主要由以下三部分组成:

( 1) DOM(文档对象模型,全称:Document Object Model) :主要处理网页内容相关的接口。如，获取元素document.getElementByld0;
(2) BOM(浏览器对象模型，全称: Broswer Object Model) : 主要处理与浏览器进行交互的接口。其中包含的对象有: location,history,screen,navigator …其中window对象是所有对象的顶级对象。在代码中顶级对象可以省略不写。
(3 ) ECMAScript : ECMAScript是javascript的核心，其中ECMA代表欧洲计算机制造商协会，类似于W3C组织，其中核心知识在于两链一包，这是js精华部分。（作用域链，原型链，闭包）

常用鼠标事件

onclick:鼠标点击
onchange:当状态或者内容改变
onfocus:得到焦点
onfocus:得到焦点
onmouseout :当鼠标离开
onmouseout :当鼠标离开
onload:当页面加载完成之后

键盘事件

onkeydown :任何键盘键按下触发(并不需要抬起，按着不放则一-直触发)
onkeypress :键盘按下并抬起时(只对任何字母键和数字键有效，系统键(如:方向功能键ctrl, alt等)无法得到
onkeyup :任何键盘键按下并抬起时触发(重点)

表单事件

onsubmit :表单提交时
onreset :表单重置时
下拉框select切换option触发的事件 :
onchange : -般用于select内容改变的时候触发

BOM补充

BOM

Brower Object Model ··········· 浏览器对象模型

windows是整个JavaScript脚本运行的顶层对象，常用属性如下：

docment:返回该窗口内装载的HTML文档
location：返回该窗口浏览器装载的HTML文档的URL
navigtor：返回浏览当前页面的浏览器，包含了一系列的浏览器属性，包括名称，版本号和平台；
screen：返回当前浏览者屏幕对象
history：返回该浏览窗口的历史

windows对象的常用方法

属性名称	方法
alert(),confirm(),prompt()	分别用于弹出警告窗口，确认对话框，和提出输入对划扣昂。
close	关闭窗口
moveBy （）,moveTo()	移动窗口
resizeBy(),resizeTo()	重设窗口大小
scrollBy(),scrollTo()	滚动当前窗口的HTML文件
open()	打开一个新的浏览器窗口加载新的URL所指向的地址，并可指定一系列的新的属性，包括隐藏菜单等
setInterval(),clearInterval()	设置，删除定时器

history对象常用方法

属性名称	方法
back（）	后退到上一个浏览的页面，如果该页面是第一个打开的，无效
forward（）	前进到后一个浏览的页面，如果该页面是第一个打开的，无效
go(intValue)	该方法课指定前进或后退多少个页面，正前进，负后退

location对象常用属性

属性名	方法
hostname	文档所在地址的主机名
href	文档所在地址的URL地址
host	文档所在地址的主机地址
port	文档所在地址的服务端口
pathname	文档所在地址的文件地址
protocol	装载该文件所使用的的协议，例如HTTP:等

DOM补充

利用节点关系访问HTML元素。常用的属性和方法如下:

属性	方法
parentNode	返回当前节点的父节点。
previousSibling	返回当前节点的前一个兄弟节点。
nextSibling	返回当前节点的后一个兄弟节点。
childNodes	返回当前节点的所有子节点
firstChild	返回当前节点的第一一个子节点u
lastChild	返回当前节点的最后一一个子节点
getElementsByTagName(tagName)	返回当前节点的具有指定标签名的所有子节点

DOM访问表单控件的常用属性和方法如下:

属性	方法
action	返回该表单的提交地址
elements	返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件。
length	返回表单内表单域的个数
method	返回表单内的method属性，主要有get和post两个值
reset()、submit()	确定提交表单时的结果窗口，主要有_ self、. blank、. _top等
reset()、submit()	重置表单和确定表单方法。

在elements返回的数组中访问具体的表单控件语法如下:

属性	方法
elements[index]	返回该表单中第index个表单控件
elements[elementName]	返回表单内id或name为e I emetName的表单控件。
elementName	返回表单中id或name为el emetName的表单控件

DOM访问列表框、下拉菜单的常用属性如下:

属性	方法
form	返回列表框、下拉菜单所在的表单对象
length	返回列表框、下拉菜单的选项个数
options	返回列表框、下拉菜单里所有选项组成的数组
selectedIndex	返回下拉列表中选中选项的索引。
type	返回下拉列表的类型，多选的话返回select -mu’tple,单选返回se lect-one

使用options[index]返回具体选项所对应的常用属性:

属性	方法
defaultSelected.	返回该选项默认是否被选中
index	返回该选项在列框、下拉菜单中的索引
selected	返回该选项是否被选中
text	返回该选项呈现的文本
value	返回该选项的value属性值

DOM添加、删除节点的方法:

属性	方法
appendChild(newNode）	将newNode添加成当前节点的最后一个子节点
insertBefore(newNode，refNode）	在refNode 节点之前插入newNode节点
replaceChild(newNode，oldNode）	将oldNode 节点替换成newNode节点
removeChild(oldNode)	将oldNode子节点删除

阿波罗呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript用法及笔记

JavaScript浏览器的组成：shell部分内核部分渲染引擎（语法规则和渲染）JS引擎其他模块主流浏览器IE··············内核··············tridentchrome·············内核···········webkit/blinkfirefox··········内核··············Geckoopera···········内核·············prestosafari··········内核·········
复制链接

扫一扫