<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作屬性</title>
<script type="text/javascript">
/*
DOM是為了操作文檔（網(wǎng)頁）的API姊途，document是它的一個(gè)對(duì)象
BOM是為了操作瀏覽器的API许布，window是它的一個(gè)對(duì)象
常用BOM對(duì)象還有：alert聂使、定時(shí)器等
*/
//整個(gè)文檔加載完之后執(zhí)行一個(gè)匿名函數(shù)
window.onload = function(){
document.getElementById('div1').title = "我看到了趣席！";
//變量oA代表整個(gè)a標(biāo)簽
var oA = document.getElementById('link1');
oA.;
oA.title = "跳轉(zhuǎn)到騰訊網(wǎng)"
alert(oA.id);
alert(oA.title);
}
</script>
</head>
<body>
<div id="div1" class="div1" title="這是div元素粮彤，看到了嗎根穷？">這是一個(gè)div元素</div>
<a href="#" id="link1">騰訊網(wǎng)</a>
<!-- <script type="text/javascript">
document.getElementById('div1').title = "我看到了！";
</script> -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作style屬性</title>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
/*style屬性中的樣式屬性导坟，沒有"-"號(hào)的屿良，寫法相同*/
oDiv.style.color = 'red';
oDiv.style.background = 'gold';
/*
style屬性中的樣式屬性，帶"-"號(hào)的需要去掉"-"號(hào)惫周，寫成小駝峰式
例如：font-size屬性要寫為fontSize
*/
oDiv.style.fontSize = '30px';
}
</script>
</head>
<body>
<div id="div1">這是一個(gè)div元素</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作class</title>
<style type="text/css">
.box01{
width: 200px;
height: 200px;
background-color: gold;
}
.box02{
width: 300px;
height: 300px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
// 由于class是js中的保留關(guān)鍵字尘惧，所以設(shè)置class屬性時(shí)，要寫為className
oDiv.className = 'box02';
}
</script>
</head>
<body>
<div class="box01" id="div1"></div>
</body>
</html>
函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js函數(shù)</title>
<script type="text/javascript">
function aa(){
alert('hello!');
}
/*
//直接調(diào)用
aa();
*/
</script>
</head>
<body>
<input type="button" name="" value="彈框" onclick="aa()" />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函數(shù)</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
/*有名字的函數(shù)*/
// oDiv.onclick = myalert;
// function myalert(){
// alert('hello');
// }
/*匿名函數(shù)*/
oDiv.onclick = function(){
alert('hello');
}
}
</script>
</head>
<body>
<div id="div1">這是一個(gè)div元素</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函數(shù)傳參</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
changeStyle('color', 'gold');
changeStyle('background', 'red');
changeStyle('width', '300px');
changeStyle('height', '300px');
changeStyle('fontSize', '30px');
function changeStyle(styl, val){
oDiv.style[styl] = val;
}
}
</script>
</head>
<body>
<div id="div1">這是一個(gè)div元素</div>
</body>
</html>
作業(yè)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>if-1</title>
<script type="text/javascript">
var score = prompt("請(qǐng)輸入小明的期末成績(jī)(0-100):");
//判斷值是否合法
if(score > 100 || score < 0 || isNaN(score)){
alert("哦買噶~~~");
}else{
//根據(jù)score的值來決定給小明什么獎(jiǎng)勵(lì)
if(score == 100){
//獎(jiǎng)勵(lì)一臺(tái)寶馬
alert("寶馬递递，拿去開~~~");
}else if(score >= 80){
//獎(jiǎng)勵(lì)一個(gè)手機(jī)
alert("手機(jī)喷橙，拿去玩~~~");
}else if(score >= 60){
//獎(jiǎng)勵(lì)一本參考書
alert("參考書，拿去看~~~");
}else{
alert("兩巴掌~~");
}
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>if-2</title>
<script type="text/javascript">
var height = prompt("請(qǐng)輸入你的身高(CM):");
var money = prompt("請(qǐng)輸入你的財(cái)富(萬):");
var face = prompt("請(qǐng)輸入你的顏值(PX):");
if(height > 180 && money > 1000 && face > 500){
alert("就要嫁給他~~");
}else if(height > 180 || money > 1000 || face > 500){
alert("嫁吧登舞，比上不足贰逾，比下有余。");
}else{
alert("不嫁逊躁。");
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>switch-1</title>
<script type="text/javascript">
var score = 75;
switch(true){
case score >= 60 && score <=100:
console.log("合格");
break;
case score < 60 && score >=0:
console.log("不合格");
break;
default:
console.log("不合法");
break;
}
</script>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>switch練習(xí)2</title>
<script type="text/javascript">
var week = +prompt("請(qǐng)輸入1-7之間的一個(gè)整數(shù):");
switch(week){
case 1:
alert('星期一');
break;//結(jié)束整個(gè)switch語句
case 2:
alert('星期二');
break;
case 3:
alert('星期三');
break;
case 4:
alert('星期四');
break;
case 5:
alert('星期五');
break;
case 6:
alert('星期六');
break;
case 7:
alert('星期日');
break;
default:
alert('不合法');
break;
}
</script>
<body>
</body>
</html>
