JavaScript Dom

時間 2019-12-14

原文原文鏈接

一、經過id獲取頁面上的元素javascript

document.getElementById(); //經過這個方法就能夠獲取到頁面上的元素css

------------------------------------------------------html

使用document.getElementById()方法的時候，若是使用了未定義的id會報錯（有可能代碼裏確實有這個id，可是HTML代碼是從上到下執行的，而在執行 document.getElementById()方法的時候尚未執行到建立id的代碼），因此爲了不這種錯誤，document.getElementById()方法要麼用在最後，要麼爲window.onload註冊一個事件處理程序。當執行該事件的時候，頁面已經加載完了，在事件中使用document.getElementById()方法就不會報錯了。java

window.onload=function(){

};c++

二、爲元素對象註冊事件正則表達式

在<body></body>標籤中建立一個按鈕數組

<input id="btn1" type="button" name="name" value="button"/>

在<script></script>標籤中給btn1動態註冊事件，實現js代碼與html網頁代碼相分離。瀏覽器

//動態註冊事件的方式實現js代碼與html網頁代碼相分離
            window.onload=function(){
                document.getElementById('btn1').onclick=function(){
                alert('按鈕被點了');
                 alert(new Date().toLocaleTimeString());//打印當前時間
            };
            }

window.onload=function(){
                document.getElementById('btn1').onclick=fn; //這樣寫表示把fn函數賦值給onclick事件，點按鈕的時候才執行fn
                document.getElementById('btn1').onclick=fn();//這樣寫沒有意義，表示將fn的返回值賦值給onclick事件，執行這段代碼的時候當即就執行fn（並無點按鈕也執行）
            };
            function fn(){
                alert(new Date().toLocaleTimeString());
            }

三、window對象的函數安全

window.alert()；//彈出警告框，使用的時候通常省略掉'window.'直接alert()。app

window.confirm();//確認提示框，使用的時候通常省略掉'window.'直接confirm()。

<html>
    <head>
    <title></title>
    <script type="text/javascript">
        window.onload=function(){
            document.getElementById('btn1').onclick=function(){
                if(confirm('您確認要點嗎？')){
                    alert('點擊成功');
                }
                else{
                    alert('點擊失敗');
                }
            };
        };
    </script>
    </head>
    <body>
        <input type="button" name="name" value="button" id="btn1"/>
    </body>
</html>

window.location.href='http://www.baidu.com'; //使頁面跳轉到百度，使用時能夠省略掉'window.'。這裏localtion是一個對象，之因此直接寫成window.location='http://www.baidu.com'; 也能成功跳轉是由於瀏覽器容錯比較強，寫的話最好仍是按正確的寫。

<html>
    <head>
    <title></title>
    <script type="text/javascript">
        window.onload=function(){
            document.getElementById('btn1').onclick=function(){
                location.href='http://www.baidu.com';
            };
        };
    </script>
    </head>
    <body>
        <input type="button" name="name" value="跳轉到百度" id="btn1"/>
    </body>
</html>

window.navigate('http://www.baidu.com'); //一樣也是使頁面跳轉到百度，使用時能夠省略掉'window.'，可是這個只有IE瀏覽器支持，其餘瀏覽器都不支持

window.setInterval()和window.clearInterval()

<html>
    <head>
    <title></title>
    <script type="text/javascript">
        window.onload=function(){
            var intervalId;
            document.getElementById('btn1').onclick=function(){
                //啓動一個計時器
                 intervalId= setInterval(function(){
                    //每隔一秒執行一次這裏面的代碼
                    //讓文本框中數字累加
                    //一、首先獲取文本框對象
                    //var txtObj=document.getElementById('txt1');
                    <!-- //二、接着獲取文本框中的值 -->
                    <!-- var v=txtObj.value; -->
                    <!-- //三、而後加一 -->
                    <!-- v=parseInt(v)+1; -->
                    <!-- //四、最後將新值賦值給文本框 -->
                    <!-- txtObj.value=v; -->
                    //上面1，2，3，4步能夠簡寫爲
                    document.getElementById('txt1').value++;//當使用一元運算符的時候，默認會先將字符串轉成數字而後再++。這裏要先++。
                },1000);
            };
            document.getElementById('btn2').onclick=function(){
                clearInterval(intervalId);
            };
        };
    </script>
    </head>
    <body>
        <input type="text" name="name" id="txt1" value="0"/>
        <input type="button" name="name" value="開始" id="btn1"/>
        <input type="button" name="name" value="中止" id="btn2"/>
    </body>
</html>

讓title的文字向左向右滾

<html>
    <head>
    <title>好好學習，每天向上</title>
    <script type="text/javascript">
    var direction='left';
    
        window.onload=function(){
            //啓動一個計時器
             setInterval(function(){
                    var titleText,firstChar,others;
                    titleText=document.title;
                    if(direction=='left'){
                        firstChar=titleText.charAt(0);
                        others=titleText.substring(1);
                        document.title=others+firstChar;
                    }else{
                        firstChar=titleText.charAt(titleText.length-1);
                        others=titleText.substring(0,titleText.length-1);
                        document.title=firstChar+others;
                    }
                },1000);
            //爲向左向右註冊單擊事件
            document.getElementById('btn1').onclick=function(){
                direction='left';
            };
            document.getElementById('btn2').onclick=function(){
                direction='right';
            };
        };
    </script>
    </head>
    <body>
        <input type="button" name="name" value="向左" id="btn1"/>
        <input type="button" name="name" value="向右" id="btn2"/>
    </body>
