javascript学习心得2

JavaScript开发规范要求

作为一名开发人员（WEB前端JavaScript开发），不规范的开发不仅使日后代码维护变的困难，同时也不利于团队的合作，通常还会带来代码安全以及执行效率上的问题。本人在开发工作中就曾与不按规范来开发的同事合作过，与他合作就不能用“愉快”来形容了。现在本人撰写此文的目的除了与大家分享一点点经验外，更多的是希望对未来的合作伙伴能够起到一定的借鉴作用。当然，如果我说的有不科学的地方还希望各路前辈多多指教。下面分条目列出各种规范要求，这些要求都是针对同事编码毛病提出来的，好些行业约定的其它规范可能不会再提及。

1、保证代码压缩后不出错

对于大型的JavaScript项目，一般会在产品发布时对项目包含的所有JavaScript文件进行压缩处理，比如可以利用Google Closure Compiler Service对代码进行压缩，新版jQuery已改用这一工具对代码进行压缩，这一般会去掉开发时写的注释，除去所有空格和换行，甚至可以把原来较长的变量名替换成短且无意义的变量名，这样做的目的是加快文件的下载速度，同时也减小网站访问带来的额外数据流量，另外在代码保护上也起到了一点点作用，至少压缩后的代码即使被还原还是没那么容易一下读懂的。要想代码能正确通过压缩，一般要求语句都要以分号正常结束，大括号也要严格结束等，具体还要看压缩工具的要求。所以如果一开始没有按标准来做，等压缩出错后再回去找错误那是浪费时间。

2、保证代码能通过特定IDE的自动格式化功能

