java script 菜鸟教程_JavaScript 基础教程

JS入门基础

写JS的步骤

先实现布局

想出实现原理

了解JS语法

希望把某个元素移除的实现

display: none; 显示为无

visibility: hidden; 隐藏

width \ height

透明度

left \ top

拿与背景色相同的div盖住该元素

利用margin值

……

获取元素

getElementById() ——静态方法，前面只能跟document

document.body、document.title 页面中只有一个的元素

getElementsByTagName() ——动态方法，前面可以跟document也可以跟其他元素，返回的是一个类似数组的元素的集合

有类似数组的length

有类似数组的应用方式，比如ali[0]

在用TagName的时候，必须要加上中括号[]

所谓的动态方法，是指通过js动态添加的元素，getElementsByTagName()也可以找到，但是document.getElementById是找不到的

事件

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

onclick

onmouseover

onmousedown

onmouseout

onmouseup

onmousemove

……

如何添加事件

元素.onmouseover

函数

函数可以理解为命令，做一些事情，如:

function abc() { //肯定不会主动执行！ … }

直接调用：abc();

事件调用：元素.事件 = 函数名 (oDiv.onclick = abc;)

……

function(){} 匿名函数

元素.事件 = function(){}

测试

alert(1); 带确定按钮的警告框；alert('ok'); 'ok' 字符串

初学者：最好保持随时写，随时测试的习惯

变量

var li = document.getElementById('lis');

var num = 123;

var name = 'leo';

JS的属性操作

HTML属性操作

属性名

属性值

属性的读操作：获取、找到

元素.属性名

属性的写操作：替换、修改

元素.属性名 ＝ 新的值

添加的话，需要用 +=

innerHTML 读取元素内的所有HTML代码

字符串连接：加号

属性读写操作的注意事项

JS属性中不允许出现"-"，例如font-size改为fontSize

class在js里面是保留字，在js作用class要用className

所有的相对路径都别拿来做判断(如img的src、还有href)

颜色值不要拿来做判断(因为有red、#f00、rgb(250, 0, 0)等写法

相对路径也不要拿来做判断

innerHTML的值别拿来做判断

IE6、IE7、IE8中表单元素的type更改不了，不支持，会报错；其他的都可以。

在有些浏览器中，直接更改float值可能不支持。在js中，可以用IE(styleFloat)和非IE(cssFloat)来区别对待。

不能用来做判断的东西，可以创造一个开关，利用布尔值来实现

关于兼容：

技术上：必须能做到掌握兼容性(兼容性问题的解决方案)

需求上：商量着来(提供最准确的呈现方案)

[]中括号的使用

点"."后面的值无法修改

中括号[]里面的值可以修改；JS中允许把"."替换成"[]"

条件判断

if(条件){……};

if(条件){……} else {……};

if(条件1){……} else if(条件2) {……} else if(条件3) {……} else {……};

数组

"放数据的仓库"

中括号[]，半角都好分隔，最后一个数据后面不要加逗号

数组的length属性

为数组最后塞东西用push();

for应用

for循环的使用场景：

如果想要重复执行某些代码

每次执行的时候，有个数字在变化

for循环的执行顺序：1→234→234……

var i = 0;

i < 3; 关键步骤

括号里面的所有代码

i++

注意下面这样一个循环：

for (var i=0; i

aLi[i].onclick = function(){

alert(i);

}

}

以上代码会弹出一个3，而不是一次0、1、2；这里注意，如果在for循环里面包了一个函数，函数里面用了i，那么由于作用域的关系，i不会像你想象的那样逐次增加。

cssText文本格式化与属性操作

oDiv.style.cssText = 'width: 200px; height: 200px;';

cssText不会动head的style中的设置；但是会改变行间样式(注意，是替换行间样式，而非新增行间样式)

按钮点击之后，不再重复功能的思路

找按钮的麻烦，比如点击一次之后，设置oBtn.disabled = true;

继续找按钮的麻烦，比如点击一次后，将按钮隐藏oBtn.style.display = 'none';

将按钮添加的东西清空，然后再添加一次，先清空再生成

用判断

this指向及this应用

window是js中的"老大"

function fn1(){

alert(this);

}

fn1();

上述代码中执行函数fn1()相当于window.fn1();因此，在函数体内弹出这个this仍然是window。

function fn1(){

alert(this);

}

oBtn.onclick = fn1;

上述用按钮的点击事件调用的fn1函数，最终弹出来的是这个按钮，而不是window。

function fn1(){

alert(this);

}

oBtn.onclick = function(){

alert(this)

}

上述代码，点击按钮弹出的this仍然是oBtn这个按钮。

function fn1(){

alert(this);

}

oBtn.onclick = function(){

fn1();

}

上述代码，点击oBtn按钮，弹出的就不再是oBtn这个对象，而是window。

上述代码是行间事件，弹出的this就是这个按钮btn2。

function fn1(){

alert(this);

}

this => div