现在的位置: 首页 > 综合 > 正文

JavaScript Professional Projects [摘录]

2013年03月08日 ⁄ 综合 ⁄ 共 28319字 ⁄ 字号 评论关闭

原贴地址:http://blog.csdn.net/smartkernel/archive/2007/07/28/1713091.aspx

www.SmartKernel.com

【书名    】:JavaScript Professional Projects
【出版社  】:Premier Press
【作者    】:Paul Hatcher、John Gosney
【评价    】:★★★★★☆☆☆☆☆
【正文    】:

----------------------------------------------------------------------------------------------------
0001:
    lightweight
    add dynamic effects to your Web pages
    HTML (Hypertext Markup Language)
    far more processing power
    JavaScript is executed in the client browser
----------------------------------------------------------------------------------------------------
0002:
    居中显示的文本标志:
    <center>
      <font size=6>JavaScript Professional Projects</font><br>
      <font size=4>Chapter 1: "Hello World!!" Example</font>
    </center>
----------------------------------------------------------------------------------------------------
0003:
    JavaScript is only run on the client's computer
----------------------------------------------------------------------------------------------------
0004:
    When creating an identifier, you should remember the following very important guidelines
----------------------------------------------------------------------------------------------------
0005:
    JavaScript is a case-sensitive language
----------------------------------------------------------------------------------------------------
0006:
    interpreter     编译器
----------------------------------------------------------------------------------------------------
0007:
    Reserved Key Words:
    见图0007
----------------------------------------------------------------------------------------------------
0008:
    Comments    注释
----------------------------------------------------------------------------------------------------
0009:
    Abstract Data Types:
    Number
    String
    Boolean
    null
    undefined
    NaN
----------------------------------------------------------------------------------------------------
0010:
    String类型的使用:
    var str = new String("11111111111111111");
    document.write(str.substring(1,3));
----------------------------------------------------------------------------------------------------
0011:
    判断是不是数字或者能转化为数字:document.write( isNaN( "123" ) ? "is not" : "is" );
----------------------------------------------------------------------------------------------------
0012:
    清除一个不使用对象的方法:
    var myDate = new Date();
    delete( myDate );
    myDate = null;
----------------------------------------------------------------------------------------------------
0013:
    函数也是一个对象:document.write(typeof(parseInt));返回的是function
----------------------------------------------------------------------------------------------------
0014:
    函数的作用域问题:
    <script language=javascript>
        var a = "10";
        function fun1()
        {
            var b = "20";
            c = "30";
            try
            {
                document.write(a);//可以访问,虽然使用了var,但是在function外部声明
            }
            catch(e)
            {
                document.write("a");
            }
            document.write("<br>");
        }
        function fun2()
        {
            try
            {
                document.write(b);//不可以访问,因为使用了var,且在function内部声明
            }
            catch(e)
            {
                document.write("b");
            }
            document.write("<br>");
            try
            {
                document.write(c);//可以访问,不使用var声明,则是全局变量
            }
            catch(e)
            {
                document.write("c");
            }
            document.write("<br>");
        }
        fun1();
        fun2();
    </script>
----------------------------------------------------------------------------------------------------
0015:
    JavaScript是自动垃圾收集的。
----------------------------------------------------------------------------------------------------
0016:
    获得当前对象的引用也是用:this
----------------------------------------------------------------------------------------------------
0017:
    switch的使用:
    var n = 12;
    switch( n )
    {
      case 0:
        document.write( "zero" );
        break;
      case 12:
        document.write( "One dozen" );
        break;
      case 13:
        document.write( "Baker's dozen" );
        break;
      default:
        document.write( "Some number" );
        break;
    }
----------------------------------------------------------------------------------------------------
0018:
    循环遍历二维数组:
    var myArray = new Array();
    var myArrayChild1 = new Array();
    myArrayChild1[0] = "11";
    myArrayChild1[1] = "12";
    myArrayChild1[2] = "13";
    var myArrayChild2 = new Array();
    myArrayChild2[0] = "21";
    myArrayChild2[1] = "22";
    var myArrayChild3 = new Array();
    myArrayChild3[0] = "31";
    myArrayChild3[1] = "32";
    myArrayChild3[2] = "33";
    myArrayChild3[3] = "33";
    myArray[0] = myArrayChild1;
    myArray[1] = myArrayChild2;
    myArray[2] = myArrayChild3;
    for(inArray in myArray)
    {
        document.write("---------------");
        document.write("<br>");
        for(i in myArray[inArray])
        {
            document.write(i);
            document.write("<br>");
        }
    }