一般较为完善的开发工具（比如Aptana Studio）都有代码“自动格式”化功能，这一功能帮助实现统一换行、缩进、空格等代码编排，你可以设置自己喜欢的格式标准，比如左大括号{是否另起一行。达到这个要求的目的在于方便你的开发团队成员拿你代码的一个副本用IDE自动格式化成他喜欢或熟悉的风格进行阅读。你同事需要阅读你的代码，可能是因为你写的是通用方法，他在其它模块开发过程中也要使用到，阅读你的代码能最深入了解方法调用和实现的细节，这是简单API文档不能达到的效果。

3、使用标准的文档注释

这一要求算是最基本的，这有利于在方法调用处看到方法的具体传参提示，也可以利用配套文档工具生成html或其它格式的开发文档供其他团队成员阅读，你可以尝试使用jsdoc-toolkit。如果你自动生成的API是出自一个开放平台，就像facebook.com应用，那么你的文档是给天下所有开发者看的。另外编写完整注释，也更方便团队成员阅读你的代码，通过你的参数描述，团队成员可以很容易知道你编写的方法传参与实现细节。当然也方便日后代码维护，这样即使再大的项目，过了很长时间后，回去改点东西也就不至于自己都忘记了当时自己写的代码是怎么一回事了。

4、使用规范有意义的变量名

使用规范有意义的变量名可以提高代码的可读性，作为大项目开发成员，自己写的代码不仅仅要让别人容易看懂。开发大项目，其实每个人写的代码量可能都比较大，规范命名，日后自己看回自己的代码也显的清晰易懂，比如日后系统升级或新增功能，修改起代码来也轻松多了。如果到头发现自己当初写的代码现在看不太懂了，那还真是天大的笑话了。

当然，使用有意义的变量名也尽量使用标准的命名，比如像这里：var me = this也许没有var self = this好，因为self是Python中的关键字，在Python中self就是通常语言this的用法。再看下面一个例子，加s显然比没有加来的科学些，这样可以知道这个变量名存的是复数，可能是数组等：

var li = document.getElementsByTagName('li')
var lis = document.getElementsByTagName('li')

5、不使用生偏语法

JavaScript作为一门动态脚本语言，灵活性既是优点也是缺点，众所周知，动态语言不同层次开发人员对实现同样一个功能写出来的代码在规范或语法上会存在较大的差别。不管怎么样，规范编码少搞怪，不把简单问题复杂化，不违反代码易读性原则才是大家应该做的。

比如这语句：typeof(b) == 'string' && alert(b)应该改为：if (typeof(b) == 'string') alert(b)，像前面那种用法，利用了&&运算符解析机制：如果检测到&&前语句返回false就不再检测后面语句，在代码优化方面也有提到把最可能出现的情况首先判断，像这种写法如果条件少还好，如果条件较多而且语句也长，那代码可读性就相当差。

又比如：+function(a){var p = a;}( 'a')应该改为：(function(a){var p = a;})( 'a')，其实function前面的+号与包含function的()括号作用是一样的，都是起运算优先作用，后者是常见且容易看明白的防止变量污染的做法，比如好些流行JavaScript框架就是采用后面这种方式。

再说个降低代码可读性的例子，如：function getPostionTxt(type){return type == 2 ? "野外" : (type == 3 ? "商城" : (type == 4 ? "副本" : null));}应该改成：function getPostionTxt(type){var typeData={"2":"野外","3":"商城","4":"副本"};if (typeData[type]) return typeData[type]; else return null;}。如果type是从0开始不间断的整数，那么直接使用数组还更简单，这种结果看起来就清晰多了，看到前面那种多层三元表达式嵌套头不晕吗。

6、不在语句非赋值地方出生中文

语句中不应该出现中文我想一般人都知道，虽然这样做不影响程序运行，但是显然有背行业标准要求，当然我们也不是在使用“易语言”做开发。关于这一个问题，我本来不想把它拿出来说的，但我确实遇到有人这样做的，也不知道是不是因为他的英语实在太烂了，至少还可以用拼音吧，另外寻求翻译工具帮忙也不错的选择。我举例如下，像以下写法出现在教学中倒还可以理解：

this.user['名字'] = '张三'　或者　this.user.名字 = '张三'

7、明确定义函数固定数量的参数

固定数量参数的函数内部不使用arguments去获取参数，因为这样，你定义的方法如果包含较多的脚本，就不能一眼看到这个方法接受些什么参数以及参数的个数是多少。比如像下面：
var $ = function(){return document.getElementById(arguments[0]);}应该改成：var $ = function(elemID){return document.getElementById(elemID);}

8、不必热衷动态事件绑定

虽然知道事件可以动态绑定，比如使用addEventListener或者使用jQuery的bind方法，也知道采用动态事件绑定可以让XHTML更干净，但是一般情况下我还是建议直接把事件写在DOM节点上，我认为这样可以使代码变得更容易维护，因为这样做，我们在查看源代码的时候就可以容易地知道什么Element绑定了什么方法，简单说这样更容易知道一个按钮或链接点击时调了什么方法脚本。

9、降低代码与XHTML的耦合性

不要过于依赖DOM的一些内容特征来调用不同的脚本代码，而应该定义不同功能的方法，然后在DOM上调用，这样不管DOM是按钮还是链接，方法的调用都是一样的，比如像下面的实现显然会存在问题：

function myBtnClick(obj)
{
　if (/确定/.test(obj.innerHTML))
　　alert('OK');
　else if (/取消/.test(obj.innerHTML))
　　alert('Cancel');
　else
　　alert('Other');
}

上面例子其实在一个函数内处理了两件事情，应该分成两个函数，像上面的写法，如果把链接换成按钮，比如改成这样：<input type="button" onclick="myBtnClick(this)" value="确定" />，那么myBtnClick函数内部的obj.innerHTML就出问题了，因为此时应该obj.value才对，另外如果把按钮名称由中文改为英文也会出问题，所以这种做法问题太多了。

10、一个函数应该返回统一的数据类型

因为JavaScrip是弱类型的，在编写函数的时候有些人对于返回类型的处理显得比较随便，我觉得应该像强类型语言那样返回，看看下面的两个例子：

function getUserName(userID)
{
　if (data[userID])
　　return data[userID];
　else
　　return false;
}

应该改为：

function getUserName(userID)
{
　if (data[userID])
　　return data[userID];
　else
　　return "";
}

这个方法如果在C#中定义，我们知道它准备返回的数据类型应该是字符串，所以如果没有找到这个数据我们就应该返回空的字符串，而不是返回布尔值或其它不合适的类型。这并没有影响到函数将来的调用，因为返回的空字符串在逻辑判断上可被认作“非”，即与false一样，除非我们使用全等于“===”或typeof进行判断。

11、规范定义JSON对象，补全双引号

使用标准肯定是有好处的，那么为什么还是有人不使用标准呢？我想这可能是懒或习惯问题。也许还会有人跟我说，少写引号可以减轻文件体积，我认为这有道理但不是重点。对于服务器返回的JSON数据，使用标准结构可以利用Firefox浏览器的JSONView插件方便查看（像查看XML那样树形显示），另外你如果使用jQuery做开发，最新版本jQuery1.4+是对JSON格式有更高要求的，具体的可以自己查阅jQuery更新文档。比如：{name:"Tom"}或{'name':'Tom'}都应该改成{"name":"Tom"}。

12、不在文件中留下未来确定不再使用的代码片段

当代码调整或重构后，之前编写的不再使用的代码应该及时删除，如果认为这些代码还有一定利用价值可以把它们剪切到临时文件中。留在项目中不仅增加了文件体积，这对团队其它成员甚至自己都起到一定干扰作用，怕将来自己看回代码都搞不懂这方法是干什么的，是否有使用过。当然可以用文档注释标签@deprecated把这个方法标识为不推荐的。

13、不重复定义其他团队成员已经实现的方法

对于大型项目，一般会有部分开发成员实现一些通用方法，而另外一些开发成员则要去熟悉这些通用方法，然后在自己编写模块遇到有调用的需要就直接调用，而不是像有些开发者喜欢“单干”，根本不会阅读这些通用方法文档，在自己代码中又写了一遍实现，这不仅产生多余的代码量，当然也是会影响团队开发效率的，这是没有团队合作精神的表现，是重复造轮子的悲剧。

比如在通用类文件Common.js有定义function $(elemID){return document.getElementById(elemID)}那么就不应该在Mail.js中再次出现这一功能函数的重复定义，对于一些复杂的方法更应该如此。

14、调用合适的方法

当有几个方法都可以实现同类功能的时候，我们还是要根据场景选择使用最合适的方法。下面拿jQuery框架的两个AJAX方法来说明。如果确定服务器返回的数据是JSON应该直接使用$.getJSON，而不是使用$.get得到数据再用eval函数转成JSON对象。如果因为本次请求要传输大量的数据而不得以使用$.post也应该采用指定返回数据类型（设置dataType参数）的做法。如果使用$.getJSON，在代码中我们一眼能看出本次请求服务器返回的是JSON。

温馨提示：jQuery1.4后，如果服务器有设置数据输出的ContentType，比如ASP.NET C#设置 Response.ContentType = "application/json"，那么$.get将与$.getJSON的使用没有什么区别。

15、使用合适的控件存储合适的数据

曾发现有人利用DIV来保存JSON数据，以待页面下载后将来使用，像这样：<div id="json">{ "name":"Tom"}</div>，显然这个DIV不是用来界面显示的，如果非要这样做，达到使用HTML文件进行数据缓存的作用，至少改成用隐藏域来存这数据更合理，比如改成：<input type="hidden" value=" { "name":"Tom"}" />。

其实也可以利用window对象来保存一些数据，像上面的例子，我们可以在AJAX请求页直接包含这样的脚本块：<script>window.userData = { "name":"Tom"};</script>，当在AJAX请求回调函数中执行完$( "#MyDiv ").html(data)后，在window上就马上有了这一变量。如果采用第一种方法，将不可避免eval(document.getElementById("UserData").innerHTML)。如果在window对象存放大量数据的话，这些数据不用时要及时手动清理它们，它们是要等浏览器刷新或重启后才会消失的，这就会增加内存开销。

16、永远不要忽略代码优化工作

代码最优化是每个程序员应该努力达到的目标，也应该成为程序员永远的追求。写代码的时候，不应该急着把功能实现出来，要想一下如何写代码，代码的执行效率才是较好的。

举个例子：假设有定义getElementById的快捷方法functoin $(elemID){return document.getElementById(elemID)}，那么有人可能会写出这样的代码$("MyDiv").parentNode.removeChild($("MyDiv"))，其实这里执行了两次getElementById DOM查找，如果改成这样将更好：var myDiv = $("MyDiv"); myDiv.parentNode.removeChild(myDiv)。还好getElementById的DOM查找算比较快，如果换成getElementsByTagName则更应该注重优化了。jQuery开发团队也有提醒大家要注意这方面的问题。

当然，代码优化技巧也是需要个人不断积累的。曾有朋友跟我说他写网站后台代码从来不用考虑优化的，因为他们网站用的是至强四核服务器，我觉得这是很可笑的。

17、会分析策划文档，能用面向对象方法进行接口定义和代码组织

这一能力对于每一个程序员来说都是非常重要的，这也是决定一个程序员水平高低的一个重要因素。能够把需求细化并抽象出不同的类，然后有条理地编写代码，使代码结构清晰，可读性高，代码易于维护，不至于太过程化而且杂乱无章，这样才算是一个优秀的程序员。

第二篇：js学习总结

JS基础

1.slice（）与substring（）.......................................................................................... 1

2.indexOf（）与lastIndexOf（）................................................................................ 2

3.reverse（）与sort（） .............................................................................................. 2

4.join（），split（） ..................................................................................................... 2

5.for...in .......................................................................................................................... 2

6.arguments .................................................................................................................... 2

7.prompt（）提示用户输入 ......................................................................................... 2

8. oWin..close()关闭新建窗口，Window.close（）关闭自身窗口，oWin.opener关

闭父窗口........................................................................................................................ 2

9.window.history.back（），window.history.forward（）； ......................................... 2

10. document对象的常用属性 ..................................................................................... 2

11. location对象的常用属性 ........................................................................................ 2

12. Navigator对象属性和方法..................................................................................... 2

13. screen对象的属性 .................................................................................................. 3

14. node的常用属性和方法 ......................................................................................... 3

15. getElementById（）获取某个指定的元素; .......................................................... 4

16. getElementsByTagName（）返回一个包含某个相同标签名的元素的NodeList4

17. 设置节点属性......................................................................................................... 4

18. 创建和添加节点..................................................................................................... 4

19. 删除节点................................................................................................................. 6

20. 替换节点................................................................................................................. 6

21. 在特定节点前插入节点......................................................................................... 6

22.在特定节点之后插入节点....................................................................................... 7

23.innerHTML获得某个标记之间的所有内容 .......................................................... 8

24.className属性 ........................................................................................................ 8

25.IE中的监听方法： .................................................................................................. 9

26.标准DOM的监听方法： ....................................................................................... 9

27. 事件常用的属性：................................................................................................. 9

28. 鼠标事件............................................................................................................... 10

29. Button ..................................................................................................................... 10

30. 键盘事件............................................................................................................... 10

31. Html事件 .............................................................................................................. 10

32. 屏蔽鼠标右键....................................................................................................... 11

33. 表格常用的DOM操作 ....................................................................................... 11

34. Form表单对象的属性和方法 .............................................................................. 12

35. 访问表单中的元素............................................................................................... 12

36. 设置鼠标经过时自动选择文本........................................................................... 12

37. 设置下拉菜单....................................................................................................... 13

38. 错误处理............................................................................................................... 13

1.slice（）与substring（）

2.indexOf（）与lastIndexOf（）

3.reverse（）与sort（）

4.join（），split（）

5.for...in

6.arguments

7.prompt（）提示用户输入

8. oWin..close()关闭新建窗口，Window.close（）关闭自身窗口，oWin.opener关闭父窗口

9.window.history.back（），window.history.forward（）；

window.history.go（num）其中num为-1时为window.history.back（）效果，为1时为window.history.forward（）效果

10.document对象的常用属性

Anchors页面中所有锚的集合（由<a name="名称"></a>表示）

Applets页面中所有applet的集合

Embeds页面中所有嵌入式对象的集合（由<embed>标记表示）

Forms页面中所有表单的集合

Images页面中所有图片的集合

Links页面中所有超链接的集合（由<a href="URL"></a>表示）

例：var myLinks=document.links;

For(var i=0; i<myLinks.Length;i++) myLinks[i].target="_blank";

/////////////document.URL=“”FF不通用，常使用location.href=“”,不希望用户通过“后退”返回原来的页面可以用location.replace（“”）

11.location对象的常用属性

Hash如果URL包含书签#则返回该符号后的内容

Host服务器的名称

Href当前载入的完整URL

Pathname URL中主机名后的部分

Port URL中请求的端口号

Protocol URL使用的协议

Search 执行GET请求的URL中问号后的部分

此外location的reload（）方法还可以重新加载页面，方法的默认值为false。

reload（true）表示从服务器上重载，reload（false）从浏览器中的缓存中重载

12.Navigator对象属性和方法

appCodeName浏览器代码名的字符串表示（例如“Mozilla”）

appName官方浏览器名的字符串表示

appVersion浏览器版本信息的字符串表示

javaEnabled（）布尔值，是否启用了Java

Platform运行浏览器的计算机平台的字符串表示

Plugins安装在浏览器中的插件的组数

taintEnabled（）布尔值，是否启用了数据感染

userAgent用户代理头字符串的字符串表示（最常用）

例：检测浏览器和操作系统

var sUserAgent = navigator.userAgent;

//检测Opera、KHTML

var isOpera = sUserAgent.indexOf("Opera") > -1;

var isKHTML = sUserAgent.indexOf("KHTML") > -1 || sUserAgent.indexOf("Konqueror") > -1 || sUserAgent.indexOf("AppleWebKit") > -1; //检测IE、Mozilla

var isIE = sUserAgent.indexOf("compatible") > -1 && sUserAgent.indexOf("MSIE") > -1 && !isOpera;

var isMoz = sUserAgent.indexOf("Gecko") > -1 && !isKHTML;

//检测操作系统

var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");

var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh");

var isUnix = (navigator.platform == "X11") && !isWin && !isMac;

if(isOpera) document.write("Opera ");

if(isKHTML) document.write("KHTML ");

if(isIE) document.write("IE ");

if(isMoz) document.write("Mozilla ");

if(isWin) document.write("Windows");

if(isMac) document.write("Mac");

if(isUnix) document.write("Unix");

</script>

13.screen对象的属性

availHeight窗口可以使用的屏幕高度，其中包括操作系统元素，如Windows工具栏所需要的空间，单位是像数

availWidth窗口可以使用的屏幕宽度

colorDepth用户表示颜色的位数

Height屏幕的高度

Width屏幕的宽度

例：

window.moveTo(0,0);//左上角位置为（0，10）即离屏幕左侧0px，上侧距离10px； //window.resizeTo(screen.availWidth,screen.availHeight);//调整窗口大小为浏览器可视区域宽度高度

window.resizeTo(screen.width,screen.height);//调整窗口大小为屏幕区域宽度高度 </script>

14.node的常用属性和方法

nodeName 返回类型为string的节点名称（tagName同）

nodeValue返回类型为string的节点的值

nodeType返回类型为Number节点类型：

元素节点的值为1，属性节点的值为2，文本节点的值为3

firstChild指向childNodes列表中的第一个节点

lastChild执行childNodes列表中最后一个节点

childNodes所有子节点的列表，方法item（i）可以访问第i+1个节点

parentNode指向节点的副节点，如果已是根节点则返回null

previousSibling指向前一个兄弟节点，如果该节点已经是最后一个节点，则返回null nextSibling指向后一个兄弟节点，如果该节点已经是第一个节点，则返回null hasChildNodes（）当childNodes包含一个或多个节点时返回true

Attributes包含一个元素特性的Attr对象，仅用于元素节点

appendChild（node）将node节点添加到childNodes的末尾

removeChild（node)从childNodes中删除node节点

