`
BuN_Ny
  • 浏览: 85476 次
  • 来自: 济南
社区版块
存档分类
最新评论

精通JavaScript: 分离式JavaScript开发

 
阅读更多

 

* DOM *

---------------------------------------------------------------------------

1. 遍历DOM

  1) 要注意处理空格(空格类文本占用一个节点)

  2) DOM家谱中的定位指针: 

   firstChild  <--> parentNode

   lastChild   <--> parentNode

   nextSibling <--> previousSibling

  3) 节点类型:

   --> 元素 nodeType = 1

   --> 文本 nodeType = 3

   --> 文档 nodeType = 9  在HTML文档内,即<html>元素

  4) 标准DOM方法

   document.getElementById('id');

   document.getElementsByTagName('tagName');

2. 等待HTML DOM的加载

  1) 浏览器渲染和操作的大致顺序:

    A. HTML解析完毕

    B. 外部脚本和样式表加载完毕

    C. 脚本在文档内解析并执行

    D. HTML DOM完全构造起来

    E. 图片和外部内容加载

    F. 网页完成加载

  2) 等待加载策略

    A. 等待整个页面的加载

      利用window对象的load事件绑定一个函数

      缺点: 慢! 若页面包含大量图片、视频等,需等待很长时间才能执行javascript

    B. 等待大部分DOM的加载

      在页面最后元素之前嵌入脚本(通常认为是不合理的,不推荐使用)

    C. 判断DOM何时加载完毕

      检查HTML DOM是否可用的要点:

       (1) document

       (2) document.getElementsByTagName 和 document.getElementById

       (3) document.body 额外补充(理论上使用前一个检查足够判断)

      实现:

 

      function domReady(fn){
        if(domReady.done)
          return fn();
        if(domReady.timer){
          domReady.ready.push(fn);
        }else{
          domReady.ready = [fn];
          domReady.timer = setInterval(isDOMReady, 13);
        }
      }
      function isDOMReady(){
        if(domReady.done)
          return false;
        if(document && document.getElementsByTagName 
              && document.getElementById && document.body){
          clearInterval(domReady.timer);
          domReady.timer = null;
          for(var i=0,len=domReady.ready.length; i<len; ++i)
            domReady.ready[i]();
          domReady.ready = null;
          domReady.done = true;
        }
      } 

 

3. 在HTML文档中查找元素

  1) 通过类值查找元素

  2) 使用css选择器查找元素

  3) XPath

4. 获取元素的内容

  1) 获取元素内文本

    A. 所有非Mozilla的浏览器中都有一个 innerText 属性可获取文本

    B. 元素并非直接包含文本,而是包含在一个子文本节点中

  2) 获取元素内HTML

    A. 所有现代浏览器都实现的属性: innerHTML

    B. 依赖于浏览器的实现,实现的潜在问题:

      --> 基于Mozilla的浏览器不会返回<style>元素

      --> IE返回的元素字符都是大写

      --> 只能在HTML DOM文档中使用,在XML DOM文档中返回null

5. 操作元素特性

  1) 获取和设置特性的值

    A. 兼容XML DOM的方法:  getAttribute('name');  setAttribute('value', 'zhangsan');

    B. HTML DOM文档的额外方式:  var name = elem.name;  elem.value = zhangsan;

    C. 特殊情况:  

      --> getAttribute/setAttribute对class属性不一定通用(如IE会返回null)

      --> 简单的写法应该形如: elem.className 而非 elem.class(class是js的关键字)

      --> label标签的for属性也是如此: elem.htmlFor

      --> 一些css属性: elem.style.cssFloat, elem.style.cssText

      --> 处理方式: name = {'for': 'htmlFor', 'class': 'className'}[name] || name

6. 修改DOM

  1) 创建

     document.createElement  创建新元素,它不会马上插入到DOM中

     document.createTextNode 创建文本节点

  2) 插入

     parentNode.insertBefore(nodeToInsert, beforeNode);

     不指定beforeNode时在最后插入,类似:

     parentNode.appendChild(nodeToInser);

  3) 注入

     利用innerHTML属性. 缺陷:

       --> 对于XML DOM不通用

       --> innerHTML完全删除了元素内容的任何节点,没法像DOM方法一样追加或插入

  4) 删除

     parentNode.removeChild(nodeToRemove);

 


* 事件 *

---------------------------------------------------------------------------

1. 事件简介

  1) 异步事件与线程

    JavaScript事件模型: 不使用任何线程,完全是异步的

    --> JavaScript目前不存在线程,最接近线程的是使用setTimeout()回调函数

        也就是说,js代码的执行,是阻塞的

    --> 异步回调: 当一个DOM元素触发某个特定事件时,通过一个回调函数来处理它

  2) 事件阶段

    --> 捕获: 事件会以 document => <body> => .... 的顺序捕获

    --> 冒泡: 事件处理函数反向冒泡执行

2. 常见事件特征

  1) 事件对象

    --> IE的实现与W3C规范有差别: 它使用独立的全局事件对象window.event

    --> 其他浏览器使用独立的包含事件对象的参数传递

    document.getElementById('id').onclick = function(e){

      e = e || window.event;

      //......

    };

  2) this关键字

    --> 只有部分浏览器和部分方法能正常运行并将this等同于当前元素

    --> 使用this关键字处理事件相关代码相当便利

  3) 取消事件冒泡

    --> 标准浏览器:  e.stopPropagation();

    --> IE浏览器:    window.event.cancelBubble = true;

  4) 重载浏览器的默认行为

    --> 浏览器的默认行为在捕获阶段、冒泡阶段都会发生

    --> 阻止事件冒泡或者完全没有绑定事件并不会影响默认行为的执行

    --> 阻止默认行为的途径:

         A. 标准浏览器:  e.preventDefault();

         B. IE浏览器:    window.event.returnValue = false;

    --> 防止默认行为是由浏览器决定的,未必总生效(尤其是在文本域中防止敲击和<iframe>内的行为)

3. 绑定事件监听函数

  1) 传统绑定

    目前为止,绑定事件处理函数最简单且兼容性最好的方式

      document.body.onkeypress = function(){...};

      window.onload = function(){...};

    --> 优点: A. 简单,稳定,兼容; 

              B. 处理事件时,this关键字引用的是当前元素

    --> 缺点: A. 只会在事件冒泡中运行; 

              B. 只能绑定一个事件处理函数; 

              C. 事件对象参数仅对非IE浏览器有效

  2) W3C方式

    使用: elem.addEventListener(事件名称, 处理事件的函数, 启用/禁用事件捕获的标示);

      document.getElementById('id').addEventListener('mouseover', function(e){

        this.style.border = '1px solid red';

      }, false);

    --> 优点: A. 同时支持捕获和冒泡阶段(true捕获,false冒泡);

              B. this关键字引用当前元素;

              C. 可以获取事件对象参数;

              D. 同一元素绑定多个事件时不会覆盖

    --> 缺点: IE不支持

  3) IE方式

    使用: elem.attachEvent(事件名称, 处理事件的函数);

    --> 优点: 同一元素绑定多个事件时不会覆盖

    --> 缺点: A. 仅支持事件冒泡阶段;

              B. this关键字指向window对象而非当前元素;

              C. 事件对象仅存在于window.event参数中;

              D. 事件必须以ontype的形式命名,如onclick;

              E. 仅IE可用,其他标准浏览器不支持

  4) 通用方法

function addEvent(element, type, handler){
      if(!handler.$$guid)
        handler.$$guid = addEvent.guid++;
      if(!element.events)
        element.events = {};
      var handlers = element.events[type];
      if(!handlers){
        handlers = element.events[type] = {};
        if(element['on'+type]){
          handlers[0] = element['on'+type];
        }
      }
      handlers[handler.$$guid] = handler;
      element['on'+type] = handleEvent;
    }
    addEvent.guid = 1;
    function removeEvent(element, type, handler){
      if(element.events && element.events[type]){
        delete element.events[type][handler.$$guid];
      }
    }
    function handleEvent(event){
      var returnValue = true;
      event = event || fixEvent(window.event);
      var handlers = this.events[event.type];
      for(var i in handlers){
        this.$$handleEvent = handlers[i];
        if(this.$$handleEvent(event)===false){
          returnValue = false;
        }
      }
      return returnValue;
    }
    function fixEvent(event){
      event.preventDefault = fixEvent.preventDefault;
      event.stopPropagation = fixEvent.stopPropagation;
      return event;
    }
    fixEvent.preventDefault = function(){
      this.returnValue = false;
    };
    fixEvent.stopPropagation = function(){
      this.cancelBubble = true;
    };
 

4. 事件类型

  1) 鼠标事件

  2) 键盘事件

  3) UI事件

 

分享到:
评论

相关推荐

    完全手册:JavaScript动态网页开发详解

    这本书“完全手册:JavaScript动态网页开发详解”深入浅出地讲解了JavaScript的各个方面,旨在帮助读者从初学者到精通者,掌握这个强大的脚本语言。 **一、JavaScript基础** 1. 变量与数据类型:了解JavaScript中的...

    精通JavaScript+jQuery Part1

    精通JavaScript+jQuery 书籍目录: 第1部分 JavaScript.cCSS与DOM基础篇   第1章 ccJavaScript概述  1.1 JavaScript的起源  1.2 浏览器之争  1.2.1 DHTML  1.2.2 浏览器之间的冲突  1.2.3 标准的...

    《精通Javascript+jQuery》光盘源码

     1.4.2 结构.c表现和行为的分离  第2章ccJavaScript基础  2.1 JavaScript的语法  2.2 变量  2.3 数据类型  2.3.1 字符串  2.3.2 数值  2.3.3 布尔型  2.3.4 类型转换  2.3.5 数组  2.4 关键字 ...

    Javascript完全自学宝典

    - 前后端分离架构下的开发模式。 - 第三方API和服务的集成方法。 2. **JavaScript RIA开发实战——最佳实践、性能、表现** - **核心知识点**: - 富互联网应用(RIA)的设计原则。 - 性能优化的最佳实践(如减少...

    精通javaweb整合开发

    在“精通javaweb整合开发”这一主题中,我们聚焦于Java Web应用程序的客户端编程,这是Web开发中的重要组成部分。客户端编程主要关注于用户与Web应用程序的交互,它包括浏览器端的JavaScript、HTML、CSS以及与服务器...

    JavaScript王者归来 (清晰PDF+高晰PDF 双版本火爆下载中)

    JavaScript王者归来,这不仅是一个响亮的称号,也是对JavaScript在现代Web开发中地位的肯定。...随着Web技术的不断发展,JavaScript的王者地位只会更加稳固,学习和精通JavaScript是每一个IT从业者不可或缺的技能。

    javascript 基础教程 html版的

    JavaScript是Web开发中不可或缺的一部分,尤其对于前端开发者来说,它是实现网页动态效果和交互的核心语言。...本教程将深入浅出地介绍...通过实践和深入学习,你可以逐渐精通JavaScript,成为一名出色的前端开发者。

    精通JAVA WEB整合开发

    2. **AJAX(Asynchronous JavaScript and XML)**:AJAX不是一种单一的技术,而是一组用于创建快速交互式Web应用的技术集合。它通过异步在后台与服务器交换数据并局部更新页面,提高了用户体验。你将学习如何使用...

    <<精通JavaScript >>(PDF)中文版

    1.4 分离式DOM脚本编程 5 1.4.1 DOM 6 1.4.2 事件 7 1.4.3 Javas cript与CSS 8 1.5 Ajax 8 1.6 浏览器支持 11 1.7 小结 12 第二部分 专业Javas cript开发 第2章 面向对象的Javas cript 14 2.1 ...

    HTML、CSS、JavaScript网页制作从入门到精通

    这份“HTML、CSS、JavaScript网页制作从入门到精通”的资料,提供了全面的学习路径,帮助初学者掌握网页开发的基础和高级技巧。 HTML(HyperText Markup Language)是网页内容的基础,它定义了网页的结构和意义。...

    web开发手册(css、vbscript、dhtml、javascript)

    在Web开发领域,CSS(Cascading Style Sheets)、VBScript、DHTML(Dynamic HTML)和JavaScript是构建交互式和动态网站的关键技术。本手册集合涵盖了这些主题,旨在为开发者提供全面的学习资源。以下是对这些技术的...

    css android java html5 javascript vbscript帮助文档

    现代JavaScript框架(如React、Vue、Angular)极大地提升了开发效率和应用性能。 **VBScript** VBScript是Visual Basic的一种脚本版本,主要在Internet Explorer和Windows环境中使用。虽然现在使用较少,但在过去,...

    网站开发从入门到精通

    "网站开发从入门到精通"这个主题旨在为初学者提供一套完整的教程,帮助他们从零开始掌握网站开发的核心技能。本教程特别关注了JSP(Java Server Pages)技术在网站开发中的应用,这是一种强大的动态网页生成工具,...

    ASP.NET从入门到精通 第3版

    4. **MVC模式**:ASP.NET MVC(Model-View-Controller)是一种轻量级、可测试的开发模式,更强调代码分离和层次化结构。学习如何创建MVC项目,路由配置,以及控制器、视图和模型的交互。 5. **Web API**:ASP.NET ...

    javascript web前端工程师 个人简历模板.docx

    - 前后端分离:理解前后端分离的设计理念,能够使用RESTful API或GraphQL与后端进行交互。 - 测试与调试:具备前端测试的基本知识,能够编写单元测试和集成测试;熟悉浏览器开发者工具的使用。 #### 工作经验 ...

    精通ASP[1].NET+3.5企业级开发

    这个“精通ASP.NET+3.5企业级开发”的主题涵盖了多个关键知识点,包括但不限于: 1. **.NET Framework 3.5**:它是微软的统一开发平台,包含了C#、VB.NET等编程语言,以及ASP.NET、Windows Forms、WPF等开发框架。...

    精通AngularJS (美)[书签]

    标题《精通AngularJS》和描述中所提到的“精通AngularJS”指的是一本专注于教授读者如何深入理解和应用AngularJS这一现代JavaScript框架的书籍。AngularJS是谷歌开发的开源前端Web应用程序框架,它是为了解决单页...

    资深web前端开发工程师的基本职责基本职责.pdf

    - 精通JavaScript(包括ES6)、CSS2/3、HTML5,以及Sass/Less等预编译语言。 - 独立开发Vue项目,熟练使用ElementUI框架,精通数据跨域和Webpack打包等技术。 - 熟悉React和Angular框架,能快速适应和介入相关...

Global site tag (gtag.js) - Google Analytics