</html>

window.setTimeout(function(){},2000);

<html>
    <head>
    <title></title>
    <script type="text/javascript">
        window.onload=function(){
        var timeOutId;
            document.getElementById('btn1').onclick=function(){
                <!-- //每隔2秒彈一個 -->
                <!-- setInterval(function(){ -->
                    <!-- alert('hello'); -->
                <!-- },2000); -->
                //2秒鐘後，彈一個
                //只彈出一次
                timeOutId=setTimeout(function(){
                    alert('hello');
                },5000);
            };
            document.getElementById('btn2').onclick=function(){
                clearTimeout(timeOutId);
            };
        };
    </script>
    </head>
    <body>
    <input type="button" name="name" value="start" id="btn1"/>
    <input type="button" name="name" value="stop" id="btn2"/>
    </body>
</html>

window.onload=function(){}; //當頁面加載完畢後

window.onunload=function(){}; //當頁面卸載完畢後

window.onbeforeunload=function(){};//當頁面卸載前

<html>
    <head>
        <script type="text/javascript">
            window.onbeforeunload=function(){
                alert('頁面即將卸載！');
            };
            window.onload=function(){
                alert('頁面加載完畢！');
            };
　　　　　　　window.onunload=function(){
　　　　
　　　　　　　　　 alert('頁面卸載完畢後！');　
　　　　　　　};　
       </script>
    </head>
    <body>
        
    </body>
</html>

四、window對象得屬性

給按鈕註冊一個單擊事件，當點擊按鈕跳轉到百度頁面window.location.href='';

<html>
    <head>
        <script type="text/javascript">
        window.onload=function(){
            document.getElementById('btn1').onclick=function(){
                window.location.href='http://www.baidu.com';
            };
        };
        </script>
    </head>
    <body>
        <input type="button" name="name" value="button" id="btn1"/>
    </body>
</html>

給按鈕註冊一個單擊事件，當點擊按鈕彈出當前請求得網址

<html>
    <head>
        <script type="text/javascript">
        window.onload=function(){
            document.getElementById('btn1').onclick=function(){
                alert(window.location.href);
            };
        };
        </script>
    </head>
    <body>
        <input type="button" name="name" value="button" id="btn1"/>
    </body>
</html>

當點擊按鈕刷新當前頁面window.location.reload();

<html>
    <head>
        <script type="text/javascript">
        window.onload=function(){
            document.getElementById('btn1').onclick=function(){
                window.location.reload();
            };
        };
        </script>
    </head>
    <body>
        <input type="button" name="name" value="button" id="btn1"/>
    </body>
</html>

window.event.ctlKey ==true; 按下control鍵（在IE8及更早的IE瀏覽器下，必須經過window.event方式來獲取事件對象。火狐瀏覽器底下不行，火狐瀏覽器只能在事件處理程序中加一個參數，這個參數就是事件對象）

<html>
    <head>
    <style type="text/css">
        #div1{
            background-color:blue;
            width:100px;
            height:100px;
        }
    </style>
        <script type="text/javascript">
        window.onload=function(){
            document.getElementById('div1').onclick=function(){
                if(window.event.ctrlKey){
                    alert("鼠標點擊的同時按下了control鍵");
                }else if(window.event.altKey){
                    alert("鼠標點擊的同時按下了alt鍵");
                }else if(window.event.shiftKey){
                    alert("鼠標點擊的同時按下了shift鍵");
                }else{
                    alert("普通點擊");
                }
            };
        };
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>

給事件處理程序添加一個參數，這個參數就是事件對象。這種方式IE9及以上瀏覽器，火狐瀏覽器都支持

<html>
    <head>
    <style type="text/css">
        #div1{
            background-color:blue;
            width:100px;
            height:100px;
        }
    </style>
        <script type="text/javascript">
        window.onload=function(){
            document.getElementById('div1').onclick=function(evt){
                if(evt.ctrlKey){
                    alert("鼠標點擊的同時按下了control鍵");
                }else if(evt.altKey){
                    alert("鼠標點擊的同時按下了alt鍵");
                }else if(evt.shiftKey){
                    alert("鼠標點擊的同時按下了shift鍵");
                }else{
                    alert("普通點擊");
                }
            };
        };
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>

若是要想全部瀏覽器都兼容能夠：var e=window.event||evt; 聲明一個變量，若是是IE8，window.event返回true,或運算第一個爲真就直接返回第一個e=window.event;若是是火狐window.event爲false,evt爲真，或運算第一個爲false繼續判斷第二個，第二個爲true，返回第二個e=evt

<html>
    <head>
    <style type="text/css">
        #div1{
            background-color:blue;
            width:100px;
            height:100px;
        }
    </style>
        <script type="text/javascript">
        window.onload=function(){
            document.getElementById('div1').onclick=function(evt){
             var e=window.event||evt;
                if(e.ctrlKey){
                    alert("鼠標點擊的同時按下了control鍵");
                }else if(e.altKey){
                    alert("鼠標點擊的同時按下了alt鍵");
                }else if(e.shiftKey){
                    alert("鼠標點擊的同時按下了shift鍵");
                }else{
                    alert("普通點擊");
                }
            };
        };
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>