replaceChild（newnode，oldnode）将childNodes中的oldnode节点替换成newnode节点 insertBefore(newnode,refnode)在childNodes中的refnode节点之前插入newnode节点例：

<html>

<head>

<title>getElementsByTagName()</title>

function searchDOM(){

//放在函数内，页面加载完成后才用<body>的onload加载

var oLi = document.getElementsByTagName("li");

//输出长度、标签名称以及某项的文本节点值

alert(oLi.length + " " +oLi[0].tagName + " " + oLi[3].childNodes[0].nodeValue);

var oUl = document.getElementsByTagName("ul");

var oLi2 = oUl[1].getElementsByTagName("li");

alert(oLi2.length + " " +oLi2[0].tagName + " " + oLi2[1].childNodes[0].nodeValue);

}

</script>

</head>

<ul>客户端语言

<li>JavaScript</li>

</ul>

<ul>服务器端语言

</ul>

</body>

</html>

15.getElementById（）获取某个指定的元素;

16.getElementsByTagName（）返回一个包含某个相同标签名的元素的NodeList

17.设置节点属性

getAttribute（“title”）获取属性值；setAtrribute（“title”，“11”）设置节点的属性

18.创建和添加节点

createElement()创建元素节点

createTextNode()创建文本节点

createDocumentFragment()创建文档碎片节点

