<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作属性</title>
<script type="text/javascript">
/*
DOM是为了操作文档（网页）的API，document是它的一个对象
BOM是为了操作浏览器的API，window是它的一个对象
常用BOM对象还有：alert、定时器等
*/
//整个文档加载完之后执行一个匿名函数
window.onload = function(){
document.getElementById('div1').title = "我看到了！";
//变量oA代表整个a标签
var oA = document.getElementById('link1');
oA.href = "http://www.tencent.com";
oA.title = "跳转到腾讯网"
alert(oA.id);
alert(oA.title);
}
</script>
</head>
<body>
<div id="div1" class="div1" title="这是div元素，看到了吗？">这是一个div元素</div>
<a href="#" id="link1">腾讯网</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属性中的样式属性，没有"-"号的，写法相同*/
oDiv.style.color = 'red';
oDiv.style.background = 'gold';
/*
style属性中的样式属性，带"-"号的需要去掉"-"号，写成小驼峰式
例如：font-size属性要写为fontSize
*/
oDiv.style.fontSize = '30px';
}
</script>
</head>
<body>
<div id="div1">这是一个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中的保留关键字，所以设置class属性时，要写为className
oDiv.className = 'box02';
}
</script>
</head>
<body>
<div class="box01" id="div1"></div>
</body>
</html>
函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js函数</title>
<script type="text/javascript">
function aa(){
alert('hello!');
}
/*
//直接调用
aa();
*/
</script>
</head>
<body>
<input type="button" name="" value="弹框" onclick="aa()" />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匿名函数</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
/*有名字的函数*/
// oDiv.onclick = myalert;
// function myalert(){
// alert('hello');
// }
/*匿名函数*/
oDiv.onclick = function(){
alert('hello');
}
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数传参</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">这是一个div元素</div>
</body>
</html>
作业
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>if-1</title>
<script type="text/javascript">
var score = prompt("请输入小明的期末成绩(0-100):");
//判断值是否合法
if(score > 100 || score < 0 || isNaN(score)){
alert("哦买噶~~~");
}else{
//根据score的值来决定给小明什么奖励
if(score == 100){
//奖励一台宝马
alert("宝马，拿去开~~~");
}else if(score >= 80){
//奖励一个手机
alert("手机，拿去玩~~~");
}else if(score >= 60){
//奖励一本参考书
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("请输入你的身高(CM):");
var money = prompt("请输入你的财富(万):");
var face = prompt("请输入你的颜值(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练习2</title>
<script type="text/javascript">
var week = +prompt("请输入1-7之间的一个整数:");
switch(week){
case 1:
alert('星期一');
break;//结束整个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>
网友评论