this與window.event.srcElement都表示當前事件（若是都是針對一個事件來看，this與srcElement表示的是同樣的）

事件冒泡中的this與srcElement表示的就不一樣，在這裏若是時用this的話當點擊最內層的元素時會依此將包含其的父元素的id都打印出來，而若是用srcElement的話始終表示最初引起的事件對象(事件冒泡依然繼續)

事件冒泡中的this表示的是當前事件對象，而srcElement表示的是最初引起的事件對象。

<html>
    <head>
    <title>事件冒泡</title>
    <style type="text/css">
        #div1{
            background-color:blue;
            width:100px;
            height:100px;
        }
        #p1{
            background-color:red;
            width:50px;
            height:50px;
        }
        #sp1{
            background-color:green;
            width:25px;
            height:25px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            document.body.onclick=function(){
                //alert(this.id);
                alert(window.event.srcElement.id);
            };
            document.getElementById('div1').onclick=function(){
                //alert(this.id);
                alert(window.event.srcElement.id);
            };
            document.getElementById('sp1').onclick=function(){
                //alert(this.id);
                alert(window.event.srcElement.id);
            };
            document.getElementById('p1').onclick=function(){
                //alert(this.id);
                alert(window.event.srcElement.id);
            };
        };
    </script>
    </head>
    <body id="bod1">
        <div id="div1">
            <p id="p1">
                <span id="sp1">好好學習</span>
            </p>
        </div>
    </body>
</html>

阻止事件冒泡，e.calcleBubble=true;阻止。e.cancleBubble=false;容許。前面是兼容全部瀏覽器的寫法，火狐瀏覽器下還能夠用e.stopPropagation();來阻止

<html>
    <head>
    <style type="text/css">
        #div1{
            background-color:blue;
            width:100px;
            height:100px;
        }
        #p1{
            background-color:red;
            width:50px;
            height:50px;
        }
        #sp1{
            background-color:green;
            width:25px;
            height:25px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            document.body.onclick=function(){
                alert(this.id);
            };
            document.getElementById('div1').onclick=function(evt){
                alert(this.id);
                //兼容模式阻止事件冒泡
                var e=window.event||evt
                e.cancelBubble=true;
            };
            document.getElementById('sp1').onclick=function(evt){
                alert(this.id);
                //兼容模式阻止事件冒泡
                var e=window.event||evt
                e.cancelBubble=true;
            };
            document.getElementById('p1').onclick=function(evt){
                 alert(this.id);
                //兼容模式阻止事件冒泡
                var e=window.event||evt
                e.cancelBubble=true;
                
            };
            
        };
    </script>
    </head>
    <body id="bod1">
        <div id="div1">
            <p id="p1">
                <span id="sp1">好好學習</span>
            </p>
        </div>
    </body>
</html>

獲取最初引起事件對象的兼容寫法，在IE下要用srcElement,火狐瀏覽器的話得用target

<html>
    <head>
    <title>事件冒泡</title>
    <style type="text/css">
        #div1{
            background-color:blue;
            width:100px;
            height:100px;
        }
        #p1{
            background-color:red;
            width:50px;
            height:50px;
        }
        #sp1{
            background-color:green;
            width:25px;
            height:25px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            document.body.onclick=function(evt){
                var e=window.event||evt;
                var srcTarget=e.srcElement||e.target;
                alert(srcTarget.id);
            };
            document.getElementById('div1').onclick=function(evt){
                var e=window.event||evt;
                var srcTarget=e.srcElement||e.target;
                alert(srcTarget.id);
            };
            document.getElementById('sp1').onclick=function(evt){
                var e=window.event||evt;
                var srcTarget=e.srcElement||e.target;
                alert(srcTarget.id);
            };
            document.getElementById('p1').onclick=function(evt){
                var e=window.event||evt;
                var srcTarget=e.srcElement||e.target;
                alert(srcTarget.id);
            };
        };
    </script>
    </head>
    <body id="bod1">
        <div id="div1">
            <p id="p1">
                <span id="sp1">好好學習</span>
            </p>
        </div>
    </body>
</html>

clipboardData對象（剪貼板），只兼容IE

clipboardData.setData("Text",var);//設置剪貼板中的值，即複製

clipboardData.getData("Text");//讀取剪貼板中的值，即粘貼

clipboardData.clearData("Text");//清空剪貼板

oncopy事件：複製

onpaste事件：粘貼

oncut事件：剪貼

window.history屬性

<html>
    <head>
        <title>js dom.history.html</title>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById('btn1').onclick=function(){
                    window.history.forward();
                };
                document.getElementById('btn2').onclick=function(){
                    window.history.back();
                };
            };
        </script>
    </head>
    <body>
        <input type="button" name="name" id="btn1" value="前進"/>
        <input type="button" name="name" id="btn2" value="後退"/>
        <a href="1.html">1.html</a>
    </body>
</html>
<html>
    <head>
        <title>1.html</title>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById('btn1').onclick=function(){
                    window.history.forward();
                };
                document.getElementById('btn2').onclick=function(){
                    window.history.back();
                };
            };
        </script>
    </head>
    <body>
        <input type="button" name="name" id="btn1" value="前進"/>
        <input type="button" name="name" id="btn2" value="後退"/>
        <a href="js dom.history.html">js dom.history.html</a>
    </body>
</html>

window.document屬性