例1：

<html>

<head>

<title>创建新节点</title>

function createP(){

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

var oText = document.createTextNode("这是一段感人的故事");

oP.appendChild(oText);

document.body.appendChild(oP);

}

</script>

</head>

<p>事先写一行文字在这里，测试appendChild()方法的添加位置</p>

</body>

</html>

例2：

<html>

<head>

<!--

padding:2px;

margin:0px;

}

-->

</style>

function insertPs(){

var aColors =

["red","green","blue","magenta","yellow","chocolate","black","aquamarine","lime","fuchsia","brass","azure","brown","bronze","deeppink","aliceblue","gray","copper","coral","feldspar","orange","orchid","pink","plum","quartz","purple"];

var oFragment = document.createDocumentFragment(); //创建文档碎片 for(var i=0;i<aColors.length;i++){

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

var oText = document.createTextNode(aColors[i]);

oP.appendChild(oText);

oFragment.appendChild(oP); //将节点先添加到碎片中

}

document.body.appendChild(oFragment); //最后一次性添加到页面 }

</script>

</head>

</body>

</html>

19.删除节点

例：

<html>

<head>

function deleteP(){

var oP = document.getElementsByTagName("p")[0];

oP.parentNode.removeChild(oP); //删除节点

}

</script>

</head>

