JavaScript入门

浏览数：16 / 时间：2015年06月08日

刚开始常常被卡住思路，或者实现思路不够简洁。学习的过程就是一个积累的过程，敲的多了见的多了经验自然就有了，大项目的经验另说，最起码知识掌握熟练透彻，再扩展起来也快。现在啃到面向对象了，休息几天，回过头去想想之前学到的东西，重新记起忘记了的，也会学到新的东西，或者之前一直没想明白的问题一下子理解了。

今天写写我的JavaScript入门经历：

在写一个JavaScript程序之前，要做什么？

1）写结构 + 样式，HTML + CSS

2）找到实现它的原理

3）再开始写JavaScript

还有刚刚开始写程序，很重要的一点是边写边测试，这样能够及时的发现错误。

比如我们希望把某个元素离开我们的视线

写这个JavaScript效果的步骤：

1，先实现布局；

2，找实现原理：

1、 display：none; 显示为无，元素在页面中不存在

2、 visibility：hidden; 让元素隐藏，元素还是存在的，占了文档流

3、 width\height 为零

4、改透明度

5、通过定位改left/top

6、拿一个白色div盖住

7、 margin负值

等等很多

3，了解JavaScript语法：

JavaScript中如何获取元素：

1）根据ID名称：#div1 {}

var oDiv = document.getElementById("div1");

2）根据标签名称：

（可以结合CSS中的id、class来理解）

li {}

var aLi = document.getElementsByTagName("li");

#ul1 li {}

var oUl = document.getElementById(‘ul1‘);

var aLi = oUl.getElementsByTagName(‘li‘);

ul li {}

var oUl = document.getElementsByTagName(‘ul‘)[0];

//即使页面上，只有一个元素，aUl 也是获取一组

var aLi = oUl.getElementsByTagName(‘li‘);

事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件

onclick onmouseover onmouseout onmousedown onmouseup onmousemove …

onload 加载完以后执行......

window.onload = 事件

Img.onload

Body.onload

iframe.onload

如何添加事件：

元素 . 事件

函数：可以理解为命令，做一些事

function 名字abc(){ //函数内任何代码肯定不会主动执行

……

}

如何让函数执行

1、直接调用：abc();

2、事件调用：元素 . 事件 = abc; （oDiv.onclick = abc; 这里注意不要加括号，因为见到函数名称加括号不等调用就执行了）

3、

function(){} 匿名函数

元素.事件 = function(){}

测试：

alert(1); //带一个确定按钮的警告框

alert(‘ok’); //自己写的一句话都要加引号，单引号双引号都可

alert(“ok”);

alert(oText.value); //不用加引号

----------------------------------------------------

有名字的函数调用：

直接调用：fn1();

事件调用：obj.onclick = fn1;

匿名函数调用：

直接调用：（函数自执行）

(function () { alert(345); })()

~function () { alert(567); }();

!function () { alert(789); }();

+function () { alert(980); }();

事件调用：

obj.onclick = function() { alert(123); };

window.onload = function() {}; //窗口里所有的代码都加载完成以后，再执行

属性操作：

属性 = 属性名+属性值

读操作（获取）：元素.属性名

写操作（改变 - 先清除原来的，后添加新内容）：元素.属性名 = 新的值

1 var oDiv = document.getElementById(‘div1‘);
2 alert(oDiv.innerHTML); //读
3 
4 oDiv.onclick = function(){
5     oDiv.innerHTML = 123; //写（先清空，后添加）
6 };
7 // 如果绑定了事件在元素身上，那些事件也会被清空

属性操作中的[]:

var oDiv = document[‘getElementById‘](‘div1‘);

oBtn[‘onclick‘] = function () {

JavaScript操作中的一些注意事项：

1）JavaScript中不允许出现 -，去掉 -，把后面单词第一个字母变大写

2）有些东西不要用来做判断

// 不能做为判断条件的情况：

1、相对路径

img src

a href="1.html"

2、颜色值

color: red; #f00 rgb(255,0,0)

3、innerHTML 在低版本浏览器下会出现兼容性问题

oDiv.style.width = ‘200px‘;

oDiv.style.height = ‘200px‘;

oDiv.style.background = ‘red‘;

oDiv.style.cssText = ‘width:240px; height:220px; background:yellow;‘;

 1 var oDiv = document.getElementById(‘div1‘);
 2 
 3 oDiv.style.height = ‘200px‘;
 4 oDiv.style.background = ‘red‘;
 5 // 以上在原来样式基础上，添加或者修改
 6 
 7 oDiv.style.cssText = ‘height:220px; background:yellow;‘;
 8 // 把原来的样式width干掉了，再添加行间样式
 9 
10 alert( oDiv.style.cssText );        // ‘width:200px‘
11 oDiv.style.cssText += ‘height:220px; background:yellow;‘;
12 // 用 cssText 在原来样式上继续添加新样式

获取元素的两个方法有3个区别：

document.getElementById(‘id’); 　 //静态方法；找一个元素；前边只能是document

document.getElementsByTagName(‘li’); //动态方法；找一组元素；前边可以是document或者一个元素，类似数组但不是数组，是一个元素的集合，虽不是数组但具备数组的属性：oUl.length长度; oUl[0]数组的访问方式;

只要用到ByTagName方法用的时候要加[]

动态方法是说，元素不存在的时候就可以获取元素，尽管找不到但不会报错，不过仅仅是可以获取而不能操作。后边程序中动态加了元素，这时候就可以找到元素也可以操作元素了。

1 var aBtn=document.getElementsByTagName("input"); //可以先获取元素
2 alert(aBtn.length); //0
3 document.body.innerHTML = ‘<input type="button" value="按钮" /><input type="button" value="按钮" /><input type="button" value="按钮" />‘
4 alert(aBtn.length); //3
5 aBtn[0].onclick = function(){ //事件可以添加上
6     alert(0);
7 }