一、jQuery.clean使用方法
jQuery.clean( elems, context, fragment, scripts );
二、思路分析
1、处理参数context，确保其为文档根节点document
2、处理参数elems数组(循环遍历数组)
2.1、elem为数字，转换为字符串
2.2、elem为非法值，跳出本次循环
2.3、elem为字符串
2.4、字符串不存在实体编号或html标签，则创建文本节点
2.5、字符串为实体编号或html标签
复制代码 代码如下:
创建一个div元素并插入到文档碎片中
处理xhtml风格标签
将elem包裹起来，并将包裹后的字符串作为div的innerHTML
如果包裹深度大于1，只留下第一层包裹元素
清除在ie6,7中空table标签自动加入的tbody
将在ie9以下浏览器中剔除的开头空白字符串作为div元素的第一个文本子节点
将elem重新赋值为div的子节点集合(nodeList对象),
移除本次循环中文档碎片中的div，保持下一次循环中干净的div元素
2.3、如果elem为文本节点，则直接添加到要返回的ret数组中，否则将elem(nodeList对象)中的节点合并到数组
2.4、修复在ie6、7中type为radio，checkbox类型的节点的选中状态(checked)失效的bug
3、处理参数fragment
3.1、将ret中各节点添加到文档碎片fragment中
3.2、提取节点中的script子节点，并将其添加到ret数组中，添加的script位置为其原父元素位置后面
4、返回ret数组
三、源码注释分析
1、函数中用到的变量及函数
复制代码 代码如下:
var nodeNames = "abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|" +
"header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",
wrapMap = {
option: [ 1, "<select multiple='multiple'>", "</select>" ],
legend: [ 1, "<fieldset>", "</fieldset>" ],
thead: [ 1, "<table>", "</table>" ],
tr: [ 2, "<table><tbody>", "</tbody></table>" ],
td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
area: [ 1, "<map>", "</map>" ],
_default: [ 0, "", "" ]
},
rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi,
rtagName = /<([\w:]+)/,
rtbody = /<tbody/i,
rhtml = /<|&#?\w+;/,
rleadingWhitespace = /^\s+/,
rcheckableType = /^(?:checkbox|radio)$/,
rscriptType = /\/(java|ecma)script/i;
// 设置复选框checkbox或单选框radio表单元素的默认选中状态
function fixDefaultChecked( elem ) {
if ( rcheckableType.test( elem.type ) ) {
elem.defaultChecked = elem.checked;
}
}
// 创建一个安全的文档碎片
function createSafeFragment( document ) {
var list = nodeNames.split( "|" ),
safeFrag = document.createDocumentFragment(); // ie6,7,8浏览器把safeFrage作为HTMLDocument类型
// 针对ie9以下浏览器
if ( safeFrag.createElement ) {
while ( list.length ) {
safeFrag.createElement(
list.pop()
);
}
}
return safeFrag;
}
// 模拟ES5中Array的新功能
// 该函数API：#p=jQuery.grep
jQuery.extend({
grep: function( elems, callback, inv ) {
var retVal,
ret = [],
i = 0,
length = elems.length;
inv = !!inv;
// Go through the array, only saving the items
// that pass the validator function
for ( ; i < length; i++ ) {
retVal = !!callback( elems[ i ], i );
if ( inv !== retVal ) {
ret.push( elems[ i ] );
}
}
return ret;
}
});
2、源码分析
复制代码 代码如下: