1.DOM的概念
2.為元素注冊事件
3.案例：點擊按鈕顯示圖片及設置寬高
4.案例：點擊按鈕設置p標簽的文本內容
5.案例：點擊按鈕修改超鏈接的地址及熱點文字
6.案例: 點擊按鈕設置多個p標簽內容
7.案例：點擊按鈕修改圖片的alt和title屬性
8.案例: 點擊按鈕修改多個文本框的值
9.案例：點擊圖片修改自身的寬高
10.案例：按鈕的排他功能
11.案例：點小圖邊大圖
12.案例：點擊按鈕選擇性別和興趣
13.案例：下拉選擇框
14.案例：文本域
15.案例：點擊按鈕設置div的樣式
16.案例：點擊按鈕，顯示或隱藏div
17.案例：通過類樣式class設置div樣式
18.案例：通過類樣式class設置div顯示或隱藏
19.點擊div改變其背景色（隨機）
1.DOM的概念 <--返回目錄
* JavaScript分三部分
- ECMAScript標准:JS的基本語法
- DOM：Document object Model 文檔對象模型--操作頁面的元素
- BOM：Browser Object Model 瀏覽器對象模型--操作的是瀏覽器
* DOM文檔對象模型--操作頁面元素
- 文檔document：把一個html文件看成一個文檔，由於萬物皆對象，所以把這個文檔看成是一個對象
- 元素element：html頁面的每個標簽，都是一個元素，每個元素都可以看成一個對象
- 節點node：頁面中所有的內容都是節點，標簽，屬性，文本
- 屬性
2、為元素注冊事件 <--返回目錄
* 事件：就是一件事，有觸發、響應、事件源
按鈕被點擊，彈出對話框
按鈕-->事件源
點擊-->事件名字
被點了-->觸發了
彈框了-->響應
* 點擊按鈕，彈出對話框，代碼1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" value="彈框" onclick="alert('哈哈哈~')"/>
</body>
</html>
* 點擊按鈕，彈出對話框，代碼2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" value="彈框" id="btn" onclick="fun()"/>
<script type="text/javascript">
function fun(){
alert("嘎嘎嘎~");
}
</script>
</body>
</html>
* 點擊按鈕，彈出對話框，代碼3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" value="彈框" id="btn"/>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
alert("呵呵呵~");
};
</script>
</body>
</html>
3、案例：點擊按鈕顯示圖片及設置寬高 <--返回目錄
點擊按鈕顯示圖片, 點擊按鈕的時候設置img標簽的src屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<img src="" id="imgId"/>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var ele = document.getElementById("imgId");
ele.src="a.jpg";
ele.width="300";//注意，img標簽的width的值300沒有單位px
ele.height="280";
};
</script>
</body>
</html>
4、案例：點擊按鈕設置p標簽的文本內容 <--返回目錄
凡是成對的標簽，中間的文本內容，設置的時候，都使用innerText屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<p id="pId"></p>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var ele = document.getElementById("pId");
ele.innerText="文本";
};
</script>
</body>
</html>
5、案例：點擊按鈕修改超鏈接的地址及熱點文字 <--返回目錄
熱點文字：即<a>熱點文字</>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<a href="" id="aId"></a>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var ele = document.getElementById("aId");
ele.href="http://www.baidu.com"; //注意http不可以省略
ele.innerText="百度";
};
</script>
</body>
</html>
6、案例:點擊按鈕設置多個p標簽內容 <--返回目錄
如何獲取某個div里面的所以p標簽
var eles = document.getElementById("div1Id").getElementsByTagName("p");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<div id="div1Id">
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
</div>
<div id="div2Id">
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var eles = document.getElementById("div1Id").getElementsByTagName("p");
for(var i=0;i<eles.length;i++){
eles[i].innerText="p標簽文本";
}
};
</script>
</body>
</html>
7、案例：點擊按鈕修改圖片的alt和title屬性 <--返回目錄
title:鼠標懸停在圖片上時顯示的信息
alt：圖片掛了時顯示的信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<img src="a.jpg" width="300" height="280" />
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var ele = document.getElementsByTagName("img")[0];
ele.alt="圖片掛了時的信息";
ele.title="標題";
};
</script>
</body>
</html>
8、案例:點擊按鈕修改多個文本框的值 <--返回目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" value="按鈕" id="btn"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var eles = document.getElementsByTagName("input");
for(var i=0;i<eles.length;i++){
if(eles[i].type=="text"){
eles[i].value="文本框輸入的值";
}else if(eles[i].type=="button"){
eles[i].value="我是個按鈕"; }
}
};
</script>
</body>
</html>
9、案例：點擊圖片修改自身的寬高 <--返回目錄
對綁定事件的元素自身進行修改，可以使用this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<img src="a.jpg" width="500px"/>
<script type="text/javascript">
var ele = document.getElementsByTagName("img")[0];
ele.onclick=function(){
this.width="300";//對綁定事件的元素自身進行修改，可以使用this
};
</script>
</body>
</html>
10、案例：按鈕的排他功能 <--返回目錄
需求：3個按鈕，按鈕的默認value值是沒被點，點擊按鈕，該按鈕value值為被點了；
點擊另外一個按鈕，該按鈕value值為被點了，其他的value值變成默認值。
做兩件事：第一、將所有按鈕value值設置為"沒被點"；第二、將當前點擊的按鈕的value值設置為"被點了"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" value="沒被點" style="background-color: #ddd"/>
<input type="button" value="沒被點" style="background-color: #ddd"/>
<input type="button" value="沒被點" style="background-color: #ddd"/>
<script type="text/javascript">
var eles = document.getElementsByTagName("input");
for(var i=0;i<eles.length;i++){
eles[i].onclick=function(){
//將所有按鈕value值設置為"沒被點"
for(var j=0;j<eles.length;j++){
eles[j].value="沒被點";
eles[j].style="background-color:#ddd";
}
this.value="被點了";//注意：這里this不能用eles[i]，因為為所有按鈕注冊完事件后i=3了
this.style="background-color:red";
};
}
</script>
</body>
</html>
11、案例：點小圖變大圖 <--返回目錄
<a href="a.jpg"><img src="a-small.jpg"></a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<a href="a.jpg" id="aId"><img src="a-small.jpg" id="imgId"></a>
<script type="text/javascript">
//點擊圖片標簽，設置圖片標簽的src路徑為超鏈接中大圖的路徑
document.getElementById("imgId").onclick=function(){
this.src=document.getElementById("aId").href;
//return false;//頁面url不變
};
</script>
</body>
</html>
12、案例：點擊按鈕選擇性別和興趣 <--返回目錄
document.getElementById().checked=true; //被選中
true可以用"checked"替換，但是瀏覽器也會把"checked"解析成true
13、案例：下拉選擇框 <--返回目錄
document.getElementById().selected=true; //被選中
14、案例：文本域 <--返回目錄
* disabled="disabled"
* readonly="readonly"
* document.getElementById().value="哈哈";//推薦使用這種方法，改變文本域內容
* document.getElementById().innerText="呵呵";//也可以改變文本域內容
15、案例：點擊按鈕設置div的樣式 <--返回目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" id="btn" value="按鈕"/>
<div id="divId"></div>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
document.getElementById("divId").style.width="200px";
document.getElementById("divId").style.height="200px";
//經驗：css中background-color在js中寫成backgroundColor
document.getElementById("divId").style.backgroundColor="hotpink";
//document.getElementById("divId").style="width:200px;height:200px;background-color:green";
};
</script>
</body>
</html>
16、案例：點擊按鈕，顯示或隱藏div <--返回目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<input type="button" id="btn" value="顯示" />
<div id="divId"></div>
<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick=function(){
var divEle = document.getElementById("divId");
if(this.value=="顯示"){
divEle.style="width:200px;height:200px;background-color:green";
//divEle.style.display=true;
divEle.style.display="block";
this.value="隱藏";
}else if(this.value=="隱藏"){
divEle.style.display="none";
this.value="顯示";
}
};
</script>
</body>
</html>
17、案例：通過類樣式class設置div樣式 <--返回目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
<style type="text/css">
.cls1{
width:200px;
height: 200px;
background-color: yellow;
}
.cls2{
width:300px;
height: 300px;
background-color: hotpink;
border:2px solid blue;
}
</style>
</head>
<body>
<input type="button" id="btn" value="按鈕" />
<div id="divId" class="cls1"></div>
<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick=function(){
document.getElementById("divId").className="cls2";
};
</script>
</body>
</html>
18、案例：通過類樣式class設置div顯示或隱藏 <--返回目錄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
<style type="text/css">
div{
width:200px;
height: 200px;
background-color: yellow;
}
.cls{
display: none;
}
</style>
</head>
<body>
<input type="button" id="btn" value="隱藏" />
<div id="divId" ></div>
<script type="text/javascript">
var ele = document.getElementById("btn");
var divEle = document.getElementById("divId");
ele.onclick=function(){
if(divEle.className != "cls"){//div為顯示狀態
this.value="顯示";
divEle.className="cls";
}else{//div為隱藏狀態
this.value="隱藏";
divEle.className="";
}
};
</script>
</body>
</html>
19.點擊div改變其背景色（隨機） <--返回目錄
<!DOCTYPE html> <html> <head> <title>標題</title> <style type="text/css"> #box { background-color: #342; width: 200px; height: 200px; } </style> </head> <body> <div id="box"></div> </body> <script type="text/javascript"> function getRandomStr(length) { if (!length) length = 1 const strArray = ['0', '1', '2', '3', '4', '5', '6' ,'7' ,'8', '9', 'a', 'b', 'c', 'd', 'e', 'f'] let str = '' for (let i = 0; i < length; i++) { str += strArray[parseInt(Math.random() * 16)] } return str } function randomColor(ele) { const color = '#' + getRandomStr(6) console.log(`color=${color}`) ele.style.backgroundColor = color } const ele = document.getElementById('box') ele.onclick = function() { randomColor(this) } </script> </html>
---