----------------------------------------------------------------------------------------------------
0019:
    Array对象支持列表和堆栈的逻辑:
    pop()           返回并删除数组最后一个元素
    push(value)     在数组的最后增加一个元素
    shift()         返回并删除数组的第一个元素
    unshift(value)  在数组的开始位置插入一个元素
----------------------------------------------------------------------------------------------------
0020:
    Array对象支持sort方法:
    var theDays = new Array( "2Sun", "1Mon", "3Tues", "5Wed","7Thurs", "6Fri", "4Sat" );
    theDays.sort(compare);
    function compare(a,b)
    {
        var l = new Number(a.substring(0,1));//字符的索引位置从0开始
        var r = new Number(b.substring(0,1));
        return( l - r );
    }
    document.write(theDays);
----------------------------------------------------------------------------------------------------
0021:
    扩展Array的方法:
    function insertAt( index, value )
    {
      var part1 = this.slice( 0, index );
      var part2 = this.slice( index );
      part1.push( value );
      return( part1.concat( part2 ) );
    }
    function removeAt( index )
    {
      var part1 = this.slice( 0, index );
      var part2 = this.slice( index );
      part1.pop();
      return( part1.concat( part2 ) );
    }
    Array.prototype.insertAt = insertAt;
    Array.prototype.removeAt = removeAt;     
    var myArray = new Array();
    myArray[0] = 1;
    myArray[1] = 2;
    myArray[2] = 3;
    myArray[3] = 4;
    myArray[4] = 5;
    myArray[5] = 6;
    var myArray2 = myArray.insertAt(3,10);
    var myArray3 = myArray2.removeAt(4);
    document.write(myArray3);
----------------------------------------------------------------------------------------------------
0022:
    String的常用方法:
    var myString = new String("abcdefg");
    document.write(myString.bold()+"<BR>");//加粗
    document.write(myString.charAt(2)+"<BR>");//获得指定索引位置的一个字符
    document.write(myString.charCodeAt(2)+"<BR>");//获得指定索引位置的一个字符的编码
    document.write(myString.fontcolor("Red")+"<BR>");//颜色
    document.write(myString.fontsize(50)+"<BR>");//大小
    document.write(myString.hasOwnProperty("length")+"<BR>");//判断是否有某个属性
    document.write(myString.indexOf("cd",0)+"<BR>");//从指定位置开始查找匹配的字符组合,返回第一个符合的索引位置
    document.write(myString.italics()+"<BR>");//斜体
    document.write(myString.length+"<BR>");//长度
    document.write(myString.link("www.126.com")+"<BR>");//超联接
    document.write(myString.search("d")+"<BR>");//查找指定的字符,返回其索引位置
    document.write(myString.replace("d","M")+"<BR>");//查找指定的字符并替换为另外的字符
    document.write(myString.slice(1,4)+"<BR>");//中划线
    document.write("A"+myString.sub()+"<BR>");//右下角小字体
    document.write("A"+myString.sup()+"<BR>");//右上角小字体
    document.write(myString.substring(1,4)+"<BR>");//截取指定位置的字符串
  
    var myString2 = "How,much,wood,would,a,woodchuck,chuck?";
    var myArray = myString2.split( "," );//用字符串中的符号拆分字符串为数组
    for( i = 0 ; i < myArray.length ; i++ )
    {
        document.write( myArray[i] + "<br>" );
    }
----------------------------------------------------------------------------------------------------
0023:
    将10进制数转换为2进制数:
    function toBinary( n )
    {
      var answer = "";
      while( n != 0 )
      {
        answer = Math.abs(n % 2) + answer;
        n = parseInt( n / 2 );
      }
      if( answer.length == 0 ) answer = "0";
      return( answer );
    }
    document.write(toBinary(150));
----------------------------------------------------------------------------------------------------
0024:
    递归函数:计算阶乘
    function fun(n)
    {
        if(n == 1)
        {
            return 1;
        }
        var now = fun(n-1) * n;
        return now;
    }
    document.write(fun(5));
----------------------------------------------------------------------------------------------------
0025:
    JavaScript支持中文变量名:
    function 计算阶乘(n)
    {
        if(n == 1)
        {
            return 1;
        }
        var now = 计算阶乘(n-1) * n;
        return now;
    }
    document.write(计算阶乘(4));
