JavaScript 基础

rain · 发表于 2014-10-18 01:01:56

本帖最后由 rain 于 2014-10-18 01:02 编辑

1、Dom
HTML DOM （文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

rain · 发表于 2014-10-22 23:34:32

事件

一般事件

事件	浏览器支持	事件描述
onClick	IE3\|N2\|O3	鼠标点击事件，多用在某个对象控制的范围内的鼠标点击
onDblClick	IE4\|N4\|O	鼠标双击事件
onMouseDown	IE4\|N4\|O	鼠标上的按钮被按下了
onMouseUp	IE4\|N4\|O	鼠标按下后，松开时激发的事件
onMouseOver	IE3\|N2\|O3	当鼠标移动到某对象范围的上方时触发的事件
onMouseMove	IE4\|N4\|O	鼠标移动时触发的事件
onMouseOut	IE4\|N3\|O3	当鼠标离开某对象范围时触发的事件
onKeyPress	IE4\|N4\|O	当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDown	IE4\|N4\|O	当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp	IE4\|N4\|O	当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]

页面相关事件

事件	浏览器支持	事件描述
onAbort	IE4\|N3\|O	图片在下载时被用户中断
onBeforeUnload	IE4\|N\|O	当前页面的内容将要被改变时触发的事件
onError	IE4\|N3\|O	捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误
onLoad	IE3\|N2\|O3	页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成
onMove	IE\|N4\|O	浏览器的窗口被移动时触发的事件
onResize	IE4\|N4\|O	当浏览器的窗口大小被改变时触发的事件
onScroll	IE4\|N\|O	浏览器的滚动条位置发生变化时触发的事件
onStop	IE5\|N\|O	浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onUnload	IE3\|N2\|O3	当前页面将被改变时触发的事件

表单相关事件

事件	浏览器支持	事件描述
onBlur	IE3\|N2\|O3	当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
onChange	IE3\|N2\|O3	当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
onFocus	IE3\|N2\|O3	当某个元素获得焦点时触发的事件
onReset	IE4\|N3\|O3	当表单中RESET的属性被激发时触发的事件
onSubmit	IE3\|N2\|O3	一个表单被递交时触发的事件

滚动字幕事件

事件	浏览器支持	事件描述
onBounce	IE4\|N\|O	在Marquee内的内容移动至Marquee显示范围之外时触发的事件
onFinish	IE4\|N\|O	当Marquee元素完成需要显示的内容后触发的事件
onStart	IE4\|N\|O	当Marquee元素开始显示内容时触发的事件

编辑事件

事件	浏览器支持	事件描述
onBeforeCopy	IE5\|N\|O	当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCut	IE5\|N\|O	当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onBeforeEditFocus	IE5\|N\|O	当前元素将要进入编辑状态
onBeforePaste	IE5\|N\|O	内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件
onBeforeUpdate	IE5\|N\|O	当浏览者粘贴系统剪贴板中的内容时通知目标对象
onContextMenu	IE5\|N\|O	当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]
onCopy	IE5\|N\|O	当页面当前的被选择内容被复制后触发的事件
onCut	IE5\|N\|O	当页面当前的被选择内容被剪切时触发的事件
onDrag	IE5\|N\|O	当某个对象被拖动时触发的事件 [活动事件]
onDragDrop	IE\|N4\|O	一个外部对象被鼠标拖进当前窗口或者帧
onDragEnd	IE5\|N\|O	当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了
onDragEnter	IE5\|N\|O	当对象被鼠标拖动的对象进入其容器范围内时触发的事件
onDragLeave	IE5\|N\|O	当对象被鼠标拖动的对象离开其容器范围内时触发的事件
onDragOver	IE5\|N\|O	当某被拖动的对象在另一对象容器范围内拖动时触发的事件
onDragStart	IE4\|N\|O	当某对象将被拖动时触发的事件
onDrop	IE5\|N\|O	在一个拖动过程中，释放鼠标键时触发的事件
onLoseCapture	IE5\|N\|O	当元素失去鼠标移动所形成的选择焦点时触发的事件
onPaste	IE5\|N\|O	当内容被粘贴时触发的事件
onSelect	IE4\|N\|O	当文本内容被选择时的事件
onSelectStart	IE4\|N\|O	当文本内容选择将开始发生时触发的事件