document.write()和document.witeln() 應該和頁面加載一塊兒使用，若是頁面加載完畢再使用會覆蓋原來的頁面

經過document.write()能夠實現動態向頁面中建立內容（包含文本或者各類標籤）

write和writeln的區別在於，writeln輸出完會在源代碼中進行換行，而write不會進行任何換行，是緊挨着輸出

在一個網頁中引用其餘網頁的內容時能夠用document.write();

document.getElementsByTagName('標籤類型')；//根據標籤類型來獲取頁面上的標籤，返回的是一個標籤集合，能夠用遍歷的方式來操做集合中的每一個標籤（這裏要用for循環來遍歷，若是時for in 循環的話會將集合的length屬性也遍歷出來，這裏咱們只須要集合中的全部標籤元素，因此用for）

document.getElementsByName('name值');//根據標籤的name屬性獲取頁面上的標籤，返回的是一個標籤集合

document.getElementById('標籤的id').getElementsByTagName('標籤類型');//獲取特定id的標籤下的某類標籤的集合

倒計時協議：

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var s=9;
                var intervalId=setInterval(function(){
                    var obj=document.getElementById('btn1');
                    if(s>0){
                        obj.value='請仔細閱讀協議（'+s+'）';
                        s--;
                    }else{
                        obj.value='贊成！';
                        obj.disabled=false;
                        clearInterval(intervalId);
                    }
                },1000);
                
            };
        </script>
    </head>
    <body>
        <input type="button" disabled="disabled" id="btn1" name="name" value="請仔細閱讀協議（10）"
    </body>
</html>

動態添加表格

<html>
    <head>
        <script type="text/javascript">
            var dict={'百度':'http://www.baidu.com','谷歌':'http://www.gogle.com'};
            window.onload=function(){
                document.getElementById('btn1').onclick=function(){
                    var tableElement=document.createElement('table');
                    tableElement.border='1';
                    for(var key in dict){
                        var trElement=document.createElement('tr');
                        var td1Element=document.createElement('td');
                        td1Element.innerHTML=key;
                        var td2Element=document.createElement('td');
                        td2Element.innerHTML='<a href="'+dict[key]+'">'+key+'</a>';
                        trElement.appendChild(td1Element);
                        trElement.appendChild(td2Element);
                        tableElement.appendChild(trElement);
                    }
                    document.body.appendChild(tableElement);
                };
            };
        </script>
    </head>
    <body>
        <input type="button" id="btn1" name="name" value="動態添加表格"/>
    </body>
</html>

動態建立DOM元素，刪除子元素（在這裏直接給父對象的innerHTML='',也能夠起到刪除子對象的效果，可是不能刪除子對象的事件，因此推薦使用下面這種removeChild的方式，刪除對象的同時將其對應的事件也一塊兒刪除了）

<html>
    <head>
        <title>動態建立DOM（document.createElement）</title>
        <style type="text/css">
            #div1{
                width:450px;
                height:450px;
                border:1px solid blue;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById('btn1').onclick=function(){
                    //一、動態建立一個超連接
                    var aLink=document.createElement('a');
                    aLink.href='http://www.baidu.com';
                    aLink.title='百度一下你就知道';
                    aLink.target='_blank';
                    aLink.innerText='百度';
                    document.getElementById('div1').appendChild(aLink);
                    document.getElementById('div1').insertBefore(aLink,document.getElementById('div1').firstChild);
                    //二、動態建立一個文本框
                    var tInput=document.createElement('input');
                    tInput.type='text';
                    document.getElementById('div1').appendChild(tInput);
                    document.getElementById('div1').insertBefore(tInput,document.getElementById('div1').firstChild);
                };
                //刪除子元素
                document.getElementById('btn2').onclick=function(){
                    var divObj=document.getElementById('div1');
                    while(divObj.firstChild){
                        divObj.removeChild(divObj.firstChild);
                    }
                    
                };
                
            };
        </script>
    </head>
    <body>
        <input type="button"  id="btn1" name="name" value="動態建立一個元素"/>
        <input type="button"  id="btn2" name="name" value="清空層中內容"/>
        <div id="div1">
        sdadasdsadasdasdasd
        </div>
    </body>
</html>

動態循環建立表格insertRow，insertCell

<html>
    <head>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById('btn1').onclick=function(){
                    var dict={
                        '百度':'http://www.baidu.com',
                        '谷歌':'http://www.gogle.com'
                    };
                    //動態建立表格
                    var tableElement=document.createElement('table');
                    tableElement.border='1';
                    //循環爲表格建立行
                    for(var key in dict){
                        //每次遍歷一條數據就動態建立一行
                        var currentRow=tableElement.insertRow(-1);//-1表示向最後追加一行
                        //向剛剛插入的行中插入列
                        var td1=currentRow.insertCell(-1);//向當前行中追加一個列
                        td1.innerHTML=key;
                        currentRow.insertCell(-1).innerHTML='<a href="'+dict[key]+'">'+key+'</a>';
                    }
                    document.body.appendChild(tableElement);
                };
            };
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="建立表格" name="name"/>
    </body>
</html>

