js查漏补缺【未完】

1.初始

　　　　1.小补。

　　　　　　1.在文本字符串中使用反斜杠对代码行进行换行。

document.write("Hello \

World!");

2.document.write

document.write("<h1>This is a heading</h1>");
只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

　　　　 2.变量。

　　　　　　 1.在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

　　　　　　 2.如果重新声明 JavaScript 变量，该变量的值不会丢失。

　　　　 3.数据类型。

　　　　　　 1.字符串，数字，布尔值，数组，对象，Null，Undefined

　　　　　　　 2.对象属性有两种寻址方式：

name=person.lastname;

name=person["lastname"];

　　　　　　　 3.Undefined 这个值表示变量不含有值。可以通过将变量的值设置为 null 来清空变量。

　　　　　　　　4.声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;

var x=      new Number;

var y=      new Boolean;

var cars=   new Array;

var person= new Object;

　　　　　　　 5.JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。　　　　

　　　　 4.对象。

　　　　　　1.在JS中，对象是拥有属性和方法的数据。属性是外形，方法是能力。　　　　　　

//属性

car.name=Fiat

car.model=500

car.weight=850kg

car.color=white

//方法

car.start()

car.drive()

car.brake()

　　　　 5.函数。

　　　　　　1.有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。

。　　　　　　　　

　　　　　　　　2.在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕，本地变量就会被删除。

　　　　　　　　3.如果值赋给尚未声明的变量，该变量将被自动作为全局变量声明。这条语句：carname="Volvo";将声明一个全局变量 carname，即使它在函数内执行。

　　　　6.运算符。

　　　　　给定 y=5，下面的表格解释了这些算术运算符：　

运算符	描述	例子	结果
+	加	x=y+2	x=7
-	减	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求余数 (保留整数)	x=y%2	x=1
++	累加	x=++y	x=6
--	递减	x=--y 4

　　　　　　给定 x=10 和 y=5，下面的表格解释了赋值运算符：

运算符	例子	等价于	结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

　　　　　7.逻辑运算符。

　　　　　　　　greeting=(visitor=="PRES")?"Dear President ":"Dear ";

　　　　　　　　如果变量 visitor 中的值是 "PRES"，则向变量 greeting 赋值 "Dear President "，否则赋值 "Dear"。

　　　　　8.if语句。

　　　　　　　　 1.if....else if...else 语句

if (条件 1)

  {

  当条件 1 为 true 时执行的代码

  }

else if (条件 2)

  {

  当条件 2 为 true 时执行的代码

  }

else

  {

  当条件 1 和 条件 2 都不为 true 时执行的代码

  }

　　　　　9.switch 语句。

var day=new Date().getDay();

switch (day)

{

case 6:

  x="Today it's Saturday";

  break;

case 0:

  x="Today it's Sunday";

  break;

default:

  x="Looking forward to the Weekend";

}

　　　　　10.for循环。

　　　　　　　　　for/in 语句循环遍历对象的属性：

var person={fname:"John",lname:"Doe",age:25};

for (x in person)

  {

  txt=txt + person[x];

  }

　　　　　11.while循环。

　　　　　　　　　While 循环会在指定条件为真时循环执行代码块。while 循环与 for 循环很像。

cars=["BMW","Volvo","Saab","Ford"];

var i=;

while (cars[i])

{

document.write(cars[i] + "<br>");

i++;

}

　　　　　　12.跳出循环。

　　　　　　　break 做选择题时，有一个选择不会，整个选择题都不做了，做判断题去

　　　　　　　　continue 做选择题时，有一个选择不会，跳过不会的做下一个，按顺序做到判断题去

　　　　　　　　return 做选择题时，有一个不会，直接不干了，睡觉去；

　　　　　　13.错误。

　　　　　　　　当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。

　　　　　　　　try{运行代码} catch（err）{处理错误}

<!DOCTYPE html>

<html>

<body>

<script>

function myFunction()

{

try

{

var x=document.getElementById("demo").value;

if(x=="")    throw "值为空";

if(isNaN(x)) throw "不是数字";

if(x>10)     throw "太大";

if(x<5)      throw "太小";

}

catch(err)

{

var y=document.getElementById("mess");

y.innerHTML="错误：" + err + "。";

}

}

</script>

<h1>我的第一个 JavaScript 程序</h1>

<p>请输入 5 到 10 之间的数字：</p>

<input id="demo" type="text">

<button type="button" onclick="myFunction()">测试输入值</button>

<p id="mess"></p>

</body>

</html>

2.HTMl Dom

　　　　　　1.查找元素。

　　　　　　　　　　注意：通过类名查找元素时在IE5 6 7 8中无效

　　　　　　 2.改变HTML。

　　　　　　　　　　　　1.document.write（）

　　　　　　　　　　　　　　直接向HTML中输出流写内容；

　　　　　　　　　　　　　　绝不要在文档加载完之后使用，会覆盖整个文档；

　　　　　　　　　　　　　　括号内为字符串；

　　　　　　　　　　　　　　输出内容放在body；

　　　　　　　　　　　　2.innerHTML

　　　　　　　　　　　　　　　直接改变HTML内容；

<!DOCTYPE html>

<html>

<body>

<h1 id="header">Old Header</h1>

<script>

var element=document.getElementById("header");

element.innerHTML="New Header";

</script>

</body>

</html>

　　　　　　　　　　　　3.attribute

　　　　　　　　　　　　　　　　改变HTML属性

<!DOCTYPE html>

<html>

<body>

<img id="image" src="smiley.gif">

<script>

document.getElementById("image").src="landscape.jpg";

</script>

</body>

</html>

　　　　　　　　 3.改变CSS。

　　　　　　　　 document.getElementById(id).style.property=new style

<!DOCTYPE html>

<html>

<body>

<p id="p1">这是一段文本。</p>

<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />

<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

</body>

</html>

　　　　　　　　4.事件。

　　　　　　　　　　　　　　1.事件添加：

　　　　　　　　　　　　　　　使用事件属性：

<button onclick="displayDate()">点击这里</button>

　　　　　　　　　　　　　　　　使用script：

<script>

document.getElementById("myBtn").onclick=function(){displayDate()};

</script>

　　　　　　　　　　　　　　2..事件类型：

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

<!DOCTYPE html>

<html>

<body>

<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>

function mDown(obj)

{

obj.style.backgroundColor="#1ec5e5";

obj.innerHTML="请释放鼠标按钮"

}

function mUp(obj)

{

obj.style.backgroundColor="green";

obj.innerHTML="请按下鼠标按钮"

}

</script>

</body>

</html>

　　　　　　　　　　　　　 2>onload 和 onunload 事件会在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。

<!DOCTYPE html>

<html>

<body onload="checkCookies()">

<script>

function checkCookies()

{

if (navigator.cookieEnabled==true)

    {

    alert("已启用 cookie")

    }

else

    {

    alert("未启用 cookie")

    }

}

</script>

<p>提示框会告诉你，浏览器是否已启用 cookie。</p>

</body>

</html>

　　　　　　　　　　　　　　　　　　3>onchange 事件常结合对输入字段的验证来使用。离开触发

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction()

{

var x=document.getElementById("fname");

x.value=x.value.toUpperCase();

}

</script>

</head>

<body>

请输入英文字符：<input type="text" id="fname" onchange="myFunction()">

<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

</body>

</html>

　　　　　　　　　　　　　　　　　　4>onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

<!DOCTYPE html>

<html>

<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>

function mOver(obj)

{

obj.innerHTML="谢谢"

}

function mOut(obj)

{

obj.innerHTML="把鼠标移到上面"

}

</script>

</body>

</html>

　　　　　　　　　　　　　　　　　　　5>当输入字段获得焦点时触发函数。　

<!DOCTYPE html>

<html>

<head>

<script>

function myFunction(x)

{

x.style.background="yellow";

}

</script>

</head>

<body>

请输入英文字符：<input type="text" onfocus="myFunction(this)">

<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>

</body>

</html>

　　　　　　　　　　5.DOM节点。

　　　　　　　　　　　　　　　1.属性

　　　　　　　　　　　　　　　　　　1>innerHTML

　　　　　　　　　　　　　　　　　　innerHTML 属性对于获取或替换 HTML 元素的内容很有用。　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　2>nodeName 属性规定节点的名称。

　　　　　　　　　　　　　　　　　　　　nodeName 是只读的元素节点的 nodeName 与标签名相同属性节点的 nodeName 与属性名相同文本节点的 nodeName 始终是 #text 文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

　　　　　　　　　　　　　　　　　　3>nodeValue 属性规定节点的值。

　　　　　　　　　　　　　　　　　元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身属性节点的 nodeValue 是属性值

<!DOCTYPE html>

<html>

<body>

<p id="intro">Hello World!</p>

<script>

x=document.getElementById("intro");

document.write(x.firstChild.nodeValue);

</script>

</body>

</html>

　　　　　　　　　　　　　　　　　　　4>nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型	NodeType
元素	1
属性	2
文本	3
注释	8
文档	9

　　　　　　　　　　　　　　2.访问

　　　　　　　　　　　　　　　getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

　　　　　　　　　　　　　　　3.修改　

　　　　　　　　　　　　　　　　修改 HTML = 改变元素、属性、样式和事件。　　　

　　　　　　　　　　　　　　　　即：改变 HTML 内容改变 CSS 样式改变 HTML 属性创建新的 HTML 元素删除已有的 HTML 元素改变事件（处理程序）

　　　　　　　　　　　　　　　　　　　　1>创建HTML内容

　　　　　　　　　　　　　　　　　　　　直接覆盖原有：

<!DOCTYPE html>

<html>

<body>

<p id="p1">Hello World!</p>

<script>

document.getElementById("p1").innerHTML="New text!";

</script>

<p>上面的段落被一段脚本改变了。</p>

</body>

</html>

　　　　　　　　　　　　　　　　　　　 2>改变HTML样式

<!DOCTYPE html>

<html>

<body>

<p id="p1">Hello world!</p>

<p id="p2">Hello world!</p>

<script>

document.getElementById("p2").style.color="blue";

document.getElementById("p2").style.fontFamily="Arial";

document.getElementById("p2").style.fontSize="larger";

</script>

</body>

</html>

　　　　　　　　　　　　　　　　　　　　3>创建新HTML元素

<!DOCTYPE html>

<html>

<body>

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

<script>

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

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

element.appendChild(para);

</script>

</body>

</html>

　　　　　　　　　　　　　　　　4.元素操作

　　　　　　　　　　　　　　　　　　添加删除替换　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　1>appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。

<!DOCTYPE html>

<html>

<body>

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

<script>

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

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

element.appendChild(para);

</script>

</body>

</html>

　　　　　　　　　　　　　　　　　　2> insertBefore()

<!DOCTYPE html>

<html>

<body>

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

<script>

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

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

var child=document.getElementById("p1");

element.insertBefore(para,child);

</script>

</body>

</html>

　　　　　　　　　　　　　　　　　　3>removChild（）

　　　　　　　　　　　　　　　　需删除 HTML 元素，您必须清楚该元素的父元素：

<!DOCTYPE html>

<html>

<body>

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

<script>

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

var child=document.getElementById("p1");

parent.removeChild(child);

</script>

</body>

</html>

var child=document.getElementById("p1");

child.parentNode.removeChild(child);

　　　　　　　　　　　　　　　　　　4>replaceChild()　　　

<!DOCTYPE html>

<html>

<body>

<div id="div1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

<script>

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

var child=document.getElementById("p1");

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

parent.replaceChild(para,child);

</script>

</body>

</html>

　　　　　　　　　　　　　　　5.节点关系

　　　　　　　　　　　　　　　　　　1>下标号从 0 开始

　　　　　　　　　　　　　　　　　　2>parentNode、firstChild 以及 lastChild

<!DOCTYPE html>

<html>

<body>

<p id="intro">Hello World!</p>

<script>

x=document.getElementById("intro");

document.write(x.firstChild.nodeValue);

</script>

</body>

</html>

　　　　　　　　　　　　　　　　　　3>dom 根节点这里有两个特殊的属性，可以访问全部文档：　　　　document.documentElement - 全部文档 document.body - 文档的主体

<!DOCTYPE html>

<html>

<body>

<p>Hello World!</p>

<div>

<p>DOM 很有用！</p>

<p>本例演示 <b>document.body</b> 属性。</p>

</div>

<script>

alert(document.body.innerHTML);

</script>

</body>

</html>

　　　　　　　　　　　　　　　　　　　4>childNodes 和 nodeValue 属性来获取元素的内容

<!DOCTYPE html>

<html>

<body>

<p id="intro">Hello World!</p>

<script>

txt=document.getElementById("intro").childNodes[0].nodeValue;

document.write(txt);

</script>

</body>

</html>

3.对象

　　　　　　　　1.基本

　　　　　　　　　　　　　　　1.js中所有的事物都是对象

　　　　　　　　　　　　　　　2.对象只是带有属性和方法的特殊数据类型

　　　　　　　　　　　　　　属性是对象相关的值方法是能够在对象上执行的动作　

　　　　　　　　　　　　　　　3.创建对象

　　　　　　　　　　　　　　　　　　1>定义并创建对象的实例

<!DOCTYPE html>

<html>

<body>

<script>

person=new Object();

person.firstname="Bill";

person.lastname="Gates";

person.age=56;

person.eyecolor="blue";

document.write(person.firstname + " is " + person.age + " years old.");

</script>

</body>

</html>

　　　　　　　　　　　　　　　　　　　注：使用替代语法（使用对象literals）

<!DOCTYPE html>

<html>

<body>

<script>

person={firstname:"Bill",lastname:"gates",age:56,eyecolor:"blue"}

document.write(person.firstname + " is " + person.age + " years old.");

</script>

</body>

</html>

　　　　　　　　　　　　　　　　　　 2>使用对象构造器

<!DOCTYPE html>

<html>

<body>

<script>

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

}

