## 一、传统事件模型 传统事件模型中存在局限性。 内联模型以HTML标签属性的形式使用，与HTML混写，这种方式无疑造成了修改以及扩展的问题，已经很少使用了。 脚本模型是将事件处理函数写到js文件中，从页面获取元素进行对应事件函数的绑定以触发执行。但也存在不足之处： 1.一个事件绑定多个事件监听函数，后者将覆盖前者。 2.需要限制重复绑定的情况 3.标准化event对象 ## 二、现代事件绑定 DOM2级事件定义了两个方法用于添加、删除事件：addEventListener()、removeEventListener().他们分别接收三个参数：事件名、函数、冒泡或捕获的布尔值（true表示捕获，false表示冒泡）。 与之对应，IE提供了类似的两个方法attachEvent()和 detachEvent()，但IE的两个方法存在另外的问题：无法传递this对象（IE中的this指向window）可以使用call方法进行对象冒充: ~~~ function addEvent(obj,type,fn){ if(typeof obj.addEventListener != 'undefined'){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent != 'undefined'){ obj.attachEvent('on' + type,function(){ fn.call(obj,window.event); }); } }; ~~~ 但由于添加时执行的是匿名函数，因此添加后无法进行删除；另外IE提供方法还会有无法顺序执行绑定事件、存在内存泄漏的问题。 为了解决这一系列的问题，就有必要对方法进行进一步的封装，对其他浏览器使用DOM2级标准进行，对于IE，采用基于传统模式的添加、删除，思路为： 1.添加是使用JS的散列表存储对象事件，为每一个对象事件分配一个ID值，按添加的调用顺序，先判断是否存在相同的处理函数，不存在的话就依次将事件绑定函数添加到散列表中，这样解决了无法顺序执行以及重复添加的问题 2.删除时进行遍历函数匹配的判断，存在则删除 ## 总结： 之前对JS的事件绑定并没有太深的认识，甚至停留在传统事件绑定模型上，对程序实现上还是认识太浅，这次学习封装库这部分内容时，才学习到很多JS上面向对象的应用。虽说类似于JQuery的这样js库已经实现了很好的数据绑定机制的封装效果，但只知其然，不知其所以然还有会有种蒙在鼓里的感觉，亲自去分析一下具体的实现，会有一种豁然开朗的感觉，也体会到，做好一个兼容性、通用性强的程序更要考虑很多内容，解决很多问题，也正在在这些问题中逐渐清楚很多的。

JSON（JavaScriptObject Notation）-JS对象表示法，是JavaScript的一个严格子集，它是一种开发式和基于文本的数据交换格式，因此JSON并不是JS独有，其他很多语言也可以对JSON进行解析和序列化。 特点： 1.轻量级-易于阅读和编写，同时易于及其解析和生成 2.可表示类型： （1）简单值：字符串、数值、布尔值、null，不支持特殊值JS中的undefined （2）对象 ~~~ { "user" : "Admin", "age" : 25 } ~~~ （3）数组 `["Admin",25,true]` ## 常用格式 ~~~ [ { "user" : "Admin", "age" : 25 }, {},{} ] ~~~ ## 解析 将JSON字符串转换为JavaScript值 ~~~ <span style="font-size:18px;">var json = '[{"name" :"Admin","age" : 25},{"name" :"Forrest","age" : 24},{"name" :"LI","age" : 23}]'; var jx =JSON.parse(json);</span> ~~~ parse方法的可选参数：function(key,value)可用于处理键值对数据。 ## 序列化 ~~~ <pre name="code" class="html"><span style="font-size:18px;">var array = [ <span style="white-space:pre"> </span>{ <span style="white-space:pre"> </span>name : "Admin", age : 25 }, { name : "Forrest", age : 24 }, { name : "LI", age : 23 } ]; var json = JSON.stringify(array); alert(json);</span> ~~~ stringify方法的可选参数：第一个可选参数为函数（复杂处理）或数组用于过滤结果，第二个可选参数为是否在JSON中保留缩进。 ## 总结 目前并没有实质性的使用过JSON来处理数据，但作为一种常用的数据格式，很有必要在这里先提前学习下，对比于XML，JSON主要还是体现了它轻量级的优点。期待真正的应用与深入。

