html_day4 隔行換色 全選 二級聯動

1.隔行換色

<thead>
        <tr>
            <th></th>
</tr>
</thead>
    <tbody>
        <tr>
            <td></td>
</tr>
</tbody>
--------------------------------------------
<script>
    window.onload = function(){
        //1.獲取表格
        var tblEle = document.getElementById("tbl");
        //2.獲取表格中tbody里面的行數(長度)
        var len = tblEle.tBodies[0].rows.length;
        //alert(len);
        //3.對tbody里面的行進行遍歷
        for(var i=0;i<len;i++){
            if(i%2==0){
                //4.對偶數行設置背景顏色
                tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
            }else{
                //5.對奇數行設置背景顏色
    tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
            }
        }
    }
</script>
----------------------------------
高亮顯示
<script>
    function changeColor(id,flag){
        if(flag=="over"){
            document.getElementById(id).style.backgroundColor="red";
        }else if(flag=="out"){
            document.getElementById(id).style.backgroundColor="white";
        }
    }
確定事件(onmouseover和onmouseout)并分別為其綁定一個函數
<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">

2.使用過的事件

onfocus/onblur:聚焦離焦事件，用于表單校驗的時候比較合適。
onclick/ondblclick:鼠標單擊和雙擊事件
onkeydown/onkeypress：搜索引擎使用較多
onload：頁面加載事件，所有的其它操作(匿名方式)都可以放到這個綁定的函數里面去。如果是有名稱，那么在html頁面中只能寫一個。
onmouseover/onmouseout/onmousemove：購物網站商品詳情頁。
onsubmit：表單提交事件 ，有返回值，控制表單是否提交。
onchange:當用戶改變內容的時候使用這個事件(二級聯動)

3.全選

獲取編號前面的復選框的狀態(是否選中)
   獲取復選框：var checkAllEle = document.getElementById(“id”)
   獲取復選框的狀態：checkAllEle.checked?

獲取下面所有的復選框：
   document.getElementsByName(“name”);

<script>
   function checkAll(){
       //1.獲取編號前面的復選框
       var checkAllEle = document.getElementById("checkAll");
       //2.對編號前面復選框的狀態進行判斷
       if(checkAllEle.checked==true){
           //3.獲取下面所有的復選框
           var checkOnes = document.getElementsByName("checkOne");
           //4.對獲取的所有復選框進行遍歷
           for(var i=0;i<checkOnes.length;i++){
               //5.拿到每一個復選框，并將其狀態置為選中
               checkOnes[i].checked=true;
           }
       }else{
           //6.獲取下面所有的復選框
           var checkOnes = document.getElementsByName("checkOne");
           //7.對獲取的所有復選框進行遍歷
           for(var i=0;i<checkOnes.length;i++){
               //8.拿到每一個復選框，并將其狀態置為未選中
               checkOnes[i].checked=false;
           }
       }
   }
</script>
HTML代碼：
復選框前面的：
   <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>

下面所有的復選框：
<td><input type="checkbox" name="checkOne"/></td>

4.dom

  • Document:整個html文件都成為一個- -- document文檔
  • Element:所有的標簽都是Element元素
  • Attribute：標簽里面的屬性
  • Text：標簽中間夾著的內容為text文本
  • Node:document、element、attribute、text統稱為節點node.
  • 每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。
Paste_Image.png

后面兩個方法獲取之后需要遍歷！
以下兩個方法很重要，但是在手冊中查不到！
創建文本節點：document.createTextNode()
創建元素節點：document.createElement()

  • html頁面中所有的標簽都是element元素
element.appendChild()   向元素添加新的子節點，作為最后一個子節點。
element.firstChild  返回元素的首個子節點。
element.getAttribute()  返回元素節點的指定屬性值。
element.innerHTML   設置或返回元素的內容。
element.insertBefore()  在指定的已有的子節點之前插入新節點。
element.lastChild   返回元素的最后一個子元素。
element.setAttribute()  把指定屬性設置或更改為指定值。
element.removeChild()   從元素中移除子節點。
element.replaceChild()  替換元素中的子節點。
  • html頁面中所有標簽里面的屬性都是attribute
Paste_Image.png

5.添加城市

<script>
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            //1.獲取ul元素節點
            var ulEle = document.getElementById("ul1");
            //2.創建城市文本節點
            var textNode = document.createTextNode("深圳");//深圳
            //3.創建li元素節點
            var liEle = document.createElement("li");//<li></li>
            //4.將城市文本節點添加到li元素節點中去
            liEle.appendChild(textNode);//<li>深圳</li>
            //5.將li添加到ul中去
            ulEle.appendChild(liEle);
        }
    }