----------------------------------------------------------------------------------------------------
0026:
    全局函数:

    escape:特殊字符编码
    var str = "%^*#@";
    document.write(escape(str));

    unescape:解码

    eval:动态计算语句
    var str = "var str = '----------';document.write(str.fontcolor('red'));";
    eval(str);

    isFinite:判断是不是有理数
    document.write(isFinite("111"));//true

    isNaN:判断是不是数字
    document.write(isNaN("111"));//是数字返回false,不是数字返回true

    Number:将其他类型的对象转换为数字类型,转换成功,则返回对应的数字,转换失败,则返回NaN
    var str = "1a";
    var n = new Number(str);
    document.write(n);

    parseFloat

    parseInt:
    document.write(parseInt("123","2"));//第二个参数代表进制

----------------------------------------------------------------------------------------------------
0027:
    注意:在语句的结尾输入错了";"不会给出提示信息。很容易写成":"。
----------------------------------------------------------------------------------------------------
0028:
    函数也是对象,因此函数也有属性。

    参数数组:
    function fun(a,b,c)
    {
        for(i = 0;i < fun.arguments.length;i++)
        {
            document.write(fun.arguments[i]+"<br>");
        }
        return a + b + c;
    }
    fun(1,2,3);

    调用者:
    function fun1(str)
    {
        document.write(fun1.caller);
    }
    function fun2(str)
    {
        var str2 = "";
        fun1(str);
    }
    fun2("123");

    参数长度:
    function fun(a,b,c)
    {
        document.write(fun.length);
    }
    fun(1,2,3);

    函数对象也有prototype属性:
    function fun()
    {
        document.write("-----------");
    }
    //这里是给Function增加的,而不是给fun增加的
    Function.prototype.explain = function()
    {
        document.write("本函数的作用:演示如何利用函数的prototype属性给函数添加说明");
    }
    var aFun = fun;
    aFun.explain();

    显式获得一个函数对象的引用:
    function fun()
    {
        document.write("-------------");
    }
    var myFun = fun.valueOf();
    myFun();
----------------------------------------------------------------------------------------------------
0029:
    快速设置Table不同行的颜色

    #region 代码实例
    <html>
        <head>
        <script language="JavaScript">
        <!--
             var rowNumber = 1;
             function getColor(color1,color2)
             {
               var color;
               if( rowNumber > 2 )
               {
                    rowNumber = 1;
               }
      
               if( rowNumber == 1 )
               {
                    color = color1;
               }
               else
               {
                    color = color2;
               }
               rowNumber++;
               return( color );
             }
           // -->
        </script>
        </head>
         <body>

           <table width="95%" border="0">
             <script language="JavaScript">
             <!--
                  for( i = 0 ; i < 25 ; i++ )
                  {
                    document.write( "<tr bgcolor='" + getColor("Gray","White") + "'>" );
                    document.write( "<td>第" + i + "行</td>" );
                    document.write( "</tr>" );
                  }

            // -->
            </script>
           </table>

         </body>
    </html>
    #endregion