myFather=new person("Bill","Gates",56,"blue");

document.write(myFather.firstname + " is " + myFather.age + " years old.");

</script>

</body>

</html>

　　　　　　　　　　　　　　　　　　　　　　注：可以多次创建

　　　　　　　　　　　　　　　　4.属性添加

person.firstname="Bill";

person.lastname="Gates";

person.age=56;

person.eyecolor="blue";

x=person.firstname;

　　　　　　　　　　　　　　　　5.方法添加

<!DOCTYPE html>

<html>

<body>

<script>

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

this.changeName=changeName;

function changeName(name)

{

this.lastname=name;

}

}

myMother=new person("Steve","Jobs",56,"green");

myMother.changeName("Ballmer");

document.write(myMother.lastname);

</script>

</body>

</html>

　　　　　　　　　　　　　　　　6.循环

<!DOCTYPE html>

<html>

<body>

<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>

<button onclick="myFunction()">点击这里</button>

<p id="demo"></p>

<script>

function myFunction()

{

var x;

var txt="";

var person={fname:"Bill",lname:"Gates",age:56}; 

for (x in person)

{

txt=txt + person[x];

}

document.getElementById("demo").innerHTML=txt;

}

</script>

</body>

</html>

　　　　　　　　　　2.数字

　　　　　　　　　　　　　　　　1.精度