<html>
    <head>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById('btn1').onclick=function(){
                    //一、採集用戶輸入數據
                    var user_name=document.getElementById('txtNickName').value;
                    var content=document.getElementById('txtContent').value;
                    //二、動態建立行對象
                    var tableElement=document.getElementById('tbComments');
                    var currentRow=tableElement.insertRow(-1);
                    currentRow.insertCell(-1).innerHTML=user_name;
                    currentRow.insertCell(-1).innerHTML=content;
                    <!-- var trLine=document.createElement('tr'); -->
                    <!-- var td1=document.createElement('td'); -->
                    <!-- td1.innerHTML=user_name; -->
                    <!-- var td2=document.createElement('td'); -->
                    <!-- tf2.innerHTML=content; -->
                    <!-- trLine.appendChild(td1); -->
                    <!-- trLine.appendChild(td2); -->
                    <!-- document.getElementById('tbComments').appendChild(trLine); -->
                };
            };
        </script>
    </head>
    <body>
        <table id="tbComments" border="1">
            <tr>
                <td>
                    貓貓：
                </td>
                <td>
                    沙發耶！
                </td>
            </tr>
        </table>
        暱稱：<input type="text" id="txtNickName"/><br/>
        <textarea id="txtContent" ></textarea><br/>
        <input type="button" value="評論" id="btn1"/>
    </body>
</html>

什麼樣的代碼須要放到onload裏面？當代碼須要訪問頁面上的DOM元素時，必需要等頁面加載完畢才能運行，這種代碼須要放到onload裏面。若是不須要訪問頁面的DOM元素就不必放到onload裏面了。

當文本框失去焦點的時候判斷文本框內是否有文字，有則背景爲白色，無則背景爲紅色

<html>
    <head>
        <script type="text/javascript">
            window.onload=function(){
                var inputs=document.getElementsByTagName('input');
                for(var i=0;i<inputs.length;i++){
                    if(inputs[i].type=='text'){
                        inputs[i].onblur=function(){
                            if(this.value.length==0){
                                this.style.backgroundColor='red';
                            }else{
                                this.style.backgroundColor='white';
                            }
                        };
                    }
                }
            };
        </script>
    </head>
    <body>
        <input type="text"/><input type="text"/><input type="text"/><input type="text"/>
    </body>
</html>

用js作的評分

<html>
    <head>
        <style type="text/css">
            td{
                font-size:50;
                color:green;
                cursor:pointer;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                //一、獲取全部的td
                var tdElements=document.getElementById('tb1').getElementsByTagName('td');
                //二、爲每一個td註冊一個onmouseover和onmouseout事件
                for(var i=0;i<tdElements.length;i++){
                   tdElements[i].setAttribute('score',(i+1)*10);
                    //爲每一個td註冊一個onmouseover事件
                    tdElements[i].onmouseover=function(){
                        for(var c=0;c<tdElements.length;c++){
                            tdElements[c].innerHTML='★';
                            if(tdElements[c]==this){
                                break;
                            }
                        }
                    };
                    //爲每一個td註冊一個onmouseout事件
                    tdElements[i].onmouseout=function(){
                        //標記td爲isclicked的td
                        var tdIndex=-1;
                        for(var c=0;c<tdElements.length;c++){
                            tdElements[c].innerHTML='☆';
                            if(tdElements[c].getAttribute('isclicked')){
                                tdIndex=c;
                            }
                        }
                        //找到當前具備isclicked屬性的td，將0到這個td的每個都變成實心
                        for(var x=0;x<=tdIndex;x++){
                            tdElements[x].innerHTML='★';
                        }
                    };
                    //爲每一個td註冊一個單擊事件
                    tdElements[i].onclick=function(){
                        //清除全部的td的isclicked屬性
                        for(var c=0;c<tdElements.length;c++){
                            tdElements[c].removeAttribute('isclicked');
                        }
                        
                        //設置當前被點擊的td的狀態
                        this.setAttribute('isclicked','isclicked');
                        alert(this.getAttribute('score'));
                    };
                }
                
            };
        </script>
    </head>
    <body>
        <table id="tb1" boreder="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>☆</td>
                <td>☆</td>
                <td>☆</td>
                <td>☆</td>
                <td>☆</td>
                <td>☆</td>
            </tr>
        </table>
    </body>
</html>

選中的超連接變紅色其他超連接變白色而且頁面不跳轉（主要就是this的用法），不跳轉就是在標籤的單擊事件後面加上return false

<html>
    <head>
        <script type="text/javascript">
            window.onload=function(){
                //選取頁面下全部超連接標籤
                var alinks=document.getElementsByTagName('a');
                //爲每一個標籤註冊一個單擊事件
                for(var i=0;i<alinks.length;i++){
                    alinks[i].onclick=function(){
                        //設置全部其餘標籤背景變白色
                        for(var j=0;j<alinks.length;j++){
                            if(j!=i){
                                alinks[j].style.backgroundColor='white';
                            }
                        }
                        //設置被點擊的超連接背景變紅色
                        this.style.backgroundColor='red';
                        return false;
                    };
                }
            };
        </script>
    </head>
    <body>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.baidu.com">百度</a>
    </body>
</html>

點擊表格某行某行變色，其他變白色

