接上一节的两个函数
selector = jQuery.clean( [ match[1] ], context );
jQuery( context ).find( selector );
clean (约939),find (约)
clean: function( elems, context )
elems : 数组
context : 上下文
var ret = [];
...
return ret;
那么ret就相当于是创建好的dom数组
context = context || document;
这种写法经常出现,允许参数缺省
if (typeof context.createElement == 'undefined')
context = context.ownerDocument || context[0] && context[0].ownerDocument || document;
这句主要是处理浏览器兼容型问题,因为在ie下context.createElement会打印"object",而不是"function",context.ownerDocument通过字面上意思可以得出是获取document,但出过来的context也可能是window对象,所以就有后面||的故事了。对于为什么不直接写document,我的理解是他可能是想对xml也添加支持,所以在大师脚下一定不要有自以为是这种想法,这是很危险的,我们除了敬仰就剩下仰望了,保持一颗虔诚的心,来看下面的代码。
下面是一段jQuery.each(elems, function(i, elem),然后就直接return ret了
先来看看jQuery.each代码
each: function( object, callback, args ) {
var name, i = 0, length = object.length;
if ( args ) {
if ( length == undefined ) {
....//1
break;
} else
....//2
break;
} else {
if ( length == undefined ) {
....//3
break;
} else
...//4
}
return object;
}
args是用来供内部使用的,我来从1,2,3,4一个一个分析
//1 存在args,但是没有length属性object
for ( name in object )
if ( callback.apply( object[ name ], args ) === false )
break;
遍历object里面的属性然后执行callback方法,而且将args注入进来,当返回值为false的情况下终止循环,注意是用的"===",返回0,"false"是无效的
//2 和 //1一样,只是他是一个含有length的object,便利的方式不同而已,毕竟for要比foreach速度上要快
//3 外部使用,无length属性
for ( name in object )
if ( callback.call( object[ name ], name, object[ name ] ) === false )
break;
这个就看的很清楚了,当我们使用
$.each(["aa","bb"],function(i,n){ alert(n == this)}) //true
就可以知道其原因了
//4
for ( var value = object[0];i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
看似好像和前面不一样,其实这只是一种幻觉,他只是把工作全部转移到for里面去了,充分的利用了语法,可读性下去了,性能没测不好评论,不过这种花式写法我还是推崇的,毕竟写代码是个枯燥无味的,有时候能利用智慧玩点花样找点乐子,也是一种生活态度
言归正传,继续clean
jQuery.each(elems, function(i, elem){
if ( !elem ) return; //elem为null继续下一个循环
if ( elem.constructor == Number ) elem += ''; //将数字变为字符串
....
//form和select都有length
if ( elem.length === 0 && (!jQuery.nodeName( elem, "form" ) && !jQuery.nodeName( elem, "select" )) )
return; //并且不是form和select,继续下一个循环
if ( elem[0] == undefined || jQuery.nodeName( elem, "form" ) || elem.options )//假设它不是一个类数组了或者它是一个form或select
ret.push( elem );
else
//它就是一个数组
ret = jQuery.merge( ret, elem );
}
nodeName: function( elem, name ) {
return elem.nodeName && elem.nodeName.toUpperCase() == name.toUpperCase();
}
//向first上追加second
merge: function( first, second ) {
var i = 0, elem, pos = first.length;
if ( jQuery.browser.msie ) {
while ( elem = second[ i++ ] )
if ( elem.nodeType != 8 )
first[ pos++ ] = elem;
} else
while ( elem = second[ i++ ] )
first[ pos++ ] = elem;
return first;
}
现在来分析上面那个...段的代码
elem = elem.replace(/(<(\w+)[^>]*?)\/>/g, function(all, front, tag) {
return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ?
all :
front + "></" + tag + ">";
});
试验这样一段代码 : $("<input type=\"text\" value=\"haha\" />")
下面使用alert打印的结果
all: <input type="text" value="哈哈"/>
front: <input type="text" value="哈哈"
tag: input
其实本意目的就是将<div/> 改为<div></div>
//去空白创建,临时div
var tags = jQuery.trim(elem).toLowerCase(), div = context.createElement("div");
var wrap =
!tags.indexOf("<opt") &&
[1, "<select multiple='multiple'>", "</select>"] ||
!tags.indexOf("<leg") &&
[1, "<fieldset>", "</fieldset>"] ||
tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&
[1, "<table>", "</table>"] ||
!tags.indexOf("<tr") &&
[2, "<table><tbody>", "</tbody></table>"] ||
(!tags.indexOf("<td") || !tags.indexOf("<th")) &&
[3, "<table><tbody><tr>", "</tr></tbody></table>"] ||
!tags.indexOf("<col") &&
[2, "<table><tbody></tbody><colgroup>", "</colgroup></table>"] ||
jQuery.browser.msie &&
[1, "div<div>", "</div>"] ||
[0, "", ""];
建立了一个数组,这个数组时干嘛的呢.就比如说opt必须是放在select地下,而leg必须放在fieldset底下,前面的数字代表深度
div.innerHTML = wrap[1] + elem + wrap[2]; //不解释
//通过深度得到最内层的元素,如"<table><tbody><tr>", "</tr></tbody></table>"得到的就是里面的最里面td
while (wrap[0]--)
div = div.lastChild;
if (jQuery.browser.msie) {
var tbody = !tags.indexOf("<table") && tags.indexOf("<tbody") < 0 ?
div.firstChild && div.firstChild.childNodes :
wrap[1] == "<table>" && tags.indexOf("<tbody") < 0 ?
div.childNodes :
[];
for (var j = tbody.length - 1; j >= 0; --j)
if (jQuery.nodeName(tbody[j], "tbody") && !tbody[j].childNodes.length)
tbody[j].parentNode.removeChild(tbody[j]);
//ie当使用innerHTML的时候会自动去掉空白节点,下面就是将其恢复
if (/^\s/.test(elem))
div.insertBefore(context.createTextNode(elem.match(/^\s*/)[0]), div.firstChild);
}
可见深度主要是针对ie兼容性的问题,ie又一次的擅住主张,自动加入tbody,jquery作者真是煞费苦心啊
分享到:
相关推荐
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...
在本压缩包中,我们有两个版本的jQuery核心库文件:`jquery-1.12.4.js` 和 `jquery-1.12.4.min.js`。前者是未压缩的源代码,适合开发调试使用,后者是经过压缩和优化的版本,适用于生产环境,体积更小,加载速度更快...
在描述中提到,该插件兼容IE7、8、9以及Firefox等浏览器,这意味着它采用了广泛兼容的JavaScript代码,以确保在多种浏览器环境下都能正常工作。这对于前端开发者来说是一项重要的考虑因素,因为不同的浏览器可能对...
在“jQuery例子大全 jQuery demo”这个压缩包中,包含了一系列的示例,旨在帮助用户快速理解和掌握jQuery的核心概念及常用方法。** ### 一、jQuery 基本使用 jQuery 的核心在于它的选择器,它允许我们方便地选取...
jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版
然而,在支持较旧浏览器或需要更复杂动画控制的场景下,`jquery.color.js`仍然是一种可靠的选择。 总的来说,`jquery.color.js`是jQuery生态系统中的一个重要组成部分,它扩展了jQuery的动画功能,使得开发者能够更...
在网页开发中,jQuery 是一个非常流行的 JavaScript 库,它简化了 DOM 操作、事件处理、动画效果等任务。标题“Jquery实现div左右上下收缩”涉及到的是使用 jQuery 创建动态的 CSS 效果,使 `div` 元素能够根据用户...
在本文中,我们将深入探讨最新版的jQuery,即`jquery-3.2.1.min.js`,以及该版本中的一些变化。** ### 1. jQuery 3.x 版本概述 jQuery 3.x 系列是继1.x和2.x后的又一重大更新,它主要关注性能优化、API清理以及对...
jquery1.2.3到3.3.1版本都有: jquery-1.10.2.min.js jquery-1.11.1.min.js jquery-1.11.3.min.js jquery-1.2.3.min.js jquery-1.3.2.min.js jquery-1.4.2.min.js jquery-1.4.4.min.js jquery-1.5.2.min.js jquery-...
然而,在没有库或框架的支持下,编写复杂的 DOM 操作和 AJAX 调用等任务可能相当繁琐且容易出错。JQuery 作为一种轻量级的 JavaScript 库,极大地简化了这些操作,使开发者能够更高效地进行前端开发。 - **跨浏览器...
在Web开发中,用户交互体验的提升是关键之一,其中拖放(Drag and Drop)功能尤为常见,如文件管理、元素布局等。jQuery作为广泛使用的JavaScript库,提供了丰富的API来简化DOM操作。然而,对于拖放功能,jQuery的...
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
在这个主题中,我们将深入探讨jQuery 2.1.1版本,包括它的主要特性、功能以及在实际开发中的应用。 首先,让我们了解一下jQuery的核心理念——"Write Less, Do More"。通过封装常见的DOM操作、事件处理、动画效果和...
资源名称:jquery1.7 中文手册 CHM文档(附jquery1.82 chm手册)内容简介:因国内jquery中文手册更新太慢了,等了一段时间实在等不下去了,干脆自己动手做一个丰衣足食,时刻更新. 最后感谢Shawphy提供1.4.1版,jehn提供...
虽然现代前端框架如React、Vue和Angular提供了更强大的状态管理和组件化功能,jQuery在某些场景下依然有其优势。对于简单的交互和快速原型开发,jQuery的轻量级和易用性仍然具有吸引力。 **学习路径** 掌握jQuery...
2. 代码优化:通过删除注释、合并变量、缩短函数名等手段,`.min.js`在不牺牲功能的前提下,实现了代码最小化,提升了运行效率。 三、jQuery在实际项目中的应用 1. DOM操作:jQuery提供了一系列简便的方法,如`$...