　　　　　　　　　　　　　　　　　整数（不使用小数点或指数计数法）最多为 15 位。小数的最大位数是 17，但是浮点运算并不总是 100% 准确：

<!DOCTYPE html>

<html>

<body>

<script>

var x;

document.write("<p>只有 17 位: ");

x=12345678901234567890;

document.write(x + "</p>");

document.write("<p>0.2 + 0.1 = ");

x=0.2+0.1;

document.write(x + "</p>");

document.write("<p>可分别乘以 10 并除以 10 : ");

x=(0.2*10+0.1*10)/10;

document.write(x +"</p>");

</script>

</body>

</html>

　　　　　　　　　　　　　　　　2.进制

　　　　　　　　　　　　　　　　如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。绝不要在数字前面写零，除非需要进行八进制转换

var y=0377;

var z=0xFF;

　　　　　　　　　　　　　　　　3.属性

　　　　　　　　　　　　　　　　　　　　1>NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。

NaN 与其他数值进行比较的结果总是不相等的，包括它自身在内。因此，不能与 Number.NaN 比较来检测一个值是不是数字，而只能调用 isNaN() 来比较。

<html>

<body>

<script type="text/javascript">

document.write(isNaN(123)+ "<br />")

document.write(isNaN(-1.23)+ "<br />")

