一、<thead></thead>，<tbody></tbody>：為了使表頭和表格內容分開設置樣式 1、tbody裡邊有一個rows.length，獲取行數的知識點 2、<thead> <tr> <th></th> </tr> </thead> <tbody>只需將上述的th換為td即可 以一個案 ...
一、<thead></thead>，<tbody></tbody>：為了使表頭和表格內容分開設置樣式
1、tbody裡邊有一個rows.length，獲取行數的知識點
2、<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>只需將上述的th換為td即可
以一個案例說明如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行換色</title> <script> window.onload = function(){ //1.獲取表格 var tblEle = document.getElementById("tbl"); //2.獲取表格中tbody裡面的行數(長度) var len = tblEle.tBodies[0].rows.length; //這裡的.tBodies[0]說明可以有多個tbody，這裡只取第一個 //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> </head> <body> <table border="1" width="500" height="50" align="center" id="tbl"> <thead> <tr> <th>編號</th> <th>姓名</th> <th>年齡</th> </tr> </thead> <tbody> <tr > <td>1</td> <td>張三</td> <td>22</td> </tr> <tr > <td>2</td> <td>李四</td> <td>25</td> </tr> <tr > <td>3</td> <td>王五</td> <td>27</td> </tr> <tr > <td>4</td> <td>趙六</td> <td>29</td> </tr> <tr > <td>5</td> <td>田七</td> <td>30</td> </tr> <tr > <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table> </body> </html>
二、js常見的內置對象
javascript內置對象 1、Array對象 數組的創建：數組的特點：長度可變！數組的長度=最大角標+1 2、Boolean對象 對象創建：
如果value 不寫，那麼預設創建的結果為false 3、Date對象 getTime()；返回 1970 年 1 月 1 日至今的毫秒數。解決瀏覽器緩存問題。
4、Math和number對象 與java裡面的基本一致。 5、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> 6、 RegExp對象：正則表達式對象方法：test；比如：正則.test(字元串)；檢索字元串中指定的值。返回 true 或 false。
三、js全局函數（可直接使用，不同於內置對象：使用方法之前要先創建對象）
以代碼來介紹幾個全局函數：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全局函數</title> <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> </head> <body> </body> </html>
四、js常見案例
1、案例一：使用js完成省市二級聯動的效果
首先，技術分析：
確定事件(onchange)
使用一個二維數組來存儲省份和城市(二維數組的創建？)
獲取用戶選擇的省份(使用方法傳參的方式：this.value)
遍曆數組(獲取省份與用戶選擇的省份比較，如果相同了，繼續遍歷該省份下 所有的城市)
創建文本節點和元素節點併進行添加操作
createTextNode()
createElement()
appendChild()
其次，步驟分析：
第一步：確定事件(onchange)併為其綁定一個函數
第二步：創建一個二維數組用於存儲省份和城市
第三步：獲取用戶選擇的省份
第四步：遍歷二維數組中的省份
第五步：將遍歷的省份與用戶選擇的省份比較
第六步：如果相同，遍歷該省份下所有的城市
第七步：創建城市文本節點
第八步：創建option元素節點
第九步：將城市文本節點添加到option元素節點中去
第十步：獲取第二個下拉列表，並將option元素節點添加進去
第十一步：每次操作前清空第二個下拉列表的option內容。
具體代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊頁面重新佈局</title> <style type="text/css"> .top{ border: 1px solid red; width: 32.9%; height: 50px; float: left; } #clear{ clear: both; } #menu{ border: 1px solid blue; width: 99%; height: 40px; background-color: black; } #menu ul li{ display: inline; color: white; font-size: 19px; } #bottom{ text-align: center; } #contanier{ border: 1px solid red; width: 99%; height: 600px; background: url(../img/regist_bg.jpg); position: relative; } #content{ border: 5px solid gray; width: 50%; height: 60%; position: absolute; top: 100px; left: 300px; background-color: white; padding-top: 50px; } </style> <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內容（清空上一次選擇省份添加進去的optioncity內容） 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> </head> <body> <div> <!--1.logo部分的div--> <div> <!--切分為3個小的div--> <div class="top"> <img src="../img/logo2.png" height="47px"/> </div> <div class="top"> <img src="../img/header.png" height="47px"/> </div> <div class="top" style="padding-top: 15px;height: 35px;"> <a href="#">登錄</a> <a href="#">註冊</a> <a href="#">購物車</a> </div> </div> <!--清除浮動--> <div id="clear"> </div> <!--2.導航欄部分的div--> <div id="menu"> <ul> <li >首頁</li> <li >電腦辦公</li> <li >手機數位</li> <li >孕嬰保健</li> <li >鞋靴箱包</li> </ul> </div> <!--3.中間註冊表單部分div--> <div id="contanier"> <div id="content"> <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white"> <form method="get" action="#" onsubmit="return checkForm()"> <tr> <td colspan="2" align="center"> <font size="5">會員註冊</font> </td> </tr> <tr> <td> 用戶名 </td> <td> <input type="text" name="username" id="username" onfocus="showTips('username','必須以字母開頭')" onblur="check('username','用戶名不能為空')" /><span id="usernamespan"></span> </td> </tr> <tr> <td>密碼</td> <td> <input type="password" name="password" id="password" onfocus="showTips('password','密碼長度不能低於6位！')" onblur="check('password','密碼不能為空！')" /><span id="passwordspan"></span> </td> </tr> <tr> <td>確認密碼</td> <td> <input type="password" name="repassword" /> </td> </tr> <tr> <td>email</td> <td> <input type="text" name="email" id="email" /> </td> </tr> <tr> <td>姓名</td> <td> <input
