1、代码块
我们的程序是由一条一条语句构成的
语句是按照自上向下的顺序一条一条执行的
在JS中可以使用{}来为语句进行分组,
同一个{}中的语句我们称为是一组语句,
它们要么都执行,要么都不执行,
一个{}中的语句我们也称为叫一个代码块
在代码块的后边就不用再编写;了
JS中的代码块,只具有分组的的作用,没有其他的用途
代码块内容的内容,在外部是完全可见的
{ //js里面是用大括号写内容
var a =10;
alert("hello");
console.log("你好");/*向控制台输出*/
document.write("语句");/*向body里输出*/
}
console.log("a= " +a);
2、js操作属性
DOM是为了操作文档(网页)的API,document是它的一个对象
BOM是为了操作浏览器的API,window是它的一个对象
常用BOM对象还有:alert、定时器等
操作属性的方法
1、“.” 操作
2、“[ ]”操作
属性写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”
通过“.”操作属性:
window.onload = function(){
var oInput = document.getElementById('input1');
var oA = document.getElementById('link1');
// 读取属性值
var val = oInput.value;
var typ = oInput.type;
var nam = oInput.name;
var links = oA.href;
// 写(设置)属性
oA.style.color = 'red';
oA.style.fontSize = val;
}
......
通过“[ ]”操作属性:
window.onload = function(){
var oInput1 = document.getElementById('input1');
var oInput2 = document.getElementById('input2');
var oA = document.getElementById('link1');
// 读取属性
var val1 = oInput1.value;
var val2 = oInput2.value;
// 写(设置)属性
// oA.style.val1 = val2; 没反应
oA.style[val1] = val2;
}
......
innerHTML
innerHTML可以读取或者写入标签包裹的内容
window.onload = function(){
var oDiv = document.getElementById('div1');
//读取
var txt = oDiv.innerHTML;
alert(txt);
//写入
oDiv.innerHTML = '传智播客';
}
......
3、js换肤
引入外部样式
window.onload =function () {
//操作css目录的下的样式
var link1 =document.getElementById('link1');
// link1.href = "css/2.css"; css1的样式
console.log(link1.id); css1的样式
}
4、js操作style属性
window.onload =function () {
var div1 =document.getElementById('div1');
div1.style.color ='red';
div1.style.background ='gold';
div1.style.fontSize ='30px';
//操作的属性的时候带 减号(-)的使用小驼峰 ,不带减号的照常使用
}
5、js操作class
.box01{
width:200px;
height:200px;
background-color:gold;
}
.box02{
width:300px;
height:300px;
background-color:red;
}
window.onload =function () {
var div1 =document.getElementById('div1');
div1.className ='box02'; //操作class属性 ---> 用className
}
6、js中括号操作属性
window.onload =function(){
var oDiv =document.getElementById('div1');
var attr ='color';
oDiv['style'][attr] ='red';
console.log(oDiv.innerHTML);/*读取*/
var div2 =document.getElementById('div2');
// div2.innerHTML = '这是第二个div元素';
div2.innerHTML ='百度网';
/*
document.write和innerHTML的区别
document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分
*/
// document.write('abcde')
}