<html>
    <head>
        <script type="text/javascript">
            window.onload=function(){
                //獲取全部的行
                var trs=document.getElementById('tb').getElementsByTagName('tr');
                //爲每一個行註冊單擊事件
                for(var i=0;i<trs.length;i++){
                    trs[i].onclick=function(){
                    for(var c=0;c<trs.length;c++){
                        trs[c].style.backgroundColor='white';
                        }
                        this.style.backgroundColor='red';
                        
                    };
                }
            };
        </script>
    </head>
    <body>
        <table id="tb" border="1" cellpadding="2" cellspacing="2">
            <tr>
                <td>AAA</td>
                <td>AAA</td>
                <td>AAA</td>
                <td>AAA</td>
                <td>AAA</td>
            </tr>
            <tr>
                <td>AAA</td>
                <td>AAA</td>
                <td>AAA</td>
                <td>AAA</td>
                <td>AAA</td>
            </tr>
            <tr>
                <td>AAA</td>
                <td>AAA</td>
                <td>AAA</td>
                <td>AAA</td>
                <td>AAA</td>
            </tr>
            <tr>
                <td>AAA</td>
                <td>AAA</td>
                <td>AAA</td>
                <td>AAA</td>
                <td>AAA</td>
            </tr>
        </table>
    </body>
</html>

經過js操做類樣式

<html>
    <head>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById('bt1').onclick=function(){
                    document.getElementById('div1').className='class1';
                };
                document.getElementById('bt2').onclick=function(){
                    document.getElementById('div1').className+=' class2';
                };
                document.getElementById('bt3').onclick=function(){
                    document.getElementById('div1').className+=' class3';
                };
            };
        </script>
        <style type="text/css">
            .class1{
                width:500px;
                height:500px;
                border:1px solid blue;
            }
            .class2{
                background-color:yellow;
            }
            .class3{
                font-family:宋體;
                font-size:50px;
            }
        </style>
    </head>
    <body>
        <input id="bt1" type="button" value="加邊框"/>
        <input id="bt2" type="button" value="變黃色"/>
        <input id="bt3" type="button" value="變字體"/>
        <div id="div1">
            好好學習，每天向上
        </div>
    </body>
</html>

動態顯示或隱藏層

<html>
    <head>
        <script type="text/javascript">
            window.onload=function(){
            var btnElement=document.getElementById('btn1');
                btnElement.onclick=function(){
                if(this.value=='動態隱藏層'){
                    var intervalId=setInterval(function(){
                    //獲取要操做的層對象
                    var divObj=document.getElementById('div1');
                    //獲取如今層的高度
                    //只有經過style屬性設置的層的高度才能經過style屬性獲取層的高度，若是不是經過style屬性設置的層的高度，那麼就沒法經過style屬性獲取層的高度
                    var h=divObj.offsetHeight;
                        h-=5;
                    
                    //把新的高度賦值給層
                    if(h<0){
                        h=0;
                        divObj.style.height=0+'px';
                        btnElement.value='動態顯示層';
                        divObj.style.display='none';
                        clearInterval(intervalId);
                    }else{
                        divObj.style.height=h+'px';
                    }
                    
                },200);
                }else{
                    //btnElement.value='動態隱藏層';
                    document.getElementById('div1').style.display='';
                    var intervalId=setInterval(function(){
                    //獲取要操做的層對象
                    var divObj=document.getElementById('div1');
                    //獲取如今層的高度
                    //只有經過style屬性設置的層的高度才能經過style屬性獲取層的高度，若是不是經過style屬性設置的層的高度，那麼就沒法經過style屬性獲取層的高度
                    var h=divObj.offsetHeight;
                        h+=5;
                    
                    //把新的高度賦值給層
                    if(h>210){
                        h=210;
                        divObj.style.height=210+'px';
                        btnElement.value='動態隱藏層';
                        divObj.style.display='';
                        clearInterval(intervalId);
                    }else{
                        divObj.style.height=h+'px';
                    }
                    
                },200);
                }
                };
            };
        </script>
        <style type="text/css">
            #div1{
                width:200px;
                height:210px;
                border:1px solid blue;
                background-color:red;
                overflow:hidden;
            }
        </style>
    </head>
    <body>
        <input type="button" id="btn1" value="動態隱藏層"/>
        <div id="div1">
            
        </div>
    </body>
</html>

判斷checkbox選中與否，並打印選中的內容

<html>
    <head>
        <script type="text/javascript">
            window.onload=function(){
                //獲取全部的checkbox
                var chks=document.getElementById('div1').getElementsByTagName('input');
                //遍歷每一個checkbox
                for(var i=0;i<chks.length;i++){
                    chks[i].onclick=function(){
                        var chksAll=document.getElementById('div1').getElementsByTagName('input');
                        var chkChecked=[];
                        //循環獲取全部被選中的
                        for(var j=0;j<chksAll.length;j++){
                            if(chksAll[j].checked){
                                chkChecked[chkChecked.length]=chksAll[j].value;
                            }
                        }
                        //獲取個數，而且顯示值
                        document.getElementById('pmsg').innerHTML='共選中'+chkChecked.length+'項，分別是：'+chkChecked.toString();
                    };
                }
            };
        </script>
    </head>
    <body>
        <div id="div1">
            <input type="checkbox" name="name" value="Sam"/>Sam
            <input type="checkbox" name="name" value="Amy"/>Amy
            <input type="checkbox" name="name" value="Tom"/>Tom
            <input type="checkbox" name="name" value="Mary"/>Mary
        </div>
        <p id="pmsg">
            共選中0項，分別是：
        </p>
        
    </body>
</html>

若是要給整個頁面註冊事件，不要給body註冊，要給document註冊才能夠

點擊按鈕彈出一個登錄層

