- 浏览: 419137 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (267)
- 序列号 (1)
- jquery (14)
- Eclipse插件 (3)
- Flex (2)
- Rose (1)
- Myeclipse (3)
- maven (4)
- SpringSecurity (2)
- sproutcore (1)
- Http (2)
- svn (4)
- gwt (3)
- jetty (1)
- freebsd (1)
- java (29)
- Oracle (21)
- windows (1)
- Mybatis3.0 (3)
- Struts2 (6)
- easyui (1)
- JPA (1)
- UML (1)
- dom4j (1)
- design pattern (2)
- JavaScript (8)
- FreeMarker (2)
- SQLServer (1)
- memcached (3)
- urlrewrite (1)
- MonggoDB (1)
- Solr (1)
- Lucene (1)
- SQL (2)
- JODConverter (1)
- xml (2)
- pdf2swf (1)
- flexpaper (1)
- android (2)
- jsp (5)
- mobile (1)
- weblogic (3)
- Tomcat (8)
- xss (1)
- db2 (2)
- webservice (1)
- spring (2)
- Gradle (1)
- linux (4)
- ldap (1)
- 软件工程 (1)
- 开发模型 (1)
- linux系统硬件配置查看方法 (1)
- cas (3)
- mysql (1)
- HAProxy (0)
- html (1)
- Web前端 (1)
最新评论
-
super_zou:
...
世界主要国家地区下拉菜单三级联动1 -
ldl_xz:
http://www.9958.pw/post/wenku 曾 ...
利用pdf2swf将PDF转换成SWF -
superlxw1234:
请教一下楼主,你们是如何解决使用MAgent时候,一台主Mem ...
memcached集群-magent -
头子:
中间那段关于“空隙”的解决方式很赞
HTML固定表头Table -
qiankun:
比较实用,好好学习了一下
Mybatis 在dao中获取分页的总记录数
前文提要,jQuery用init方法创建的,它是jQuery.fn.init的实例而非jQuery的实例,后期会用jQuery.fn.init.
prototype = jQuery.fn; 把相应的能力从jQuery.prototype搬运到jQuery.fn.init.prototype上。因此,init之后,作者就放心地往 jQuery的原型添加方法。而这些原型更多的时候是往外调用其静态方法来工作。一开始,都是一些用于构建类数组的东西。像 setArray,makeArray,size,get,pushStack等方法。
//另一个复杂的方法
css: function( key, value ) {
// ignore negative width and height values
if ( (key == 'width' || key == 'height') && parseFloat(value) < 0 )
value = undefined;
return this.attr( key, value, "curCSS" );
},
//与css与attr一样,既能读亦能写
text: function( text ) {
if ( typeof text !== "object" && text != null )
return this.empty().append( (this[0] && this[0].ownerDocument || document).createTextNode( text ) );
var ret = "";
jQuery.each( text || this, function(){
jQuery.each( this.childNodes, function(){
if ( this.nodeType != 8 )
ret += this.nodeType != 1 ?
this.nodeValue :
jQuery.fn.text( [ this ] );
});
});
return ret;
},
//把匹配的元素作出了为一个整体用参数里的标签(如果传入的是元素也会转换为标签)包起来,
//$("p").wrapAll('<div></div>') => <div><p>******</p><p>******</p><p>******</p></div>
//这东西应该叫wrapOutter更好
wrapAll: function( html ) {
if ( this[0] ) {
// The elements to wrap the target around
var wrap = jQuery( html, this[0].ownerDocument ).clone();
if ( this[0].parentNode )
wrap.insertBefore( this[0] );
wrap.map(function(){
var elem = this;
while ( elem.firstChild )
elem = elem.firstChild;
return elem;
}).append(this);
}
return this;
},
//相当于把匹配的元素取得其innerHTML,然后用wrapAll方法包起来
//$("p").wrapInner('<div></div>') => <p><div>******</div></p><p><div>******</div></p><p><div>******</div></p>
wrapInner: function( html ) {
return this.each(function(){
jQuery( this ).contents().wrapAll( html );
});
},
//与上面相反,有点像outterHTML,内容外面加一层皮
//$("p").wrap('<div></div>') => <div><p>******</p></div><div><p>******</p></div><div><p>******</p></div>
wrap: function( html ) {
return this.each(function(){
jQuery( this ).wrapAll( html );
});
},
接着下来分析append,prepend,before,after。内部实现非常复杂,先扼要类比一下已有的API吧。
//append:向每个匹配的元素内部追加内容。
//相当于
//insertAdjacentHTML("beforeEnd",htmlstr)
//insertAdjacentElement("beforeEnd",dom)
//insertAdjacentElement("beforeEnd",jQueryEl)
//并且具有处理复数个DOM对象的能力(内部用jQuery.each实现)
//prepend:向每个匹配的元素内部前置内容。
//相当于
//insertAdjacentHTML("afterBegin",htmlstr)
//insertAdjacentElement("afterBegin",dom)
//insertAdjacentElement("afterBegin",jQueryEl)
//并且具有处理复数个DOM对象的能力(内部用jQuery.each实现)
//before:在每个匹配的元素之前插入内容。
//相当于
//insertAdjacentHTML("beforeBegin",htmlstr)
//insertAdjacentElement("beforeBegin",dom)
//insertAdjacentElement("beforeBegin",jQueryEl)
//并且具有处理复数个DOM对象的能力(内部用jQuery.each实现)
//after:在每个匹配的元素之后插入内容。。
//相当于
//insertAdjacentHTML("afterEnd",htmlstr)
//insertAdjacentElement("afterEnd",dom)
//insertAdjacentElement("afterEnd",jQueryEl)
//并且具有处理复数个DOM对象的能力(内部用jQuery.each实现)
这些方法内部都调用一个叫domManip的方法,它的存在价值仅仅是为了兼容邪恶的火狐,因为火狐死活不支持IE的insertAdjacentXXX系列。
//主要用于返回上次覆盖了DOM元素数组
end: function() {
return this.prevObject || jQuery( [] );
},
// For internal use only.
// Behaves like an Array's method, not like a jQuery method.
push: [].push,
sort: [].sort,
splice: [].splice,
//jQuery强大的CSS选择器
find: function( selector ) {
if ( this.length === 1 ) {
var ret = this.pushStack( [], "find", selector );
ret.length = 0;
//分别为表达式,上下文,与之前获得的元素集合(它们将作为此次的搜索起点)
jQuery.find( selector, this[0], ret );
return ret;
} else {
//每次都会重新洗牌,因此必须进行压栈操作
return this.pushStack( jQuery.unique(jQuery.map(this, function(elem){
return jQuery.find( selector, elem );
})), "find", selector );
}
},
//先复制DOM再复制其上的事件
clone: function( events ) {
// Do the clone
var ret = this.map(function(){
if ( !jQuery.support.noCloneEvent && !jQuery.isXMLDoc(this) ) {
// IE copies events bound via attachEvent when
// using cloneNode. Calling detachEvent on the
// clone will also remove the events from the orignal
// In order to get around this, we use innerHTML.
// Unfortunately, this means some modifications to
// attributes in IE that are actually only stored
// as properties will not be copied (such as the
// the name attribute on an input).
var html = this.outerHTML;
if ( !html ) {
var div = this.ownerDocument.createElement("div");
div.appendChild( this.cloneNode(true) );
html = div.innerHTML;
}
//将字符串转换成jQuery对象
return jQuery.clean([html.replace(/ jQuery\d+="(?:\d+|null)"/g, "").replace(/^\s*/, "")])[0];
} else
return this.cloneNode(true);
});
//许多是后面的方法,到时再说
// Copy the events from the original to the clone
if ( events === true ) {
var orig = this.find("*").andSelf(), i = 0;
ret.find("*").andSelf().each(function(){
if ( this.nodeName !== orig[i].nodeName )
return;
var events = jQuery.data( orig[i], "events" );
for ( var type in events ) {
for ( var handler in events[ type ] ) {
jQuery.event.add( this, type, events[ type ][ handler ], events[ type ][ handler ].data );
}
}
i++;
});
}
// Return the cloned set
return ret;
},
//如果参数是函数则用jQuery.greg,否则用jQuery.multiFiler
filter: function( selector ) {
return this.pushStack(
jQuery.isFunction( selector ) &&
jQuery.grep(this, function(elem, i){
return selector.call( elem, i );
}) ||
jQuery.multiFilter( selector, jQuery.grep(this, function(elem){
return elem.nodeType === 1;
}) ), "filter", selector );
},
//筛选最近的元素
closest: function( selector ) {
//判断是否用于方位的
var pos = jQuery.expr.match.POS.test( selector ) ? jQuery(selector) : null,
closer = 0;
//把得到元素用map进行进一步的筛选
return this.map(function(){
var cur = this;
while ( cur && cur.ownerDocument ) {
if ( pos ? pos.index(cur) > -1 : jQuery(cur).is(selector) ) {
jQuery.data(cur, "closest", closer);
return cur;
}
cur = cur.parentNode;
closer++;
}
});
},
//用于反选,内部调用filter
not: function( selector ) {
if ( typeof selector === "string" )
// test special case where just one selector is passed in
if ( isSimple.test( selector ) )//如果单一的类
return this.pushStack( jQuery.multiFilter( selector, this, true ), "not", selector );
else
selector = jQuery.multiFilter( selector, this );
//处理NodeList
var isArrayLike = selector.length && selector[selector.length - 1] !== undefined && !selector.nodeType;
return this.filter(function() {//再回调用filter
return isArrayLike ? jQuery.inArray( this, selector ) < 0 : this != selector;
});
},
//添加新元素,内部进行清零压栈等操作
add: function( selector ) {
return this.pushStack( jQuery.unique( jQuery.merge(
this.get(),
typeof selector === "string" ?
jQuery( selector ) :
jQuery.makeArray( selector )
)));
},
//相当于javascript1.6 Array的some方法
is: function( selector ) {
return !!selector && jQuery.multiFilter( selector, this ).length > 0;
},
//怎么这方法那么笨重?!
hasClass: function( selector ) {
return !!selector && this.is( "." + selector );
},
//基本上是用于获取元素value属性的值
//对于下拉开框,则是其innerText
//与css,attr一样,可读可写
val: function( value ) {
if ( value === undefined ) {
var elem = this[0];
if ( elem ) {
if( jQuery.nodeName( elem, 'option' ) )
return (elem.attributes.value || {}).specified ? elem.value : elem.text;
// We need to handle select boxes special
if ( jQuery.nodeName( elem, "select" ) ) {
var index = elem.selectedIndex,
values = [],
options = elem.options,
one = elem.type == "select-one";
// Nothing was selected
if ( index < 0 )
return null;
// Loop through all the selected options
for ( var i = one ? index : 0, max = one ? index + 1 : options.length; i < max; i++ ) {
var option = options[ i ];
if ( option.selected ) {
// Get the specifc value for the option
value = jQuery(option).val();
// We don't need an array for one selects
if ( one )
return value;
// Multi-Selects return an array
values.push( value );
}
}
return values;
}
// Everything else, we just grab the value
return (elem.value || "").replace(/\r/g, "");
}
return undefined;
}
if ( typeof value === "number" )
value += '';
return this.each(function(){
if ( this.nodeType != 1 )
return;
//处理radio的checkbox checked属性,用于返回true与false
if ( jQuery.isArray(value) && /radio|checkbox/.test( this.type ) )
this.checked = (jQuery.inArray(this.value, value) >= 0 ||
jQuery.inArray(this.name, value) >= 0);
else if ( jQuery.nodeName( this, "select" ) ) {
var values = jQuery.makeArray(value);
jQuery( "option", this ).each(function(){
this.selected = (jQuery.inArray( this.value, values ) >= 0 ||
jQuery.inArray( this.text, values ) >= 0);
});
if ( !values.length )
this.selectedIndex = -1;
} else
this.value = value;
});
},
//就是innerHTML
html: function( value ) {
return value === undefined ?
(this[0] ?
this[0].innerHTML.replace(/ jQuery\d+="(?:\d+|null)"/g, "") :
null) :
this.empty().append( value );
},
//与replaceNode差不多
replaceWith: function( value ) {
return this.after( value ).remove();
},
//把等于此索引值的DOM对象从jQuery对象中取出
eq: function( i ) {
return this.slice( i, +i + 1 );
},
发表评论
-
js图片滚动
2012-02-02 13:40 836js图片滚动 -
js 产品图片放大预览
2012-02-02 13:39 1323js 产品图片放大预览 -
bigcolorpicker_2.2
2011-12-22 14:20 864bigcolorpicker_2.2 -
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2011-12-20 13:53 973jQuery中文入门指南,翻译加实例,jQuery的起点教程 ... -
jQuery技巧
2011-12-20 13:36 792一、简介 1.1、概述 ... -
jQuery select操作控制方法小结
2011-12-08 19:06 1136很多朋友对jquery select的操作很有兴趣,但网上 ... -
EasyUI学习文档
2011-12-05 10:37 1095EasyUI版主文档 -
jquery插件开发
2011-07-01 08:53 541jquery插件开发 -
jQueryAPI-1.4.1.chm
2011-06-22 14:37 872jQueryAPI-1.4.1.chm -
jQuery1.4.1 中文开发文档
2011-04-10 11:51 841jQuery1.4.1 中文开发文档 -
jQuery源码学习笔记四
2010-03-18 10:26 2506<p>这一节重点讲jQuery对样式的处理,虽然I ... -
jQuery源码学习笔记三
2010-03-18 10:25 1259还有一点,jQuery.prototype ... -
jQuery源码学习笔记一
2010-03-18 10:24 1445不知该起什么题目,随便吧。不过我没心情逐一介绍其API,那是文 ...
相关推荐
在本篇jQuery EasyUI的学习笔记中,我们将深入探讨如何实现右键菜单以及冻结列的功能,这对于构建用户交互丰富的Web应用程序至关重要。jQuery EasyUI是一个基于jQuery的UI库,它提供了大量的预定义组件,使得开发者...
**jQuery EasyUI 学习笔记(十):深入源码** 在Web开发中,jQuery EasyUI是一个基于jQuery的UI框架,它提供了丰富的组件和便捷的API,帮助开发者快速构建交互式的用户界面。本篇笔记主要关注jQuery EasyUI的源码...
**jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
**jQuery EasyUI 学习笔记(十二):深入解析源码** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列轻量级、易于使用的组件,帮助开发者快速构建用户界面。在这一章节的学习笔记中,我们将深入探讨...
**jQuery EasyUI 学习笔记珍藏版** jQuery EasyUI 是一个基于 jQuery 的前端框架,它为开发者提供了丰富的UI组件,使得构建用户界面变得更加简单高效。这个珍藏版的学习笔记涵盖了广泛的jQuery EasyUI主题,旨在...
在本篇JQueryEasyUI的学习笔记中,我们将深入探讨如何利用这个强大的JavaScript库来实现一些常见的数据操作功能,包括批量删除、行内编辑以及自定义编辑器方法。JQueryEasyUI是一个基于jQuery的UI框架,它提供了一...
在“JQueryEasyUI学习笔记(十五)异步tree 源码”中,我们可以看到关于如何实现这一功能的具体步骤和源代码解析。 首先,我们需要理解异步Tree的基本结构。每个节点都包含一个标识符(id)、文本(text)以及可选...
《jQuery学习笔记源码——初识与实践》 在当今的Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将基于“jQuery学习笔记源码 1第一个...
《jQuery学习笔记源码1-3章》涵盖了jQuery的基础到进阶内容,是初学者深入理解这一强大JavaScript库的关键步骤。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...
本周公司技术讲座轮到我了,准备说说现在流行的jQuery,下面是概要提纲,关键是看custom.js,已上传源码,程序中“//##”是分段用的,大家可以根据每一段取消注释,然后找到相应的id或class名查看效果。
《锋利的jQuery学习笔记》是一份深入探讨jQuery框架的学习资料,主要针对想要掌握JavaScript库jQuery的开发者。jQuery是一款高效、简洁的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理...
《jQuery学习笔记详解》 jQuery 是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本笔记基于一年的学习经验,涵盖了基础到进阶的知识点,旨在帮助初学者快速掌握...
《jQuery读书笔记》 在深入理解JavaScript库的过程中,jQuery无疑是一个绕不开的重要角色。这篇读书笔记将基于jQuery的API文档,结合实际应用,...深入学习和理解jQuery,将有助于提升开发者在前端领域的技能水平。
本学习笔记将聚焦于jQuery的核心功能之一:常规选择器。通过理解并熟练运用这些选择器,你可以更加高效地定位和操纵网页中的元素,提升开发效率。 1. 元素选择器: jQuery的元素选择器允许我们根据HTML标签名来...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念,通过实例代码来加强理解和应用。 1. **jQuery选择器**:...
在本篇“jQuery学习笔记(二)”中,我们将深入探讨jQuery库的更多核心功能和常见用法。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这篇笔记将帮助你进一步...
《jQuery源码阅读笔记》是一份深入探讨jQuery库核心机制的文档,旨在帮助开发者理解这个广泛使用的JavaScript库的内部工作原理。jQuery自2006年发布以来,因其简洁的API和强大的功能,成为了前端开发的必备工具。这...
总的来说,jQuery源码的组织清晰,设计精巧,其强大的功能和良好的可扩展性使其成为JavaScript开发中的首选库。通过对源码的深入理解,开发者可以更好地利用jQuery,提升开发效率,同时也能从中学习到JavaScript编程...
由于工作需要,所以研究了一段时间的jQuery,参考了大量的宝贵资源,...1、学习开发时的源码 知识点和注释应该是比较全的 2、最后整理的一个文档,可直接打印,再好的记忆,时间一长也会忘记,所以打印是一个不错的主意!