JavaScript學習記錄七
阿新 • • 發佈：2018-12-10
Document物件
* JavaScript分三個部分: * ECMAScript標準:JS的基本的語法 * DOM:Document Object Model --->文件物件模型----操作頁面的元素 * BOM:Browser Object Model----->瀏覽器物件模型---操作的是瀏覽器 * * DOM: 文件物件模型 * * 文件:把一個html檔案看成是一個文件,由於萬物皆物件,所以把這個文件看成是一個物件 * XML檔案也可以看成是一個文件 * * HTML:展示資訊,展示資料的 * XML:側重於儲存資料 * html檔案看成是一個文件,那麼這個文件看成是一個物件,文件中的所有的標籤都可以看成是一個物件 * * 頁面中的每個標籤,都是一個元素(element),每個元素都可以看成是一個物件 * 標籤可以巢狀,標籤中有標籤,元素中有元素 * * html頁面中都有一個根標籤--html--也叫根元素 * * 頁面中的有一個根元素(標籤--html),裡面有很多的元素(有很多的標籤,有很多的物件) * * 文件:一個頁面就是一個文件 * * 元素(element):頁面中的所有的標籤都是元素,元素可以看成是物件 * * 節點(node):頁面中所有的內容都是節點:標籤,屬性,文字 * root:根 * * * 頁面就是文件--document,文件中有根元素:html * html--->head *------>body--->其他的標籤 * * 由文件及文件中的所有的元素(標籤)組成的
一個樹形結構圖,叫樹狀圖(DOM樹)
案例：簡單的文件物件模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$永遠的24k純帥$</title> </head> <body> <input type="button" value="顯示效果" id="btn"/> <script> //最終極的點選按鈕彈出對話方塊的程式碼 document.getElementById("btn").onclick=function () { alert("哈哈,我又變帥了"); }; </script> </body> </html>
第二種實現(通過定義函式的方式來實現)
*注意那個不加括號的實現
function f2() { alert("嘎嘎"); } //根據id獲取這個標籤(元素) var btnObj=document.getElementById("btn"); //為按鈕註冊點選事件 btnObj.onclick=f2;//不加括號 //----------------------------------------- //最終版 var btnObj1=document.getElementById("btn1"); //為該元素註冊點選事件 btnObj1.onclick=function () { alert("哦,這真是太好了"); };
案例：點選按鈕顯示圖片
var btnObj=document.getElementById("btn");
//為按鈕註冊點選事件,新增事件處理函式
btnObj.onclick=function () {
//根據id獲取圖片的標籤,設定圖片的src屬性值
var imObj=document.getElementById("im");
imObj.src="images/liuyan.jpg";
//設定圖片的大小
imObj.width="300";
imObj.height="400";
};案例：點選修改文字內容
*凡是成對的標籤,中間的文字內容,設定的時候,都使用innerText這個屬性的方式
<input type="button" value="設定p的內容" id="btn"/>
<p id="p1">我是一個p標籤</p>
<script>
//案例:點選按鈕,修改p標籤的顯示內容
document.getElementById("btn").onclick=function () {
//根據id獲取p標籤,設定內容
document.getElementById("p1").innerText="這是一個p";
};
</script>案例：點選按鈕修改a標籤的地址和熱點文字
document.getElementById("btn").onclick = function () {
//根據id獲取超連結,設定href屬性
var aObj = document.getElementById("ak");
aObj.href = "http://www.itcast.cn";
//根據id獲取超連結,設定文字內容
aObj.innerText = "傳智播客";
};//document.getElementsByTagName("標籤的名字");返回的是一個偽陣列, //無論獲取的是一個標籤,還是多個標籤,最終都是在陣列中儲存的，可以通過陣列下標的方式來獲取指定的元素
document.getElementById("btn").onclick=function () {
//根據標籤名字獲取標籤
var pObjs= document.getElementsByTagName("p");
獲得指定ID下的p標籤
//var pObjs=document.getElementById("dv1").getElementsByTagName("p");
//迴圈遍歷這個陣列
for(var i=0;i<pObjs.length;i++){
//每個p標籤,設定文字
pObjs[i].innerText="我們都是p";
}案例：修改文字框的值
<input type="button" value="修改文字框的值" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script>
//根據id獲取按鈕,為按鈕註冊點選事件,新增事件處理函式
document.getElementById("btn").onclick = function () {
//獲取所有的文字框
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
//判斷這個元素是不是按鈕
if (inputs[i].type != "button") {
inputs[i].value = "其實,助教喜歡小蘇";
}
}
};
</script>案例：在某個元素的事件中,自己的事件中的this就是當前的這個元素物件
var btnObj = document.getElementById("btn");
btnObj.onclick = function () {
//修改按鈕的value屬性
this.value="我是按鈕,誰咬我,我就咬誰";
this.type="text";
this.id="btn2";
};案例：點選圖片修改寬和高
var imgObj = document.getElementById("im");
imgObj.onclick = function () {
this.width = "200";
this.height = "300";
};案例：關於懷孕。。
<input type="button" value="沒懷孕"/>
<input type="button" value="沒懷孕"/>
<input type="button" value="沒懷孕"/>
<input type="button" value="沒懷孕"/>
<script>
//獲取所有的按鈕,分別註冊點選事件
var btnObjs = document.getElementsByTagName("input");
//迴圈遍歷所有的按鈕
for (var i = 0; i < btnObjs.length; i++) {
//為每個按鈕都要註冊點選事件
btnObjs[i].onclick = function () {
//把所有的按鈕的value值設定為預設的值:沒懷孕
for (var j = 0; j < btnObjs.length; j++) {
btnObjs[j].value = "沒懷孕";
}
//當前被點選的按鈕設定為:懷孕了
this.value = "懷孕了";
};案例：點選求換圖片
<a id="ak" href="images/1.jpg"><img src="images/1-small.jpg" alt="" id="im"></a>
<script>
//點選圖片標籤,設定圖片標籤的src路徑為超連結中大圖的路徑
document.getElementById("im").onclick=function () {
this.src=document.getElementById("ak").href;
return false;
};案例：點選切換圖片
<input type="button" value="顯示大圖" id="btn"/>
<img src="images/1-small.jpg" alt="" id="im">
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick=function () {
my$("im").src="images/1.jpg";
};案例：單選
*規律:在表單標籤中,如果屬性和值只有一個,並且值是這個屬性本身,那麼 *那麼,在寫js程式碼,DOM操作的時候,這個屬性值,是布林型別就可以了
<input type="radio" value="2" name="sex" id="rad1"/>女
<input type="radio" value="3" name="sex"/>保密
<script>
function my$(id) {
return document.getElementById(id);
}
my$("btn1").onclick = function () {
my$("rad1").checked = true;
};案例：下拉框
*注：這裡引入了common.js,可以直接使用my$
<input type="button" value="點菜" id="btn"/>
<select name="" id="ss">
<option value="1">油炸榴蓮</option>
<option value="2">爆炒臭豆腐</option>
<option value="3">清蒸助教</option>
<option value="4" id="op1">涼拌班主任</option>
<option value="5">紅燒小蘇</option>
</select>
<script src="common.js"></script>
<script>
my$("btn").onclick=function () {
//點選按鈕選擇菜
my$("op1").selected=true;
};
</script>案例：多行文字域修改值
<textarea name="" id="tt" cols="30" rows="10" readonly="readonly" >
註冊使用者的協議:
某人問智者,
大師:您覺得怎麼做才是最快樂的?
</textarea>
<input type="button" value="註冊" id="btn2"/>
<script>
//disabled=====>這個屬性是禁用的,
//html中屬性和值是自己的,並且只有一個的,其實,可以只寫這個屬性,不用賦值
my$("btn2").onclick=function () {
my$("tt").value="嘎嘎";//推薦用value,因為看成了是表單的標籤
//my$("tt").innerText="哈哈";
};案例：設定樣式
<input type="button" value="設定樣式" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//凡是css中這個屬性是多個單詞的寫法,在js程式碼中DOM操作的時候.把-幹掉,後面的單詞的首字母大寫即可
//點選按鈕,修改div的寬,高,背景顏色
my$("btn").onclick = function () {
my$("dv").style.width = "300px";
my$("dv").style.height = "200px";
my$("dv").style.backgroundColor = "pink";
};
</script>案例：顯示和隱藏
<input type="button" value="隱藏" id="btn"/>
<input type="button" value="顯示" id="btn2"/>
//根據id獲取按鈕,註冊點選事件,新增事件處理函式
my$("btn").onclick=function () {
my$("dv").style.display="none";
};
my$("btn2").onclick=function () {
my$("dv").style.display="block";
};案例：設定樣式
*注：在js程式碼中DOM操作的時候,設定元素的類樣式,不用class關鍵字,應該使用,className
<style>
.cls {
width: 300px;
height: 200px;
background-color: yellow;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="button" value="設定樣式" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//設定div的樣式
my$("btn").onclick = function () {
// var dvObj = my$("dv");
// dvObj.style.width = "300px";
// dvObj.style.height = "300px";
// dvObj.style.backgroundColor = "yellow";
// dvObj.style.border = "10px solid red";
//在js程式碼中DOM操作的時候,設定元素的類樣式,不用class關鍵字,應該使用,className
//my$("dv").className="cls";案例：通過類樣式來控制顯示和隱藏
<style>
div {
width: 300px;
height: 200px;
background-color: yellow;
border: 2px solid red;
}
.cls {
display: none;
}
</style>
</head>
<body>
<input type="button" value="隱藏" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//點選按鈕,通過類樣式的方式設定div的顯示和隱藏
my$("btn").onclick = function () {
// console.log(my$("dv").className);
//判斷的是div是否應用了類樣式
if (my$("dv").className != "cls") {
//現在是顯示的,應該隱藏
my$("dv").className = "cls";
this.value = "顯示";
} else {
//隱藏的狀態----立刻顯示
my$("dv").className = "";
this.value = "隱藏";
}
};
</script>案例：頁面開關燈
<style>
.cls {
background-color: black;
}
</style>
</head>
<body id="bd">
<input type="button" value="開/關燈" id="btn"/>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
//獲取body標籤
document.body.className = document.body.className != "cls" ? "cls" : "";
};