Archive for the ‘jQuery’ Category
记录 jQuery 文档~
“Make big dreams, because if you don’t, you will end up in small places; Take small steps, otherwise you will end up with big troubles.
钱就好比汽油，生活的目的不是为了获得汽油，而是为了让汽车加满油之后，去那些你想去的地方。
周末把 jQuery 文档翻了一下, 下面是用的比较少的内容~
.queue, dequeue, .clearqueue.
queue 初始化队列, dequeue 执行队列中第一个函数, clearqueue 清空队列.
.proxy() 使用过proxy方法, 是指定特定对象. 最近 JavaScript api 有针对它的方法.
jQuery.fx.off, jQuery.fx.interval -> queue 相关~~
jQuery.link, jQuery.unlink -> 插件支持.
https://github.com/jquery/jquery-datalink
功能: 数据同步更新使用.
jQuery.template.
jQuery 模块引擎. -> 插件形式存在.
https://github.com/jquery/jquery-tmpl
.detach, .remove, .empty
.focusin, .focusout -> 冒泡~
deferred -> always, done, fail, notify, notifyWith, pipe, progress, promise, rejectWith, resolve, resolveWith, state, then, when, promise.
callbacks.
add, disable, empty, fire, fired, fireWith, has, lock, locked, remove.
新版本: http://api.jquery.com/category/version/1.7/
使用 on, off 绑定和解除事件.
jQuery 东西挺多的, 不过仅学习 api 还是比较简单的. 关键是怎么使用它~.
计划下面一段时间和组内同事一起熟悉下~.
proxy – jQuery
/* jQuery 源码之 proxy: 使用 apply 形式, 执行回调函数. */ jQuery.proxy = function( fn, proxy, thisObject ) { if ( arguments.length === 2 ) { // jQuery.proxy(context, name); if ( typeof proxy === "string" ) { thisObject = fn; fn = thisObject[ proxy ]; proxy = undefined; /* 转化结果： thisObject -> context fn -> name proxy -> undefined */ } // jQuery.proxy(name, context); else if ( proxy && !jQuery.isFunction( proxy ) ) { thisObject = proxy; proxy = undefined; } } if ( !proxy && fn ) { /* 使用 proxy 保证 函数执行时, context 为指定值 */ proxy = function() { return fn.apply( thisObject || this, arguments ); }; } // Set the guid of unique handler to the same of original handler, so it can be removed if ( fn ) { proxy.guid = fn.guid = fn.guid || proxy.guid || jQuery.guid++; } // So proxy can be declared as an argument return proxy; } /* 对外接口 */ jQuery.proxy(context, name); jQuery.proxy(func, context);
数据类型判断 – jQuery
var class2type = {}; /* 判断数据类型 */ // Populate the class2type map jQuery.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(i, name) { class2type[ "[object " + name + "]" ] = name.toLowerCase(); }); /** var toString = Object.prototype.toString; ('Boolean Number String Function Array Date RegExp Object'.split(' ')).forEach(function (name, index, items) { class2type['[object ' + name + ']'] = name.toLowerCase(); }); */ var type = function (obj) { return obj === null ? String(null) : class2type[toString.call(obj) || 'object']; };
jQuery 中无 new 实例化
var jQuery = function (){ /* 构造函数中使用原型定义方法 */ return new jQuery.fn.init(); }; /* jQuery.fn 指向构造函数原型 */ jQuery.fn = jQuery.prototype = { // 保证链正常 constructor: jQuery, // 作为构造函数存在, 用于实例化 jQuery init: function () { return this; } }; /* 使 new jQuery.fn.init(); 实例具有 init等方法 */ jQuery.fn.init.prototype = jQuery.fn;
jQuery 几个方法.
jQuery 中,
offset() 方法是相对于 document 对象来取位置;
position() 方法是相对于 closest 的 positio: relative; 元素来取位置;
delegate(); 绑定事件.
queue()/dequeue(); 执行列队操作.
// jQuery: detach() 方法.
/* 作用： 类似 remove() 方法, 但是 detach() 方法, 不会丢失数据关联, 最后还可以插入到 DOM 树中;
可以使用些方法让元素脱离 DOM 树, 然后再对元素进行样式或数据处理, 最后插入到 DOM 树中, 从而提升性能。
注意事项： 使用 detach() 方法后, siblings 和 children 等方法会存在问题.
*/
var txt = $(‘#txt’).detach();
// jQuery noConfilct 实现： 先缓存 $ 变量 到 _$; // 如果发现冲突时, 可以把 _$ 还原给 $. 内部方法实现, 肯定不会去使用 $ _$; // $ 只是个快捷方式. jQuery.extend({ /* 防止命名冲突 */ noConflict: function( deep ) { window.$ = _$; if ( deep ) { window.jQuery = _jQuery; } return jQuery; } });
在网上看到这样一句话, 说的很有道理。 就像，网上有很多开源产品， 虽然可以随意使用，但要保证，使用者要维护，有能力维护。
/*
如是开发人员仅仅只知道文档中的简单的使用方法，
却不明白Jquery的运行原理和内部机制，
在使用jquery时，肯定会碰到许多的问题。
*/