JavaScript语句代码
JavaScript内置对象和操作
数组的操作:
得到数组长度 var len = array.length;
将元素添加到数组开头:array.unshift(要添加的对象);
将元素添加到数组的末尾:array.push(要添加的对象);
删除数组第一个元素:array.shift();
删除数组最后一个元素:array.pop();
删除指定的元素:Array a = array.splice(起始索引,删除的个数);splice方法会将新的数组返回 得到数组片段:array.slice(起始索引,个数);
翻转数组:array.reverse();
将数组的元素连接array.join(“连接符”)(连接符不填的话默认为逗号,)
数组元素的排序array.sort();(由小到大)
字符串对象的操作:
获取字符串的长度:str.length;(length为属性,不是函数)
字符串的截取:str.stringsubstring(起始索引,位数-1)
字符串的替换:str.replace(“原始字符串”,”替换字符串”);
大小写转换:str.toLowerCase(); str.toUpperCase();
将字符串转换为数组:str.split(“分割符”)
数学运算:
小数取整:Math.ceil(小数)向上取整
Math.floor(小数)向下取整
得到随机数:var num = Math.random();
最大值var max = Math.max(num1,num2,num3…………)
最小值var min = Math.min(num1,num2,num3…………)
window对象属性及方法(window.可以省略)
显示提示信息:alert(提示信息);
弹出确认框:confirm(提示信息);
弹出输入框:prompt(提示信息);
窗口状态栏:window.status=”提示信息”
延迟执行:setTimeout(函数名,延迟时间)
定时循环执行:setInterval(函数名,间隔时间);
窗口状态栏:window.status=”提示信息”
setTimeout(函数名,延迟时间)
DOM对象操作
节点的引用:
通过ID获得节点引用:document.getElementBy(id)
通过name获得节点集合的引用:document.getElementsByName(name)
通过标签名获得节点集合的引用:document.getELementsByTagName(TagName)
引用父节点:node.getParentNode;
引用第一个子节点:node.firstChild
引用最后一个子节点:node.lastChild
引用全部子节点结合:node.childNodes
引用相邻的前一个节点:node.previousSibling
引用相邻的后一个节点:node.nextSibling
对节点的操作
创建元素节点: document.createElement(标签名)
创建文本节点:document.createTextNode(文本内容)
添加节点:node.appendChild(要添加的节点)
插入子节点: parent.insertBefore(需要插入的节点,要插入的当前节点)
替换子节点:node.replaceChild(新节点,被替换的节点)
复制节点:var cloneNode=node.cloneNode();
删除子节点:parentNode.removeChild(要删除的节点)
读取节点属性:node.getAttribute(属性名称)
添加或修改节点属性:node.setAttribute(属性名称,属性值)
删除节点的属性:node.removeAttribute(要删除的属性名称)
设置节点的html内容:node.innerHTML="html内容";
设置节点的文本内容:node.innerText="文本内容";
样式控制
设置节点的样式:node.className=样式名字
设置背景色:node.style.backgroundColor=”red”
设置文字颜色:node.style.color=”green”
设置相对或者绝对位置:node.style.position="p"
p=absolute(绝对)或者relative(相对)
设置元素的x坐标:node.style.left=距离+"px"
设置元素的y坐标:node.style.top=距离+"px"
设置元素的高度:node.style.height=高度+"px"
设置元素的宽度:node.style.width=宽度+"px"
添加事件处理(以下方法均用click作为例子,注意有的需要加on,有的不需要)
(1)在html代码内给元素内添加事件 : <input type=”button” onclick=”test()”/>
(2)通过给node的属性赋值来绑定事件 : node.onclick=函数名
(3)火狐的事件绑定,IE不支持:obj.addEventListener(click,处理函数名称,false); (不加on)
(4)IE的事件绑定,火狐不支持:obj.attachEvent(onclick, 处理函数名称)(加on)
注销事件处理
(1)node.onclick=null;
(2)obj.removeEventListener(click,处理函数名称,false);(FF支持,IE不支持)
(3)obj.detachEvent(onclick,处理函数名称);(IE支持,FF不支持)
兼容IE和FF的常用代码总结
(1)获取鼠标的x,y坐标(兼容IE和FF)
var mouseX= (document.body.scrollLeft||document.documentElement.scrollLeft)+evt.clientX; var mouseY = (document.body.scrollTop || document.documentElement.scrollTop) + evt.clientY;
(2)获取事件模型event(兼容IE和FF)
function getEvent(event){
} var evt = event || window.event;
(3)获取发出事件的源对象(兼容IE和FF)
function getTarget(event){
} var evt = event || window.event; var target = evt.target || evt.srcElement; alert(target.value);
(4)获取XMLHttpRequest对象(兼容IE和FF)
if(window.XMLHttpRequest){
} xmlhttp=new XMLHttpRequest(); xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); }else{
(5)通过ajax方式发送请求
if(xmlhttp){
xmlhttp.open("POST","Ajaxserver",true);设置请求方式,请求URI,是否异步 var parm=name+","+wish+","+color;设置发送参数 //设置发送的头信息 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlhttp.send("name=" + parm);发送参数
xmlhttp.onreadystatechange=callback;设置状态变化事件,callback为回调函数
}
function callback(){
} if(xmlhttp.readyState==4){ var result=xmlhttp.responseText;获得服务器返回的结果 }
第二篇：JavaScript学习总结
1、 JavaScript变量可以使用var事先进行声明，也可以用赋值语句隐藏声明。对于一个变量，它存在指的是它拥有值。检查一个变量是否有值的方法是使用Window对象，因为JavaScript声明或使用的变量都属于Window对象的属性。
2、 JavaScript函数使用function命令声明，如果函数有返回值，在调用时就可以使用指定语句获取返回值。当调用函数传入参数时，函数即使没有指明参数名称，也一样可以使用参数数组的对象arguments获取参数的个数和参数值。
3、 局部变量：在函数内声明，只能在函数内的程序使用；全局变量：在函数外声明，整个JavaScript程序的函数和程序代码都可以使用。
4、 自定义JavaScript的对象：直接建立Object对象副本后，可新增所需的属性和方法；建立对象的构造函数，定义属性和方法，使用new命令建立对象副本时，构造函数传入的参数是对象的属性值，如果在建立副本时未指定属性值，一样可以在建立副本后再设置对象的属性值。
5、 JavaScript的内置对象：Array、Date、Function、Math、String···
6、 DHTML对象模型：是将浏览器和HTML文件的标签都对象化，以便JavaScript程序代码可以轻易地操控浏览器和访问HTML标签的对象。
版本3.x BOM、版本4.x DHTML=BOM+DHTML DOM、版本5.x BOM+W3C DOM
7、 DOM对象模型是一种拥有扩展性的文件架构
DOM Level 0 - DHTML DOM、DOM Level 1 – W3C DOM
DHTML DOM 和 W3C DOM 的差异在于DHTML DOM只是将整份HTML文件都对象化，每一个HTML标签都对应有标签对象；W3C DOM属于一种通用的文件浏览和访问机制，可以将整份HTML或XML文件视为一种阶层架构的树状结构。
8、 DHTML对象模型的完整架构是由BOM的根对象Window开始。
9、 Window对象：浏览器的窗口对象
浏览器的状态栏：属性defaultStatus、status
定时器：方法setTimeout(express,time) clearTimeout()
只会运行一次，在经过设置的一段时间后，运行指定的函数或表达式
方法setInterval(express,time) clearInteval()
一旦启动就可以周期性地运行函数或表达式
窗口的打开与关闭：open(url,winName)方法可以打开一个全新的窗口，并且使用JavaScript程序代码获取新窗口的Window对象；在父窗口使用winID访问新窗口的属性和方法，Window对象的opener属性可以参考到父窗口的Window对象。
Close()方法可以关闭一个窗口。
10、Window对象内置对话框：
alert(message) 显示一个警告信息的窗口，参数就是显示的信息内容。
confirm(message) 一个确认的对话框，参数为信息内容，传回true表示单击”确认”按钮，false为”取消”按钮。
Prompt(msg,value) 显示输入文字内容的对话框，参数msg为信息内容，value为默认值，传回用户输入的字符串。
showModelessDialog(url,arguments,features) 显示一个新的窗口，参数url为显示的网页。arguments为传送到显示网页的参数，可以是任何数据，例如对象；在显示的网页中可以使用window对象的dialogArguments属性获取传递过来的参数。feature参数可以设置对话框的外观。
11、更改窗口的尺寸和位置：
Window对象的属性：screenLeft传回左边界的坐标 screenTop传回上边界的坐标
Window对象的方法：moveTo(x,y) 将浏览器移到坐标x和y的位置
moveBy(offsetx,offsety) 将浏览器目前的位置移动参数的位移量
resizeTo(width,height) 将浏览器窗口调整为参数width和height的尺寸
resizeBy(offsetx,offsety) 将浏览器窗口尺寸放大或缩小
12、窗口内容的卷动
Window对象的方法：scroll(x,y)、scrollTo(x,y) 滚动窗口内容到指定的位置
scrollBy(offsetx,offsety) 从目前窗口内容的位置，滚动参数的位移量
13、Navigator对象：获取浏览器和系统资源的信息
14、History对象：保存历史记录
15、Location对象：保存目前URL网址的详细数据
属性：href 返回完整的URL字符串，重设该属性可以转向链接到其他的网址
方法：reload() 重新加载现在打开的HTML文件，如同浏览器工具栏中的“刷新”按钮
replace(url) 转向到参数url的网址，如同设置href属性
16、Document对象：
打开与写入文件：方法open(“text/html”,”replace”)可以清除目前的文件内容，第一个参数是MIME类型，text/html就是html文件，第二个参数replace可以取代历史记录，浏览器就无法按工具栏的“上一页”按钮返回上一页。
方法 write()或writeln()输出HTML文件的内容
方法 close()显示输出的内容
获取文件的指定元素：getElementById()
17、JavaScript的Cookies处理：Cookies可以在客户端的计算机保存所需的数据，可以使用Document对象的cookie属性处理Cookie的访问，返回的字符串使用“；”分隔每一个Cookie
新增Cookie函数：saveCookie(name,value,expires)
获取Cookie值函数：getCookie(name)
检查Cookie是否存在的函数：checkCookieExit()
删除Cookie函数：deleteCookie(name)
18、DHTML DOM的Collection对象：
document.all对象集合可以获取HTML文件中所有的标签对象，这是一个数组对象，依照标签在HTML文件出现的顺序，可以使用索引值访问指定的标签对象,如document.all[i]。也可以直接使用id属性获取，如document.all(“myId”)或myId。
如果HTML文件拥有同名的id属性，获取的仍然是一个集合，还需要使用item()方法获取指定的标签对象。
同理，myBody.all对象集合可以获取id为myBody的body区域块中的所有标签对象。
在all对象集合的所有标签对象中，可以进一步使用tags()方法筛选出指定标签的对象集合，如document.all.tags(“p”)，可使用length属性获取共有多少个＜p＞标签。
19、HTML文件的阶层架构：
HTML文件中的标签属于一种阶层架构，可以使用parentElement属性获取上一层的标签对象，用children对象集合获取下一层标签的对象集合，这个对象集合可以进一步使用item()方法获取指定的标签对象。
20、访问HTML标签的内容：
innerText() 访问标签对象的内容
innerHTML() 访问标签对象内的子标签和内容，不包含标签对象本身
outerText() 访问标签对象的内容，可以用来取代整个标签对象
outerHTML() 访问标签对象的子标签和内容，包括标签对象本身
21、访问HTML标签的属性：
在获取HTML标签的对象后，也可以访问标签对象的属性
22、CSS层级式样式表：
HTML标签都拥有默认的显示样式，CSS能够重新定义HTML标签的显示效果，也可以自定义新的样式名称。
如果是class属性，则定义的样式名称以”.”句点开始，可以定义多个值，并且可以应用到多个标签上
如果是id属性，则定义的样式名称以”#”开始，可以定义多个值，但只能应用到一个标签上
23、动态样式CSS：
CSS样式属性可以对应Style对象的属性，在获取HTML标签对象后，可以访问Style对象的属性，如：objEle.style.color
24、DHTML的事件：
事件就是在浏览器显示和阅读HTML文件时，鼠标、键盘或文件加载等操作所触发的一些动作
鼠标事件：onclick 单击鼠标左键 ondbclick 双击鼠标左键 onmousemove 移动鼠标
onmouseout 鼠标指针离开HTML标签
onmouseover鼠标指针进入HTML标签
onmousedown 按下鼠标键onmouseup 放开鼠标键
键盘事件：onkeydown 当按下键盘按键 onkeyup 放开键盘按键
其他常用事件：onload 当浏览器加载HTML文件后
onunload 当用户离开浏览器，或是加载其他网页时
onfocus 用户指定对象拥有处理权
onblur 用户离开拥有处理权的对象
onchange 用户更改对象的内容
onsubmit 用户发送窗体字段
onreset 用户重设窗体字段
onselect 用户选择了网页内容
25、JavaScript的事件处理：
方式一：在HTML标签的属性中设置JavaScript的事件处理函数
如：＜input type=”button” value=”按钮” onclick=”showAlert();” /＞
方式二：在对象的属性中设置JavaScript的事件处理
如：document.myForm.myButton.onclick = showAlert;
如果事件是由Window或Document等上层对象所触发，此时只需设置对象的事件属性，就可以指定事件的处理函数
取消事件的处理：可以取消用户新增的事件处理函数，也可以取消浏览器默认的事件处理函数。
当事件触发后，浏览器默认的事件处理函数就会进行事件的处理，拥有默认处理函数的
常见事件有：元素＜a＞ 事件onclick 单击可以显示其他URL网址的HTML文件
元素＜form＞ 事件onsubmit 发送窗体字段的内容
元素document 事件oncontextmenu 单击鼠标右键可以显示一个快捷菜单
方式一：将事件属性设为null
如：document.myForm.myButton.onclick = null;
方式二：使用自定义的事件处理函数，函数传回false时就可取消事件
如：return false;
方式三：将event对象的returnValue属性设置为false
如：event. returnValue = false;
26、Event对象：
当事件触发时就会产生一个Event对象，它的属性用来记录事件触发时的一些数据
Event对象是一个全局属性，不能把Event对象作为参数传递给事件处理函数
属性：srcElement 返回事件触发时的标签对象
returnValue 设置和取消事件的返回值
27、DHTML DOM的窗体对象的架构
使用字段名称访问窗体字段：如 document.myForm.myUserName.value
使用forms和elements对象访问字段：如 document.forms[0].elements[0].value
28、Form对象
属性：name、action、method、target
方法：submit() 发送窗体字段到服务器 reset() 重设窗体的各字段为默认值
29、Input对象
属性：name、type、value、disabled、form、readonly、maxlength
针对单选按钮和复选框的属性：checked
方法：blur()设置Input对象失去处理权 focus()设置Input对象拥有处理权
select()选择Input对象 click()触发其他字段的onclick事件
30、Select对象
属性：name、disabled、length、options、selectedIndex、size、multiple
方法：blur()设置Select对象失去处理权 focus()设置Select对象拥有处理权
add(objOption, index)新增一个＜option＞标签选项，第一个参数为Option对象，第二个参数为选项的索引位置
使用构造函数建立Option对象：var objOption = new Option(text, value)
remove(index)删除参数索引值的选项
31、Option对象
属性：value、text、selected
32、Textarea对象
属性：cols、rows
方法：blur()设置Textarea对象失去处理权 focus()设置Textarea对象拥有处理权
select()选择Textarea对象
33、JavaScript的窗体字段验证
验证属性： 文字、密码和备注 value
单选按钮和复选框 checked
下拉式菜单 selected
方法：submit() onsubmit事件
34、Table对象
属性：border、cellPadding、cellSpaing、rows
方法：insertRow(index)在表格插入一个新行，插入的位置是在参数的行号之前
deleteRow(index)在表格删除传入参数行号的表格行
35、TableRow对象
属性：cells、rowIndex
方法：insertCell(index)插入单元格，是插在传入的单元格编号之前
deleteCell(index)删除传入单元格编号参数的单元格
36、TableCell对象
属性：colSpan、rowSpan、cellIndex
37、Window对象的frames对象集合
当浏览器显示框架页时，框架页的每一个框架都是一个Window对象，使用frame[]对象集合获取各框架的Window对象，也可以直接使用框架标签的名称来获取各框架的Window对象。
Window对象的属性：self 返回目前的Window对象
parent 返回目前框架的上一层对象
top 如果是一个嵌套框架，top就是最上层的Window对象
38、FrameSet对象
属性：name、cols、rows
39、Frame对象
属性：name、src
40、Iframe对象
属性：name、src
41、Anchor对象
属性：href、target 访问显示的框架名称或窗口（默认值有_blank _self _parent）
方法：blur()设置Anchor对象失去处理权 focus()设置Anchor对象拥有处理权
42、W3C DOM浏览节点
DHTML DOM 和W3C DOM最主要的差异就是获取节点的方式
DHTML DOM需要使用id/name属性或者对象集合等不同方式才能获得标签对象
W3C DOM提供一致的走访方式，只要建立好树状结构，所有能走访到的节点就是标签对象
只读属性：firstChild、lastChild、parentNode、nextSibling、previousSibling、nodeName
读/写属性：nodeValue访问文字节点的内容
对象集合：childNodes子节点的对象集合、attributes节点属性的对象集合
43、Ajax应用程序架构
传统Web应用程序架构：浏览器向web服务器提出HTTP请求，web服务器处理后产生HTML文件，就可以传回浏览器来显示。服务器可能单纯传回请求的HTML文件，或运行服务器网页技术ASP、JSP等，动态产生或进一步从数据库取出所需数据来建立相应的HTML文件。在客户端浏览器只是单纯显示HTML网页内容，而且浏览器需要等待服务器响应后，才能显示网页内容。
Ajax应用程序架构：最大差异是在客户端新增JavaScript编写的Ajax引擎来处理HTTP请求，并获取服务器的响应数据，更新网页接口的部分内容。用户不再需要等待服务器的相应，就可以进行其他操作。
44、XML的基础
XML是可扩展的标识语言，用来描述数据，需要自行定义描述数据所需的各种标签。
XML文件的组成元素：
元素、属性、实体参考：< ＜ > ＞ & & ' ‘ " “
批注：＜!-- --＞ PCDATA：XML文件的文字内容
CDATA区块：＜![CDATA[ ]]＞ 通常用来保存程序代码数据
PI：＜?name ?＞ 允许XML文件包含传送给应用程序的命令。
DTD：XML文件的验证机制，可以检查XML标签和文件架构是否正确。
45、XHTML的基础
XHTML仍然使用HTML4.0版的标签，它是W3C制定用来取代HTML4.0版的下一代HTML。XHTML文件是良好格式的HTML，它必须遵循XML文件的编写规则：
·不可以省略结尾标签，保证所有标签都成对出现
·标签和属性都是使用小写的英文字
·属性值需要使用引号括起来
·name属性使用id属性取代
46、XML DOM
XML DOM是W3C DOM针对XML文件所提供应用程序的标准的程序接口，可以通过接口来访问各种节点对象。