JavaScript入门

页面导航:首页 > 网络编程 > JavaScript > JavaScript入门

JavaScript入门

来源: 作者: 时间:2016-02-02 09:58 【

刚开始常常被卡住思路,或者实现思路不够简洁。学习的过程就是一个积累的过程,敲的多了见的多了经验自然就有了,大项目的经验另说,最起码知识掌握熟练透彻,再扩展起来也快
刚开始常常被卡住思路,或者实现思路不够简洁。学习的过程就是一个积累的过程,敲的多了见的多了经验自然就有了,大项目的经验另说,最起码知识掌握熟练透彻,再扩展起来也快。现在啃到面向对象了,休息几天,回过头去想想之前学到的东西,重新记起忘记了的,也会学到新的东西,或者之前一直没想明白的问题一下子理解了。
 
 
 
今天写写我的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); //读
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 }
复制代码
getElementsByTagName这个方法可以操作一堆没有id的元素,但是只能一个个写aBtn[0]aBtn[1]aBtn[2]所以引出了for循环:
 
//1)重复执行某些代码;2)每次执行的时候,有个数字在变化;
 
执行顺序走法
 
1)var i = 0;
 
2)i<3; 关键
 
3)执行括号里面的所有代码
 
4)i++
 
先1,然后一直234,直到不满足条件跳出循环
 
var i = 0;
 
for(; i < 3;){
 
alert(i);
 
i++;
 
} //另一种写法
 
 
 
for( var i = 0; i < 3; i++ ){alert(i); //0,1,2}
 
alert(i);  //3
 
 
 
/*只有当for循环完全执行完成之后,代码才会继续往下执行。 */
 
/*当使用 for 循环嵌套 for 循环的时候,每层循环都必须使用不同的变量来表示。*/
 
for循环应用:重复执行某件事;每次执行的时候,有个数字会变
 
 
 
this关键字:
 
this:指的是调用当前方法(函数)的那个对象。
 
window.alert();
 
window.fn1(); 只要这样调用fn1(); this指的就是window
 
小结:
 
function fn1(){
 
this
 
}
 
1)fn1(); this=>window
 
2)oDiv.onclick = fn1; this=>oDiv
 
3)oDiv.onclick = function(){this  fn1();} this=>oDiv; fn1()里this=>window
 
4)<div onclick=”this fn1();”></div> this指的是div;fn1()里this=>window //很少这样写了
 
自定义属性、索引值
 
aBtn[0].abc = 123;
 
Script可以为任何HTML元素添加任意个自定义属性,可以读写操作。
 
标准属性 : className   width   height    style 
 
自定义属性 : 自己写代码的时候根据需要定义的属性,它不是标准属性。
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<