eqera的专栏

1 Knockout简介 (Introduction)Knockout是一个轻量级的UI类库，通过应用MVVM模式使JavaScript前端UI简单化。Knockout有如下4大重要概念：◆ 声明式绑定 (Declarative Bindings)：使用简明易读的语法很容易地将模型(model)数据关联到DOM元素上。◆ UI界面自动刷新 (Automatic UI Refresh

1 Hello world这个例子里，2个输入框都被绑定到data model上的observable变量上。“full name”显示的是一个dependent observable，它的值是前面2个输入框的值合并一起的结果。无论哪个输入框更新，都会看到“full name” 显示结果都会自动更新。查看HTML源代码可以看到我们不需要声明onchange事件。Knockout

KO是什么？KO不是万能的，它的出现主要是为了方便的解决下面的问题：UI元素较多，用户交互比较频繁，需要编写大量的手工代码维护UI元素的状态、样式等属性？UI元素之间关系比较紧密，比如操作一个元素，需要改变另外一个元素的状态？DOM元素与Js对象之间的数据同步？前端javascript代码组织不理想？用户输入数据校验、DOM操作、后台交互…,交织在一起？基础概念一：viewMode

Visible Binding(可见性绑定)ko内置的基础绑定之一 。用于控制DOM元素的可见性，直接影响元素的display样式属性。如果与observable或者computed属性绑定，则会产生双向绑定效果。Javascript Expression Binding(js表达式绑定)表达式绑定是一个ko里常用的绑定方法：目前为止我们演示的Binding值都是一个obs

Foreach Binding控制流中最常见的绑定。用于绑定数组到DOM元素中。利用DOM元素作为数据绑定的“模板”当然，也可以使用自定义模板，或者第三方模板插件，这块内容将在第15节去介绍。Virtual Element Binding(虚拟节点绑定)其实只是实现控制流绑定的一种方式，也就是不使用HTML文档中的元素作为模板，而是使用特殊的注释符构成的虚拟元素，来实现绑定。从而解

1.列表jQuery 文档操作方法这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。方法描述addClass()向匹配的元素添加指定的类名。after()在匹配的元素之后插入内容。append()向匹配的元素内部追加内容。appendTo()向匹配的元素内部追加内容。

1.列表jQuery 数据操作函数这些方法允许我们将指定的 DOM 元素与任意数据相关联。函数描述.clearQueue()从队列中删除所有未运行的项目。.data()存储与匹配元素相关的任意数据。jQuery.data()存储与指定元素相关的任意数据。.dequeue()从队列最前端移除一个队列函数，

1.列表jQuery 遍历函数jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。函数描述.add()将元素添加到匹配元素的集合中。.andSelf()把堆栈中之前的元素集添加到当前集合中。.children()获得匹配元素集合中每个元素的所有子元素。.closest()从元素本身开始，逐级向上

1.列表jQuery DOM 元素方法函数描述.get()获得由选择器指定的 DOM 元素。.index()返回指定元素相对于其他指定元素的 index 位置。.size()返回被 jQuery 选择器匹配的元素的数量。.toArray()以数组的形式返回 jQuery 选择器匹配的元素。

1.列表jQuery 核心函数函数描述jQuery()接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器。jQuery.noConflict()运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库。2.jQuery 核心 - jQuery() 方法实例找出所有属于 div 元

在面向对象编程中，类（class）是对象（object）的模板，定义了同一组对象（又称"实例"）共有的属性和方法。Javascript语言不支持"类"，但是可以用一些变通的方法，模拟出"类"。一、构造函数法这是经典方法，也是教科书必教的方法。它用构造函数模拟"类"，在其内部用this关键字指代实例对象。　　function Cat() {　　　　this

1 visible 绑定目的visible绑定到DOM元素上，使得该元素的hidden或visible状态取决于绑定的值。例子div data-bind="visible: shouldShowMessage"> You will see this message only when "shouldShowMessage" holds a true value. div>

1.列表jQuery Ajax 操作函数jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。函数描述jQuery.ajax()执行异步 HTTP (Ajax) 请求。.ajaxComplete()当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。

1.列表jQuery 效果函数方法描述animate()对被选元素应用“自定义”的动画clearQueue()对被选元素移除所有排队的函数（仍未运行的）delay()对被选元素的所有排队函数（仍未运行）设置延迟dequeue()运行被选元素的下一个排队函数fadeIn()逐渐改变被选元素的不

Observable Array(监控数组)的作用列表操作是经常会遇到的一个场景，使用监控数组，你可以：保存列表对象，并且使用Ko提供的丰富的API操作列表元素(支持内建js Array的方法，以及ko自己添加的方法:remove,removeAll等)监控数组元素个数的变化，并且自动通知外部。如果与UI绑定，则自动更新UIObservable Array与js内建Array区别

1.列表jQuery 属性操作方法下面列出的这些方法获得或设置元素的 DOM 属性。这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。方法描述addClass()向匹配的元素添加指定的类名。attr()设置或返回匹配元素的属性和值。hasClass()检查匹配的元素是否拥有指定的类。

关于Knockout的3个重要概念(Observables,DependentObservables,ObservableArray)，本人无法准确表达它的准确含义，所以暂定翻译为(监控属性、依赖监控属性和监控数组)，如果有好的建议请指正，多谢。1 创建带有监控属性的view modelObservablesKnockout是在下面三个核心功能是建立起来的：◆ 监控属性(Obser

目的template绑定通过模板将数据render到页面。模板绑定对于构建嵌套结构的页面非常方便。默认情况， Knockout用的是流行的jquery.tmpl模板引擎。使用它的话，需要在安装页面下载和引用jquery.tmpl和jQuery框架。或者你也可以集成其它的模板引擎(虽然需要了解Knockout 内部知识才行)。例子div data-bind='template: "per

我们来看看如果使用Knockout更简单的来实现密码强度的验证。原有代码请查看：> html xmlns="http://www.w3.org/1999/xhtml"> head> title>title> head> body> script type="text/javascript"> //CharMode函数 function CharMode(

1.列表事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。触发实例：$("button#demo").click()上面的例子将触发 id="demo" 的 button 元素的 click 事件。绑定实例：$("button#demo").click(function(){$("img").hide()})上面的例子会在点击 id="demo" 的按

1.列表jQuery CSS 操作函数下面列出的这些方法设置或返回元素的 CSS 相关属性。CSS 属性描述css()设置或返回匹配元素的样式属性。height()设置或返回匹配元素的高度。offset()返回第一个匹配元素相对于文档的位置。offsetParent()返回最近的定位祖先元素。

创建自定义绑定你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定（像click，value等）。你可以你封装复杂的逻辑或行为，自定义很容易使用和重用的绑定。例如，你可以在form表单里自定义像grid，tabset等这样的绑定。重要：以下文档只应用在Knockout 1.1.1和更高版本，Knockout 1.1.0和以前的版本在注册API上是不同的。注册你的绑定添加子

一.介绍jQuery 库 - 特性jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities向您的页面添加 jQuery 库jQuery 库位于一个 JavaScript 文件中，其中包含

1.列表jQuery 选择器选择器实例选取*$("*")所有元素#id$("#lastname")id="lastname" 的元素.class$(".intro")所有 class="intro" 的元素element$("p")所有 元素.class.class

封装一、 生成实例对象的原始模式假定我们把猫看成一个对象，它有"名字"和"颜色"两个属性。　　var Cat = {　　　　name : '',　　　　color : ''　　} 现在，我们需要根据这个原型对象的规格（schema），生成两个实例对象。　　var cat1 = {}; // 创建一个空对象