在jQ元素上调用.click()并不会触发原生js的点击事件,而是已绑定的jQ点击事件
-
宽高属性获取
innerWidth 包含 padding 不包含 border outerWidth 包含 padding border 传入true包含margin width 只返回元素本身宽度
-
$全局对象
(function(window, undefined){ var zQuery = (function(){ // zQuery对象就是zQuery.fn.init对象 // 使用new关键字的话,返回的还是zQuery.fn.init对象,所以直接zQuery()即可 var zQuery = function(selector, context){ return new zQuery.fn.init(selector, context); }; // 添加到zQuery.fn的方法,也被添加到zQuery.prototype,这样new zQuery()写法产生的实例也拥有这些方法 zQuery.fn = zQuery.prototype = { constructor: zQuery, init: function(selector, context){ // ... } }; // 如上所述,使用zQuery(s, c)方法、不使用new zQuery()时,返回的是zQuery.fn.init对象; // 将它的构造函数原型也指向zQuery.fn,这样不管用哪种方法创建的zQuery对象都拥有添加到zQuery.fn的所有方法 zQuery.fn.init.prototype = zQuery.fn; return zQuery; }); window.zQuery = window.$ = zQuery; })(window);
-
$.ready(fn) window 的 DOMContentLoaded 和 load 事件的区别
$.ready() 和 window.onDOMContentLoaded 类似,在dom树渲染完成之后触发,图片、样式表等此时未必加载完成; 而 window.onload 在所有资源均加载完成后触发 如果在$.ready(fn)之前dom树已经渲染完成(即产生了DOMContentLoaded),fn仍然会被执行;相反,在fn触发之后产生的DOMContentLoaded却不会执行
-
代码总体结构
最外层是一个自调用匿名函数,规定形参window
和undefined
,之后显式传入window
。这样做使得:
1. 其内部除了jQuery
对象,所有变量和函数对外不可见,避免它们和外部的任何同名变量和函数产生冲突。
2. 在其内部访问window
和undefined
时无需将作用域链一层层退回至最顶层,速度更快。
3. 第二个形参undefined
保证了低版本浏览器对window.undefined
的修改无效。ES5 之前的undefined
,NaN
,Infinity
并不是只读的属性。--实际上这个形参叫啥都可以,只要调用时不提供,即可保证内部能取到undefined
--。然后是内部的 jQuery 构造器。创建过程如下:
var jQuery = (function() { /* 外层的 jQuery 对下面的函数内部完全不可见,只是它的返回值的一个引用。这样把内部的局部变量与外面隔绝,避免冲突。 其实内部的 jQuery 其实可以换成任意字面量,但会降低可读性。 */ var jQuery = function( selector, context ) { /* 一般情况下,new 关键字的表达式返回的是构造函数直接产生的实例; 但构造函数有返回值(!并且为对象)时,该表达式会返回这个值。 下文又把 jQuery.fn 指向了 jQuery 函数的原型, 所以 $()、jQuery() 实际上返回的都是 new jQuery.fn.init(), 这样创建 jQuery 对象时就不需要 new 关键字了。 */ return new jQuery.fn.init( selector, context, rootjQuery ); }; // (声明局部变量) jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { // (添加原型属性和方法) } }; /* 再将 jQuery.fn.init() 方法的原型指向 jQuery() 函数的原型, 这样如果用户直接在 jQuery.prototype 上添加了属性和方法,它们也对 $() (即 jQuery.fn.init() )产生的实例可见!!! 除了 666 我还能说什么呢? */ jQuery.fn.init.prototype = jQuery.fn; // (添加其它属性和方法) return jQuery; )();
最后让
$
也指向jQuery
,把它们暴露在window
下,大功告成。