06-初學JavaScript
阿新 • • 發佈：2020-12-10
今天是JavaScript基礎最後一部分了，這幾天學的可能有些遺漏 之後再補上
一、window物件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="window.confirm('是否確認');">確認框</button>
<button onclick="window.prompt('請輸入');">輸入框</button>
<button onclick="window.alert('123');">彈出框</button>
<button onclick="window.open('http://127.0.0.1:8020/web02/html2/02-css3.0%E5%85%A5%E9%97%A8.html')">開啟新視窗</button>
<button onclick="window.close()">關閉新視窗</button>
<button onclick="window.print()">列印</button>
<script>
// alert(window.parseInt("12.5"))
alert(this)
</script>
</body>
</html>
window 是客戶端瀏覽器物件模型的基類，window 物件是客戶端 JavaScript 的全域性物件。一個 window 物件實際上就是一個獨立的視窗，對於框架頁面來說，瀏覽器視窗每個框架都包含一個 window 物件。
可以當做一個全域性作用域
二、Navigator物件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> // alert(navigator.userAgent) alert(navigator.language) </script> </body> </html>
一個是檢視使用者瀏覽器資訊 一個是語言 具體什麼作用還不知道 ，只是知道有這兩個方法
三、screen物件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> alert(screen.width); alert(screen.height); </script> </body> </html>
檢視裝置高和寬
四、history物件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button type="button" value="後退" onclick="history.back()">後退</button> <button type="button" value="前進" onclick="history.forward()">前進</button> <button type="button" value="前進" onclick="history.go(-1)">跳到</button> </body> </html>
瀏覽器前進後退
五、loaction
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button onclick="location.href = '04-history物件.html'">跳到</button> <button onclick="location.reload()">重新整理</button> </body> </html>
重新整理 跳轉 這些具體作用還不是很清楚
六、三級聯動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="pr">
<option value="">選擇省份</option>
</select>
<select id="city">
<option value="">選擇城市</option></select>
<select id="home">
<option value="">選擇home</option></select>
<script>
var con = [
{state:'遼寧',city:['瀋陽','大陸','葫蘆島'],home:['123','456','789']},
{state:'遼寧1',city:['瀋陽1','大陸1','葫蘆島1']},
{state:'遼寧2',city:['瀋陽2','大陸2','葫蘆島2']}
]
window.onload = function (){
var pr = document.getElementById('pr');
var cy = document.getElementById('city');
var hm = document.getElementById('home');
for (var i = 0; i <con.length; i++) {
var opt = new Option(con[i].state);
pr.add(opt);
}
pr.onchange = function (){
cy.options.length = 1;//來控制每次選完第一個以後來選第二個
var index = pr.selectedIndex;
if(index == 0){
return ;
}
var citys = con[index-1].city;
for (var i = 0; i < citys.length; i++) {
// console.log(citys[i]);
var opt = new Option(citys[i]);
cy.add(opt);
}
}
cy.onchange = function (){
hm.options.length=1;
var index1 = cy.selectedIndex;
if(index1 == 0){
return ;
}
var homes = con[index1-1].home;
for (var i = 0; i < homes.length; i++) {
// console.log(citys[i]);
var opt = new Option(homes[i]);
hm.add(opt);
}
}
}
</script>
</body>
</html>
其中 有幾個方法值得注意一下
var opt = new Option(con[i].state);
pr.add(opt);
把陣列轉化成 下拉列表的值
var index1 = cy.selectedIndex; 獲取下拉框的下標