JavaScript入门

2024-04-27 14:10:54

字体：大中小

来源：转载

供稿：网友

javaScript入门

Posted on 2015-04-13 20:12 yanzi2015 阅读(...) 评论(...) 编辑收藏

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

今天写写我的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{}

varoDiv=document.getElementById("div1");

2）根据标签名称：

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

li{}

varaLi=document.getElementsByTagName("li");

#ul1li{}

varoUl=document.getElementById('ul1');

varaLi=oUl.getElementsByTagName('li');

ulli{}

varoUl=document.getElementsByTagName('ul')[0];

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

varaLi=oUl.getElementsByTagName('li');

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

onclickonmouSEOveronmouseoutonmousedownonmouseuponmousemove…

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 // 如果绑定了事件在元素身上，那些事件也会被清空

属性操作中的[]:

varoDiv=document['getElementById']('div1');

oBtn['onclick']=function(){

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

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

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

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

1、相对路径

imgsrc

ahref="1.html"

2、颜色值

color:red;#f00rgb(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); //03 document.body.innerHTML = '<input type="button" value="按钮" /><input type="button" value="按钮" /><input type="button" value="按钮" />'4 alert(aBtn.length); //35 aBtn[0].onclick = function(){ //事件可以添加上6     alert(0);7 }

getElementsByTagName这个方法可以操作一堆没有id的元素，但是只能一个个写aBtn[0]aBtn[1]aBtn[2]所以引出了for循环:

//1）重复执行某些代码；2）每次执行的时候，有个数字在变化；

执行顺序走法

1）vari=0;

2）i<3;关键

3）执行括号里面的所有代码

4）i++

先1，然后一直234，直到不满足条件跳出循环

vari=0;

for(;i<3;){

alert(i);

i++;