BOM：BrowserObjectModel,浏览器对象模型，提供JS中对浏览器的各种操作的对象，是JS应用中唯一没有相关标准的部分，这事BOM经常出现问题的所在，主要用于处理浏览器窗口与框架，浏览器特有的JS扩展也被默认为BOM的一部分，而各浏览器之间的公有对象就成了默认的标准。本篇文章将主要介绍window对象。  ## 属性 世界上本没有模型，用的多了也就成了模型。模型便是一个可供参考的东西，BOM中的一系列通用的对象便构成了这个模型，其结构可展示为： window的六大属性，同时它们也是对象： document主要操作web加载的网页文档； frames为窗口框架对象数组； history保存用户上网记录； location提供加载的文档有关信息以及控制页面跳转； navigator对象存储浏览器名称及版本信息； screen显示屏幕相关信息。 其中document对象属性下也有几个重要的属性对象，以document为核心的对文档进行操作的各个对象组成的结构便是大家所熟悉的DOM，从这一点看来，DOM其实是BOM的一个子集. window对象除了提供了旗下的六大对象属性外，还拥有设置浏览器信息的一些基本属性，主要如下  我们经常需要过去浏览器的位置及大小信息，由于BOM没有统一的标准，针对不同浏览器会有不同的属性进行实现，这时候我们就需要做些跨浏览器的兼容性操作，使得针对不同浏览器都能够获取对象的数据。 通过使用typeof属性来判断浏览器是否支持对应的属性，进而采用不同的措施便是很好的兼容性操作的方法，以后可针对具体情况进行应用。 ## 方法 window对象提供的几个主要方法如下图：  图中对方法进行了简单的分类，每个方法再往下分便是参数了，返回值依各自的情况不同而不同。见名知意，方法名也不例外，看到了这些方法的名称，其实际作用估计也已猜到了一半，在此便不再详细说明。 window对象也提供了另外的一些方法：focus()/blur()、对应open()的close()方法、scroll()滚动至指定像素点位置、print()/find()分别调出打印对话框以及查找对话框。 ## 总结 BOM，实际上是一组对象的集合，而window是这组对象的核心，了解了它，对整个浏览器对象模型也就有了结构以及作用上的认识。

封装是面向对象的基础，今天所要学习的匿名函数与闭包就是为了实现JS的面向对象封装。封装实现、封装变量，提高数据、系统安全性，封装正是面向对象的基础。 ## 一、匿名函数 即没有名字的函数，其创建方式为 `function(){...}` 单独存在的匿名函数，无法运行，可通过赋值给变量调用或通过表达式自我执行来实现运行。 1.赋值给变量为一般的函数使用方式 ~~~ var run = function(){ return '方法运行中'; }; alert(run()); ~~~ 2.通过表达式自我执行 ~~~ (function(arguments可选) { alert('方法运行中'); })(arguments); ~~~ ## 二、闭包 在一个普通函数的内部，创建一个匿名函数，匿名函数可访问普通函数中的变量，进而实现类似于面向对象中封装的特性，这个匿名函数就叫做对应普通函数的闭包。闭包就是对外创建的接口，通过接口达到访问函数内部变量的效果。 ~~~ functionrun() { var username = 'Forrest'; return function () { //通过匿名函数返回 box()局部变量 return username; }; } //alert(username); //错误username is not defined alert(run()()); ~~~ 特点：闭包中使用的局部变量会驻留在内存中，避免了使用全局变量造成的命名冲突等情况的发生。值得注意的是闭包中使用this关键字，指向的是window对象。 ## 三、封装 为了更好的安全性、数据保护，则需要对数据进行私有化的封装，而JS中没有块级作用域的概念（即出了{}的范围，仍可以访问声明的变量），但有了前面的基础，我们就可以达到像其他正规面向对象语言的封装效果。 ~~~ function user(){ (function(){ for(i = 0; i<5; i++){ alert(i); } })(); alert(i); //此处无法访问变量i } //私有作用域代替全局变量 (function(){ var username= 'Forrest'; alert(username); })(); //匿名函数执行完毕后，变量立即销毁 //访问私有变量 function User(){ var username= Forrest; //私有变量 function learn(){ //私有函数 return '学习中'; }; //对外提供接口，间接访问内部成员 this.userlearn = function(){ return username + learn(); }; } var user = new User() alert(user.userlearn()); //实现get()、set() function User(value){ var user = value; this.getUser = function(){ return user; } this.setUser = function(value){ user = value; } } var user = new User('Forrest'); alert(user.getUser()); user.setUser('Li'); alert(user.getUser()); //静态私有变量 (function(){ var user = ''; User = function(value){ user = value; }; User.prototype.getUser = function(){ return user; }; User.prototype.setUser = function(value){ user = value; }; })(); //字面量方式的私有化 function NormalUser(){} var user = function(){ var user = 'Forrest'; function learn(){ return user + '学习中...'; }; var nu = new NormalUser(); nu.userlearn = function(){ return learn(); }; return nu; }(); alert(user.userlearn()); ~~~ ## 结语： JS虽不是一门正统的面向对象的语言，但用它也能达到面向对象的封装、继承、多态等的效果，学习起来还是需要好好理解的，特别是对于使用JS不是特别多的人来说，只能等到以后的逐步应用来解决这一系列的问题，更进一步体会它在面向对象方面的应用。