<html>
    <head>
        <title>登錄</title>
        <style type="text/css">
            #div1{
                width:250px;
                height:100px;
                background-color:yellow;
                //position:absolute;
                display:none;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById('a1').onclick=function(){
                    var tbElement=document.getElementById('div1');
                    tbElement.style.display='block';
                    tbElement.style.margin=document.body.clientHeight/2+' '+document.body.clientWidth/2+' auto';
                };
                document.getElementById('btn1').onclick=function(){
                    document.getElementById('div1').style.display='none';
                };
            };
        </script>
    
    </head>
    <body>
        <a id="a1" href="#">登錄</a>
        <div id="div1" style='display:none'>
            <table id="tb1" cellpadding="2" cellspacing="2">
                <tr>
                    <td>帳號：</td>
                    <td><input type="text"/></td>
                </tr>
                <tr>
                    <td>密碼：</td>
                    <td><input type="password"/></td>
                </tr>
            </table>
            <input type="button" name="name" value="關閉" id="btn1"/>
        </div>
    </body>
</html>

動態獲取元素高度時的問題

元素對象：element

一、element.offsetHeight：用這種方式獲取元素的高的時候，獲取的時通過計算的，包括了border,margin,padding等的高度

二、element.currentStyle.height:IE下獲取高度（這裏拿到的只是CSS中設置的高度，不包含其餘的）

三、window.getComputedStyle(element，null).height:火狐瀏覽器下獲取高度(拿到實際在css中設置的高度)

利用js操做表單元素

<html>
    <head>
        <script type="text/javascript">
            window.onload=function(){
                //爲層註冊一個單擊事件
                document.getElementById('div1').onclick=function(){
                    //document.getElementById('btnSearch').click();
                    document.getElementById('form1').submit();
                };
                document.getElementById('form1').onsubmit=function(){
                //再表單提交事件中驗證用戶是否輸入了，輸入了就提交否知不提交
                var txt=document.getElementById('txt1');
                if(txt.value.length==0){
                    alert('請輸入內容！');
                    return false;
                }
            };
            };
            
        </script>
        <style type="text/css">
            #div1{
                width:146px;
                height:300px;
                background-color:red;
            }
        </style>
    </head>
    <body>
        <form action="http://www.baidu.com/s" method="get" id="form1">
            <input type="text" name="wd" id="txt1" value=""/>
            <input type="submit" value="百度一下，你就知道" id="btnSearch"/>
            <div id="div1">
                
            </div>
        </form>
    </body>
</html>

正則表達式使用

<html>
    <head>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById('btn').onclick=function(){
                    var post_code=document.getElementById('txt1').value;
                    //驗證是不是合法的郵編
                    //2.1建立一個正則表達式（正則表達式要寫到一對斜槓裏面）
                    var reg_postcode=/^[0-9]{6}$/;
                    //2.2經過調用正則表達式對象的test方法來測試是否匹配
                    var isok=reg_postcode.test(post_code);
                    alert(isok);
                };
            };
        </script>
    </head>
    <body>
        <input type="text" value="" id="txt1" name="name"/>
        <input type="button" name="name" value="測試是不是合法的郵政編碼" id="btn" />
    </body>
</html>

驗證是是不是合法的郵編或郵箱

<html>
    <head>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById('btn').onclick=function(){
                    var post_code=document.getElementById('txt1').value;
                    //驗證是不是合法的郵編
                    //2.1建立一個正則表達式（正則表達式要寫到一對斜槓裏面）
                    var reg_postcode=/^[0-9]{6}$/;
                    //2.2經過調用正則表達式對象的test方法來測試是否匹配
                    var isok=reg_postcode.test(post_code);
                    alert(isok);
                };
                document.getElementById('btn1').onclick=function(){
                    var user_email=document.getElementById('txt1').value;
                    var reg_emai=/^\w+@\w+(\.\w+)+$/;
                    alert(reg_emai.test(user_email));
                };
            };
        </script>
    </head>
    <body>
        <input type="text" value="" id="txt1" name="name"/>
        <input type="button" name="name" value="測試是不是合法的郵政編碼" id="btn" />
        <input type="button" name="name" value="測試是不是合法的郵箱" id="btn1" />
    </body>
</html>

利用js操做正則去掉字符串首尾的空格

<html>
    <head>
        <script type="text/javascript">
            var msg='          abcdefg           ';
            //msg=msg.replace(/^\s+/,'').replace(/\s+$/,'');
            alert('==='+msg+'===');
        </script>
    </head>
    <body>
    
    </body>
</html>

模擬密碼安全等級判斷

