zoukankan      html  css  js  c++  java
  • 《JavaScript Dom编程艺术》(第二版)

    第一章《JavaScript简史》

    1、JavaScript是一种脚本语言,通常只能通过Web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行,它需要由Web浏览器进行解释和执行。

    2、DOM是一套对文档的内容进行抽象和概念化的方法,它是一种API(应用编程接口)。

    W3C对DOM的定义是:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。

     

    第二章《JavaScript语法》

    1、驼峰格式(camel case)命名:删除中间的空白(下划线),后面的每个新鲜单词改用大写字母开头.如:var mgMood="happy"

    2、给新元素给出下标时,不需要局限于使用整数数字,也可以使用字符串。如:

    var good=Array();

    good["name"]="John";

    good["year"]="1990";

    3、条件语句的求值结果永远是一个布尔值,即true和false。

    4、==和===

    ==:不严格相等,比如用==的情况下,false和空值是相等的。相反是!==;

    ===严格相等,不仅比较值是否相等,还会比较变量的类型。相反是!===;

    5、逻辑操作符的对象是布尔值,每个逻辑操作数返回一个布尔值true或者是false;逻辑非(!)操作符只能作用于danger逻辑操作数。

    6、if和while的唯一区别:

    当给定条件的求值结果=true时:while语句{}里的代码就会反复的执行下去,直到返回了false;

                                             if语句,{}里的代码只能执行一次,不能重复执行;

    7、for循环的两大优势:

    1)控制结构更加清晰,与循环相关的所有内容都包含在for语句的圆括号部分;

    2)常见的用途之一:遍历数组

    8、对象:就是由一些属性和方法组合在一起而构成的一个数据实体,它是自包含的数据集合,包含在对象里的数据可以通过两种形式访问——属性(property)、方法(method)

    属性——隶属于某个特定对象的变量;

    方法——只有某个特定对象才能调用的函数;

    9、对象的类型:

      1)用户自定义对象(user-defied object):由程序员自行创建的对象;

      2)内建对象(native object):JavaScript提供的一系列预先定义好的,内建在javascript语言里、拿来就可以用的对象。例如:Array、Math、Date等

      3)宿主对象:JavaScript有一些其他已经预定好的对象,这些对象不是由JavaScript的语言本身,而是由它的运行环境(具体到web应用,这个环境就是浏览器)提供的预定义对象,就是宿主对象。 简单说,就是由浏览器提供的对象:

      ——Form、 Image、 Element等。通过这些对象可以获得关于网页上表单、图像和各种表单元素的信息;

      ——document对象。可以获得网页上的任何一个元素的信息

     

    第三章《DOM》

      1、何为DOM?  D:document(文档);    O:object(对象)     M:model(模型);   window对象对应着浏览器窗口本身,这个对象的属性和方法通常成为DOM。document对象的主要功能就是处理网页内容;

      2、节点(node):文档中的一个连接点,一个文档是由一些节点构成的集合;节点有三种:元素节点文本节点属性节点;

        1)元素节点(element node):DOM的原子是元素节点,标签的名字就是元素的名字。元素可以包含其他的元素,HTML中只有节点树的根元素<html>元素没有被包含;

          如:<p id="box" class="pox">hello</p>  中的元素名字“p”

        2)文本元素(text node):文本节点总是被包含在元素节点的内部,但并非所有的元素节点都包含有文本节点;

          如:<p id="box" class="pox">hello</p>  中的“hello”

        3)属性节点(attribute node):属性节点用来对元素做出更具体的描述,所以属性节点总是被包含在元素节点中。并非所有元素走包含着属性,但所有属性都被元素包含;

          如:<p id="box" class="pox">hello</p>   中的id属性

      3、DOM中获取元素的三种方法:

    比较 getElementById(通过属性ID获取) getElementByTagName(通过标签名获取) getElementByClassName(通过类名获取)
    返回元素 返回1个对象,  返回一个数组  返回一个数组
    参数个数 1个 1个(可以使通配符“*”) 1个
    语法 getElementById(“id”) getElementByTagName("tag") getElementByClassName("class")
    实例 getElementById(“box”) getElementByTagName("p")  getElementByClassName("pox")

            
     

     

     

     

     

     

     

     

     

    几点注意:

      1)即使在整个文档,只有一个符合选择的标签。getElementByTagName也会返回一个数组,这个数组的长度是1;

      2)getElementByClassName中要指定多个类名,要在字符串参数中用空格分隔,且类名的顺序不对搜索的元素有任何影响,只要有元素包含搜索的类名,就会被选中:

        例如:getElementByClassName("pox ppox");

      3)getElementByClassName在新老浏览器上的兼容:

        function getElementByClassName(node,classname){

          if(node.getElementByClassName){

            //使用现有方法

            retrun node.getElementByClassName(classname);

          }else{

            var results=new Array();

            var elems=node.getElementByTagName("*");

            for(var i=0;i<elems.length;i++){

              if(elems[i].classname).indexOf(classname)!=-1{

                results[results.length]=elems[i];

              }

            }

            return results;

          }

        }

      //这个getElementByClassName函数接受两个参数,第一个node表示DOM树中的搜索起点;第二个classname就是要搜索的类名;

    4、获取和设置属性方法

      1)获取属性方法:getAttribute

        getAttribute方法不属于document对象,所以不能通过document对象调用,只能通过元素节点调用:

        例:搜索p里面的title,如果存在,就打印出来;

        var paras=document.getElementByTagName("p");

        for(var i=0;i<paras.length;i++){

          var title_text=paras[i].getAttribute("title");

          if(title_text)    alert(title_text);

        }

      2)设置属性方法:setAttribute

        setAttribute也只能用于元素节点。

        例:修改p元素的title,并打印新的title

          <p id="box" title="text">hello</p>

          //修改如下

          var pp=dpcument.getElementById("box");

          pp.setAttribute("title","shopping");

          alert(pp.getAttribute("title");

        注意:1)如果setAttribute用在一个本身就有这个属性的元素节点上,这个属性就会被覆盖掉;

           2)setAttribute做出的修改不会反映在文档本身的源代码里面。原因是:这是DOM的工作模式,即先加载静态文档,再动态刷新;

     

    第四章 《案例研究:javascript 图片库》

      1、想改变某个Input元素的value属性时,这两种方法等价:element.value="the new value"  =  element.setAttribute("value","the new value")

      2、事件处理函数:

        语法:event="javascript statement(s)"       例如:onclick="showPic(this)"

        作用:在特定事件发生时,调用特定的javascript代码。

        工作机制:在给某个元素添加了事件处理函数后,一旦事件发生,相应的javascript代码就会得到执行。被调用的javascript代码可以返回一个值,这个值将被传递给那个事件处理函数。 例如:我们可以给某个链接添加一个onclick事件处理函数,并让这个处理函数所触发的javascript代码返回布尔值true或false。这样一来,当这个链接被点击时,如果那段javascript代码返回的值是true,onclick事件处理函数就认为“这个链接被点击了”;繁殖,返回的值是false,onclick事件处理函数就认为“这个链接没有被点击”。

      3、childNodes属性:childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素全部子元素的数组:element.childNodes

                childNodes属性返回的数组包含元素节点等所有类型的节点。在文档里,几乎每一样东西都是一个节点,包括空格和换行符。

      4、nodeType属性:用node.nodeType语法来获取节点的nodeType属性,例如:alert(body_element.nodeType);

               nodeType属性有12种可取值,但是只有3种实用:

                  元素节点的nodeType属性值:1

                  属性节点的nodeType属性值:2

                  文本节点的nodeType属性值:3

      5、nodeValue属性:该属性用于获取(和设置)一个文本节点的值:node.nodeValue

        例如:alert(description.nodeValue);

      6、firstChild 属性:用来访问childNodes数组的第一个元素。这两种写法等价:

        node.firstChild  = node.childNodes[0]

    7、lastChild属性:用来访问childNodes数组的最后一个元素:node.lastCild

     

    第五章《最佳实践》  1、

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    最新自然语言处理(NLP)四步流程:Embed->Encode->Attend->Predict
    Word Embedding
    知乎:GAN 的发展对于研究通用人工智能有什么意义?
    2016年总结:教师路的开启,爱情味的初尝 (下)
    WinForm 窗口缩放动画效果
    关于DrawIndexedPrimitive函数的调用
    spring mvc--默认都使用了哪些bean
    杭电 HDU 1031 Design T-Shirt
    Android选择/拍照 剪裁 base64/16进制/byte上传图片+PHP接收图片
    hdoj5645DZY Loves Balls
  • 原文地址:https://www.cnblogs.com/crystal523100/p/5217556.html
Copyright © 2011-2022 走看看