----------------------------------------------------------------------------------------------------
0030:
    Cookie的使用:

    保存页面所有元素的值:
    function saveForm( form )
    {
      for( i = 0 ; i < form.elements.length ; i++ )
      {
        with( form.elements[i] )
        {
            if( type != "submit" && type != "button" && type != "reset" )
            {
                document.cookie = form.name + "." + name + "=" + value;
            }
        }
      }
    }

    从保存的页面值中检索键值对:
    function getCookieValue( name )
    {
        var c = document.cookie;
        var begin = c.indexOf( name );
        if( begin < 0 )
        {
            return( "" );
        }
        begin += name.length + 1;
        var end = c.indexOf( ";", begin );
        if( end == -1 )
        {
            end = c.length;
        }
        return( c.slice( begin, end ) );
    }

    #region 代码实例
    <html>
      <head>
        <title>
             JavaScript Professional Projects - Reading Cookies
        </title>

        <script language="JavaScript">
        <!--
             var now = new Date();
             now.setMonth( now.getMonth() + 1 );
             document.cookie = "expires=" + now.toGMTString();

             function saveForm( form )
             {
                for( i = 0 ; i < form.elements.length ; i++ )
                {
                  with( form.elements[i] )
                  {
                     if( type != "submit" && type != "button" && type != "reset" )
                     document.cookie = form.name + "." + name + "=" + value;
                  }
                }
             }

             function loadForm( form )
             {
               for( i = 0 ; i < form.elements.length ; i++ )
               {
                 with( form.elements[i] )

                {
                  if( type != "submit" && type != "button" && type != "reset" )
                    value = getCookieValue( form.name + "." + name );
                 }
                }
              }

              function getCookieValue( index )
              {
                var c = document.cookie;
                var begin = c.indexOf( index + "=" ) + index.length + 1;
                var end = c.indexOf( ";", begin );
                if( end == -1 ) end = c.length;
                return( c.slice( begin, end ) );
              }
            -->
            </script>

      </head>

      <body onLoad="JavaScript: loadForm( document.mailingForm );">

       <table cellspacing="4" cellpadding="4" width="65%">
         <tr>
           <td>

             <form name="mailingForm" onSubmit="JavaScript: saveForm( this );">
               <b><font size="5">Mailing Address<br></font></b>
               <br>
               <b>Last name, First name:</b><br>

               <input type="text" name="firstLine" size="36"><br>
               <b>Street/Address:</b><br>
               <input type="text" name="secondLine" size="36"><br>
               <b>City State, Zip code:</b><br>
               <input type="text" name="thirdLine" size="36">&nbsp;&nbsp;
               <input type="submit" value="Submit">
             </form>

           </td>
         </tr>
       </table>

      </body>
    </html>
    #endregion
----------------------------------------------------------------------------------------------------
0031:
    基于Array的列表:

    #region 代码实例
    function pop()
    {
       return( this.data.pop() );
    }
    function push( value )
    {
      this.data.push( value );
    }
    function insertAt( index, value )
    {
      var part1 = this.data.slice( 0, index );
      var part2 = this.data.slice( index );
      part1.push( value );
      this.data = part1.concat( part2 );
    }
    function removeAt( index )
    {
      var part1 = this.data.slice( 0, index );
      var part2 = this.data.slice( index );
      part1.pop();
      this.data = part1.concat( part2 );
    }
    function size()
    {
      return( this.data.length );
    }
    function display()
    {
      document.write( "<table border=1 cellpadding=5 cellspacing=2width=50%>" +
                       "  <tr>" +
                       "    <td>" +
                       "      <b><code>Linked List Size = " +
                                        this.size() + "</code></b>" +
                       "    </td>" +
                       "  </tr><tr>" +
                       "    <td>" );

    if( this.size() == 0 ) document.write( "No data" );
    document.write( this.data.join( "</td></tr><tr><td>" ) );
    document.write( "</td></tr></table>" );
    }
    function List()
    {
    this.data = new Array();
    this.pop = pop;
    this.push = push;
    this.size = size;
    this.display = display;
    this.insertAt = insertAt;
    this.removeAt = removeAt;
    }
    #endregion
----------------------------------------------------------------------------------------------------
0032:
    基于Array的栈:

    #region 代码实例
    function pop()
    {
      return( this.data.pop() );
    }
    function push( value )
    {
      this.data.push( value );
    }
    function size()
    {
      return( this.data.length );
    }
    function display()
    {
      document.write( "<table border=1 cellpadding=5 cellspacing=2 width=50%>" +
                        "   <tr>" +
                        "     <td>" +
                        "       <b><code>Stack - Size = " +
                                         this.size() + "</code></b>" +
                        "     </td>" +
                        "   </tr><tr>" +
                        "     <td>" );
      if( this.size() == 0 ) document.write( "No data" );
      document.write( this.data.join( "</td></tr><tr><td>" ) );
      document.write( "</td></tr></table>" );
    }
    function Stack()
    {
      this.data = new Array( 0 );
      this.pop = pop;
      this.push = push;
      this.size = size;
      this.display = display;
    }
    #endregion
----------------------------------------------------------------------------------------------------
0033:
    基于Array的队列:

    #region 代码实例
    function dequeue()
    {
      return( this.data.pop() );
    }
    function enqueue( value )
    {
      this.data.unshift( value );
    }
    function size()
    {
      return( this.data.length );
    }
    function display()
    {
      document.write( "<table border=1 cellpadding=5 cellspacing=2width=50%>" +
                        "  <tr>" +
                        "    <td>" +
                        "      <b><code>Queue Size = " +
                                         this.size() + "</code></b>" +
                        "    </td>" +
                        "  </tr><tr>" +
                        "    <td>" );

      if( this.size() == 0 ) document.write( "No data" );
      document.write( this.data.join( "</td></tr><tr><td>" ) );
      document.write( "</td></tr></table>" );
    }
    function Queue()
    {
      this.data = new Array( 0 );
      this.dequeue = dequeue;
      this.enqueue = enqueue;
      this.size = size;
      this.display = display;
    }
    #endregion
