1. 代码块
我们的程序是由一条一条语句构成的 语句是按照自上向下的顺序一条一条执行的 在JS中可以使用{}来为语句进行分组, 同一个{}中的语句我们称为是一组语句， 它们要么都执行，要么都不执行， 一个{}中的语句我们也称为叫一个代码块 在代码块的后边就不用再编写;了 JS中的代码块，只具有分组的的作用，没有其他的用途 代码块内容的内容，在外部是完全可见的
2. JS操作属性
DOM是为了操作文档（网页）的API，document是它的一个对象
BOM是为了操作浏览器的API，window是它的一个对象
常用BOM对象还有：alert、定时器等
window.onload = function(){
document.getE+lementById('div1').title = "我看到了！";
//变量oA代表整个a标签
var oA = document.getElementById('link1');
oA.href = "http://www.tencent.com";
oA.title = "跳转到腾讯网"
alert(oA.id);
alert(oA.title);
}
3. JS换肤
<script type="text/javascript">
window.onload = function(){
var oLink = document.getElementById('link1');
oLink.href = "css/2.css";
alert(oLink.id);
}
</script>
4. JS操作Style属性
<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
Div.style.fontSize = '30px';
}
</script>
5. Js操作class
<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>
6. 中括号操作属性
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
//oDiv.style.color = 'red';//red必须加引号，否则会认为它是一个变量，引起来会认为它是一个值，赋值给=号左边
var attr = 'color';
// oDiv.style[attr] = 'red';
/* 通过[]操作属性可以写变量 */
oDiv['style'][attr] = 'red';
/* 通过innerHTML可以读写元素包括的内容 */
alert(oDiv.innerHTML);//读取标签里面包裹的元素，即“这是一个div元素”
var oDiv2 = document.getElementById('div2');
// oDiv2.innerHTML = '这是第二个div元素';//向div标签中插入内容
oDiv2.innerHTML = "<a href='http://www.baidu.com'>百度网</a>";//向div标签中插入超链接标签
document.write和innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
}
</script>
document.write和innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
7. 函数
<script type="text/javascript">
function aa(){
alert('hello!');
}
//直接调用
aa();
</script>
<body>
<input type="button" name="" value="弹框" onclick="aa()" />
</body>
8. 可控制换肤
<script type="text/javascript">
window.onload = function(){
/* 提取行间事件 */
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
oBtn01.onclick = skin01;//这里不能写skin01()，这样写就马上执行了
oBtn02.onclick = skin02;
}
function skin01(){
var oLink = document.getElementById('link1');
oLink.href = "css/1.css";
}
function skin02(){
var oLink = document.getElementById('link1');
oLink.href = "css/2.css";
}
</script>
<body>
<!--
行间调用函数
<input type="button" name="" value="皮肤01" onclick="skin01()" />
<input type="button" name="" value="皮肤02" onclick="skin02()" /> -->
<input type="button" name="" value="皮肤01" id="btn01" />
<input type="button" name="" value="皮肤02" id="btn02" />
<div class="box01"></div>
<div class="box02"></div>
</body>
9. 变量和函数予解析
<script type="text/javascript">
/*变量预解析*/
/*alert(a);//只把变量a的声明提前，赋值不提前，所以弹出undefined，表示它的值未定义
// alert(c);//报错，c没有声明，这是真正的未定义
var a = 123;
/*函数预解析*/
myalert();//弹出hello!
function myalert(){
alert('hello!');
}
</script>
10. 匿名函数
<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>
11. 函数传参
<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>
12. return
<script type="text/javascript">
window.onload = function(){
var oInput01 = document.getElementById('input01');
var oInput02 = document.getElementById('input02');
var oBtn = document.getElementById('btn');
//写入值
// oInput01.value = 10;
// oInput02.value = 5;
oBtn.onclick = function(){
var val01 = oInput01.value;
var val02 = oInput02.value;
var rs = add(val01, val02);
alert(rs);
}
function add(a, b){
var c = parseInt(a) + parseInt(b);
// alert('计算完成');//执行
return c;//返回函数设定的值，同时结束函数的运行
// return;//不返回值，仅结束函数的运行
// alert('计算完成');//不执行
}
}
</script>
<body>
<input id="input01" type="text" name="">
<input id="input02" type="text" name="">
<input id="btn" type="button" name="" value="相加">
</body>
