Pro JavaScript Techniques ［摘录］

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

www.SmartKernel.com

【书名    】：Pro JavaScript Techniques
【出版社  】：Apress
【作者    】：John Resig
【评价    】：★★★★★★★☆☆☆
【正文    】：

----------------------------------------------------------------------------------------------------
0001：
    将HTML当作DOM来访问：
    <script type="text/javascript">
    function setLiColor()
    {
        //注意，这里不是getElementsByName方法
        var lis = document.getElementsByTagName("li");
        for(var i = 0;i < lis.length;i++)
        {
            lis[i].style.border = "1px solid #000";
        }
    }
    </script>
    <ul>
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>
    </ul>
    <input id="Button1" type="button" value="button" οnclick="javascript:setLiColor();"/>
----------------------------------------------------------------------------------------------------
0002：
    设置鼠标滑过的动态效果：
    <script type="text/javascript">
    window.onload = function()
    {
        var lis = document.getElementsByTagName("li");
        for(var i = 0;i < lis.length;i++)
        {
            lis[i].onmouseover = function()
            {
                //this代表引发事件的元素
                this.style.backgroundColor = "#DDD";
            }
            lis[i].onmouseout = function()
            {
                //this代表引发事件的元素
                this.style.backgroundColor = "#FFF";
            }
        }
    }
    </script>
    <ul>
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>
    </ul>
----------------------------------------------------------------------------------------------------
0003：
    arguments的使用：同时也是可变参数的例子
    <script type="text/javascript">
    function Add()
    {
        var total = 0;
        for(var i = 0;i < arguments.length;i++)
        {
            total = arguments[i] + total;
        }
        alert(total);
    }
    </script>
    <input id="Button1" type="button" value="button" οnclick="javascript:Add(1,2,3);"/>
----------------------------------------------------------------------------------------------------
0004：
    默认参数的实现：
    <script type="text/javascript">
    function ShowMessage(msg)
    {
        //判断参数是不是被传递进来了
        if(typeof msg == "undefined")
        {
            msg = "世界你好！";
        }
        alert(msg);
    }
    </script>
    <input id="Button1" type="button" value="button" οnclick="javascript:ShowMessage();"/>
----------------------------------------------------------------------------------------------------
0005：
    typeof操作符能够返回变量类型的字符串表示，但是object、array和自定义类型返回的都是相同的类型名称。
----------------------------------------------------------------------------------------------------
0006：
    判断变量类型的最好的方法是检查构造函数：
    <script type="text/javascript">
    function Person(n,a)
    {
        this.Name = n;
        this.Age = a;
    }
    function CheckType(obj)
    {
        if(obj.constructor == Person)
        {
            alert("obj的类型是Person");
        }
    }
    </script>
    <input id="Button1" type="button" value="button" οnclick="javascript:CheckType(new Person('小李',23));"/>
----------------------------------------------------------------------------------------------------
0007：
    几种类型的构造函数：
    object                  Object
    array                   Array
    function                Function
    string                  String
    number                  Number
    true                    Boolean
    Person（自定义类型）    Person
----------------------------------------------------------------------------------------------------
0008：
    JavaScript不是块作用域，变量的作用范围决定于变量的声明方式和位置：
    <script type="text/javascript">
    function Fun1()
    {
        i = 10;
    }
    Person();
    function Fun2()
    {
        //能够访问，输出为10
        alert(i);
    }
    </script>
    <input id="Button1" type="button" value="button" οnclick="javascript:Fun2();"/>
----------------------------------------------------------------------------------------------------
0009：
    setTimeout的使用：
    <script type="text/javascript">
    var myTimer;
    function Timer()
    {
        var currentDate = new Date();
        var myDiv = document.getElementById("myDiv");
        myDiv.innerHTML = currentDate.getSeconds();
        myTimer = setTimeout(Timer,0);
    }
    window.onload = function()
    {
        myTimer = setTimeout(Timer,0);
    }
    function Kill()
    {
        clearTimeout(myTimer);
    }
    </script>
    <div id = "myDiv"></div>
    <input id="Button1" type="button" value="button" οnclick="javascript:Kill();"/>
----------------------------------------------------------------------------------------------------
0010：
    对象函数的一种“数组”声明方式：
    <script type="text/javascript">
    var obj =
    {
        ShowMsg:function(msg)
        {
            alert(msg);
        },
        ShowTime:function()
        {
            alert((new Date()).toString());
        }
        SetData:function(data)
        {
            this.Data = data;
        }
        GetData:function()
        {
            return this.Data;
        }
    }
    </script>
    <input id="Button1" type="button" value="button" οnclick="javascript:obj.ShowTime();"/>
----------------------------------------------------------------------------------------------------
0011：
    私有属性，私有方法，共有方法：
    <script type="text/javascript">
    function Person(name)
    {
        //私有属性
        var strName = name;
        //共有方法
        this.GetName = function()
        {
            alert(ChangeName(strName));
        }
        //私有方法
        function ChangeName(str)
        {
            return "姓名：" + str;
        }
    }
    var aPerson = new Person("abc");
    aPerson.GetName();
    </script>
