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 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 22:11:25

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

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

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

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

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

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-19 03:29:58

转义字符

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

"
\"

\
\\

警报
\a

退格符
\b

换页符
\f

换行符
\n

回车符
\r

Tab 符
\t

垂直 Tab 符
\v

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

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

空值
\0 (zero

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

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

常用的内置对象
在面向对象的设计模式中,将数据和处理数据的方法捆绑在一起形成一个整体,成为对象。
要使用其中的数据或方法须先创建该对象。可以使用new运算符来调用对象的构造函数,从而创建一个对象。
varobj = 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 19:53:06

函数

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

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

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.......);
直接创建数组:varObj = [元素1,元素2,。。。。元素N];

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

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

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

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

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

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

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

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



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

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

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

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

Asc   升序排列
Desc   降序排列

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

事件

一般事件

事件
浏览器支持事件描述
onClickIE3|N2|O3鼠标点击事件,多用在某个对象控制的范围内的鼠标点击
onDblClickIE4|N4|O鼠标双击事件
onMouseDownIE4|N4|O鼠标上的按钮被按下了
onMouseUpIE4|N4|O鼠标按下后,松开时激发的事件
onMouseOverIE3|N2|O3当鼠标移动到某对象范围的上方时触发的事件
onMouseMoveIE4|N4|O鼠标移动时触发的事件
onMouseOutIE4|N3|O3当鼠标离开某对象范围时触发的事件
onKeyPressIE4|N4|O当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDownIE4|N4|O当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUpIE4|N4|O当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]

页面相关事件

事件
浏览器支持
事件描述

onAbortIE4|N3|O图片在下载时被用户中断
onBeforeUnloadIE4|N|O当前页面的内容将要被改变时触发的事件
onErrorIE4|N3|O捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误
onLoadIE3|N2|O3页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成
onMoveIE|N4|O浏览器的窗口被移动时触发的事件
onResizeIE4|N4|O当浏览器的窗口大小被改变时触发的事件
onScrollIE4|N|O浏览器的滚动条位置发生变化时触发的事件
onStopIE5|N|O浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onUnloadIE3|N2|O3当前页面将被改变时触发的事件


表单相关事件

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


滚动字幕事件

事件
浏览器支持
事件描述

onBounceIE4|N|O在Marquee内的内容移动至Marquee显示范围之外时触发的事件
onFinishIE4|N|O当Marquee元素完成需要显示的内容后触发的事件
onStartIE4|N|O当Marquee元素开始显示内容时触发的事件

编辑事件

事件
浏览器支持
事件描述
onBeforeCopyIE5|N|O当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCutIE5|N|O当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onBeforeEditFocusIE5|N|O当前元素将要进入编辑状态
onBeforePasteIE5|N|O内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件
onBeforeUpdateIE5|N|O当浏览者粘贴系统剪贴板中的内容时通知目标对象
onContextMenuIE5|N|O当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
[试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]
onCopyIE5|N|O当页面当前的被选择内容被复制后触发的事件
onCutIE5|N|O当页面当前的被选择内容被剪切时触发的事件
onDragIE5|N|O当某个对象被拖动时触发的事件 [活动事件]
onDragDropIE|N4|O一个外部对象被鼠标拖进当前窗口或者帧
onDragEndIE5|N|O当鼠标拖动结束时触发的事件,即鼠标的按钮被释放了
onDragEnterIE5|N|O当对象被鼠标拖动的对象进入其容器范围内时触发的事件
onDragLeaveIE5|N|O当对象被鼠标拖动的对象离开其容器范围内时触发的事件
onDragOverIE5|N|O当某被拖动的对象在另一对象容器范围内拖动时触发的事件
onDragStartIE4|N|O当某对象将被拖动时触发的事件
onDropIE5|N|O在一个拖动过程中,释放鼠标键时触发的事件
onLoseCaptureIE5|N|O当元素失去鼠标移动所形成的选择焦点时触发的事件
onPasteIE5|N|O当内容被粘贴时触发的事件
onSelectIE4|N|O当文本内容被选择时的事件
onSelectStartIE4|N|O当文本内容选择将开始发生时触发的事件

数据绑定

事件
浏览器支持
事件描述
onAfterUpdateIE4|N|O当数据完成由数据源到对象的传送时触发的事件
onCellChangeIE5|N|O当数据来源发生变化时
onDataAvailableIE4|N|O当数据接收完成时触发事件
onDatasetChangedIE4|N|O数据在数据源发生变化时触发的事件
onDatasetCompleteIE4|N|O当来子数据源的全部有效数据读取完毕时触发的事件
onErrorUpdateIE4|N|O当使用onBeforeUpdate事件触发取消了数据传送时,代替 onAfterUpdate事件
onRowEnterIE5|N|O当前数据源的数据发生变化并且有新的有效数据时触发的事件
onRowExitIE5|N|O当前数据源的数据将要发生变化时触发的事件
onRowsDeleteIE5|N|O当前数据记录将被删除时触发的事件
onRowsInsertedIE5|N|O当前数据源将要插入新数据记录时触发的事件


数据绑定

事件
浏览器支持
事件描述
onAfterPrintIE5|N|O当文档被打印后触发的事件
onBeforePrintIE5|N|O当文档即将打印时触发的事件
onFilterChangeIE4|N|O当某个对象的滤镜效果发生变化时触发的事件
onHelpIE4|N|O当浏览者按下F1或者浏览器的帮助选择时触发的事件
onPropertyChangeIE5|N|O当对象的属性之一发生变化时触发的事件
onReadyStateChangeIE4|N|O当对象的初始化属性值发生变化时触发的事件

页: 1 [2]
查看完整版本: JavaScript 基础