1.JS教程:实现、输出、语句、注释、数据类型、对象、函数、运算符、比较、if...else、switch、for、while、break、错误、验证
输出:document.write('<h2>2</h2>');
注: 如果在文档已完成加载后执行document.write(),整个HTML页面将被覆盖(将document.write()放在函数里,当点击事件时调用此函数,整个HTML页面会被document.write()里得内容覆盖)
语句:JS语句对大小写敏感;会忽略多余空格;(因此var a=5;可以写成var a = 5;)
变量:JS变量可以看成存储数据得容器;(变量必须以字母开头;变量也能以$和_符号开头,不过我们不推荐这么做;变量名称对大小写敏感,y和Y是不同得变量;)
一条语句,多个变量:var name = "Gates" , age = 56 ;可跨行
注: 重新声明JS变量,该变量得值不会丢失:var carname = “Volvo"; var carname;(此时carname得值仍为Volvo;)
对象:JS中得所有事物都是对象,字符串、数字、数组、日期,等等;
注: JS变量均为对象,当你声明一个变量时,就创建了一个新得对象,对象同时拥有若干内建得属性和方法(var str = 'hello world';创建一个字符串变量,实际就是先创建了一个var str = new String('hello world'); 字符串对象实例,str可以拥有str.length属性或str.indexof()等方法)
函数:JS变量得生存期:JS变量得生命期从它们被声明得时间开始;局部变量会在函数运行以后被删除;全局变量会在页面关闭后被删除;
注: 向未声明得JS变量来分配值:如果你把值赋给尚未声明得变量,该变量将被自动作为全局变量声明(function name(){ carname = "Volvo" ;} name(); alert(carname); //Volvo;)
运算符:算术运算符:+、-、*、/、%、++、--;赋值运算符:=、+=、-=、*=、/=、%=
比较:比较运算符:==、===(值和类型)、!=、>、<、>=、<=;逻辑运算符:&&、||、!;条件运算符(三目运算符):a?b:c
if...else...:请使用小写得if。使用大写字母(IF)会生成JS错误!
for:语法,for(语句1;语句2;语句3){ 被执行的代码块 }(语句1:在循化开始前执行;语句2:定义运行循环的条件;语句3:在循环已被执行之后执行;三个语句都是可选的)
for、for/in、while、do/while
while:如果忘记增加条件中所用变量的值,该循环永远不会结束,该可能导致浏览器崩溃;
break:break语句用于跳出循环;continue用于跳过循环中的一个迭代;
注: 可对JS语句进行标记,label:语句;(continue语句(带有或不带标签引用)只能用在循环中;break语句(不带标签引用),只能用在循环或switch中,通过标签引用,break语句可用于跳出任何JS代码块)
验证:with(object){statements}
2.JS HTML DOM:DOM简介、DOM HTML、DOM CSS、DOM事件、DOM节点
DOM简介:(W3C DOM:核心DOM、XML DOM、HTML DOM)
三种方法找到某元素:通过id;通过类名;通过标签名;(若找到该元素,该方法以对象形式返回)(通过类名查找HTML元素,在IE5,6,7,8中无效)
DOM HTML:
改变HTML内容(innerHTML):document.getElementById(id).innerHTML = newHTML
改变HTML属性(attribute为一个变量,需具体属性值代替):document.getElementById(id).attribute= newValue(document.getElementById(id).src= 'smiley.gif')
DOM CSS:改变HTML元素样式(style;property为一个变量,需具体样式代替):document.getElementById(id).style.property= newStyle(document.getElementById(id).style= 'smiley.gif')
DOM事件:onload、onunload、onchange、onmouseover、onmouseout、onmousedown、onmouseup、onclick...
DOM节点:添加、删除节点(DOM中的所有事物都是节点;元素节点,文本节点)(document.documentElement-全部文档;document.body-文档的主题)
创建新元素:createElement()、createTextNode()、appendChild();
<div id="div1"></div>
var div = document.getElementById('div1');
var p = document.createElement('p');
p.innerHTML = '<span>innerHTML</span>';
var p2 = document.createElement('p');
var span = document.createTextNode('<span>createTextNode</span>');
//p.appendChild(span); (innerHTML和createTextNode加到同一个创建的元素里时 当innerHTML在前时 不会被覆盖)
//p2.appendChild(span);
//p.innerHTML = '<span>innerHTML2</span>';
div.appendChild(p);
//div.appendChild(p2); (innerHTML和createTextNode可以同时使用插入到一个元素内)
注: createTextNode()和innerHTML的区别:1.innerHTML属于HTML DOM;createTextNode属于XML DOM;2.innerHTML能够解析文本中包含的HTML元素代码;createTextNode只是纯粹创造文本节点
删除元素:removeChild、parentNode(找到父元素):var child = document.getElementById("p"); child.parentNode.removeChild(child)
3.JS对象:JS对象、JS数字、JS字符串、JS日期、JS数组、JS逻辑、JS算数、JS正则表达式
JS对象:对象只是带有属性和方法的特殊数据类型,JS提供多个内建对象:String、Date、Array等
注: JS是基于prototype的,而不是基于类的
JS数字: