条件运算符（三元运算符，也叫三目运算）
语法：
条件表达式？语句1：
执行流程：
首先对条件表达式进行求值
如果该值为true，则执行语句1，并返回执行结果
如果该值为false，则执行语句2，并返回执行结果
例如：
true ? alert('语句1') ：alert('语句2');
先判断表达式true，则执行‘语句1’
false ? alert('语句1') ：alert('语句2');
先判断表达式为false，则执行‘语句2’
JS操作属性
DOM：document是它的一个对象
BOM：为了操作浏览器的API，window是它的一个对象
常用的BOM对象还有alert、定时器等
可以使用document来获取body标签中的元素，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/script">
document.getElementById('div1');
</script>
</head>
<body>
<div id="div1" class="div1" title="这是div元素，看到了没？">这是一个div元素</div>
</body>
</html>
如果想要利用document来获取元素的属性，可以这样做：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/script">
/* document.getElementById('div1');*/
window.onload=function(){
/*通过document获取元素的属性，并修改属性*/
document.getElementById('div1').title="我看到了！";
/*可以为元素设置链接*/
document.getElementById('link').href="http://www.baidu.com";
}
</script>
</head>
<body>
<div id="div1" class="div1" title="这是div元素，看到了没？">这是一个div元素</div>
<a href="#" id="link">百度网</a>
</body>
</html>
JS换肤
1.首先在主页面body标签中定义两个div，分别为box1、box2
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
- 新建css文件，为box1、box2以及body进行样式设置，在主页面使用link标签进行引入，再次新建css文件，并进行不同的样式设置
style.css
body{
background-color :#ddd;
}
.box1{
width: 200px;
height: 200px;
float: left;;
background-color: red;
margin: 20px;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
float: left;
margin: 20px;
}
2.css
body{
background-color :gray;
}
.box1{
width: 200px;
height: 200px;
float: left;;
background-color: yellow;
margin: 20px;
}
.box2{
width: 200px;
height: 200px;
background-color:blue;
float: left;
margin: 20px;
}
- 在主页面利用JavaScript代码进行换肤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css" id="link">
<script type="text/javascript">
window.onload=function(){
var link = document.getElementById('link');
link.href="css/2.css";
alert(link.id);
}
</script>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
js操作style属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var box = document.getElementById('box');
box.style.fontSize = '50px';
}
</script>
</head>
<body>
<div id="box">这是一个box标签</div>
</body>
</html>
js操作class属性
- 在body标签中定义一个class为box01，id为div1的div
<body>
<div class="box01" id="div1"></div>
</body>
- 在style标签中设置box01样式，再添加一个box02的样式
<style type="text/css">
.box01{
width:200px;
height:200px;
background-color:gold;
}
.box02{
width:300px;
height:300px;
background-color:red;
}
</style>
- 用JavaScript代码进行class属性操作
<script type="text/javascript">
window.onload = function(){
var div1 = document.getElementById('div1');
div1.className = 'box02';
}
</script>
js函数
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function aa(){
alert('hello!')
}
aa();
</script>
</head>
<body>
<input type="button" value="弹框" onclick="aa()">
</body>
</html>
网友评论