----------------------------------------------------------------------------------------------------
0012：
    静态方法：
    <script type="text/javascript">
    function Person(name)
    {
        this.Name = name;
    }
    Person.ToString = function()
    {
        alert("对象的类型是：Person");
    }
    Person.ToString();
    </script>
----------------------------------------------------------------------------------------------------
0013：
    继承的实现：
    <script type="text/javascript">
    function Person(name)
    {
        this.Name = name;
    }
    Person.prototype.GetName = function()
    {
        alert(this.Name);
    }
   
    function User(name,password)
    {
        this.Name = name;
        this.Password = password;
    }
    //继承的实现核心
    User.prototype = new Person();
    User.prototype.GetPassword = function()
    {
        alert(this.Password);
    }
   
    var aUser = new User("小李","123");
    aUser.GetName();
    //类型是基类型
    alert(aUser.constructor == Person)
    </script>
----------------------------------------------------------------------------------------------------
0014：
    命名空间：
    <script type="text/javascript">
    var System = {};
        System.UI = {};
        System.UI.MessageBox = {}; 
    System.UI.MessageBox.Show =  function(msg)
    {
        alert(msg);
    }
    System.UI.MessageBox.Show("你好");
    </script>
----------------------------------------------------------------------------------------------------
0015：
    在JavaScript中，null、0、''、false、undefined用==判断都是相等的，因此，如果需要区分它们的时候，必
须使用===。
----------------------------------------------------------------------------------------------------
0016：
    DOM：Document Object Model。
----------------------------------------------------------------------------------------------------
0017：
    递归方法便利DOM文档中的元素：
    <script type="text/javascript">
    function GetNodes(aNode)
    {
        if(aNode.hasChildNodes() == false)
        {
            return;
        }
        else
        {
            for(var i = 0;i < aNode.childNodes.length;i++)
            {
                alert(aNode.childNodes[i].nodeName);
                GetNodes(aNode.childNodes[i]);
            }
        }
    }
    </script>
----------------------------------------------------------------------------------------------------
0018：
    为了确保DOM文档加载完成，可以使用window的onload事件。
----------------------------------------------------------------------------------------------------
0019：
    innerText不能在XML DOM中使用。
----------------------------------------------------------------------------------------------------
0020：
    访问文本节点的方法之一：
    <script type="text/javascript">
    function SetText(str)
    {
        var myDiv = document.getElementById("myDiv");
        myDiv.firstChild.nodeValue = str;
    }
    </script>
    <div id = "myDiv">{}</div>
    <input id="Button1" type="button" value="button" οnclick="javascript:SetText('世界你好');"/>

    访问文本节点的方法之二：
    <script type="text/javascript">
    function SetText(str)
    {
        var myDiv = document.getElementById("myDiv");
        myDiv.innerText = str;
    }
    </script>
    <div id = "myDiv"></div>
    <input id="Button1" type="button" value="button" οnclick="javascript:SetText('世界你好');"/>

    注意，第二段代码中，没有了{}。第一段代码不能缺少{}。
----------------------------------------------------------------------------------------------------
0021：
    动态创建元素：
    <script type="text/javascript">
    function InsertElement()
    {
        var newElement = document.createElement("div");
        newElement.className = "items";
        newElement.id = "newElement";    
        newElement.appendChild(document.createTextNode("世界你好！"));
       
        var myDiv = document.getElementById("myDiv");
        myDiv.appendChild(newElement);
    }
    </script>
    <div id = "myDiv"></div>
    <input id="Button1" type="button" value="button" οnclick="javascript:InsertElement();"/>
----------------------------------------------------------------------------------------------------
0022：
    innerHTML属性在XML DOM中不存在。并且XHTML中也不存在这个属性。
----------------------------------------------------------------------------------------------------
0023：
    屏蔽回车：
    <script type="text/javascript">
    window.onload = function()
    {
        var TextArea1 = document.getElementById("TextArea1");
        TextArea1.onkeypress = function(e)
        {
            if(window.event != null)
            {
                e = window.event;
            }
            if(e.keyCode == 13)
            {
                return false;
            }
            else
            {
                return true;
            }
        }
    }
    </script>
    <textarea id="TextArea1" cols="20" rows="2"></textarea>
----------------------------------------------------------------------------------------------------
0024：
    this关键字的使用：
    <script type="text/javascript">
    window.onload = function()
    {
        var myDiv = document.getElementById("myDiv");
        myDiv.onclick = OnClickHandler;
    }
    function OnClickHandler()
    {
        //this关键字指代当前上下文的对象
        this.style.backgroundColor = "#DDD";
    }
    </script>
    <div id = "myDiv">世界你好</div>
----------------------------------------------------------------------------------------------------
0025：
    捕获鼠标事件：防止鼠标事件上传。下面的代码给页面所有的元素都添加了鼠标滑过显示一个红色框的效果。
    <script type="text/javascript">
    window.onload = function()
    {
        var all = document.getElementsByTagName("*");
        for(var i = 0;i < all.length;i++)
        {
            all[i].onmouseover = function(e)
            {
                this.style.border = "1px solid red";
                StopBubble(e);
            }
            all[i].onmouseout = function(e)
            {
                this.style.border = "0px";
                StopBubble(e);
            }
        }
    }
    function StopBubble(e)
    {
        if(e != null && e.stopPropagation != null)
        {
            e.stopPropagation();
        }
        else
        {
            window.event.cancelBubble = true;
        }
    }
    </script>