----------------------------------------------------------------------------------------------------
0034:
    Date对象的构造函数:
    var now = new Date();
    var myDate = new Date( "month dd, yyyy, hh:mm:ss" );
    var myDate = new Date( "month dd, yyyy" );
    var myDate = new Date( yy, mm, dd, hh, mm, ss );
    var myDate = new Date( yy, mm, dd );
    var myDate = new Date( milliseconds );
----------------------------------------------------------------------------------------------------
0035:
    每个window只有一个惟一的document对象。
----------------------------------------------------------------------------------------------------
0036:
    document对象:
    <form id = "myForm">
      <a id = "myA" href="www.126.com">锚定</a>
      <script language=javascript>
       document.alinkcolor = "Green";//超联接的单击后的颜色
       document.linkColor = "White";//超联接的单击前的颜色
       document.VlinkColor = "Red";//超联接的单击前的颜色
       document.write(document.anchors[0]+"<br>");//获得页面锚定指向的联接
       document.bgColor = "Black";
       document.write(document.domain+"<br>");//获得域名
       document.fgColor = "White";
       document.write(document.forms["myForm"].id+"<br>");//获得页面form数组中元素的方法
       document.write(document.lastModified+"<br>");//获得页面最后的修改日期
       document.write(document.URL+"<br>");//获得页面的全路径URL地址
      </script>
    </form>
----------------------------------------------------------------------------------------------------
0037:
    event对象:
    <script language=javascript>
    function fun(eventObj)
    {
        document.write(eventObj.type+"<br>");//获得事件的类型
    }
    </script>
    <input type="button" id="myButtonID" name="myButtonName" value = "Click" onclick="fun(event)"/>
----------------------------------------------------------------------------------------------------
0038:
    Math对象:
    document.write(Math.random());//产生随机数
----------------------------------------------------------------------------------------------------
0039:
    Object对象是所有对象的基类。
----------------------------------------------------------------------------------------------------
0040:
    screen对象:
    document.write(screen.availHeight+"<br>");
    document.write(screen.availWidthxy+"<br>");
    document.write(screen.colorDepth+"<br>");
    document.write(screen.height+"<br>");
    document.write(screen.pixelDepth+"<br>");
    document.write(screen.width+"<br>");
----------------------------------------------------------------------------------------------------
0041:
    window对象:每个窗口和帧都有一个window对象。
    document.write(window.location+"<br>");//获得当前URL
    document.write(window.opener+"<br>");//获得打开本窗口的窗口对象引用
    document.write(window.parent+"<br>");//获得当前窗口的父窗口,只读属性   
   
    window.blur();//失去焦点       
    window.focus();//获得焦点
    window.moveBy(100,100);//移动窗口:当前坐标的相对坐标,屏幕的左上角为坐标原点
    window.moveTo(1,1);//移动窗口:当前坐标的绝对坐标,屏幕的左上角为坐标原点
    window.open( "http://www.somewhere.com","myWindow", "width=400, height=400,resizable=no, toolbar=no" );
    window.print();//打开打印机对话框
    window.resizeBy(-10,-10);//缩放:相对大小
    window.resizeTo(100,100);//缩放:绝对大小
    window.scroll(100,100);window.scrollTo(100,100);window.scrollBy(100,100);//滚动屏幕

    5秒钟之后自动运行:
    function fun()
    {
        document.write("----------------");
    }
    window.setInterval(fun,5000);

    1秒钟之后自动运行window.setTimeout(fun,1000);

    说明:setInterval和setTimeout现在的效果好像是一样的。
----------------------------------------------------------------------------------------------------
0042:
    body的几个事件:
    <body
       onLoad           ="JavaScript: alert('onLoad event');"//加载
       onBeforeUnload   ="JavaScript: alert('onBeforeUnload event');"//卸载前
       onUnload         ="JavaScript: alert('onUnload event');"//卸载
     >