数据绑定

事件	浏览器支持	事件描述
onAfterUpdate	IE4\|N\|O	当数据完成由数据源到对象的传送时触发的事件
onCellChange	IE5\|N\|O	当数据来源发生变化时
onDataAvailable	IE4\|N\|O	当数据接收完成时触发事件
onDatasetChanged	IE4\|N\|O	数据在数据源发生变化时触发的事件
onDatasetComplete	IE4\|N\|O	当来子数据源的全部有效数据读取完毕时触发的事件
onErrorUpdate	IE4\|N\|O	当使用onBeforeUpdate事件触发取消了数据传送时，代替 onAfterUpdate事件
onRowEnter	IE5\|N\|O	当前数据源的数据发生变化并且有新的有效数据时触发的事件
onRowExit	IE5\|N\|O	当前数据源的数据将要发生变化时触发的事件
onRowsDelete	IE5\|N\|O	当前数据记录将被删除时触发的事件
onRowsInserted	IE5\|N\|O	当前数据源将要插入新数据记录时触发的事件

数据绑定

事件	浏览器支持	事件描述
onAfterPrint	IE5\|N\|O	当文档被打印后触发的事件
onBeforePrint	IE5\|N\|O	当文档即将打印时触发的事件
onFilterChange	IE4\|N\|O	当某个对象的滤镜效果发生变化时触发的事件
onHelp	IE4\|N\|O	当浏览者按下F1或者浏览器的帮助选择时触发的事件
onPropertyChange	IE5\|N\|O	当对象的属性之一发生变化时触发的事件
onReadyStateChange	IE4\|N\|O	当对象的初始化属性值发生变化时触发的事件

rain · 发表于 2014-10-19 20:50:32

本帖最后由 rain 于 2014-11-17 16:46 编辑

数组

数组是将多个数据对象编码存储、提供一致的存取方式的集合。每个数组对象都是数组的一个元素。

创建一个空数组： var Obj = new Array();
通过指定数组长度创建数组： var Obj = new Array(Size);
通过指定数组元素创建数组： var Obj = new Array(元素1，元素2，元素3.......);
直接创建数组： var Obj = [元素1，元素2，。。。。元素N];

push 将新元素添加到数组的尾部。
delete 删除数组元素
length 数组元素的个数

将数组转换为字符串：对象名.toString();

数组名.join(分隔符);
将数组元素连接成字符串，默认分隔符号是","。这里可以自定义连接符号。

数组名.pop()
移除数组末尾的一个元素，并将其返回。

数组名.shift()
移除数组的第一个元素并将其返回。

数组名.unshift[元素1，元素2。。。。]
将元素插入数组的首部。

数组名.concat()
将多个数组的元素连接在一起成为新的数组。

数组名.splice();
从一个数组中移除一个或多个元素。剩下的元素组成一个数组，移除的元素组成另一个数组并返回它的引用。同时，原数组可以在移除的位置处顺带插入新元素。

数组名.slice( start,end);
切取数组的一段元素作为新数组。

数组名.reverse()
将对象中的所有元素的次序反转。

数组名.sort([sortfunction])
将数组中的所有元素排序。

obj.toLocaleString();
将对象转换为本地字符串。

Asc 升序排列
Desc 降序排列

rain · 发表于 2014-10-19 19:53:06

函数

函数相当于一台磨面机，麦子（数据）从进料口进入机器内（函数体）进行加工，出料口出来的是面粉（返回值）。机器可以重复用来加工其他粮食，好比代码复用。

普通定义： function 函数名
变量定义： var 变量名 = new Function()

rain · 发表于 2014-10-19 13:08:53

本帖最后由 rain 于 2014-10-19 15:09 编辑

常用的内置对象
在面向对象的设计模式中，将数据和处理数据的方法捆绑在一起形成一个整体，成为对象。
要使用其中的数据或方法须先创建该对象。可以使用new运算符来调用对象的构造函数，从而创建一个对象。
var obj = new Object()
js内建了几种常用的对象：

1、日期对象 Date()

