Javascript学习笔记1

1 JavaScript的作用

为网页添加动态功能，根据用户的操作，修改页面。
 
 

2 初探JavaScript

2-1 函数

函数定义：

<script>
function Name()
{

}
</script>

函数调用：

Name（）

匿名函数：(不用思考函数名)

c1.onclick=function()
{
         函数体；
}；

定义变量

var 变量1=值1；

 
 

2-2 常见方法

通过ID获得元素（JS兼容问题）

document.getElementById(id名)；

通过标签名获得元素（JS兼容问题）

document.getElementsByTagName(标签名)；
var btns=div1.getElementsByTagName(标签名1)；  //获得div1层中所有标签名为标签名1的元素
btns.length     //btn数组元素个数

 
 

2-3 常见属性

innerHTML属性

div1.innerHTML='html代码'；   //对应div1里的html代码

className属性

  在javascript中，class是保留字，用className代替class。

修改属性

c1.value="";
c1['value']="";  (用于参数调用)

 
 

2-4 事件

行间事件（不建议使用）

<input type="button" value="按键" onclik="alert('文本')；"/> 
//onclick为行间事件
//alert('text');  弹出框 文本为text

事件至于< script >之间 (推荐)

<script>
btn1.onclik=function()
{
	事件；
};
</script>

window.onload的用法

当页面加载完毕后，执行匿名函数。

window.onload=function()
{
         事件函数体；
};

this的用法

在事件中this表示当前发生事件的元素。

btn1.onclick=function()
{
	this.value="text";
};
//this：代表被点击的按钮btn1

 
 

2-5 字符串

'abc'+1+2+'de' --->'abc12de'    //数字看作字符串连接
'abc'+(1+2)+'de' --->'abc3de'

 
 

3 注意点

3-1 style读取和修改属性都是在 行间

修改完style.height之后，再在className中修改height就没有效果
所以一个元素只用一个style或class。
 
 

3-2 样式优先级

* < 标签 < class < id < 行间
要保证行为（JS），样式（CSS），结构（html）三者分离：不加行间样式和行间JS；
 
 

3-3 修改link的href 实现 页面换肤

<link id="1" rel="stylesheet" type="text/css" href="1.css" />

btn.onclick=function skin2()             //1.css样式换成2.css样式
{
	var c2=document.getElementById('1'); //改什么取什么
	c2.herf='2.css';
};

 
 

3-4 可在超链接< a >中添加JS

<a href="javascript:;" ></a>      //javascript:后加javascript代码（不建议直接加在行间）
//<a href="#" ></a> 会跳转到最上方    <a href="javascript:;" ></a> 不会

 
 

3-5 自定义一个index属性

可在script之间为一个数组的每个元素定义一个index属性，便于后续操作。

for(var i=0;i<len;i++)
{
	btns[i].value=i;
}