<html>
    <head>
        <script type="text/javascript">
            window.onload=function(){
                //爲文本框註冊一個鍵盤按下而後彈起的事件
                document.getElementById('txtPassword').onkeyup=function(){
                    var tds=document.getElementById('tb1').getElementsByTagName('td');
                    for(var i=0;i<tds.length;i++){
                        tds[i].style.backgroundColor='white';
                    }
                    
                    var pwd=this.value;
                    //根據密碼，校驗強度
                    if(pwd.length>0){
                        var pwdLevel= getPasswordLevel(pwd);
                    //根據密碼強度設置強弱
                    switch(pwdLevel){
                        case 0:
                        case 1:
                        case 2:
                        tds[0].style.backgroundColor='red';
                        break;
                        case 3:
                        case 4:
                        tds[0].style.backgroundColor='yellow';
                        tds[1].style.backgroundColor='yellow';
                        break;
                        case 5:
                        tds[0].style.backgroundColor='green';
                        tds[1].style.backgroundColor='green';
                        tds[2].style.backgroundColor='green';
                        break;
                        default:break;
                    }
                    }
                    
                };
            };
            function getPasswordLevel(user_pwd){
                var lvl=0;
                //一、若是密碼中包含數字則強度+1
                if(user_pwd.match(/\d+/)){
                    lvl++;
                }
                //二、若是密碼中包含小寫字母強度+1
                if(user_pwd.match(/[a-z]+/)){
                    lvl++;
                }
                //三、若是密碼中包含大寫字母強度+1
                if(user_pwd.match(/[A-Z]+/)){
                    lvl++;
                }
                //四、若是密碼中包含特殊符號強度+1
                if(user_pwd.match(/^[0-9a-zA-Z]+/)){
                    lvl++;
                }
                //五、若是密碼長度超過6位強度+1
                if(user_pwd.length>6){
                    lvl++;
                }
                return lvl;
            }
        </script>
        <style type="text/css">
            td{
                font:12px 宋體;
                width:78px;
            }
        </style>
    </head>
    <body>
        <p>請輸入密碼：
        <input type="text" name="name" value="" id="txtPassword"/></p>
        <table id="tb1" border="1" cellpadding"0" cellspacing="0">
            <tr>
                <td>
                    弱
                </td>
                <td>
                    中
                </td>
                <td>
                    強
                </td>
            </tr>
        </table>
    </body>
</html>

<html>
    <head>
        <title>apply和call</title>
        <script type="text/javascript">
            var user_name="大天狗";
            function showName(){
                alert(this.user_name);
            }
            showName();
            <!-- function Person(){ -->
                <!-- this.user_name="茨木童子" -->
            <!-- } -->
            <!-- var p=new Person(); -->
            <!-- p.show=showName; -->
            <!-- p.show(); -->
            var p={user_name:'茨木'}; //建立了一個p對象
            showName.apply(p); //用p對象替換了window對象，因此這裏彈出來的是p對象的user_name的值
            showName.call(p);//這裏apply和call做用是同樣的，區別就在於若是函數有參數apply要用數組傳進去，而call是以逗號分開的
        </script>
    </head>
    <body>
        
    </body>
</html>

<html>
    <head>
　　<title>寫遞歸的時候用arguments.callee()來表示遞歸函數自身</title>
        <script type="text/javascript">
            var index=0;
            function myFunction(){
                index++;
                alert(index);
                if(index<5){
                    //myFunction();   //若是是普通函數遞歸，這樣寫和callee的寫法相同
                    arguments.callee();//這個就表明函數自身
                }
            }
            //myFunction();
            //若是函數是個匿名函數
            var p1=function(){
                index++;
                alert(index);
                if(index<5){
                    //p1();// 若是匿名只賦值給p1對象的話是沒問題的，可是若是把匿名函數賦值給了p2對象就不行了，就得用callee的方式來表示函數自己。
                    arguments.callee();//這個就表明函數自身，把匿名
                }
            }
            p1();
            var p2=p1;
            p2();
        </script>
    </head>
    <body>
    
    </body>
</html>

經過js實現人員在表格中的新增與刪除

<html>
    <head>
        <style type="text/css">
            #tbody1 td{
                text-align:center;
            }
        </style>
        <script type="text/javascript">
            
            function deleteCurrentRow(current){
                //先拿到當前點的這一行，current表明的就是button按鈕，它的父節點就是th,th的父節點就是tr。
                var tr=current.parentNode.parentNode;
                //而後再從tbody中把這一行刪除出去
                document.getElementById('tbody1').removeChild(tr);
            }
            window.onload=function(){
                //給新增按鈕註冊一個單擊事件
                document.getElementById('btn1').onclick=function(){
                    //獲取要添加的數據
                    var txName=document.getElementById('txtName').value;
                    var txAge=document.getElementById('txtAge').value;
                    //在tbody中新增一行
                    var currentRow= document.getElementById('tbody1').insertRow(-1);
                    //在新增的行中添加三列
                    currentRow.insertCell(-1).innerHTML=txName;
                    currentRow.insertCell(-1).innerHTML=txAge;
                    //經過下面這種方式建立的按鈕不能直接得到其對象，只能經過這種方式建立onclick事件，這裏的這個this就指的是button。
                    currentRow.insertCell(-1).innerHTML='<input onclick="deleteCurrentRow(this);" type="button" value="刪除" name="name"/>';
                };
            };
        </script>
        
    </head>
    <body>
    <fieldset style="width:300px;">
        <legend>新增人員信息</legend>
        <P>
            姓名：<input type="text" id="txtName"/>
        </P>
        <P>
            年齡：<input type="text" id="txtAge"/>
        </P>
        <P>
            <input type="button" name="name" id="btn1" value="新增"/>
        </P>
        
    </fieldset>
        <legend style="width:300px;text-align:center;">人員信息表</legend>
        <table border="1" cellpadding="0" cellspacing="0" style="width:300px;">
            <thead>
                <tr>
                    <th>
                        姓名
                    </th>
                    <th>
                        年齡
                    </th>
                    <th>
                        刪除
                    </th>
                </tr>
            </thead>
            <tbody id="tbody1">
            </tbody>
        </table>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。