摘要：上一篇提到jQuery中添加事件提供给客户端程序员的接口方法有很多bind/click等，但其实现的核心方法是jQuery.event.add。这篇看看其源码，这个add定义如下（省略大部分）add: function( elem, types, handler, data ) { if ( ele... 阅读全文

摘要：jQuery的事件模块是较复杂的，前面仅仅提到了对事件对象的包装。即统一了一些兼容性的问题。这篇会综述下jQuery的整个事件模块。后面会详细分析jQuery.event.add/jQuery.event.remove/jQuery.event.trigger。虽然事件模块代码很难读，但其提供的AP... 阅读全文

摘要：jQuery1.6.1 发布有一段时间了，发现一些冗余代码，列出如下1，bind 方法，最后一个参数fn是多余的// Handle object literalsif ( typeof type === "object" ) { for ( var key in type ) { this[ name ](key, data, type[key], fn); } return this;}2，注释// Add which for click: 1 === left; 2 === middle; 3 === right应修改为// Add which for mousedow 阅读全文

摘要：由于各个浏览器中原生事件对象的 差异性 ，多数 JS库/框架 都或多或少的对原生事件对象进行了修复及包装。 比如，停止事件冒泡IE用 cancelBubble ，标准浏览器则用 stopPropagation 。 获取事件源对象，IE用 srcElement ，标准浏览器则用 target 诸如此... 阅读全文

摘要：jQuery丢弃了标准的 button 属性采用 which，这有点让人费解。which 是Firefox引入的，IE不支持。which的本意是获取键盘的键值(keyCode)。 jQuery中的which即可以是键盘的键值，也可以是鼠标的键值。 即当判断用户按下键盘的哪个键时可以使用which，当判断用户按下鼠标的哪个键时也可以用which。它一举两用了。源码// Add which for key eventsif ( event.which == null && (event.charCode != null || event.keyCode != null) ) { e 阅读全文

摘要：很多同学在项目中都喜欢将数据存储在HTMLElement属性上，如Test给页面中div添加了自定义属性“data”及值“some data”。后续JS代码中使用getAttribute获取。jQuery从1.2.3开始提供了data/removeData方法用来存储/删除数据。1.6.1代码片段j... 阅读全文

摘要：使用过Prototype.js的同学知道$(xx)调用后返回的是HTMLElement或其集合。jQuery的$调用后想要获取DOM元素可以使用get方法，如下// 方式1$('div').get(1); // 获取页面中第二个div当然，也可以使用数组索引方式获取// 方式2$('div')[1]... 阅读全文

摘要：前面提到jQuery库如何通过其中的jQuery.extend及jQuery.fn.extend去扩展自身的。第三篇给zChain.js添加了常用选择器，但目前为止zChain.js仍然做不了任何事情。jQuery的操作往往是分两步1，获取元素集合(选择器)2，操作元素集合而第二步操作元素集合的主要... 阅读全文

摘要：前面两篇已经道明了jQuery的核心框架。弄清楚了jQuery对象的组成，以及如何用extend方法来扩展库。链式操作 也仅仅是方法体内返回this。为了叙述每一篇的重点，其示例代码都是最精简的，比如选择器只能传HTMLElement和id。这篇我们增强下选择器，依据2/8原则，这里仅实现最常用的几... 阅读全文

摘要：上一篇分析了jQuery对象的组成，这篇分析下它的extend方法。如下jQuery.extend = jQuery.fn.extend = function() { ...};我们可以用$.extend去扩展自定义的对象，如var myself = {name:jack};$.extend... 阅读全文

摘要：首次接触jQuery是在2008年，上地的一家小公司。当时的版本是1.1，在此之前我仅接触过Prototype.js。对于jQuery的写法甚是困惑，尤其在使用Prototype的$后，一度不能理解jQuery的$。对于现在前端同学来说，可能第一个接触的就是jQuery了，他们会觉得很习惯，很自然。... 阅读全文

摘要：.html方法当不传参数时用来获取元素的html内容，查看源码return this[0] && this[0].nodeType === 1 ? this[0].innerHTML.replace(rinlinejQuery, "") : null;得知其通过非标准的但所有浏览器都支持的innerHTML实现。有些使用者会用html()方法的返回值作为代码分支的条件，比如：var str = $('#user').html();if( str=='jack' ){ ...}else if( str=='tom' 阅读全文

摘要：jQuery中发现的，jQuery.Event类。估计作者是为了减少代码量。定义一个类，但不用new关键字去创建该类对象，而使用方法调用()方式去创建该对象。很多时候我们是这样写类，然后使用new创建对象的。function Person(name,age){ this.name=name; this.age=age;}Person.prototype={ setName : function(n){this.name=n;}, getName : function(){return this.name;}}var p = new Person('jack',25);改... 阅读全文

摘要：JavaScript 1.6 引入了几个新的Array 方法，具体的介绍见：New in JavaScript 1.6 。这些方法已经被写进了ECMA262 V5。现代浏览器（IE9/Firefox/Safari/Chrome/Opera）都已经支持，但IE6/7/8不支持。jquery的工具方法中提供了类似的功能。1、Array.forEach()和jquery的$().each()。在数组中的每个项上运行一个函数。类似java5 增强的for循环。var ary = [2,4,6,8];// js1.6 Array.forEach方法ary.forEach(function(i){aler 阅读全文

摘要：前些天记录了java中for循环取map，发现用jquery的each一样可以取map（我称之为js的map，不要较劲），且顺序和map中顺序一致。废话少说，看代码var map = { 地名: ["北京","天津","上海"], 民族: ["汉族","藏族","维吾尔族"]};$.each(map,function(key,values){ console.log(key); $(values).each(function(){ console.log("\t&q 阅读全文