js把与日期相关的所有特性封装进Date对象，包括日期信息及其操作，主要用来进行与时间相关的操作。使用前首先创建该对象的一个实例，语法如下：
date = new Date();

getYear() 返回的时间是从1900年开始计算的，所以当前时间要加上1900.
getMonth()返回的月份从0开始计算，所以当前月份要加上 1.

2、全局对象
所有全局方法的拥有者，用来统一管理全局方法，也就是全局函数。直接调用即可。
常用的两个方法：
parseFloat(string) 返回由字符串string转换得到的浮点数
parseInt(string) .........的整数

rain · 发表于 2014-10-19 03:29:58

转义字符

' 第一个都是想要打印出来的效果
\' 第二行都是编程的时候需要写转义字符才能出现
下面的都以此类推看看吧

"
\"

\
\\

警报
\a

退格符
\b

换页符
\f

换行符
\n

回车符
\r

Tab 符
\t

垂直 Tab 符
\v

使用数字指定的Unicode 字符，如\u2000
\u

使用十六进制数指定的Unicode 字符,如\xc8
\x

空值
\0 (zero

rain · 发表于 2014-10-18 23:29:44

本帖最后由 rain 于 2014-10-19 00:09 编辑

15、控制语句

1、if 计算一个布尔值，为真执行下面语句。
2、if-else 双路选择。
3、if-else-if

4、switch

4、 for

5、while

6、do-while

7、for-in

8、break 和continue

9、try-catch

10、try-catch-finally

11、throw

rain · 发表于 2014-10-18 22:11:25

本帖最后由 rain 于 2014-11-14 00:03 编辑

14、表达式与运算符
变量名++                      // 先使用再递增，每次加1
++变量名                      //先递增再使用

--变量名          //递减运算符
* 乘法
“==”    //只要类型转换后仍然相等的话，则返回true。 "===" 值和类型必须完全一致。
“！=” 转换类型后相等，则返回false。 "!==" 值同类型不同，仍返回true。
“<=”  小于或等于             ">="大于或等于

in    //检查对象中是否有某特定的属性，可以用来取得数组索引集合。
instanceof //表明某对象是否是某个类的实例，返回一个布尔值。
“=”    //用于给变量赋值。例：  var  name="jet";
"&&" //逻辑与  运算符。多个条件相与时需要所有条件都成立表达式才返回true。
" || " 逻辑或运算符，两个至少有一个为true
" ! " 逻辑非运算符

条件表达式 ? 语句1 : 语句2          //条件成立执行1，不成立执行2.
new //创建对象，创建一个类的实例对象。例： var  myName = new String("tom");
void // 可以让表达式被执行而结果被忽略。
typeof(表达式)；  // 获得数据的类型名。返回6种可能的值，number\string\boolean\object\function\undefined
" . "  //对象属性存取运算符。对象名.属性名或方法名                   类名.方法名
" [ ] " //存取数组元素，方括号中是存取的元素的下标。
delete    //删除动态添加的对象的属性或者数组的一个元素。
" , " //使其两边的表达式按从左到右的顺序被执行，并返回最右边表达式的值。表达式1 ,  表达式2
"call"  //函数调用运算符，作用于Function 对象。主要功能是调用对象的一个方法，并以另一个对象作替换为当前对象，以改变this指针的方向。  对象名.call()
"this"  //返回当前对象的引用。通常用在对象构造函数中，用来引用函数对象本身。

rain · 发表于 2014-10-18 04:44:57

本帖最后由 rain 于 2014-10-18 04:55 编辑

13、节点
添加和删除节点

创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

实例
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>
<script>
var para=document.createElement("p");                   //这段代码创建新的 <p> 元素：
var node=document.createTextNode("这是新段落。"); //如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

para.appendChild(node);          //然后您必须向 <p> 元素追加这个文本节点：
var element=document.getElementById("div1"); //最后您必须向一个已有的元素追加这个新元素。这段代码找到一个已有的元素：
element.appendChild(para); //这段代码向这个已有的元素追加新元素：
</script>

removeChild       删除已有的html元素

rain · 发表于 2014-10-18 03:35:01

本帖最后由 rain 于 2014-10-18 03:36 编辑

11、DOM Element
Element 对象表示 HTML 元素。Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
HTML DOM 节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

属性和方法

下面的属性和方法可用于所有 HTML 元素上：

属性 / 方法	描述
element.accessKey	设置或返回元素的快捷键。
element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.attributes	返回元素属性的 NamedNodeMap。
element.childNodes	返回元素子节点的 NodeList。
element.className	设置或返回元素的 class 属性。
element.clientHeight	返回元素的可见高度。
element.clientWidth	返回元素的可见宽度。
element.cloneNode()	克隆元素。
element.compareDocumentPosition()	比较两个元素的文档位置。
element.contentEditable	设置或返回元素的文本方向。
element.dir	设置或返回元素的文本方向。
element.firstChild	返回元素的首个子。
element.getAttribute()	返回元素节点的指定属性值。
element.getAttributeNode()	返回指定的属性节点。
element.getElementsByTagName()	返回拥有指定标签名的所有子元素的集合。
element.getFeature()	返回实现了指定特性的 API 的某个对象。
element.getUserData()	返回关联元素上键的对象。
element.hasAttribute()	如果元素拥有指定属性，则返回true，否则返回 false。
element.hasAttributes()	如果元素拥有属性，则返回 true，否则返回 false。
element.hasChildNodes()	如果元素拥有子节点，则返回 true，否则 false。
element.id	设置或返回元素的 id。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.isContentEditable	设置或返回元素的内容。
element.isDefaultNamespace()	如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。
element.isEqualNode()	检查两个元素是否相等。
element.isSameNode()	检查两个元素是否是相同的节点。
element.isSupported()	如果元素支持指定特性，则返回 true。
element.lang	设置或返回元素的语言代码。
element.lastChild	返回元素的最后一个子元素。
element.namespaceURI	返回元素的 namespace URI。
element.nextSibling	返回位于相同节点树层级的下一个节点。
element.nodeName	返回元素的名称。
element.nodeType	返回元素的节点类型。
element.nodeValue	设置或返回元素值。
element.normalize()	合并元素中相邻的文本节点，并移除空的文本节点。
element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的宽度。
element.offsetLeft	返回元素的水平偏移位置。
element.offsetParent	返回元素的偏移容器。
element.offsetTop	返回元素的垂直偏移位置。
element.ownerDocument	返回元素的根元素（文档对象）。
element.parentNode	返回元素的父节点。
element.previousSibling	返回位于相同节点树层级的前一个元素。
element.removeAttribute()	从元素中移除指定属性。
element.removeAttributeNode()	移除指定的属性节点，并返回被移除的节点。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。
element.scrollHeight	返回元素的整体高度。
element.scrollLeft	返回元素左边缘与视图之间的距离。
element.scrollTop	返回元素上边缘与视图之间的距离。
element.scrollWidth	返回元素的整体宽度。
element.setAttribute()	把指定属性设置或更改为指定值。
element.setAttributeNode()	设置或更改指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData()	把对象关联到元素上的键。
element.style	设置或返回元素的 style 属性。
element.tabIndex	设置或返回元素的 tab 键控制次序。
element.tagName	返回元素的标签名。
element.textContent	设置或返回节点及其后代的文本内容。
element.title	设置或返回元素的 title 属性。
element.toString()	把元素转换为字符串。
nodelist.item()	返回 NodeList 中位于指定下标的节点。
nodelist.length	返回 NodeList 中的节点数。

rain · 发表于 2014-10-18 03:31:18

本帖最后由 rain 于 2014-10-19 23:37 编辑

10、DOM Document

Document 对象集合

集合	描述
all[]	提供对文档中所有 HTML 元素的访问。
anchors[]	返回对文档中所有 Anchor 对象的引用。
applets	返回对文档中所有 Applet 对象的引用。
forms[]	返回对文档中所有 Form 对象引用。
images[]	返回对文档中所有 Image 对象引用。
links[]	返回对文档中所有 Area 和 Link 对象引用。

Document 对象属性

属性	描述
body	提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

Document 对象方法

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

http://baike.baidu.com/view/1091026.htm?fr=aladdin 完整介绍

		自动登录	找回密码
密码			立即注册