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里面的行數(shù)(長(zhǎng)度)
var len = tblEle.tBodies[0].rows.length;
//alert(len);
//3.對(duì)tbody里面的行進(jìn)行遍歷
for(var i=0;i<len;i++){
if(i%2==0){
//4.對(duì)偶數(shù)行設(shè)置背景顏色
tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
//5.對(duì)奇數(shù)行設(shè)置背景顏色
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)并分別為其綁定一個(gè)函數(shù)
<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
2.使用過(guò)的事件
onfocus/onblur:聚焦離焦事件，用于表單校驗(yàn)的時(shí)候比較合適。
onclick/ondblclick:鼠標(biāo)單擊和雙擊事件
onkeydown/onkeypress：搜索引擎使用較多
onload：頁(yè)面加載事件，所有的其它操作(匿名方式)都可以放到這個(gè)綁定的函數(shù)里面去。如果是有名稱，那么在html頁(yè)面中只能寫(xiě)一個(gè)。
onmouseover/onmouseout/onmousemove：購(gòu)物網(wǎng)站商品詳情頁(yè)。
onsubmit：表單提交事件 ，有返回值，控制表單是否提交。
onchange:當(dāng)用戶改變內(nèi)容的時(shí)候使用這個(gè)事件(二級(jí)聯(lián)動(dòng))
3.全選
獲取編號(hào)前面的復(fù)選框的狀態(tài)(是否選中)
獲取復(fù)選框：var checkAllEle = document.getElementById(“id”)
獲取復(fù)選框的狀態(tài)：checkAllEle.checked?
獲取下面所有的復(fù)選框：
document.getElementsByName(“name”);
<script>
function checkAll(){
//1.獲取編號(hào)前面的復(fù)選框
var checkAllEle = document.getElementById("checkAll");
//2.對(duì)編號(hào)前面復(fù)選框的狀態(tài)進(jìn)行判斷
if(checkAllEle.checked==true){
//3.獲取下面所有的復(fù)選框
var checkOnes = document.getElementsByName("checkOne");
//4.對(duì)獲取的所有復(fù)選框進(jìn)行遍歷
for(var i=0;i<checkOnes.length;i++){
//5.拿到每一個(gè)復(fù)選框，并將其狀態(tài)置為選中
checkOnes[i].checked=true;
}
}else{
//6.獲取下面所有的復(fù)選框
var checkOnes = document.getElementsByName("checkOne");
//7.對(duì)獲取的所有復(fù)選框進(jìn)行遍歷
for(var i=0;i<checkOnes.length;i++){
//8.拿到每一個(gè)復(fù)選框，并將其狀態(tài)置為未選中
checkOnes[i].checked=false;
}
}
}
</script>
HTML代碼：
復(fù)選框前面的：
<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
下面所有的復(fù)選框：
<td><input type="checkbox" name="checkOne"/></td>
4.dom
- Document:整個(gè)html文件都成為一個(gè)- -- document文檔
- Element:所有的標(biāo)簽都是Element元素
- Attribute：標(biāo)簽里面的屬性
- Text：標(biāo)簽中間夾著的內(nèi)容為text文本
- Node:document、element、attribute、text統(tǒng)稱為節(jié)點(diǎn)node.
- 每個(gè)載入瀏覽器的 HTML 文檔都會(huì)成為 Document 對(duì)象。
Paste_Image.png
后面兩個(gè)方法獲取之后需要遍歷！
以下兩個(gè)方法很重要，但是在手冊(cè)中查不到！
創(chuàng)建文本節(jié)點(diǎn)：document.createTextNode()
創(chuàng)建元素節(jié)點(diǎn)：document.createElement()
- html頁(yè)面中所有的標(biāo)簽都是element元素
element.appendChild() 向元素添加新的子節(jié)點(diǎn)，作為最后一個(gè)子節(jié)點(diǎn)。
element.firstChild 返回元素的首個(gè)子節(jié)點(diǎn)。
element.getAttribute() 返回元素節(jié)點(diǎn)的指定屬性值。
element.innerHTML 設(shè)置或返回元素的內(nèi)容。
element.insertBefore() 在指定的已有的子節(jié)點(diǎn)之前插入新節(jié)點(diǎn)。
element.lastChild 返回元素的最后一個(gè)子元素。
element.setAttribute() 把指定屬性設(shè)置或更改為指定值。
element.removeChild() 從元素中移除子節(jié)點(diǎn)。
element.replaceChild() 替換元素中的子節(jié)點(diǎn)。
- html頁(yè)面中所有標(biāo)簽里面的屬性都是attribute
Paste_Image.png
5.添加城市
<script>
window.onload = function(){
document.getElementById("btn").onclick = function(){
//1.獲取ul元素節(jié)點(diǎn)
var ulEle = document.getElementById("ul1");
//2.創(chuàng)建城市文本節(jié)點(diǎn)
var textNode = document.createTextNode("深圳");//深圳
//3.創(chuàng)建li元素節(jié)點(diǎn)
var liEle = document.createElement("li");//<li></li>
//4.將城市文本節(jié)點(diǎn)添加到li元素節(jié)點(diǎn)中去
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.省市二級(jí)聯(lián)動(dòng)
事件(onchange)
使用一個(gè)二維數(shù)組來(lái)存儲(chǔ)省份和城市(二維數(shù)組的創(chuàng)建？)
獲取用戶選擇的省份(使用方法傳參的方式：this.value)
遍歷數(shù)組(獲取省份與用戶選擇的省份比較，如果相同了，繼續(xù)遍歷該省份下所有的城市)
創(chuàng)建文本節(jié)點(diǎn)和元素節(jié)點(diǎn)并進(jìn)行添加操作
createTextNode()
createElement()
appendChild()
-------
<script>
//1.創(chuàng)建一個(gè)二維數(shù)組用于存儲(chǔ)省份和城市
var cities = new Array(3);
cities[0] = new Array("武漢市","黃岡市","襄陽(yáng)市","荊州市");
cities[1] = new Array("長(zhǎng)沙市","郴州市","株洲市","岳陽(yáng)市");
cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市");
cities[3] = new Array("鄭州市","洛陽(yáng)市","開(kāi)封市","安陽(yáng)市");
function changeCity(val){
//7.獲取第二個(gè)下拉列表
var cityEle = document.getElementById("city");
//9.清空第二個(gè)下拉列表的option內(nèi)容
cityEle.options.length=0;
//2.遍歷二維數(shù)組中的省份
for(var i=0;i<cities.length;i++){
//注意，比較的是角標(biāo)
if(val==i){
//3.遍歷用戶選擇的省份下的城市
for(var j=0;j<cities[i].length;j++){
//alert(cities[i][j]);
//4.創(chuàng)建城市的文本節(jié)點(diǎn)
var textNode = document.createTextNode(cities[i][j]);
//5.創(chuàng)建option元素節(jié)點(diǎn)
var opEle = document.createElement("option");
//6.將城市的文本節(jié)點(diǎn)添加到option元素節(jié)點(diǎn)
opEle.appendChild(textNode);
//8.將option元素節(jié)點(diǎn)添加到第二個(gè)下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
Html代碼：
<select onchange="changeCity(this.value)">
<option>--請(qǐng)選擇--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
7.一些對(duì)象創(chuàng)建
- javascript內(nèi)置對(duì)象
Paste_Image.png
- Array對(duì)象
Paste_Image.png
數(shù)組的特點(diǎn)：
長(zhǎng)度可變！數(shù)組的長(zhǎng)度=最大角標(biāo)+1
- Boolean對(duì)象
Paste_Image.png
如果value 不寫(xiě)，那么默認(rèn)創(chuàng)建的結(jié)果為false
- Date對(duì)象
getTime() 返回 1970 年 1 月 1 日至今的毫秒數(shù)。
解決瀏覽器緩存問(wèn)題(瀏覽器默認(rèn)會(huì)返回歷史記錄中的網(wǎng)站而不是新的) - String對(duì)象
match() 找到一個(gè)或多個(gè)正則表達(dá)式的匹配。
substr() 從起始索引號(hào)提取字符串中指定數(shù)目的字符。
substring() 提取字符串中兩個(gè)指定的索引號(hào)之間的字符。
例子：
<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對(duì)象
正則表達(dá)式對(duì)象
test 檢索字符串中指定的值。返回 true 或 false。 - 全局函數(shù)
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>
