zoukankan      html  css  js  c++  java
  • 16、ES5

    支持ES5的浏览器

    Opera 11.60+

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

    Firefox 4+

    Safari 5.1+

    Chrome 13+

    一、页面加载顺序及事件

    (一)页面加载顺序

    1、解析HTML结构。
    2、加载外部脚本和样式表文件。
    3、 解析并执行脚本代码。
    4、DOM树构建完成。(获取元素) ==>DOMContentLoaded
    5、加载图片等外部文件。
    6、 页面加载完毕 ==> window.onload

    (二)事件

    1、onreadystatechange ==> 准备阶段改变时触发函数
    (1.1)document.readyState  ==> 准备阶段

    * interactive ==> 等待dom树构建完成触发
    * complete ==> 等待页面加载完毕触发
    2、document.addEventListener("DOMContentLoaded",function(){}) ==> DOM树构建完成
    * readystatechange事件(准备阶段状态改变,两个状态)
      * interactive :DOM树完成执行
      * complete :类似window.onload,但比window.onload先执行
    * DOMContentLoaded事件
    * DOM树完成执行
      * 必须使用事件监听器绑定document事件
    *
    PS:以上事件用以取代window.onload事件(实际开发不常用)

    二、如何使用ES5,严格模式(ie9及以下不支持)

    1、在头部写入 “use strict”

    • 全局:针对整个js文件将”use strict”放在js文件的第一行

    • 局部:针对单个函数将”use strict”放在函数体的第一行

    1 function strict(){
    2     "use strict";
    3     return "这是严格模式";
    4 }

    2、为什么要用严格模式

    • 消除javascript语法的一些不合理,不严谨的地方,减少一些怪异行为;

    • 消除代码运行的一些不安全之处,保证代码运行的安全;

    • 提高编译器效率,增加运行速度;

    • 为未来新版本的javascript做好铺垫;

    三、获取元素节点

    1、document.querySelector("css选择器写法 . #") 获取匹配选择器的第一个元素节点,返回DOM节点
    2、document.querySelectorAll( "css选择器写法 . #")获取匹配选择器的所有元素,返回数组

    四、Function方法(用在函数上的方法)

    1、bind(指定对象)

    用于将当前函数和指定对象绑定(改变函数内this指向为指定对象),返回一个新的函数 ==>(还没有执行)

    五、classList 类数组,包含了所有类名(重点)

    1、ele.classList.length : class类名的个数
    2、ele.classList.add() : 添加class方法
    3、ele.classList. remove() : 删除class方法
    4、ele.classList.toggle() : 切换class方法
    5、ele.classList.contains():是否含有某个类,返回布尔值

    六.data自定义属性

    (一)dataset 对象

    1.符合W3C标准自定义属性:data-*
    <div id="box" data-name="laoxie" data-age="18" data-first-name="xiexie"></div>
    2.dataset:存放所有data自定义属性的对象。
    1 (1)获取
    2 dataset.age;//获取data-age的属性值
    3 dataset.firstName;//获取data-first-name的属性值
    4 (2)设置
    5 dataset.gender="girl";//设置data自定义属性,在html结构会多出[data-gender="girl"]
  • 相关阅读:
    209. Minimum Size Subarray Sum
    208. Implement Trie (Prefix Tree)
    207. Course Schedule
    206. Reverse Linked List
    205. Isomorphic Strings
    204. Count Primes
    203. Remove Linked List Elements
    201. Bitwise AND of Numbers Range
    199. Binary Tree Right Side View
    ArcGIS API for JavaScript 4.2学习笔记[8] 2D与3D视图同步
  • 原文地址:https://www.cnblogs.com/wulongke/p/10493303.html
Copyright © 2011-2022 走看看