摘要：我们先来看一下jQuery中有多少个方法是用来操作元素属性的。首先，看一下实例方法：然后，看下静态方法（工具方法）：静态方法是内部使用的，我们外面使用的很少，实例方法才是对外的。接下来，我们来看下一些方法是如何使用的？$("#div1").attr("title","hello") ，设置属性，两个...
阅读全文
摘要：之前我们讲了Mochikit Deferred，JSDeferred，现在讲jQuery Deferred。首先，我们先来讲下他们的区别：在保存回调函数时，Mochikit Deferred（dojo Deferred）是用一个2维数组保存的，里面的小数组只有两项，一个是成功回调的函数，一个是失败回...
阅读全文
摘要：大家如果看了前面两课，就知道Deferred的静态方法next(next_default)是用setTimeout实现的(有浏览器最小时钟间隔)。但是实现这种异步操作，可以有很多种方法。JSDeferred中，针对老版本IE，以及标准浏览器都专门使用了一些方法来实现异步操作，提高异步操作的性能提速。...
阅读全文
摘要：我们先来看一下jQuery中有关队列操作的方法集：从上图可以看出，既有静态方法，又有实例方法。queue方法，相当于数组中的push操作。dequeue相当于数组的shift操作。举个例子：function aaa(){ alert(1);}function bbb(){ alert(2);}$...
阅读全文
摘要：这一课，我们先接着上一课讲一下wait方法，以及wait方法是如何从静态方法变化实例方法的。首先我们先看wait方法为啥可以从静态方法变成实例方法，请看register源码：Deferred.register= function(name, fun){ //name="wait",fun=Defer...
阅读全文
摘要：本课难度非常大，看一遍，蛋会疼，第二遍蛋不舒服，第三遍应该貌似懂了。初学者莫来，没必要，这完全就是一个研究。JSDeferred是日本高手cho45搞出来的，其易用性远胜于Mochikit Deferred，它的实现形态基本上奠定了后来称为Promise/A的范式，是js在异步编程上的一个里程碑作品...
阅读全文
摘要：上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析，这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的。我们接下来，来看这几个静态方法和实例方法的源码解析：data_user = new Data(); //对外使用的数据缓存对象data_priv ...
阅读全文
摘要：本插件ccShow是用来在前端显示弹出框，用户可以点击按钮，弹出一个框，也可以Ajax请求时，弹出提示语，请求中，等Ajax结束后，就显示已完成或者请求失败等情况。基于jQuery的插件，兼容各种浏览器。var ccShow = {};var isSetTimeOut=false; var i...
阅读全文
摘要：大家知道javascript中有多少方法能够实现异步处理吗？setTimeout(),setInterval()是最常用的两个。XMLHttpRequest对象，进行ajax请求时。postMessage()进行跨域操作时。WebWorker创建新的线程时。setImmediate方法（新的setT...
阅读全文
摘要：jQuery中有三种添加数据的方法，$().attr(),$().prop(),$().data()。但是前面两种是用来在元素上添加属性值的，只适合少量的数据，比如：title，class，name等。对于json这种数据量大的，就适合用data方法来添加，而data方法就是jQuery缓存机制最重...
阅读全文
摘要：focusin与focusout这两个事件是IE的私有实现，能冒泡，它代表获得焦点或失去焦点的事件。现在只有Firefox不支持focusin，focusout事件。其实另外两个事件focus和blur是用来实现获取焦点和失去焦点的事件，但是由于这两个事件不能冒泡，所以很多浏览器就使用focusin...
阅读全文
摘要：滚轮事件jQuery核心库没有对mousewheel事件的差异性进行处理，但作为一个常用的事件，本文讲解一下。mousewheel事件只有火狐浏览器不支持。mousewheel用于取得滚动距离的属性名为event.wheelDelta，往上滚一圈是120，往下滚一圈是-120.在IE6-8下，win...
阅读全文
摘要：因为原生的event对象，在不同浏览器下，有不同的属性和方法，因此需要用jQuery进行兼容。jQuery在这里分两步走，首先创建一个伪事件类jQuery.Event（jQuery里面自定义的事件类），这个事件类会统一处理事件对象的兼容性问题，比如：stopPropagation，preventDe...
阅读全文
摘要：jQuery.support是用功能检测的方法来检测浏览器是否支持某些功能。针对jQuery内部使用。我们先来看一些源码：jQuery.support = (function( support ) { ...... return support;})( {} );jQuery.support其...
阅读全文
摘要：本课主要来讲解jQuery.event.trigger的源码解读。trigger = function(event, data, elem, onlyHandlers){ if(elem && (elem.nodeType === 3 || elem.nodeType ===8)){ //触发的元...
阅读全文
摘要：本课还是来讲解一下jQuery是如何实现它的事件系统的。这一课我们先来讲一下jQuery.event.remove的源码解读。remove方法的目的是，根据用户传参，找到事件队列，从里面把匹配的handleObj对象移除，在参数不足的情况下，可能移除多个或所有的handleObj。当队列的长度为0（...
阅读全文
摘要：我们先来看when方法是如何使用的：var cb = $.when(); //when方法也是返回一个延迟对象，源码是return deferred.promise();返回的延迟对象不能修改状态$.Deferred()也是返回一个延迟对象，那么它们的区别是什么呢？$.Deferred()只能针对...
阅读全文
摘要：本课主要来讲解一下jQuery是如何实现它的事件系统的。我们先来看一个问题：如果有一个表格有100个tr元素，每个都要绑定mouseover/mouseout事件，改成事件代理的方式，可以节省99次绑定，更何况它还能监听将来添加的tr元素。这就是jQuery中的live方法。这种机制使用的是事件冒泡...
阅读全文
摘要：请接着上一课继续看。$.Deferred()方法中，有两个对象，一个是deferred对象，一个是promise对象。promise对象有以下几个方法：state，always，then，promise，pipe，done，fail，progress。deferred对象除了有promise对象的所...
阅读全文
摘要：再看这篇博客之前，希望你已经对js高级程序编程一书中的事件模块进行了详读，不然我只能呵呵了。document.createEventObject，在IE下创建事件对象event。elem.fireEvent，在IE下触发事件，里面有两个参数type，event。其中type是触发的事件类型，even...
阅读全文
摘要：请先看上一课的回调对象。Deferred是通过extend添加到jQuery中的工具方法。如下所示：jQuery.extend({ Deferred: function( func ) { }, when: function( subordinate /* , ..., subordinat...
阅读全文
摘要：此列表插件，是用来显示后台的大数据的。比如：后台有几万条数据，需要一列一列的显示出来。但是由于是插件，所以应该能兼容各种数据的展示。有些数据的选项多，有些数据后面需要操作的按钮(操作的按钮也有可能是多个)。废话不说，直接上代码。function List (options) { this....
阅读全文
摘要：上一课主要讲了属性的概念，用法，固有属性和自定义属性的区别，class属性操作的方法等，这一课主要讲一些有关属性操作的兼容性问题。IE6-IE8在一些表示URL的属性会返回补全的改过编码的路径，比如：href，action，background，cite，data，src，url等。我们只需要用ge...
阅读全文
摘要：我们首先来讲下Callbacks是如何使用的：第一个例子function a(){}function b(){}var cb = $.Callbacks();cb.add(a);cb.add(b);cb.fire(); //就会先执行a方法，再执行b方法上面大概的意思是：add方法，就是把方法添...
阅读全文
摘要：本章的内容有点复杂，我将用简单的方式来介绍重要的东西，不重要的东西，这里就不讲了，讲了也毛用。通常我们把对象的非函数成员叫做属性。对元素节点来说，其属性大题分为两大类，固有属性和自定义属性。固有属性拥有默认值，并且无法删除。自定义属性是用户随意添加的键值对。浏览器提供一组API来供人们操作自定义属性...
阅读全文
摘要：这一章主要讲的是jQuery的缓存系统的历史发展，以及他自己的框架的缓存系统的实现。都是源码解析。我就挑几个重点讲下：（1）jQuery的缓存机制的原理jQuery的缓存机制实现的原理是在元素中添加自定义属性，然后把这个自定义属性赋值为uid，而这个uid就在jQuery的cache对象中的一个属性...
阅读全文
摘要：jQuery的工具方法，其实就是静态方法，源码里面就是通过extend方法，把这些工具方法添加给jQuery构造函数的。jQuery.extend({ ...... guid: 1, //唯一标识符，跟事件有关。举个例子：function show(){alert(this);}， $(...
阅读全文
摘要：css的盒子模型是一个前端工程师必须知道的知识点。一个元素，它的盒子模型是：margin（边界）+border（边框）+padding（填充）+content（内容）。其中除了content，其他三个都有上下左右4个方向，比如：margin-left，padding-left，border-left...
阅读全文
摘要：jQuery的工具方法，其实就是静态方法，源码里面就是通过extend方法，把这些工具方法添加给jQuery构造函数的。jQuery.extend({ ...... each: function( obj, callback, args ) { //$.each(arr , funct...
阅读全文
摘要：样式分为，外部样式（），内部样式（），行内样式（style:）。再加上一个important对选择器权重的干扰。大体上，我们可以在标准浏览器上使用getComputedStyle，IE6-IE8下使用currentStyle来获取精确的样式。不过getComputedStyle不是元素上的方法，而是...
阅读全文
摘要：Underscore并没有在原生的JavaScript对象原型中进行扩展，而是像jQuery一样，将数据封装在一个自定义对象中（下文称“Underscore对象”）。生成一个Underscore对象：Underscore默认使用_（下划线）来访问和创建对象，但这个名字可能不符合我们的命名规范，或容易...
阅读全文
摘要：本插件是基于jQuery实现的function DropSelect(obj){ obj = obj || {}; var p = this; p.id = obj.id || 'selectDrop'; //这个id为页面上的元素的id，一...
阅读全文
摘要：Backbone是前端mvc开发模式的框架。它能够让view和model相分离，让代码结构更清晰简答，开发进度加快，维护代码方便。但是，现在出了一种mvvm框架，它是下一代前端mvc开发模式的框架，代表作是Angular.js,改天有时间去研究下。现在先来研究下Backbone框架。Backbone...
阅读全文
摘要：jQuery的工具方法，其实就是静态方法，源码里面就是通过extend方法，把这些工具方法添加给jQuery构造函数的。jQuery.extend({ ...... type: function( obj ) { //$.type(),判断类型 if ( obj == null ...
阅读全文
摘要：Handlebars模板库简单介绍Handlebars是JavaScript一个语义模板库，通过对view（模板）和data（ajax请求的数据，一般是json）的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译（先对view进行编译生...
阅读全文
摘要：本插件是在jQuery 1.6.1基础上进行开发的。var _count = 0;var_expando = "CCalendar-" + (+new Date()) + "-", var CCalendar = function(element,options){ this.initiali...
阅读全文
摘要：jQuery的工具方法，其实就是静态方法，源码里面就是通过extend方法，把这些工具方法添加给jQuery构造函数的。jQuery.extend({ //当只有一个对象时，就把这个对象中的属性和方法扩展到this对象中，这里的this指向jQuery expando: "jQuery" +...
阅读全文
摘要：object元素object这个元素，现在前端很少用到，但是像flash，svg等奇葩元素，必须嵌套在object对象元素中。现代浏览器用video，canvas代替这些元素。之前做过图表和地图的一些应用，像highchart,e-chart，这些图表插件，基本上是使用svg元素（嵌套在object...
阅读全文
摘要：之前有一篇博客非常详细的介绍了sea.js的加载流程，以及源代码实现，链接地址：http://www.cnblogs.com/chaojidan/p/4123980.html这篇博客我主要讲下sea.js的介绍和使用。首先，先介绍下sea.js的CMD规范，以及跟其他规范的区别。CommonJS 原...
阅读全文
摘要：iframe一般用来加载一个页面，然后嵌入到主页面中。创建起来消耗资源，而且消耗连接数。但是它是一个物超所值的东西，可以实现无缝刷新，模拟onhashchange跨域，安全的加载第三方资源与广告，实现富文本编辑，文件上传，用它搞定IE6-IE7的select BUG（select标签会移到遮罩层的上...
阅读全文
摘要：jQuery中要扩展方法或者属性都是通过extend方法实现的。所谓的jQuery插件也是通过extend方法实现的。jQuery.extend扩展的是工具方法，也就是静态方法。jQuery.fn.extend扩展的是实例方法。当只传入一个对象的时候，里面的方法和属性是扩展到this上的。比如：$....
阅读全文
摘要：节点插入appendChild方法，insertBefore方法是常用的两个节点插入方法，具体实现，请看js高级程序设计，或者自行百度。这里提一下面试时经常会问到的问题，插入多个节点时，你是怎么插入的。如果你回答一个一个插入，那么每插入一次就会引起一次回流，插入100次，（面试官一般会说100，或者...
阅读全文
摘要：浏览器提供了多种方法创建节点。比如：document.createElement,innerHTML，insertAdjacentHTML,createContextualFragment。document.createElement方法传入一个标签名，返回此类型的元素节点，对于浏览器不支持的标签类...
阅读全文
摘要：上一篇主要讲解了jQuery原型中最重要的方法init。接下来再讲一些比较常用的原型方法和属性core_slice = [].slice,jQuery.fn = jQuery.prototype = { toArray: function(){ //把jQuery对象转换成原生元素的...
阅读全文
摘要：废话不说，直接上题。slice()，接收两个参数，第一个为开始index（从0开始），第二个为结束的index(也是从0开始，但是不包括index本身，只到index-1)。返回值是截取的数组，原数组不变化。传第三个参数，没有作用。splice()，接收无数个参数，第一个为开始的index（从0开始...
阅读全文
摘要：这篇博客难度太大，跟前端开发其实没什么关系，如果你想成为大牛，那就去了解下吧。如果你还不想，那可以忽略，毕竟面试官也不会问到这里来，因为他也不太懂。呵呵。Sizzle引擎是jQuery的选择器，它大部分操作都是从右到左进行选择，特殊选择符会从左到右。用户输入$("div")，$("div p.cla...
阅读全文
摘要：1.判断文档是否是XML文档var isXML = function(elem){ var documentElement = elem && (elem.ownerDocument || elem).documentElement; return documentElement ? doc...
阅读全文
摘要：先来了解几个jQuery方法：$("li") -> this -> jQuery对象 -> { 0 : "li", 1 : "li", 2 : "li", length : 3 }$("aaa") 的效果跟 $("")的效果是一样的。然后来看一下init方法，也就是新建jQuery...
阅读全文
摘要：IE7以及以下版本：getElementById是不区分表单元素ID与Name的，因此如果有一个表单元素只定义name，并与我们的目标元素ID同名，并且我们的目标元素在它的后面，那么就会选择到那个表单元素。所以一般在定义表单元素时，都会定义跟name一样的id，就是以防其他元素的id跟表单元素的na...
阅读全文
摘要：因为本书是js的框架设计，因此观看本书的必须有js基础，看不懂，请不要觉得自己差。我也是看了5遍js高级程序设计，才能看懂这本书的。有关js的构造函数，继承的方法大家可以去看js的高级程序设计，我这里只讲一个大家比较容易弄错的问题：function A(){}A.prototype = { aa:...
阅读全文
摘要：本系列是针对jquery2.0.3版本进行的讲解。此版本不支持IE8及以下版本。(function(){ (21, 94) 定义了一些变量和函数， jQuery = function(){}; (96,283) 给jQuery对象添加一些属性和方法（实例方法，通过$("div")这...
阅读全文
摘要：Date的构造分为四种：new Date()new Date(value) //传入毫秒数new Date(dateString) new Date(year,month,day hour,minute , second, millisecond) //day后面的hour... ， 可选...
阅读全文
摘要：1.数值扩展和修复toFixed(num) 方法可把 Number 四舍五入为指定小数位数的数字。num必需,规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替。返回 NumberObject 的字符串表示，不采用指数计数...
阅读全文
