[jQuery]当$遇上HTML

$是jQuery里最常用的符号(当然其他类库也喜欢用$,可能看到后就想到Dollar),在jQuery里的含义非常广泛,详见jQuery()

今天用Ajax返回HTML时遇到一个$(html)的问题,顺便看了一下jQuery处理HTML的方法。

$.get({ url: "test.html",function(data){
var $d=$(data);    }});

这样得到的$(data)是一个数组(NodeList类型)

image

如果是正常的data应该是一个HTML

image 

jQuery是怎么去掉那些多余的HTML代码的呢?

从jQuery的源码可以看出,当$()里面包含了一个String类型的参数,就会判断是否需要添加或者重构。

重构的代码:

ret = buildFragment( [ match[1] ], [ doc ] );

在buildFragment里面jQ用createDocumentFragment的方法重建了HTML文档也是清理的第一步。

然后又一翻天书(正则)去空格与调整为全是小写字母后,到了关键一步。

这里jQ用了一个比较有趣的方法来清理HTML

截取部分代码:

var div = context.createElement("div");

// Go to html and back, then peel off extra wrappers 

div.innerHTML = elem //html document 

div.childNodes;

这个方法可真是太爽了,直接用div里面包含整个HTML文档,然后用childNodes的方法直接把HTML文档直接转换为NodeList类型,并且轻松的去除了其他额外的标签。

然后:

fragment.appendChild( ret[i] ); 

这样只需要刷新一次DOM结构就可以把HTML文档处理的比较干净,里面不仅包含了body里面的所有DOM元素而且还包含meta与title等有用信息当然jQ有对script与style标签特殊处理,这里就不说了。

jQuery用的一种思想来写代码,这种思想与Google的页面没有</body></html>很相像,学习与理解标准的路还很漫长,我还是继续努力吧~哈哈

推荐一篇文章LifesingerGoogle首页代码的分析,看后肯定让你受益匪浅的。而他本人那种研究与探索的精神更值得我们学习,向勇于挑战的人们致敬!

此条目发表在 javascript, 实验室 分类目录,贴了 , 标签。将固定链接加入收藏夹。