## 问一、引入工厂，解决重复代码 前面已经提到，JS中创建对象的方法，不难发现，基本的创建方法中，创建一个对象还算简单，如果创建多个类似的对象的话就会产生大量重复的代码。  解决：工厂模式方法（添加一个专门创建对象的方法，传入参数避免重复） ~~~ function createObject(name,age){ var obj =new Object(); //创建对象 obj.name = name; obj.age = age; obj.run = function(){ return this.name + this.age + '处理中...'; }; return obj; //返回对象引用 }; ~~~ ## 问二、引入构造函数，解决对象识别 上面方法虽然解决了避免重复代码出现的问题，但也带来了无法识别具体对象的问题，方法内部使用new Object的方式，最后返回该对象引用，调用该方法创建的对象返回的全部都是Object的引用，因此使用typeof或instanceof操作符时都无法区分具体对象。 解决：构造函数（改良后的工厂方法） ~~~ function Box(name,age){ //创建对象 this.name = name; this.age = age; this.run = function(){ return this.name + this.age + '处理中...'; }; }; ~~~ 比较：细心的童鞋就该发现了，该方法与问一中的工厂模式不同之处就在于：省略了newObject()的明文执行过程；省略了return语句，这些都由后台自动执行。 而构造函数区别普通函数的地方在于其调用方式，必须用new运算符或对象冒充方式调用。 ## 问三、引入prototype属性对象，解决对象之间的共享问题 每一个对象都会有一个prototype，同时它也是一个对象。使用目的是为了解决共享问题，调用同一个构造函数创建的该对象会共享prototype中的属性和方法。 解决：使用原型模式解决共享 ~~~ function Box() {} //声明一个构造函数 Box.prototype.name = 'Lee'; //在原型里添加属性 Box.prototype.age = 100; Box.prototype.run = function () { //在原型里添加方法 return this.name + this.age + '处理中...'; }; ~~~ 比较： 构造函数创建  使用原型创建  细节：在调用属性或方法时，采用就近原则，先查找实例中是否存在，否的话查找原型，可使用isPrototypeOf()，hasOwnPrototy(),in操作符进行相关测试。 ## 问四、使用组合，解决共享及传参 原型模式创建对象省略了构造函数传参初始化的过程，这既是它的缺点又是它的优点，缺点是对象初始化的值一样，并且如果原型属性中包含有引用类型，则对一个对象进行更改，其他对象的对应属性也会跟着更改了。 解决：组合构造函数+原型模式（解决共享和传参的问题） ~~~ function Box(name, age) { //不共享的使用构造函数 this.name = name; this.age = age; this. family = ['父亲', '母亲', '妹妹']; }; Box.prototype = { //共享的使用原型模式 constructor : Box, run : function () { return this.name + this.age + this.family; } }; ~~~ 细节：这种方式其实就是将构造函数与原型一起使用，对要创建的对象分析，将需要共享的内容放入原型中，不需要的则放在构造函数里。这样也就是组合了。 优化：这样分开式的写法难免有些怪异，我们将这两部分合并 动态原型模式（第一次调用共享方法时进行初始化原型，以后就不会初始化了） ~~~ function Box(name ,age) { //将所有信息封装到函数体内 this.name = name; this.age = age; if (typeof this.run != 'function') {//仅在第一次调用的初始化 Box.prototype.run = function () { return this.name +this.age + '处理中...'; }; } } ~~~ ## 中结： 在学习JS中，还是很需要对正统面向对象语言的理解的，在这里我们学习了使用构造函数以及原型来创建对象，理解了二者的概念，对于后面的JS中面向对象深入学习会很有帮助，各种不同的创建方式是为了解决不同情况的问题，理解了这些才能按需使用。

ECMAScript中没有提供类和接口等的定义，但它却是一门面向对象的语言，因为它可以通过其他方式实现类似高级语言的面向对象功能，这些内容将在后面的文章中进行一步步的总结。此篇仅对JS中对象作简要说明，重点汇总一些类似于对象的数组的常用方法。 对象 创建 上篇提到创建对象的两种方式： 使用new运算符创建Object    `var obj = new Object();` 使用字面量方式创建                    `var  obj = {};` 这里值得注意的是在使用字面量（常量）创建Object时不会调用构造函数。 属性和方法 添加： 使用new创建后的添加方式 ~~~ obj.name = '张三'  obj.run =function(){ return''; } ~~~ 使用字面量创建方式 ~~~ var obj = { name : '张三'; run : function(){ return ''; } }; ~~~  注意点：使用数组方式也可进行属性的输出obj['name'];使用delete关键字可进行对象属性的删除 数组 Array类型与Object一样，同样是引用类型，而ESMAScript中的数组不同于其他语言中的数组，其中元素可以保存任何类型，该区别源于ESMAScript的变量类型松散性。 创建（与Object类型类似，数组的创建分为两种方式） 使用new关键字 ~~~ var arr = new Array(); var   arr = new Array(10); var arr =new Array('张三','李四','王五'); ~~~ 使用字面量 ~~~ var arr = []; var  arr = ['张三','李四','王五']; ~~~ 使用 使用下标进行读取 `alert(arr[2]);        //输出'王五'` 使用length属性获取数组元素个数 内置方法 转换 `toString()、valueOf()、toLocaleString()` 三个方法会返回相同的值，输出对象或数组信息时为默认调用方法 数组分隔符设置方法，默认为','如需修改可调用join()方法 ~~~ var  arr = ['张三','李四','王五']; alert(arr.join('|'));            //输出张三|李四|王五 ~~~ 栈、队列（数组） ~~~ push()/pop() push()/shift() ~~~ 类似于栈、队列对数组元素进行的操作，与shift()对应的另外一方法是unshift()，为数组前端添加元素。需要说明的是添加元素的方法会返回数组长度，删除元素的方法会返回删除的元素。 重排序 逆序reverse()、正序sort() 小结：                  不得不说，ECMAScript为数组提供了很多方法，这些也只有到以后的实践中逐步应用与探索了。