document.write(isNaN(5-2)+ "<br />")

document.write(isNaN(0)+ "<br />")

document.write(isNaN("Hello")+ "<br />")

document.write(isNaN("2005/12/12")+ "<br />")

</script>

</body>

</html>

　　　　　　http://www.w3school.com.cn/jsref/jsref_obj_number.asp

　　　　　　　　　　　　　　　　4.方法

http://www.w3school.com.cn/jsref/jsref_obj_number.asp

　　　　　　　　　　3.字符串

http://www.w3school.com.cn/jsref/jsref_obj_string.asp

　　　　　　　　　　4.日期

http://www.w3school.com.cn/jsref/jsref_obj_date.asp

　　　　　　　　　　5.数组

http://www.w3school.com.cn/jsref/jsref_obj_array.asp

　　　　　　　　　　6.布尔值逻辑

http://www.w3school.com.cn/jsref/jsref_obj_boolean.asp

　　　　　　　　　　7.Math算数

http://www.w3school.com.cn/jsref/jsref_obj_math.asp

　　　　　　　　　　8.正则表达式

http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

　　　　　　　　　　9.全局对象

http://www.w3school.com.cn/jsref/jsref_obj_global.asp

　　　　　　　　　　10.事件

http://www.w3school.com.cn/jsref/jsref_events.asp

4.浏览器对象

　　　　　　　　　　1.window

　　　　　　　　　　　　表示浏览器中打开的窗口。

　　　　　　　　　　　　　　　　　　1.全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一

　　　　　　　　　　　　　　　　　　2.windows尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

var w=window.innerWidth

|| document.documentElement.clientWidth

|| document.body.clientWidth;

var h=window.innerHeight

|| document.documentElement.clientHeight

|| document.body.clientHeight;

http://www.w3school.com.cn/jsref/dom_obj_window.asp

　　　　　　　　　 2.navigator

　　　　　　　　　　　　Navigator 对象包含有关浏览器的信息。

http://www.w3school.com.cn/jsref/dom_obj_navigator.asp　　

　　　　　　　　　 3. screen

　　　　　　　　　　　　Screen 对象包含有关客户端显示屏幕的信息。

http://www.w3school.com.cn/jsref/dom_obj_screen.asp

　　　　　　　　　 4. history

　　　　　　　　　　　　History 对象包含用户（在浏览器窗口中）访问过的 URL。

　　　　　　　　　　　　History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

http://www.w3school.com.cn/jsref/dom_obj_history.asp

　　　　　　　　　　 5. location

　　　　　　　　　　　　Location 对象包含有关当前 URL 的信息

　　　　　　　　　　　　Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

http://www.w3school.com.cn/jsref/dom_obj_location.asp

秒客网