</script>       

    HTML代碼
<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
    <li>北京</li>
    <li>上海</li>
    <li>廣州</li>
</ul>

6.省市二級聯動

事件(onchange)
使用一個二維數組來存儲省份和城市(二維數組的創建？)
獲取用戶選擇的省份(使用方法傳參的方式：this.value)
遍歷數組(獲取省份與用戶選擇的省份比較，如果相同了，繼續遍歷該省份下所有的城市)
創建文本節點和元素節點并進行添加操作

createTextNode()
createElement()
appendChild()
-------
<script>
    //1.創建一個二維數組用于存儲省份和城市
    var cities = new Array(3);
    cities[0] = new Array("武漢市","黃岡市","襄陽市","荊州市");
    cities[1] = new Array("長沙市","郴州市","株洲市","岳陽市");
    cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市");
    cities[3] = new Array("鄭州市","洛陽市","開封市","安陽市");
    
    function changeCity(val){
        
        //7.獲取第二個下拉列表
        var cityEle = document.getElementById("city");
        
        //9.清空第二個下拉列表的option內容
        cityEle.options.length=0;
        
        //2.遍歷二維數組中的省份
        for(var i=0;i<cities.length;i++){
            //注意，比較的是角標
            if(val==i){
                //3.遍歷用戶選擇的省份下的城市
                for(var j=0;j<cities[i].length;j++){
                    //alert(cities[i][j]);
                    //4.創建城市的文本節點
                    var textNode = document.createTextNode(cities[i][j]);
                    //5.創建option元素節點
                    var opEle = document.createElement("option");
                    //6.將城市的文本節點添加到option元素節點
                    opEle.appendChild(textNode);
                    //8.將option元素節點添加到第二個下拉列表中去
                    cityEle.appendChild(opEle);
                }
            }
        }
    }
</script>

Html代碼：
<select onchange="changeCity(this.value)">
    <option>--請選擇--</option>
    <option value="0">湖北</option>
    <option value="1">湖南</option>
    <option value="2">河北</option>
    <option value="3">河南</option>
</select>
<select id="city">
    
</select>

7.一些對象創建

  • javascript內置對象
Paste_Image.png
  • Array對象
Paste_Image.png

數組的特點：
長度可變！數組的長度=最大角標+1

  • Boolean對象
Paste_Image.png

如果value 不寫，那么默認創建的結果為false

  • Date對象
    getTime() 返回 1970 年 1 月 1 日至今的毫秒數。
    解決瀏覽器緩存問題(瀏覽器默認會返回歷史記錄中的網站而不是新的)
  • String對象
match() 找到一個或多個正則表達式的匹配。
substr()    從起始索引號提取字符串中指定數目的字符。
substring() 提取字符串中兩個指定的索引號之間的字符。
例子：
<script>
    var str = "-a-b-c-d-e-f-";
    var str1 = str.substr(2,4);//-b-c
    //alert(str1);
    var str2 = str.substring(2,4);//-b
    alert(str2);
</script>
  • RegExp對象
    正則表達式對象
    test 檢索字符串中指定的值。返回 true 或 false。
  • 全局函數
Paste_Image.png
<script>
    var str = "張三";
    //alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
    //alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89
    
    //alert(decodeURI(encodeURI(str)));//張三
    //alert(decodeURIComponent(encodeURIComponent(str)));//張三
    
    var str1 = "http://www.itheima.cn";
    //alert(encodeURI(str1));//http://www.itheima.cn
    //alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn
    
    //alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn
    //alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn
    
    var str2 = "alert('abc')";
    //alert(str2);
    eval(str2);
    
</script>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,815評論 1贊 92
  • 本章內容 理解包含不同層次節點的 DOM 使用不同的節點類型 克服瀏覽器兼容性問題及各種陷阱 DOM 是針對 HT...
    悶油瓶小張閱讀 668評論 0贊 1
  • 節點層次 DOM 可以將任何 HTML 和 XML 文檔描繪成一個由多層節點構成的結構。節點分為幾種不同的類型，每...
    云之外閱讀 548評論 0贊 1
  • 很多時候，已經晚婚年齡的我，卻有著不甘于平淡愛情的心。我可以像個姐姐一樣去照顧別人，但卻又不甘只是做個姐姐。 ...
    不是很甜的粟米先生閱讀 286評論 0贊 2
  • 每個人都有各自的路，我們曾在路上遇到過各種各樣的人，父母、朋友、親人或愛人。我們以為這些人會陪我們一直走下去，卻發...
    沒扣子的白襯衫閱讀 387評論 0贊 0