最初的JS学习已经过去大半年的时间了，至此感觉对JS的使用与理解并不是很深入，因此在最近的工作之余也开始了新一轮的JS学习。几天时间过去了，对于一些基础内容的学习还是很有必要的，就从今天的重新整理开始吧。 对于JavaScript数据类型，开始并没有全面的认识，只是简单的使用var关键字来定义变量。现在了解到使用var声明变量的方法是JavaScript的语言核心ECMAScript为JS定义的，虽然可随意改变该变量的值，不考虑其数据类型，但这就带来了后期维护的困难，以及性能不高、成本很高的问题。这样看来使用var随意声明变量有利也有弊了。 ECMAScript中定义了六种数据类型：Undefined、Null、Boolean、Number、String、Object(注意JavaScript是区分大小写的，类型的首字母都要求大写，这与后面介绍的类型值是不同的)，不支持任何创建自定义类型机制，所有值都会是以上六种数据类型之一。下面我们分别来看。 ## 一、Undefined 该类型只有一个值undefined，当变量声明后但没有对其进行初始化时，则该变量的值为undefined。未初始化的变量自动赋值为undefined。 var box; alert(box);        //弹窗显示undefined值 ## 二、Null 值为null，表示空对象的引用，若定义变量用于存储对象，则可初始化为null值。在进行判断变量是否指向对象时可用null值进行等值比较。 与值undefined的关系：undefined继承于null值，ECMA规范中规定只定义未初始化的undefined值与执行空对象引用的null值是相等的，思考下，两个变量值都表示为空，比较时可理解为相等。但各自的类型还是不能混为一谈的。 ## 三、Boolean 拥有true和false两个值，但其他各类型都可显式或隐士的转换为该类型值，以用作if条件判断或者其他，这里只介绍转换规则  ## 四、Number 包含整型和浮点型，输入数值字面量可分为几种格式：十进制、十六进制（以0x开头）、八进制（以0开头），而二进制表示则可采用通用的方法parseInt("**",2)，输出数据时则会默认显示为十进制数。其他值:Infinity(正无穷)及-Infinity(负无穷)；NaN值（Not a Number）。 ~~~       转型：                 Number()：可用于任何数据类型                               alert(Number(true));//1，Boolean 类型的 true 和 false 分别转换成 1 和 0                               alert(Number(25));//25，数值型直接返回                               alert(Number(null));//0，空对象返回 0                               alert(Number(undefined));//NaN，undefined 返回 NaN                               alert(Number('')); //字符串为空，转为0                parseInt()：字符串转整型、parseFloat()：字符串转浮点型                                        alert(parsetInt('456Lee'));//456，会返回整数部分                              alert(parsetInt('Lee456Lee'));//NaN，如果第一个不是数值，就返回 NaN                              alert(parseInt('12Lee56Lee'));//12，从第一数值开始取，到最后一个连续数值结束                              alert(parseInt('56.12'));//56，小数点不是数值，会被去掉                              alert(parseInt(''));//NaN，空返回 NaN ~~~ ## 五、String 用于表示由零个或多个16位Unicode字符表示的字符串序列。 转型： toString()方法可将其他类型值转换为字符串，参数可选（转换数值时，可添加进制类型） String()方法，可将任何类型的值转为字符串，即使是null或undefined的情况 ## 六、Object       对象的概念在此不再多讲，后面对专门探讨。创建的方式有两种： ~~~ var box = new Object(); var  box = {}; ~~~ ## 小结： 对于数据类型的学习，以前并没有太过于重视，只是懂了简单的应用，现在学习起来这部分的内容还是感觉有很多需要值得推敲的部分，比如数据类型之间的转换，数据存储的优化等都会对程序实现起到很重要的作用，所以多深入一些基础方面的东西还是很有必要的。

