1、案例一：在末尾添加節點(*****)
2、案例二：動態顯示時間
3、案例三：全選練習
4、案例四：下拉列表左右選擇
5、案例五：省市聯動
6、案例六：動態生成表格
============================================
1、案例一：在末尾添加節點(*****)
** 創建標籤 createElement方法
** 創建文本 createTextNode方法
** 把文本添加到標籤下面 appendChild方法（剪切粘貼效果）
2、案例二：動態顯示時間
* 得到當前的時間
var date = new Date(); //得到不是常規的格式
var d1 = date.toLocaleString(); //格式化
* 需要讓頁面每一秒獲取時間
setInterval方法 定時器
* 顯示到頁面上
每一秒向div裏面寫一次時間
* 使用innerHTML屬性
* 代碼
function getD1() {
//當前時間
var date = new Date();
//格式化
var d1 = date.toLocaleString();
//獲取div
var div1 = document.getElementById("times");
div1.innerHTML = d1;
}
//使用定時器實現每一秒寫一次時間
setInterval("getD1();",1000);
3、案例三：全選練習
** 使用複選框上面一個屬性判斷是否選中
- checked屬性
- checked=true：選中
- checked=false：不選中
* 創建一個頁面
** 複選框和按鈕
- 四個複選框表示愛好
- 還有一個複選框操作 全選和選不選，也有一個事件
** 三個按鈕，分別有事件
- 全選
- 全不選
- 反選
* 全選操作
步驟：
/*
1、獲取要操作的複選框
- 使用getElementsByName()
2、返回是數組，
- 屬性 checked判斷複選框是否選中
checked = true; //表示選中
checked = false;//表示不選中
- 遍歷數組，得到的是每一個checkbox
* 把每一個checkbox屬性checked=true
*/
* 全不選操作
步驟
/*
1、獲取到要操作的複選框
2、返回的是數組，遍歷數組
3、得到每一個複選框
4、設置複選框的屬性 checked=false
*/
* 反選操作
步驟
/*
1、獲取到要操作的複選框
2、返回數組，遍歷數組
3、得到每一個複選框
4、判斷當前的複選框是選中還是不選中
- if(love1.checked == true) {}
5、如果選中，屬性checked設置成false，否則，設置成true
*/
* 使用複選框實現全選和全不選
步驟
/*
1、得到上面那個複選框
- 通過id獲取到
2、判斷這個複選框是否是選中
- if條件，checked==true
3、如果是選中，下面是全選
4、如果不是選中，下面是全不選
*/
4、案例四：下拉列表左右選擇
* 下拉選擇框
<select>
<option>111</option>
<option>111</option>
</select>
* 創建一個頁面
** 兩個下拉選擇框
- 設置屬性 multiple屬性，multiple="multiple" 表示展示全部下拉框內容
** 四個按鈕，有事件
* 選中添加到右邊
步驟
/*
1、獲取select1裏面的option
- getElementsByTagName()返回是數組
- 遍歷數組，得到每一個option
2、判斷option是否被選中
- 屬性 selected，判斷是否被選中
** selected= true: 選中
** selected= false：沒有選擇
3、如果是選中，把選擇的添加到右邊去
4、得到select2
5、添加選擇的部分
- appendChild方法
（注意在添加的過程中appendChild方法是剪切效果，選中的數組長度會發生變化，解決辦法：每次只取第一個數據即可）
*/
* 全部添加到右邊
步驟
/*
1、獲取第一個select下面的option對象
2、返回數組，遍歷數組
3、得到每一個option對象
4、得到select2
5、添加到select2下面
- appendChild方法
*/
* 選中添加到左邊
步驟
/*
1、獲取select2裏面的option對象
2、返回是數組，遍歷數組
3、得到每一個option對象
4、判斷option是否被選中
- if條件 屬性 selected == true：選擇
5、獲取select1
6、添加到select1裏面
- 使用appendChild方法
*/
* 全部添加到左邊
步驟
/*
1、獲取select2裏面的option對象
2、返回是數組，遍歷數組
3、得到每一個option對象
4、獲取到select1
5、添加到select1裏面
- 使用appendChild方法
*/
5、案例五：省市聯動
* 創建一個頁面，有兩個下拉選擇框
* 在第一個下拉框裏面有一個事件 ：改變事件 onchange事件
- 方法add1(this.value);表示當前改變的option裏面的value值
* 創建一個二維數組，存儲數據
* 每個數組中第一個元素是國家名稱，後面的元素是國家裏面的城市
/*
1、遍歷二維數組
2、得到也是一個數組（國家對應關係）
3、拿到數組中的第一個值和傳遞過來的值做比較
4、如果相同，獲取到第一個值後面的元素
5、得到city的select
6、添加過去（使用）appendChild方法
- 創建option（三步）
*/
注意：
由於每次都要向city裏面添加option
第二次添加，會追加。
* 每次添加之前，先清空一下city下的所有option節點！
6、案例六：動態生成表格
*創建一個頁面：兩個輸入框和一個按鈕
*代碼和步驟
/*
1、得到輸入的行和列的值
2、生成表格
** 循環行
** 在行裏面循環單元格
3、顯示到頁面上
- 把表格的代碼設置到div裏面
- 使用innerHTML屬性
*/
//獲取輸入的行和列
var h = document.getElementById("h").value;
var l = document.getElementById("l").value;
//把表格代碼放到一個變量裏面
var tab = "<table border='1' bordercolor='blue'>";
//循環行
for(var i=1;i<=h;i++) {
tab += "<tr>";
//循環列
for(var j=1;j<=l;j++) {
tab += "<td>aaaaaaa</td>"
}
tab += "</tr>";
}
tab += "</table>";
//alert(tab);
//得到div標籤
var divv = document.getElementById("divv");
//把table的代碼設置到div裏面去
divv.innerHTML = tab;
或者
<script type="text/javascript">
var table = document.createElement("table");
table.border='1' ;
table.style.borderColor='blue';
for(var i=1;i<=5;i++) {
var tr = document.createElement("tr");
for(var j=1;j<=5;j++) {
var td = document.createElement("td");
var text = document.createTextNode("aaaaaaa");
td.setAttribute("name","hello");
td.setAttribute("id","id"+i+j);
td.setAttribute("onclick","fun(this);");
td.appendChild(text);
tr.appendChild(td);
}
table.appendChild(tr);
}
var mytable2 = document.getElementById("mytable2");
mytable2.appendChild(table);
function fun(e){
alert(e.innerHTML);
}
</script>