----------------------------------------------------------------------------------------------------
0043:
    获得是组合键中的哪个特殊键:
    var isNav = navigator.appName == "Netscape";
    function getModifiers( event )
    {
        var alt = ( isNav ? event.modifiers & Event.ALT_MASK :window.event.altKey );
        var ctr = ( isNav ? event.modifiers & Event.CONTROL_MASK :window.event.ctrlKey );
        var sft = ( isNav ? event.modifiers & Event.SHIFT_MASK :window.event.shiftKey );

        alert(alt+"|"+ctr+"|"+sft);
    }
----------------------------------------------------------------------------------------------------
0044:
    将事件绑定到HTML元素的方法:

    直接通过元素的属性:
    <input id="Button1" type="button" value="button" onclick = "JavaScript:window.alert('-----')"/>

    通过元素对象的属性:
    <input id="Button1" type="button" value="button"/>
    <script language = "javascript">
    function fun()
    {
        alert("--------");
    }
    document.getElementById("Button1").onclick = fun;
    </script>
----------------------------------------------------------------------------------------------------
0045:
    鼠标拖放图片的例子:

    #region 代码实例
    <html>
      <head>
        <style type="text/css">
        <!--
          #imageA{ position: absolute; left: 450; top = 250; z-index: 1; }
          #imageB{ position: absolute; left: 10; top = 150; z-index: 0; }
        -->
        </style>

        <script language="JavaScript">
        <!--
        var clicked;
        function onLoad()
        {
          document.onmousedown = mouseDown;
        }
        function mouseDown()
        {
           if( clicked == null )
           {
             if( clicked = getClickedImage( event ) )
             {
               document.onmousemove = mouseMove;
               clicked.style.zIndex += 2;
             }
           }
           else
           {
             document.onmousemove = null;
             clicked = null;
           }
        }
        function mouseMove()
        {
          with( clicked.style )
          {
             positionImage( clicked, window.event.x, window.event.y );
          }
        }
        function getClickedImage( event )
        {
          var obj = window.event.srcElement.parentElement;
          if( obj.tagName == "DIV" )
          {return( window.event.srcElement.parentElement );}
          else
          {return( null )};

        }
        function positionImage( image, xPos, yPos )
        {
          image.style.left = xPos;
          image.style.top = yPos;
        }
      // -->
      </script>

     </head>
     <body onLoad="JavaScript: onLoad();">
    
      <div ID="imageB">
        <img border="0" width="200px" height = "200px" src="myImage1.jpg">
      </div>
       
      <div ID="imageA">
          <img border="0" width="200px" height = "200px" src="myImage2.jpg">
      </div>
     </body>
    </html>
    #endregion
----------------------------------------------------------------------------------------------------
0046:
    DOM通用的属性:
    className:样式表中的样式类
    document:对包含本元素的document对象的引用
    id
    innerHTML:当前元素开始和结束标记中的Text和Html元素的引用
    innerText:当前元素开始和结束标记中的Text元素的引用
    isTextEdit:是否有行属性。只有BODY, BUTTON, INPUT, TEXTAREA有行属性。
    lang:元素参数和属性使用的语言
    language:元素使用的脚本语言
    offsetHeight:元素的高度
    offsetWidth:元素的
    offsetLeft:元素相对于父元素,左边界的位置
    offsetTop:元素相对于父元素,上边界的位置
    offsetParent:元素的父元素的引用,很多时候是BODY
    outerHTML
    outerText
    parentElement:元素的父元素的引用
    sourceIndex:在document.all中的索引
    style
    tagName
    title
----------------------------------------------------------------------------------------------------
0047:
    DOM通用的方法:
    click():模拟鼠标单击事件
    contains(element):判断是不是包含某个元素
    getAttribute(attributeName, caseSensitive):获得某个属性的值,caseSensitive为Boolean,是否区分大
小写。
    insertAdjacentHTML(where, HTML):在当前元素的BeforeBegin,AfterBegin,BeforeEnd,AfterEnd位置插入HTML
    insertAdjacentText (where, text):在当前元素的BeforeBegin,AfterBegin,BeforeEnd,AfterEnd位置插入Text
    removeAttribute(attributeName, caseSensitive):删除属性
    scrollIntoView(showAtTop):滚动document到当前元素的位置
    setAttribute(attributeName, value, caseSenstive):给属性赋值
