jQuery原型属性和方法总结
从大四下学期开始了解jquery源码相关的东西,在回校参加毕业典礼(准确的说是参加补考挂科太多)期间便开始借着《jQuery》内幕学习jquery源码,然后在博客园写笔记也已经两个月了,也写了十几篇笔记了但是感觉自己还是懂了jquery的九牛一毛,作为一名初学者而言,希望通过jquery来增加自己js的能力,但是真正做起来确实难的,本身jquery写的很深奥,再加上平常工作也很忙,中间又辞职找工作找房子住等等就导致学习断断续续的,其实我写的时候很出东西自己也是很困惑的一直希望有人给指点迷津但是似乎大家没太多热情在jqeury源码上面,作为一个前端开发人员要学习的东西太多了可能大家不想把时间浪费在它上面吧。哈哈,有点跑题了,下面开始正题:
大致就是这么多还有ready方法是属于dom加载模块的放到后面,现在回过头看看其实东西也不是很多嘛,现在再把这个模块的源码贴出来对比着看一下
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function( selector, context, rootjQuery ) {
var match, elem, ret, doc; // Handle $(""), $(null), or $(undefined)
if ( !selector ) {
return this;
} // Handle $(DOMElement)
if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
} // The body element only exists once, optimize finding it
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = selector;
this.length = 1;
return this;
} // Handle HTML strings
if ( typeof selector === "string" ) {
// Are we dealing with HTML string or an ID?
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ]; } else {
match = quickExpr.exec( selector );
} // Verify a match, and that no context was specified for #id
if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = context instanceof jQuery ? context[0] : context;
doc = ( context ? context.ownerDocument || context : document ); // If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
ret = rsingleTag.exec( selector ); if ( ret ) {
if ( jQuery.isPlainObject( context ) ) {
selector = [ document.createElement( ret[1] ) ];
jQuery.fn.attr.call( selector, context, true ); } else {
selector = [ doc.createElement( ret[1] ) ];
} } else {
ret = jQuery.buildFragment( [ match[1] ], [ doc ] );
selector = ( ret.cacheable ? jQuery.clone(ret.fragment) : ret.fragment ).childNodes;
} return jQuery.merge( this, selector ); // HANDLE: $("#id")
} else {
elem = document.getElementById( match[2] ); // Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if ( elem && elem.parentNode ) {
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector );
} // Otherwise, we inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
} this.context = document;
this.selector = selector;
return this;
} // HANDLE: $(expr, $(...))
} else if ( !context || context.jquery ) {
return ( context || rootjQuery ).find( selector ); // HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
return this.constructor( context ).find( selector );
} // HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
} if ( selector.selector !== undefined ) {
this.selector = selector.selector;
this.context = selector.context;
} return jQuery.makeArray( selector, this );
}, // Start with an empty selector
selector: "", // The current version of jQuery being used
jquery: "1.7.1", // The default length of a jQuery object is 0
length: 0, // The number of elements contained in the matched element set
size: function() {
return this.length;
}, toArray: function() {
return slice.call( this, 0 );
}, // Get the Nth element in the matched element set OR
// Get the whole matched element set as a clean array
get: function( num ) {
return num == null ? // Return a 'clean' array
this.toArray() : // Return just the object
( num < 0 ? this[ this.length + num ] : this[ num ] );
}, // Take an array of elements and push it onto the stack
// (returning the new matched element set)
pushStack: function( elems, name, selector ) {
// Build a new jQuery matched element set
var ret = this.constructor(); if ( jQuery.isArray( elems ) ) {
push.apply( ret, elems ); } else {
jQuery.merge( ret, elems );
} // Add the old object onto the stack (as a reference)
ret.prevObject = this; ret.context = this.context; if ( name === "find" ) {
ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;
} else if ( name ) {
ret.selector = this.selector + "." + name + "(" + selector + ")";
} // Return the newly-formed element set
return ret;
}, // Execute a callback for every element in the matched set.
// (You can seed the arguments with an array of args, but this is
// only used internally.)
each: function( callback, args ) {
return jQuery.each( this, callback, args );
}, ready: function( fn ) {
// Attach the listeners
jQuery.bindReady(); // Add the callback
readyList.add( fn ); return this;
}, eq: function( i ) {
i = +i;
return i === -1 ?
this.slice( i ) :
this.slice( i, i + 1 );
}, first: function() {
return this.eq( 0 );
}, last: function() {
return this.eq( -1 );
}, slice: function() { return this.pushStack( slice.apply( this, arguments ),
"slice", slice.call(arguments).join(",") );
}, map: function( callback ) {
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );
}));
}, end: function() {
return this.prevObject || this.constructor(null);
}, // For internal use only.
// Behaves like an Array's method, not like a jQuery method.
push: push,
sort: [].sort,
splice: [].splice
};
其中最后三个方法没有说因他们本来就是Array对象的原型方法
// Save a reference to some core methods
toString = Object.prototype.toString,
hasOwn = Object.prototype.hasOwnProperty,
push = Array.prototype.push,
slice = Array.prototype.slice,
trim = String.prototype.trim,
indexOf = Array.prototype.indexOf,
昨天刚回到北京,因为要回去拿自己的毕业证,拿到了证书也就意味着大学生涯乃至学生生涯的结束,心里五味杂陈,从开始接触网页到大三决定做一名web开发人员种种经历浮现眼前,想起上课的时候我在最后面偷偷写代码的情景,想起自己刚开始学习js热情开心起来都忘记吃饭的热情,想起用js写俄罗斯方块时因为要不停地调试按键盘点鼠标差点被自习室的其他同学赶出来情景.....那个时候经常被人家问你天天都在搞什么?哈哈,也许未来我不会再做编程者 但是至少现在我还会一直努力着.......
jQuery原型属性和方法总结的更多相关文章
- 六.jQuery源码分析之jQuery原型属性和方法
97 jQuery.fn = jQuery.prototype = { 98 constructor: jQuery, 99 init: function( selector, context, ro ...
- jQuery原型属性constructor,selector,length,jquery和原型方法size,get,toArray源码分析
首先看一下在jQuery1.7.1中定义的原型属性和方法有哪些? init方法作为实际的构造函数已经详细分析过了,需要了解可以参考http://www.cnblogs.com/yy-hh/p/4492 ...
- jQuery源代码阅读之二——jQuery静态属性和方法
一.jQuery.extend/jQuery.fn.extend //可接受的参数类型如下:jQuery.extend([deep],target,object1,[objectN]) jQuery. ...
- jQuery实例属性和方法
jQuery.fn = jQuery.prototype = { //添加实例属性和方法 jquery : 版本 constructor : 修正指向问题 init() : 初始化和参数 ...
- 对比jquery获取属性的方法props、attr、data
1.attr,prop 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法.对于自定义的属性是取不到的: 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 2.a ...
- jquery常用属性与方法
1..css( )给指定的样式设置样式值: 2..attr(attributeName,value) /.removeAttr(attributeName);给指定的属性设置值 / 清除所有匹配的元素 ...
- jquery添加属性的方法
$("#id" ).prop('checked', true); $("#id" ).attr('checked', 'true');
- jQuery原型方法.pushStack源码分析
这次分析的方法跟前面不同,虽然pushStack也是原型方法之一,但是我们几乎从不用在页面调用,在参考手册里面也没有这个方法的使用说明,但是这个方法还是非常重要的,在使用很多jQuery的其他方式都会 ...
- jQuery原型技术分解
jQuery原型技术分解 起源----原型继承 用户过javascript的都会明白,在javascript脚本中到处都是 函数,函数可以归置代码段,把相对独立的功能封闭在一个函数包中.函数也可以实现 ...
随机推荐
- JS魔法堂:剖析源码理解Promises/A规范
一.前言 Promises/A是由CommonJS组织制定的异步模式编程规范,有不少库已根据该规范及后来经改进的Promises/A+规范提供了实现 如Q, Bluebird, when, rsvp. ...
- 15个前卫的 HTML5 & CSS3 网页设计作品
今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...
- webpack打包压缩工具的使用方法
具体使用方法参考来源http://www.cnblogs.com/Leo_wl/p/4793722.html 必须注意的地方: 一.webpack在nodejs环境下运行 二,每个目录下都必须有一个w ...
- [Java 基础]接口
抽象类和抽象方法 抽象方法 在面向对象编程语言中抽象方法指一些只有方法声明而没有具体方法体的方法抽象方法一般存在于抽象类或接口中. java中,抽象方法就是以 abstract 修饰的方法,只需要声明 ...
- JS魔法堂:再识IE的内存泄露
一.前言 IE6~8除了不遵守W3C标准和各种诡异外,我想最让人诟病的应该是内存泄露的问题了.这阵子趁项目技术调研的机会好好的再认识一回,以下内容若有纰漏请大家指正,谢谢! 目录一大坨! 二.内存泄漏 ...
- Html页面head标签元素的意义和应用场景
相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...
- RDLC报表打印
如果你的报表能正常显示,会看到RDLC工具条下的打印图标: 如果在客户端,第一次去点击此铵钮,如果当前操作者没有管理权限,会提示: Unable to load client print contro ...
- .NET框架体系结构
刚开始接触.NET很疑惑,看完视频也不是太懂,通过总结和反复,从概括和概念入手,慢慢变得清晰了.这篇博客主要是我对.NET基础知识的了解,算作积累吧. .NET框架体系结构 由四个主要部分组成 ...
- linux两个文件修改主机名
linux修改主机名的方法 用hostname命令可以临时修改机器名,但机器重新启动之后就会恢复原来的值. #hostname //查看机器名#hostname -i //查看本机器名对应的ip ...
- IOS 2D游戏开发框架 SpriteKit-->续(postion,锚点,游戏滚动场景)
一. Postion 这里的postion和app开发中的layer.postion是一样的,postion的值代表该视图在父节点中的相对位置, 比如一个试图的父节点是self.view, 这里我们想 ...