精华内容
下载资源
问答
  • ES5

    千次阅读 2019-03-07 20:00:32
    es3-es5(严格模式) 支持ES5的浏览器 Opera 11.60+ Internet Explorer 9+ (IE9不支持严格模式) Firefox 4+ Safari 5.1+ Chrome 13+ 页面加载事件 DOM文档加载的步骤为 解析HTML结构。 加载外部脚本和样式表文件...

    es3-es5(严格模式)

    支持ES5的浏览器

    Opera 11.60+

    Internet Explorer 9+ (IE9不支持严格模式)

    Firefox 4+

    Safari 5.1+

    Chrome 13+

    页面加载事件

    DOM文档加载的步骤为

    1. 解析HTML结构。

    2. 加载外部脚本和样式表文件。

    3. 解析并执行脚本代码。

    4. DOM树构建完成。//DOMContentLoaded

    5. 加载图片等外部文件。

    6. 页面加载完毕。//window.onload

      页面加载事件

    * readystatechange事件(准备阶段状态改变,两个状态)
        * interactive 	:DOM树完成执行
        * complete		:类似window.onload,但比window.onload先执行
    * DOMContentLoaded事件
    	* DOM树完成执行
        * 必须使用事件监听器绑定document事件
    * 
    PS:以上事件用以取代window.onload事件(实际开发不常用)
    
    演示:通过控制台打印查看执行顺序
    document.onreadystatechange = function(){
        if(document.readyState === 'interactive'){
        	console.log(iteration);
    	}
    	if(document.readyState === 'complete'){
            console.log('complete');
    	}
    }
    document.addEventListener("DOMContentLoaded",function(){
        console.log("DOMContentLoaded");
    })
    document.onload = function(){
        console.log("onload);
    }
    

    ES5的严格模式

    除了正常模式,ES5添加了第二种运行模式:“严格模式(strict mode)”。顾名思义,这种模式使得javascript在更严格的条件下运行(更可靠,更安全)。目前,除了IE6-9,其它浏览器均已支持ES5严格模式。

    为什么要用严格模式

    • 消除javascript语法的一些不合理,不严谨的地方,减少一些怪异行为;
    • 消除代码运行的一些不安全之处,保证代码运行的安全;
    • 提高编译器效率,增加运行速度;
    • 为未来新版本的javascript做好铺垫;
    举例子:
    function sum(){
        a = 10;
      	//在普通模式下,若在函数内不使用var声明变量,会默认变成全局变量
      	//为了改变现状,出现ES4版本,然而变动太大,未被使用
      	//出现ES5作为过渡阶段,存在两种模式
    }
    

    如何使用ES5

    在头部写入 “use strict”

    • 全局:针对整个js文件
      将”use strict”放在js文件的第一行
    • 局部:针对单个函数
      将”use strict”放在函数体的第一行
    function strict(){
        "use strict";
        return "这是严格模式";
    }
    

    执行限制

    • 不使用var声明变量严格模式中将不通过

    • 删除系统内置的属性会报错

    • 不能删除var声明的全局变量(会自动成为window的属性)

    • 对象有重名的属性将报错

      • var obj={name:“小王”,name:‘王大锤’}
    • 函数有重名的形参将报错

      • function sum(a,a,b){}
    • arguments严格定义为参数(包含了实参的所有信息)

      • 不允许对arguments赋值
      • 禁止使用arguments.callee调用自己本身的函数
    • 函数必须声明在顶层,不能写在条件判断语句或for循环语句中

      var arr = [10,2,3,50];
      if(arr.length>3){
      function sum(){//报错}
      }

    获取元素节点

    • querySelector(selector)
      获取匹配选择器的第一个元素节点,返回DOM节点
    • querySelectorAll(selector)
      获取匹配选择器的所有元素,返回数组

    对比用getElementsByClassName()等方法获取到的类数组,querySelectorAll()可以使用forEach()方法。

    (学会查看控制台!!!)

    Function方法

    bind(指定对象)
    用于将当前函数和指定对象绑定(改变函数内this指向为指定对象),返回一个新的函数

    应用

    var btns = document.querySelectorAll('.btn');
    for(var i=0;i<btns.length;i++){
        btns[i].onclick = function(){
            //方式1(1):var self = this;
            setTimeout(function(){
                //(2)console.log(self.innerHTML);
                //方式2.bind()改变this的指向
                console.log(this.innerHTML);
            }.bind(this),1000);
        };
    }
    

    操作class的属性

    classList 类数组,包含了所有类名

    • length : class类名的个数
    • add() : 添加class方法
    • remove() : 删除class方法
    • toggle() : 切换class方法
    • contains():是否含有某个类,返回布尔值

    data自定义属性

    dataset 对象

    //1.符合W3C标准自定义属性:data-*
    <div id="box" data-name="laoxie" data-age="18" data-first-name="xiexie"></div>
    
    //2.dataset:存放所有data自定义属性的对象。
    //(1)获取
    dataset.age;//获取data-age的属性值
    dataset.firstName;//获取data-first-name的属性值
    //(2)设置
    dataset.gender="girl";//设置data自定义属性,在html结构会多出[data-gender="girl"]
    
    //回顾:操作任意自定义属性(可以是非标准的)
    //setAttibutte()
    //getAttibute()
    
    展开全文
  • es5

    2018-12-06 15:55:02
  • ES5AC THRU ES5JC SMC YONGYUTAI
  • es5plus-polyfill es5plus-polyfill
  • ng2ES5 使用ES5的Angular 2.0
  • Angular2ES5 带有ES5的Angular 2.0

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 79,694
精华内容 31,877
关键字:

es5