zoukankan      html  css  js  c++  java
  • 《Javascript DOM 编程艺术》

    JS中数组的批量填充方式:

      1.在声明时同时进行填充

            var beatles = Array("John","Paul","George","Ringo");

      2.我们甚至用不着明确地表明我们是在创建数组.事实上,只需用一堆方括号括起来就足以创建我们想要的数组了:

            var beatles = ["John","Paul","George","Ringo"];

    JS中的关联数组 :JS中数组下标并不局限于整数.数组下标可以是字符串:

            var lennon = Array();

            lennon["name"]="John";

            lennon["year"]="1940";

    把一个对象用作一个联合数组

             a = {a : "Athens" , b : "Belgrade", c : "Cairo"}

      从某种意义上讲,完全可以吧所有的数组都看做是关联数组.数值数组只不过是关联数组的一种特例.

    JScript 中的数组是稀疏的。

      也就是说,如果一个数组具有三个元素,编号分别为 0、1 和 2,您就可以创建元素 50,而不必担心从 3 到 49 的参数。如果该数组有一个自动的 length 变量,,该 length 变量被设为 51,而不是 4。当然您可以创建各元素的编号之间没有间隙的数组,不过没有必要这样做。

    在 JScript 中,对象和数组几乎相同。两个主要差别是对象没有自动长度属性,而数组没有对象的属性和方法。

    CSS层叠样式表定义方式:

      <p class="special">This<p>

      <h2 class="special">So<h2>

      1.在样式表里,我们可以像下面这样为class属性值相同的所有元素定义一种共享的样式:

          .special{

            font-style: italic;

          }

          // spical为class id

      2.我们还可以像下面这样利用class的属性为一种特定类型的元素定义一种独享的样式:

          h2.spical{

            text-tansform:uppercase;

          }

          // spical为class id

      3.id属性的用途是给网页里的某个元素加上一个独一无二的标识符

          <ul id="purchase">

          在样式表里我们可以像下面这样为有着特定id属性值的元素定义一种独享的样式:

          #purchase{

             border:1px;

             color:#CCC;

          }

      4.我们还可以像下面这样利用ID属性为包含在某给定怨毒里的其他元素定义样式,如此定义的样式将只作用于包含在这个给定元素里的有关元素

          #purchase li{

              font-weight:bold;

          }

    getElementByTagName使用通配符("*")

       document.getElementByTagName("*");//这种方式可以取到文档中所有的元素节点.

    如果在onclick事件所触发的Javascript中增加一条return false的话,则可以阻止对事件的进一步处理,阻止链接跳转.

         <a href="#" onclick="alert();return false;">firefox</a>

    "javascript:"伪协议

       可以通过在地址栏输入伪协议来进行调试:javascript:debugger ;

       也可以再HTML文档中通过"javascript:"伪协议调用Javascript代码(该种做法并不规范,且语义不清晰,所以也不建议使用):<a href="javascript:alert();">alert</a>

    每个函数只有一个入口一个出口 ?

      理论上该原则比较好,不过过分拘泥于原则往往会使代码变得难于阅读.

      同一个函数有多个出口点的情况是可以接受的.不过他们应该集中于该函数的开头部分

      function pre(){

        if(!document.getElementById) return false;

      }

    document.write(),innerHtml破坏了js与html分离的原则,应尽量避免使用

    insertBefore

    previousSibling和nextSibling 兄弟节点取得

    for...in 语句:它可以把某个数组的下标(键字)临时地赋值给一个变量,因此可以直接将对象当做联合数组处理

          // 初始化对象。
         a = {"a" : "Athens" , "b" : "Belgrade", "c" : "Cairo"}
         // 迭代属性。
         for (key in a) {
         s += a[key] ;
         }

    Title属性: The Title attribute is similar to the standard HTML Title attribute. The behavior of a title is similar to a Microsoft Windows ToolTip.

    使用DOM设置表格交替颜色(斑马线)(ie8不支持exprssion了,现在不能用css中的expression了,呵呵 )

        function(){

           var tables = document.getElementsByTagName("table");

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

           {

              var odd = false;

              var rows = tables[i].getElementsByTagName("tr");

              for(var j = 0; j < rows.length; j++)

              {

                 if(odd == true)

                 {

                    row[j].style.backgroundColor = "#ffc";

                    odd = false;

                 }

                 else

                 {

                    odd = true;

                 }

              }

           }

        }

    CSS中的"追加"效果:

      利用字符串拼接操作把新的class设置值追加到className上去(注意,两个class之间有空格分隔),如此便实现了样式叠加,新样式中的定义将在旧样式的基础上产生效果.

        elem.className += " intro";

      不过空格只有存在旧className属性的基础上才有必要,所以需要先对className进行判断,只有在className属性不为null的时候才需要追加,否则直接赋值.

    利用下面的函数实现控件的鼠标跟随(由于控件将以像素为单位来移动,所以动画效果较好)

        function moveElement(elementID,final_x,final_y,interval)

        {

          if(!document.getElementById(elementID)) return false;

          var elem = document.getElemenById(elementID);

          if(elem.movement)

          {

            clearTimeout(elem.movement);

            elem.movement = null;

          }

          var xpos = parseInt(elem.style.left);

          var ypos = parseInt(elem.style.top);

          if(xpos == final_x && ypos == final_y)

          {

            return true;

          }

          if(xpos < final_x)

          {

            xpos++;

          }

          if(xpos > final_x)

          {

            xpos--;

          }

          if(ypos < final_y)

          {

            ypos++;

          }

          if(ypos > final_y)

          {

            ypos--;

          }

          elem.syle.left = xpos + "px";

          elem.syle.top = ytop + "px";

          var repeat = "moveElement(" + "'" + elementID + "','" + final_x +  "','" + final_y + " '" +")";

          element.movement= setTimeOut(repeat, interval);

        }

    DOM复制节点的方法:cloneNode(deep),这个方法只有一个布尔型的参数,它决定着是否要把被复制节点的子节点也一同复制到新建节点里去.

        

    DOM提供了一个用来替换文档树里的节点的方法:replaceChild(newChild, oldChild),它把给定父元素里的一个子节点替换为另外一个节点,并返回已经被替换的那个子节点.


  • 相关阅读:
    ASP.NET MVC的过滤器
    EasyUi 合并单元格占列显示
    Ajax异步请求阻塞情况的解决办法
    AutoFac使用总结
    CodeFirst迁移注意点
    DataTable与实体类互相转换
    mysql中注释的添加修改
    MySql修改数据表的基本操作(DDL操作)
    MySql中的约束
    如何使用单例模式返回一个安全的Connection
  • 原文地址:https://www.cnblogs.com/dongzhiquan/p/1994696.html
Copyright © 2011-2022 走看看