<p>这行文字你看不到</p>

</body>

</html>

20.替换节点

例：

<html>

<head>

function replaceP(){

var oOldP = document.getElementsByTagName("p")[0];

var oNewP = document.createElement("p"); //新建节点

var oText = document.createTextNode("这是一个感人肺腑的故事"); oNewP.appendChild(oText);

oOldP.parentNode.replaceChild(oNewP,oOldP); //替换节点 }

</script>

</head>

<p>这行文字被替换了</p>

</body>

</html>

21.在特定节点前插入节点

例：

<html>

<head>

function insertP(){

var oOldP = document.getElementsByTagName("p")[0];

var oNewP = document.createElement("p"); //新建节点

var oText = document.createTextNode("这是一个感人肺腑的故事");

oNewP.appendChild(oText);

oOldP.parentNode.insertBefore(oNewP,oOldP); //插入节点

}

</script>

</head>

<p>插入到这行文字之前</p>

</body>

</html>

22.在特定节点之后插入节点

例：

<html>

<head>

<title>insertAfter()方法</title>

function insertAfter(newElement, targetElement){

var oParent = targetElement.parentNode; //首先找到目标元素的父元素

if(oParent.lastChild == targetElement) //如果目标元素已经是最后一个子元素了 oParent.appendChild(newElement); //则直接用appendChild()加到子元素列表的最后

else //否则用insertBefore()插入到目标元素的下一个兄弟元素之前

oParent.insertBefore(newElement,targetElement.nextSibling);

}

function insertP(){

var oOldP = document.getElementById("myTarget");

var oNewP = document.createElement("p"); //新建节点

var oText = document.createTextNode("这是一个感人肺腑的故事");

oNewP.appendChild(oText);

insertAfter(oNewP,oOldP); //插入节点

}

</script>

</head>

<p id="myTarget">插入到这行文字之后</p>

<p>也就是插入到这行文字之前，但这行没有id，也可能不存在</p> </body>

</html>

23.innerHTML获得某个标记之间的所有内容

例：

<html>

<head>

<title>innerHTML</title>

function myDOMInnerHTML(){

var myDiv = document.getElementById("myTest");

alert(myDiv.innerHTML); //直接显示innerHTML的内容 //修改innerHTML，可直接添加代码

myDiv.innerHTML = "<img src='01.jpg' title='情人坡'>";

}

</script>

</head>

<p>这是一行用于测试的文字</p>

</div>

</body>

</html>

24.className属性

<html>

<head>

<title>parentNode</title>

function myDOMInspector(){

var myItem = document.getElementById("myDearFood");

var parentElm = myItem.parentNode;

while(parentElm.className != "colorful" && parentElm != document.body) parentElm = parentElm.parentNode; //一路往上找

parentElm.className="css1";//修改css样式

parentElm.className+="css2";//追加css样式相当于class="css1 css2"

alert(parentElm.tagName);

}

</script>

</head>

<ul>

<li>糖醋排骨</li> <li>圆笼粉蒸肉</li> <li>泡菜鱼</li> <li id="myDearFood">板栗烧鸡</li> <li>麻婆豆腐</li> </ul> </div> </body> </html>

25.IE中的监听方法：

[object].attachEvent("onclick",fuc);添加监听函数 [object].detachEvent("onclick",fuc);删除监听函数

26.标准DOM的监听方法：

[object].addEventListener("onclick",fuc,false);添加监听函数,false表示为冒泡型事件 [object].removeEventListener("onclick",fuc,false);删除监听函数,false表示为冒泡型事件

27.事件常用的属性：

js学习总结

28.鼠标事件

Click 单击鼠标左键时触发

Dbclick 双击鼠标左键时触发（IE和FF对此响应事件顺序不同，应尽量避免使用双击事件）

Mousedown 单击任意一个鼠标按键时触发

Mouseout 鼠标指针在某个元素上，移出该元素边界时触发 Mouseover 鼠标指针移到另一个元素上时触发 Mouseup 松开鼠标任意一个按键时触发

Mousemove 鼠标指针在某个元素上移动时持续触发 29.Button

30.键盘事件

Keydown 按下键盘上某个按键时触发，一直按住某键则会持续触发

Keypress 按下某个键盘并产生字符时触发，即忽略Shift，Alt，Ctrl等功能键

Keyup 释放某个按键时触发 31.Html事件

Load 页面完全加载后在window对象上触发，图片加载完成后在其上触发

Unload 页面完全卸载后在window对象上触发，图片卸载完成后在其上触发 Error 脚本出错时在window对象上触发，图片无法载入时在其上触发 Select 选择了文本框中的一个或多个字符时触发

Change 文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发 Submit 单击“提交”按钮时在表单form上触发

Focus 任何元素或窗口获取焦点时触发

Blur 任何元素或窗口失去焦点时触发

32.屏蔽鼠标右键

鼠标右键会触发contextmenu事件

<html>

<head>

<title>屏蔽鼠标右键</title>

function block(oEvent){

if(window.event){

oEvent = window.event;

oEvent.returnValue = false; //IE取消默认事件

}else

oEvent.preventDefault(); //FF取消默认事件

}

document.oncontextmenu = block;

</script>

</head>

<body>

<p>屏蔽鼠标右键</p>

</body>

</html>

33.表格常用的DOM操作

js学习总结

34.Form表单对象的属性和方法

Action表单所要提交到的URL地址

Elements数组，表单中所有表单域的集合

Enctype表单想服务器发送数据时，数据应该使用的编码方法，某人为application/x-www-form-urlencoded，如果要上传文件，则应该使用multiparty/form-data

Length表单域的数量

Method浏览器发送GET请求或者POST请求

Name表单的名称，即<form>标记中的name属性

Submit()提交表单到指定页面，相当于单击submit按钮

Reset()重置表单中的各项到初始值，相当于单击reset按钮

35.访问表单中的元素

设置for为input的name，鼠标移到label上时光标会自动跳到input中

2.表单中的元素都在elements集合中

Var oForm=document.forms["myForm1"];//获取表单

Var oTextName=oForm.elements[0];//获取第一个元素

Var oTextPasswd=oForm.elements["passwd"];//获取name属性为passwd的元素

Var oTextComments=oFments;//获取name属性为comments的元素

3.表单中元素的共同属性和方法

Checked对应单选按钮和复选框而言，选中则为true，通过name属性进行分组

defaultChecked对于单选按钮和复选框而言，如果初始值是选中的则为true Value除了下拉菜单以外，所有元素的value属性值

defaultValue对于文本框和多行文本框而言，初始设定为value值

Form指向元素所在的<form>

Name 元素的name属性

Type元素的类型

Blur()使焦点离开某个元素

Focus()聚焦到某个元素上

Click()模拟用户单击该元素

Select()对应文本框，多行文本框而言，选中并高亮显示其中的文本

36.设置鼠标经过时自动选择文本

Onmouseover="this.focus()";

Onfocus="this.select()";

37.设置下拉菜单

Length表示选项option的个数

Selected布尔值，表示选项option是否被选中

SelectedIndex被选中的选项序号，如果没有选项被选中则为-1，对于多选下拉菜单而言，返回被选中的第一个选项序号，从0开始计数

Text选项的文本

Value选项的value值

Type下拉菜单的类型，单选则返回select-one，多选则返回select-multiple Option获取选项的数组，例如oSelectBox.options[2]表示下拉菜单oSelectBox中的第3项

访问选项

例：

var oForm = document.forms["myForm1"];

var oSelectBox = oForm.elements[Box];

单

if(oSelectBox.type == "select-one"){ //判断是单选还是多选 var iChoice = oSelectBox.selectedIndex; //获取选中项 alert("单选，您选中了" + oSelectBox.options[iChoice].text); }else{ var aChoices = new Array(); //遍历整个下拉菜单 for(var i=0;i<oSelectBox.options.length;i++) if(oSelectBox.options[i].selected) //如果被选中 aChoices.push(oSelectBox.options[i].text); //压入到数组中 alert("多选，您选了：" + aChoices.join()); //输出结果 } //根据参数相应的选择下拉菜

添加\替换选项

例：

function AddOption(Box){ //添加选项

var oForm = document.forms["myForm1"];

var oBox = oForm.elements[Box];

var oOption = new Option("乒乓球","Pingpang");

oBox.options[oBox.options.length] = oOption;//替换地最后一个选项

}

删除选项oBox.options[iNum] = null;

38.错误处理

1）onerror

window.onerror = function(sMessage, sUrl, sLine){

alert("出错啦:\n" + sMessage + "\nUrl: " + sUrl + "\n行号: " + sLine); return true; //屏蔽系统事件

}

2）Try...catch

try{

alert("this is an example");

alert(fresheggs);

} catch(exception){

var sError = "";

for(var i in exception)

sError += i + ":" + exception[i] + "\n"; alert(sError);

}

39.

相关推荐

javascript学习心得2

第二篇：js学习总结

专栏推荐