----------------------------------------------------------------------------------------------------
0048:
    DOM的聚集属性:
    all[]:所有元素,包括当前元素
    children[]:当前元素包括的子元素
    filters[]:当前元素包括的所有过滤器元素
----------------------------------------------------------------------------------------------------
0049:
    DOM对象-<A>:

    <a id = "myA" name = "myA" href="www.126.com">OK</a>

    <script language=javascript>
    var aA = document.getElementById("myA");
    document.write("<br>"+aA.host);//服务器地址加端口
    document.write("<br>"+aA.hostname);//服务器地址
    document.write("<br>"+aA.href);//超联接地址http://localhost/www.126.com
    document.write("<br>"+aA.mimeType);//请求文件的类型
    document.write("<br>"+aA.name);//请求文件的类型
    document.write("<br>"+aA.nameProp);//www.126.com
    document.write("<br>"+aA.pathname);//www.126.com
    document.write("<br>"+aA.port);//80
    document.write("<br>"+aA.protocol);//http:
    document.write("<br>"+aA.protocolLong);//超文本传送协议
    document.write("<br>"+aA.search);//超联接地址中问号之后的部分
    document.write("<br>"+aA.tabIndex);
    document.write("<br>"+aA.target);//self、parent、top、blank,超联接地址的打开方式
    aA.blur();//失去焦点
    aA.focus();//获得焦点
    </script>

    支持的事件:
    onblur
    onclick
    ondblclick
    onfocus
    onhelp
    onkeydown
    onkeypress
    onkeyup
    onmousedown
    onmousemove
    onmouseout
    onmouseover
    onmouseup
    onselectstart
----------------------------------------------------------------------------------------------------
0050:
    DOM对象-<AREA>:用于创建可单击的图片地图
----------------------------------------------------------------------------------------------------
0051:
    DOM对象-<BODY>:

    <body id = "myBody" background="C:/pic.jpg" bgColor = "White">
     <script language=javascript>
        var aBody = document.getElementById("myBody");
        document.write("<br>"+aBody.background);//背景图的地址
        document.write("<br>"+aBody.bgColor);//背景的颜色
        document.write("<br>"+aBody.bottomMargin);//下边边界宽度
        document.write("<br>"+aBody.clientHeight);//document内容的高度
        document.write("<br>"+aBody.clientWidth);//document内容的宽度
        document.write("<br>"+aBody.clientLeft);//document内容的左边界位置
        document.write("<br>"+aBody.clientTop);//document内容的上边界位置
        document.write("<br>"+aBody.leftMargin);//左边边界宽度
        document.write("<br>"+aBody.noWrap);//是否限制文档内容,false为限制
        document.write("<br>"+aBody.rightMargin);//右边边界宽度
        aBody.scroll = false;//是否显式滚动条
        document.write("<br>"+aBody.topMargin);//上边边界宽度
     </script>
    </body>

    支持的事件:
    onafterupdate
    onbeforeunload
    onbeforeupdate
    onblur   
    onclick
    ondblclick
    ondragdrop
    onfocus   
    onhelp
    onkeydown
    onkeypress
    onkeyup
    onload   
    onmousedown
    onmousemove
    onmouseout
    onmouseover
    onmouseup
    onmove
    onresize
    onrowenter
    onrowexit
    onscroll
    onselect
    onselectstart
    onunload
----------------------------------------------------------------------------------------------------
0052:
    鼠标滑过切换图像:
    <img src="1.jpg" onmouseover="JavaScript:this.src = '1.jpg'" onmouseout="JavaScript:this.src = '2.jpg'"/>
----------------------------------------------------------------------------------------------------
0053:
    禁用页面元素:
   <input id="Button1" type="button" value="button" />
   <script language=javascript>
    var aButton = document.getElementById("Button1");
    aButton.disabled = true;
   </script>
----------------------------------------------------------------------------------------------------
0054:
    弹出窗口:
    <script language="JavaScript">
    var thePopup = window.createPopup();
    with(thePopup.document.body)
    {
         bgColor = "#CEDACE";
         innerHTML = "<center>" +
                     "<font size=4>弹出窗口</font>" +
                     "</center>";
    }
    </script>
    <input type="button" value="Show" onClick="JavaScript:thePopup.show(350, 350, 250, 250 );">
    <input type="button" value="Hide" onClick="JavaScript:thePopup.hide();">
----------------------------------------------------------------------------------------------------
 

抱歉!评论已关闭.