----------------------------------------------------------------------------------------------------
0026：
    停止默认事件处理：如果不停止默认事件处理程序，则处理完自定义的逻辑，就会继续处理默认的事件处理程
序。
    <script type="text/javascript">
    window.onload = function()
    {
        var myA = document.getElementById("myA");
        myA.onclick = function(e)
        {
            alert(this.href);
            StopDefaultHandler(e);
        }
    }
    function StopDefaultHandler(e)
    {
        if(e != null && e.preventDefault != null)
        {
            e.preventDefault();
        }
        else
        {
            window.event.returnValue = false;
        }
    }
    </script>
    <a id = "myA" href="http://www.126.com">126电子邮箱</a>
----------------------------------------------------------------------------------------------------
0027：
    直接的事件绑定，只能绑定一个事件处理函数：运行最后绑定的那个
    <script type="text/javascript">
    window.onload = function()
    {
        alert("1");
    }
    window.onload = function()
    {
        alert("2");
    }
    </script>
----------------------------------------------------------------------------------------------------
0028：
    可以绑定几个事件处理程序的方法：注意，后绑定的先执行
    <script type="text/javascript">  
    if(window.attachEvent != null)
    {
        //IE浏览器
        window.attachEvent("onload",handler1);
        window.attachEvent("onload",handler2);
    }
    else
    {
        //其他浏览器
        window.addEventListener("onload",handler1);
        window.addEventListener("onload",handler2);
    }
   
    function handler1(e)
    {
        alert("1");
    }
    function handler2(e)
    {
        alert("2");
    }
    </script>
----------------------------------------------------------------------------------------------------
0029：
    获得元素的位置：
    <script type="text/javascript">  
    function GetDivPosition()
    {
        var myDiv = document.getElementById("myDiv");
        var left = myDiv.offsetLeft;
        var top = myDiv.offsetTop;
        alert(left + "|" + top);
    }
    </script>
    <div id = "myDiv">世界你好</div>
----------------------------------------------------------------------------------------------------
0030：
    隐藏和显示DIV：
    <script type="text/javascript">  
    function DisplayDiv()
    {
        var myDiv = document.getElementById("myDiv");
        if(myDiv.style.display == "none")
        {
            myDiv.style.display = "block";
        }
        else
        {
            myDiv.style.display = "none";
        }
    }
    </script>
    <div id = "myDiv" style="border:1px; background-color:Gray; width:100px; height:100px;">世界你好</div>
    <input id="Button2" type="submit" value="button" οnclick="javascript:DisplayDiv();"/>
----------------------------------------------------------------------------------------------------
0031：
    设置元素的透明度：
    <script type="text/javascript">  
    function SetTransparence(elem)
    {
        if(elem.filters != null)
        {
            //IE浏览器
            elem.style.filters = "alpha(opacity=" + level + ")";
        }
        else
        {
            //其他浏览器
            elem.style.opacity = level / 100;
        }
    }
    </script>
----------------------------------------------------------------------------------------------------
0032：
    滑入效果的实现：注意长度均由px，并不是数字
    <script type="text/javascript">  
    function SlideIn(elem)
    {
        elem.style.height = "0px";
        var i = 0;
        setTimeout
        (
            function Show()
            {
                i++;
                elem.style.height = i + "px";
                setTimeout(Show,0);
            },
            0
        );
    }
    </script>
    <div id = "myDiv" style="border:1px; background-color:Gray;">世界你好</div>
    <input id="Button2" type="submit" value="button" οnclick="javascript:SlideIn(document.getElementById('myDiv'));"/>
----------------------------------------------------------------------------------------------------
0033：
    客户端验证：页面提交事件
    <body>
        <form id="form1" runat="server">
        <script type="text/javascript">
        window.onload = function()
        {
            //注意：onsubmit是form的事件，不是window的事件
            var form1 = document.getElementById("form1");
            form1.onsubmit = function()
            {
                var TextBox1 = document.getElementById("TextBox1");
                if(TextBox1.value.length === 0)
                {
                    alert("不能为空！");
                    return false;
                }
                else
                {
                    return true;
                }
            }
        }
        </script>
        <div>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Button" /></div>
        </form>
    </body>
----------------------------------------------------------------------------------------------------
0034：
    Ajax可以处理的数据类型：XML、HTML或者JOSN。
----------------------------------------------------------------------------------------------------
0035：
    Ajax异步请求回来的数据不能使用getElementById获取。
----------------------------------------------------------------------------------------------------
0036：
    自动刷新的实现：
    <script type="text/javascript">
    setInterval(ShowTime,1);
    function ShowTime()
    {
        var myDiv = document.getElementById("myDiv");
        myDiv.innerText = (new Date()).toString();
    }
    </script>
    <div id="myDiv">世界你好！</div>
----------------------------------------------------------------------------------------------------