## 简介 JQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。是目前最受欢迎的JavaScript库，核心理念是“writeless，do more”。 ## 特点 跨浏览器的动态选择 DOM寻访与更改 事件 CSS操作 特效与动画 ## 思路及常用方法  ## 基础概述 ### 1.$() 是jQuery中最基本的符号，可以将其理解为jQuery的包装器。根据参数的不同，可以实现不同的功能 （1）function(){}，页面直接装载完执行 是$(document).ready(function(){  });的简写 （2）CSS选择器，返回JQuery对象 例：$(“#txtBook”) （3）DOM对象，返回JQuery对象 对JQuery对象执行各种JQuery方法，以获取数据，定义事件，执行操作 （4）Html文本，创建JQuery对象，可视为DOM元素插入到Html代码中。 例：var test=$(“<p>这是一个新段落！</p>”); test.insertAfter(“#p1”); ### 2.选择器 选择到某个或某些指定的标记对象 （1）基本选择器 类似于CSS中的选择器，元素名称、id值、class名称、逗号隔开多项选择、空格隔开混合使用的规则在   JQuery的选择器中同样适用。 （2）表单选择器 匹配某些表单对象，类似":button"的使用方式。 （3）属性选择其 根据属性值的不同来选择不同的标记对象 （4）表单对象属性选择器 选择属性值为":checked"、":selected"、":disabled"、"enabled"的相应表单对象 除了以上JQuery中常用的选择器外，还有位置、内容等其他选择器，具体使用细则可以通过查阅API函数手册进行学习。 ### 3.跨浏览器 JQuery对各浏览器运行方法时做了很好的封装，屏蔽了很多浏览器的差异，但总是还会碰到一些不兼容的地方，可通过判断浏览器的类型及版本号来针对不同的浏览器做出调整。 （1）判断浏览器的类型 $.browser.msie==true，$.browser.opera，$.browser.safari，$.browser.mozilla （2）判断浏览器的版本号 例如：$.browser.version.indexOf("8") ### 4.插件机制 JQuery提供可扩展的插件机制，用户可编写属于自己的插件，方便应用 $.fn.myplugin=function(){}; ## 总结 对JQuery有了一些认识及练习之后，对于今后的学习还是要借助与JQuery的API帮助文档  [ http://api.jquery.com/](http://api.jquery.com/) [http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html](http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html) （中文版本） 另外，我们还要去了解那些好用的插件，以及JQuery的一些优化问题，以提高我们的应用能力，在此，仅推荐两篇文章： [jQuery性能优化的28个建议](http://www.admin10000.com/document/1863.html) [15 个最新的 jQuery插件](http://www.admin10000.com/document/3374.html) 好的框架是为了更好的应用，这里仅仅是个开端，希望能在经来的学习使用中深入更多。

项目中遇到用Tab键、方向键切换页面控件焦点的问题，Tab键控制比较容易实现，只要依次在想要控制焦点顺序的控件标签上添加属性TabIndex和TabStop两个属性，TabIndex属性值从1开始根据控制顺序依次递增，TabStop值设为"True"。而要实现方向键的控制，还是费了一番周折。 首先从网上查找资料，得到一个获取页面所有Input类型控件的方法： http://www.poluoluo.com/jzxy/201208/172374.html 但经过尝试，这种方法并不能解决页面中存在其他类型控件的问题，比如碰到select类型控件时，焦点切换就会出现混乱，以至于达不到想要的效果。 寻找利用其他方法获取页面中的元素，最后根据前辈提示，可以利用JQuery的选择器来实现，JQuery当时还没有接触，所以找了相关资料，解决了此问题，改进后的JS代码如下(以下是两列输入或选择控件，竖向切换焦点情况的实现)： ~~~ function keyDown(event) { var inputs = $(".txt") var focus = document.activeElement; if (!document.getElementById("mm").contains(focus)) return; var event = window.event || event; var key = event.keyCode; for (var i = 0; i < inputs.length; i++) { if (inputs[i] === focus) { break; } } switch (key) { case 38: if (i - 2 >= 0) inputs[i - 2].focus(); break; case 40: if (i + 2 < inputs.length) inputs[i + 2].focus(); break; case 13: event.returnValue = false;//阻止自动提交 if (i + 2 < inputs.length) inputs[i + 2].focus(); break; } } ~~~ 只需在html代码中引进JQuery，并在需要获取的元素中设置class值为"txt"即可获取所有控件。但还是存在不足，当页面中有disabled属性为true的情况下，使用方向键也会出现错乱的情况。再次进行改进，加入必要逻辑判断，最终得出如下结局方案： ~~~ //方向键控制页面控件焦点移动 function keyDown(event) { var inputs = $(".txt") //通过class属性值获取控件组合 var focus = document.activeElement; //得到处于激活状态的控件 if (!document.getElementById("mm").contains(focus)) return; //判断是否包含激活控件在指定的Table下 var event = window.event || event; //获取事件 var key = event.keyCode; //得到按下的键盘Ascii码 var flag = -1; //得到激活控件在组合中的具体位置 for (var i = 0; i < inputs.length; i++) { if (inputs[i] === focus) { break; } } switch (key) { case 38: //向上键 var j = i - 2; var flag = false; if (inputs.get(j).disabled == false) { //判断接下来得到的焦点控件是否能够使用 flag = true; } else { for (j=i-4; j >= 0; j=j-2) { //之后控件不能获得焦点情况下寻找下一个控件 if (inputs.get(j).disabled == false) { //判断之后焦点是否可以获取焦点 flag = true; break; } } } if (flag) { inputs[j].focus(); } break; case 40: //向下键 var j = i + 2; var flag = false; if (inputs.get(j).disabled == false) { //判断接下来得到的焦点控件是否能够使用 flag = true; } else { for (j = i + 4; j < inputs.length; j = j + 2) { //之后控件不能获得焦点情况下寻找下一个控件 if (inputs.get(j).disabled == false) { //判断之后焦点是否可以获取焦点 flag = true; break; } } } if (flag) { inputs[j].focus(); } break; case 13: //回车键 event.returnValue = false; //阻止自动提交 var j = i + 2; var flag = false; if (inputs.get(j).disabled == false) { flag = true; } else { for (j = i + 4; j <= inputs.length - 1; j = j + 2) { if (inputs.get(j).disabled == false) { flag = true; break; } } } if (flag) { inputs[j].focus(); } break; } } ~~~ 至此，解决了实现中存在的主要问题，考虑到左右方向键可以在输入字符中切换光标位置，则在处理过程中没有加入左右键切换控件焦点的功能。回想用户提出此功能的需求，同设计软件一致，是要提高工作效率，避免鼠标、键盘之间的来回切换，也由此找到一份[WEB交互界面易用性设计和验收的指导性原则](http://blog.csdn.net/mz24/article/details/413028)仅供参考学习。 总结：项目中总会遇到各种各样的问题，有问题不可怕，可怕的是不努力想办法去解决它，而是消极应对。把每一个问题当作一次学习、提高的机会，这样的项目驱动才是真正我们要达到的目的，才刚刚开始做项目，保持一份积极的态度去学习、研究，抓住每一次的学习机会，项目即是学习。 文中的问题伴随了我几天的时间，最后通过自己的努力解决，其实更重要的收获是改变了一些我的观念，让自己始终保持兴奋的状态去抓住身边每个学习的机会。

## 前提 首先我们应该明白创建一个JS对象的具体实例是实例化的过程，而实例化是通过new关键字实现的，这个对象是含有constructor的，一般的核心对象都会具有constructor以便创建其实例。因此，如果要对我们自己创建的JS对象进行实例化的话，则这个对象必须具有constructor。 构造函数的基本架构为： ~~~ function myConstructor(a){ /*某些代码*/ } ~~~ ## 静态成员 JS中的静态成员是通过点操作符添加到对象实例中，并且只存在于对象的一个具体实例，不存在于构造函数中，因此通过new关键字创建的对象实例不具有原对象的静态成员。 添加对象静态成员的小例： ~~~ <script type="text/javascript"> var myObject = new Object(); //添加静态属性 myObject.name="lyg"; //添加静态方法 myObject.alertName = function(){ alert(this.name); } //执行添加的静态方法 myObject.alertName() </script> ~~~ 静态成员只存在于对象的一个具体实例，不存在于构造函数中的实例： ~~~ <script type="text/javascript"> function myConstuctor(){ } myConstuctor.myname = "lyg"; myConstuctor.alertName = function(){ alert(this.myname); } //myConstuctor.alertName(); var myObj = new myConstuctor(); myObj.alertName(); //这里会报错 </script> ~~~ ## 公有成员 能够使实例化的对象包含的成员称为公有成员，添加公有成员有两种方法：在构造函数中用this关键字添加公有属性或公有方法（特权成员）；另外一种方法便是修改函数原型，即prototype属性 添加对象公有成员的小例： ~~~ <script type="text/javascript"> function myConstuctor(){ this.message="abc"; } var myObj = new myConstuctor(); //alert(myObj.message); alert(myObj.myName); //这里将显示undefined myConstuctor.prototype.myName = 'lyg'; alert(myObj.myName); //这里显示'lyg' </script> ~~~ 实例中也正说明了当修改一个对象的原型时，任何继承该对象的对象和已经存在的所有实例都会继承同样的变化。而需要提及一点的是，公有成员只能在被实例化的实例中可用，而在构造函数自身中是无效的。 ## 私有成员 在构造函数中定义的变量和函数成为私有成员，私有成员只有在构造函数中才能访问，因此在实例化执行构造函数的过程中，将访问其成员。 添加私有成员的小例： ~~~ <script type="text/javascript"> function myConstuctor(message){ this.message = message; //公有属性 var myOwner = this; //私有属性 function alertMessage(){ //私有方法 alert(myOwner.message); } alertMessage(); } var myObj = new myConstuctor("Hello Wold"); //这里将弹出窗口显示"Hello Wold" </script> ~~~ ## 特权成员 特权成员也属于公有成员的一类，之前已有提及：在构造函数中用this关键字添加的公有属性或公有方法。根据其特殊的名称，其特殊的权利在于：与在prototype定义的公有成员不同，由于其是在构造函数中定义的，因此特权成员可以访问私有成员。在此将不予举例。 ## 总结 根据静态成员的定义方法可知，其与prototype是同级的属性，可以被继承的成员在prototype之下，据此可知，静态成员只适用于对象的一个具体实例。 公有的prototype成员是对象蓝图的一部分，适用于通过new关键字实例化该对象的每一个实例。 私有和特权成员的相同之处在于，它们都在构造函数内部，会带到构造函数的每一个实例中，会占用大量内存。 在合适的场合应用合适的成员，将使我们的程序更加优化。

开始正式接触JavaScript的学习，算是对JavaScript有了初步的认识，但是要熟练应用还有很长的一段路要走。 首先应当清楚JavaScript是一种脚本语言，通常用于给HTML动态网页添加功能。其特点可描述为：解释性语言、基于对象、简单、安全、动态、跨平台。  像其他编程语言一样，语言基础部分包括：变量、数据类型、运算符、三大结构等内容。有了之前学习的基础，牛腩的这部分视频学起来还是很简单的，其中的例子也还好实现。 正则表达式方面只能说是初步认识，知道其是对字符串操作的一种逻辑公式，其逻辑性、灵活性和功能性都非常强；可以迅速用极简单的方式达到字符串的复杂控制。 与牛腩的视频比起，JavaScript面向对象部分的内容就有些难度了，JavaScript通过基于对象的程序设计，可更直观、模块化和可重复使用的方式进行开发。这里的对象可看作是一组包含属性和对属性中的数据进行操作的方法。从简单的原型prototype开始，通过继承机制，不断扩展对象的属性、方法。 JavaScript中的对象分为两类：具有固定功能的Object对象以及可以使用参数改变功能的Function对象。 DOM（DocumentObjectModel）文档对象模型，是处理可扩展置标语言的标准编程接口，DOM中定义了表示和修改文档所需的对象，可以说它是一种标准，通过它，JavaScript可以访问并操作所有HTML的元素及其属性和方法。DOM是独立于平台以及语言的，因此JavaScript实现了跨平台性。 通过这次JavaScript的学习，似乎之前的一些知识联系了起来，以前看似零散的内容ASP.NET、XML、HTML以及现在学习的JavaScript之间的关系正逐渐清晰。

> 原文出处：[JavaScript](http://blog.csdn.net/column/details/js-lyg.html) 作者：[lfsfxytgb9_lyg](http://blog.csdn.net/lfsfxytgb9_lyg) **本系列文章经作者授权在看云整理发布，未经作者允许，请勿转载！** # JavaScript > Javascript是一种由Netscape的LiveScript发展而来的，原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器终端语言.本人通过学习和工作积累了一定的经验，分享给大家。