标签：jquery

Html中的comment其实也有nodeType的，只是我们一直不用罢了。它的nodeType = 8哦。于是，就有了一个基于jQuery的插件：comments

它来自：http://www.bennadel.com/blog/1563-jQuery-Comments-Plug-in-To-Access-HTML-Comments-For-DOM-Templating.htm

<--- --------------------------------------------------------------------------------------- ----

Blog Entry:
jQuery Comments() Plug-in To Access HTML Comments For DOM Templating

Author:
Ben Nadel / Kinky Solutions

Link:
http://www.bennadel.com/index.cfm?event=blog.view&id=1563

Date Posted:
Apr 14, 2009 at 7:01 PM

---- --------------------------------------------------------------------------------------- --->


// This jQuery plugin will gather the comments within
// the current jQuery collection, returning all the
// comments in a new jQuery collection.
//
// NOTE: Comments are wrapped in DIV tags.

jQuery.fn.comments = function( blnDeep ){
var blnDeep = (blnDeep || false);
var jComments = $( [] );

// Loop over each node to search its children for
// comment nodes and element nodes (if deep search).
this.each(
function( intI, objNode ){
var objChildNode = objNode.firstChild;
var strParentID = $( this ).attr( "id" );

// Keep looping over the top-level children
// while we have a node to examine.
while (objChildNode){

// Check to see if this node is a comment.
if (objChildNode.nodeType === 8){

// We found a comment node. Add it to
// the nodes collection wrapped in a
// DIV (as we may have HTML).
jComments = jComments.add(
"<div rel='" + strParentID + "'>" +
objChildNode.nodeValue +
"</div>"
);

} else if (
blnDeep &&
(objChildNode.nodeType === 1)
) {

// Traverse this node deeply.
jComments = jComments.add(
$( objChildNode ).comments( true )
);

}

// Move to the next sibling.
objChildNode = objChildNode.nextSibling;

}

}
);

// Return the jQuery comments collection.
return( jComments );
}

代码其实并不多，大概知道就好，本来是用phpQuery也这样写的。但发现。。。stick的时候，即使我选择了nodeType=8也取不到值。我晕啊，最后我只能用正则将注释取出来当成内容用了。

早先有人把代码扔在textarea里，用来当成数据加载，现在也有人开始无耻的利用注释了。真不厚道

jqueryUI库中提供了一些封装好的，性能也算是比较好的一些工具，比如排序：sortable

在做分类的时候，这个功能就有点好了，直接拿它来排序，但是大家都觉得sortable怎么提交呢？提交的时候怎么把ID和数据传过去呢？要知道这。。TMD只是一个li，连form都没有，怎么办？

其实也算是比较方便的

$('.xxx').sortable(function(){
'update':function(event,ui){
var ids = $(this).sortable('toArray').toString();
$.post('xxx',{"id":ids},function(){
//..
})
}
})
$('.xxx').disableSelection();

主要就那个sortable('toArray')，看了一下手册，默认是使用了id，所以偷懒的话，你就把你的信息扔在id里就OK了。虽然就html规范来说，id不能是数字，但是你可以自己组装，然后post过去的时候，再解析嘛。

就是这样简单

在用一个jQuery插件的时候，突然报错：b.browser undefined。。。

最初的时候想想不太可能啊？browser的判断不是从1.2.1的时候就一直就有了吗？于是搜索了一下jquery.mini.js，搜索browser，居然找不到。。。。

然后去官网看了一下，看到官方居然有这么一段：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

居然建议我们加载migrate，打开这个文件搜索browser。。果然找到了。

于是在项目里加入这一行，不报错的。做个记录。（不就7K嘛。干嘛不放进去，真是的。。）

什么 是jquery BBQ?
这是一个jquery插件，BBQ的意思是back button & query。你知道的，以前的jqueryTAB在点击后都无法通过后退和前进恢复原来的点击事件等。而BBQ在每次点击的时候都相当于在历史里加入了一个记录。也就因此可以使得我们能够通过浏览器的前进、后退来重现刚才的点击。

官网在这里：https://github.com/cowboy/jquery-bbq

jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. In addition, jQuery BBQ provides a full .deparam() method, along with both hash state management, and fragment / query string parse and merge utility methods.

This plugin and the jQuery urlInternal plugin supersede the URL Utils plugin.

• Release v1.2.1
• Tested with jQuery 1.3.2, 1.4.1, 1.4.2 in Internet Explorer 6-8, Firefox 2-3.7, Safari 3-4, Chrome 4-5, Opera 9.6-10.1, Mobile Safari 3.1.1.
• Download Source, Minified (4.0kb)
• Follow the project on GitHub project page or report a bug!
• View Full Documentation
• View Unit Tests
• Examples: basic hashchange, advanced hashchange, jQuery UI Tabs history & bookmarking, jQuery.deparam
• Translations: Belorussian

Note: If you’re using jQuery 1.3.2 or earlier and need BBQ to merge query string or fragment params containing [], you’ll want to include the jQuery 1.4 .param method in your code.

Also, my article Cooking BBQ: the original recipe gives a history of jQuery BBQ along with some plugin authoring guidelines, if you’re interested.

What jQuery BBQ allows you to do:

While this brief overview will give you the broad strokes, for specifics you should look at the the basic examples below, read the documentation, and check out the full examples listed above.

• Deserialize any params string, the document query string or fragment into an object, including the new jQuery.param format (new in jQuery 1.4, read more here). (example)
• Merge any URL plus query string or fragment params—in an object, params string or second URL (including the current document location)—into a new URL.
• Update the “URL attribute” (ie. a[href], img[src], form[action], etc) in multiple elements, merging any URL plus query string or fragment params—in an object, params string or second URL (including the current document location)—into a new URL, which is then set into that attribute.
• Push (and retrieve) bookmarkable, history-enabling “state” objects or strings onto the document fragment, allowing cross-browser back- and next-button functionality for dynamic web applications (example 1, example 2, example 3)
• Bind event handlers to a normalized, cross-browser hashchange event (example 1, example 2, example 3)

These working examples, complete with fully commented code, illustrate a few ways in which this plugin can be used.

http://benalman.com/code/projects/jquery-bbq/examples/fragment-basic/
http://benalman.com/code/projects/jquery-bbq/examples/fragment-advanced/
http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/
http://benalman.com/code/projects/jquery-bbq/examples/deparam/

这个标题我扔到PHP分类下当然是有原因的。。
因为我最近在尝试用phpQuery来分析数据，但这些数据最终的样式都和我真正想要的还是有点区别，所以我要去除其中的样式，还要删除空标签，但:empty标签删除的太厉害了。不太敢用
所以我还是用正则来删除一级的标签。

除了空标签还有这些带样式的，我开始是用pq("xxx")->css("");来设置空标签，但总觉得不爽，因为这样会生成<p style="">这种多余的内容。
找了一点资料，其实jQuery的removeAttr就可以有这个功能啦。于是乎，pq("xxx")->removeAttr("style")，就解决了

做个笔记

我晶，我1.5都还没有用太多次，1.6居然都出来了，还TMD是正式版。。。
据jQuery官方博客5月3日的最新消息，jQuery 1.6 正式版已经可以下载使用。jQuery 1.6 版本包括了对属性（Attribute）模型的重要重写，还有诸多性能优化。借此机会感谢jQuery开发团队和jQuery错误分类团队的成员。 可以从这里下载jQuery 1.6：
http://code.jquery.com/jquery-1.6.js
http://code.jquery.com/jquery-1.6.min.js

Microsoft CDN 下载: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js

jQuery的官方博文中也鼓励社区会员参与到jQuery的核心工作中。此外，jQuery官方透露，已准备着手jQuery 1.7的开发工作，如果你有相关建议，可以向他们提交表单。（请翻墙）

看了一下changelog，发现还是以修复bug和加速为主，看到上面贴的那么多性能图片，发现在ie下几乎都维持着原来的状态，看来IE下，jquery是无法提高性能了。。。
http://blog.jquery.com/2011/05/03/jquery-16-released/

做前端的用户都会想过如何做lazyLoad，其实很多时候都有很多想法，比如占位图片，TEXTAREA后处理，根据滚动条的位置显示图片等。
介绍介绍上面的说法，因为这些名词是我自己想出来的。。。和一些标准的前端讲法可能是不一致的。
1、占位图片，这个用的比较多一点，即在页面还没有全部加载完的时候，涉及到图片的地方，先用占位图片（1X1大小的图片进行放大）占好，不影响整个DOM的加载，等全部加载完后，再慢慢加载图片。这样的方式优点在于，不影响DOM加载，代码修改量也最小，缺点是，其实还是加载了所有的图片。。。
2、teatarea后处理，这个，被用的比较明显的应该算是淘宝的trademark的页面上，当时在抢购活动的时候就用上了这个技巧，trademark这个页面全是图片，如果全部读出来并显示，很可能一下子就下载大约3M左右的图片，如果用第一种办法，那么占用的流量就非常夸张。于是淘宝当时的页面源码里就很明显的内容就是第一屏是正常的HTML代码，第二屏开始，把每一层的内容都放在textarea容器里。当滚动条滚动的时候，即当textarea开始出现在页面中时，就把textarea中的HTML代码转化成DOM，显示在页面上。它的优点是，textarea中的内容在初次加载时，不会被当成DOM被页面所加载。因此事实上首次加载的时候，只有第一屏的内容。缺点是需要写很多JS。（和第三点也有关）
3、根据滚动条的位置显示图片，这个其实是现在很多网站采用的技巧了，即滚动条滚动到哪里，图片就开始加载到哪里。和第二点其实有点象，只是处理的结构不一样而已。
介绍完这个，那就好好介绍一下第三点的技术了，原文从这里来：http://www.zhangjingwei.com/archives/jquery-inviewport/。

晚上在微博上“拔赤”写了个lazyload插件，发现其中用到一个很有意思的方法”div.inViewportRegion()”，字面意思就是在可视区域内。

在网上找了找，发现这是YUI提供的一个组件，觉得很有意思。
http://gillserver.com/yui/api/dom-region.js.html

如果jQ里面也包含类似的方法，可以做很多事，于是GG了一下，发现国外的同学写过这种选择器，代码表现上更直观。

代码如下：

(function($) {

$.belowthefold = function(element, settings) {
var fold = $(window).height() + $(window).scrollTop();
return fold < = $(element).offset().top - settings.threshold;
};

$.abovethetop = function(element, settings) {
var top = $(window).scrollTop();
return top >= $(element).offset().top + $(element).height() - settings.threshold;
};

$.rightofscreen = function(element, settings) {
var fold = $(window).width() + $(window).scrollLeft();
return fold < = $(element).offset().left - settings.threshold;
};

$.leftofscreen = function(element, settings) {
var left = $(window).scrollLeft();
return left >= $(element).offset().left + $(element).width() - settings.threshold;
};

$.inviewport = function(element, settings) {
return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
};

$.extend($.expr[':'], {
"below-the-fold": function(a, i, m) {
return $.belowthefold(a, {threshold : 0});
},
"above-the-top": function(a, i, m) {
return $.abovethetop(a, {threshold : 0});
},
"left-of-screen": function(a, i, m) {
return $.leftofscreen(a, {threshold : 0});
},
"right-of-screen": function(a, i, m) {
return $.rightofscreen(a, {threshold : 0});
},
"in-viewport": function(a, i, m) {
return $.inviewport(a, {threshold : 0});
}
});

})(jQuery);

来源：http://www.appelsiini.net/projects/viewport

简单测了下，不错，呵呵~

Demo：http://www.zhangjingwei.com/inviewport.zip

------EOF--
事后测试了一下，加载了这段的JS后，剩下对代码的处理就其实不多了，只需要BIND一个in-viewport就OK了，也算是比较方便。值得推荐，不知道啥时候类似功能可以直接进jQuery类库

前两天看的文章里刚刚说ECMA 262中的一些String特性，又正好看到一篇博客介绍一些其他操作的实现，比如foreach,这个对于PHP用户来说就太常用了，而以前在javascript中只能用for(i in arr)来实现，虽然都没有问题，但毕竟看起来怪怪的。

上次的文章在这里：Javascript中各种trim的实现，这次的文章引用自Javascript1.6数组新特性和jquery的几个工具方法。

原文如下，其中会插入自己的内容，会特别标记

JavaScript 1.6 引入了几个新的Array 方法，具体的介绍见：New in JavaScript 1.6 。这些方法已经被写进了ECMA262 V5。现代浏览器（IE9/Firefox/Safari/Chrome/Opera）都已经支持，但IE6/7/8不支持。jquery的工具方法中提供了类似的功能。【膘叔：上次在讲trim的时候自己也测试过，确实IE8不支持，低于IE8的就更不用想了】

1、Array.forEach()和jquery的$().each()。在数组中的每个项上运行一个函数。类似java5 增强的for循环。

var ary = [2,4,6,8];

// js1.6 Array.forEach方法
ary.forEach(function(i){alert(i);});

// jquery的写法
$(ary).each(function(){alert(this);});
//还可以写成这样
$(ary).each(function(index,item){alert(item);});//index是元素的索引，item是该元素
//膘叔：这个相当于PHP中如下代码。。
while (list($key, $val) = each($fruit)) { echo "$key => $val\n"; }

2、Array.filter()和jquery的$.grep()。在数组中的每个项上运行一个函数，并将函数返回真值的项作为数组返回。简单的说就是用一个条件过滤掉不符合的数组元素，剩下的符合条件的元素组合成新的数组返回。

var ary = [2,4,6,8];

// js1.6 Array.filter()方法
var otherAry1 = ary.filter(function(item){return item>4;});
alert(otherAry1);//输出6，8

// jquery写法(注意和$.each的区别)
// 此处你们函数中第一个参数是数组元素自身，第二个参数是数组元素索引
// 而$().each方法刚好相反，作者应该统一下。
var otherAry2 = $.grep(ary,function(item,index){return item>4;});
alert(otherAry2);//输出6，8
//膘叔：PHP中有类似函数，比如array_filter，也是可以通过callback来处理

3、Array.map()和jquery的$.map()。在数组中的每个项上运行一个函数，并将全部结果作为数组返回。这个方法非常强大，尤其是作用于DOM数组时（在abcc项目上用过，对每个查询模块DOM生成查询字符串）。简单说就是把每个数组元素运算的结果作为新数组元素（还是很拗口）【膘叔：php中有array_map,array_walk等】

var ary = [2,4,6,8];

// js1.6 Array.map()方法
var newAry1 = ary.map(function(item){return item+1;});//每个元素加1
alert(newAry1);//输出3，5，7，9

// jquery写法
var newAry2 = $.map(ary,function(item,index){return item+1;});
alert(newAry2);//输出3，5，7，9

4、Array.every()方法。检查数组元素是否都符合某个条件，只要有一个不符合返回false，否则返回true

var ary = [2,4,6,8,10];

alert(ary.every(function(item){return item>1}));//true
alert(ary.every(function(item){return item>2}));//false

5、Array.some()方法。检查数组中元素是否符合某个条件，只要有一个符合返回true，否则返回false

var ary = [2,4,,6,8,10];

alert(ary.some(function(item){return item>9;}));//true
alert(ary.some(function(item){return item>10;}));//false

最后给出 IE6/7/8的解决方案，让这些浏览器完美支持JS1.6的Array新方法。

-function(){

function applyIf(o, c) {
if(o) {
for(var p in c) {
if(o[p]===undefined) {
o[p] = c[p];
}
}
}
return o;
}
applyIf(Array.prototype, {
indexOf : function(obj, idx) {
var from = idx == null ? 0 : (idx < 0 ? Math.max(0, arr.length + idx) : idx);
for(var i = from, l = this.length; i < l; i++) {
if(i in this && this[i] === obj) {
return i;
}
}
return -1;
},
lastIndexOf : function(obj, idx) {
var len = this.length, from = idx == null ? len - 1 : idx;
if(from < 0) {
from = Math.max(0, len + from);
}
for(var i = from; i >= 0; i--) {
if (i in this && this[i] === obj) {
return i;
}
}
return -1;
},
every : function(fn, thisObj) {
var l = this.length;
for(var i = 0; i < l; i++) {
if(i in this && !fn.call(thisObj, this[i], i, this)) {
return false;
}
}
return true;
},
some : function(fn, thisObj) {
var l = this.length;
for(var i = 0; i < l; i++) {
if(i in this && fn.call(thisObj, this[i], i, this)) {
return true;
}
}
return false;
},
filter : function(fn, thisObj) {
var l = this.length, res = [], resLength = 0;
for(var i = 0; i < l; i++) {
if(i in this) {
var val = this[i];
if(fn.call(thisObj, val, i, this)) {
res[resLength++] = val;
}
}
}
return res;
},
map : function(fn, thisObj) {
var l = this.length, res = [];
for(var i = 0; i < l; i++) {
if(i in this) {
res[i] = fn.call(thisObj, this[i], i, this);
}
}
return res;
},
forEach : function(fn, thisObj) {
var l = this.length;
for(var i = 0; i < l; i++) {
if(i in this) {
fn.call(thisObj, this[i], i, this);
}
}
}
});
}();

------EOF----

最后这一段有事没事可以参考一下哦，毕竟这些都是可以拿来做参考的，比如象最后一个foreach，可以好好学学这些代码哦。

最后，var evens = [i for each (i in numbers) if (i % 2 == 0)];，看到这个，有没有感觉很象python的写法？？？这个是javascript 1.7中的写法了，看看这里的介绍：https://developer.mozilla.org/en/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects

一点小记录吧
第一：jQuery 升级到1.5.1了，前两天在群里的时候还有人在说，1.5不支持IE9，因为在使用的时候居然出错了。报错信息居然是document.getElementsByTagName，但是直接写这样的document.getE....是正常的。所以，这明显就是1.5的BUG。

当然这里不是说这个，这里是一篇翻译，http://www.cnblogs.com/sanshi/archive/2011/02/25/1964441.html。我觉得主要内容是这一段：

“jQuery 目前把 IE9作为一个重要的浏览器来支持。所有已知的BUG都已经得到修复或者已经提交给IE的开发团队以便在最终版本中得到解决。（All known bugs have been fixed and/or been reported to the IE team for resolution in the final release.）

三个新的参数被添加到jQuery.ajax()：

isLocal: 允许当前的执行环境被识别为“local”(例如文件系统)，jQuery默认情况下是不会识别这种环境。如下的协议被识别为本地环境：file, *-entension, widget. 如果需要修改isLocal，推荐使用$.ajaxSetup()方法来修改。

mimeType: 可以用来覆盖XHR的mime type.

xhrFields: 一个可以添加到原生XHR对象上的键值对（fieldName-fieldValue）。比如，你可以在跨域调用中设置withCredentials为true。”

第二：第二件嘛就是果粉比较开心的事了，那就是前两天刚刚苹果刚刚更新了商店里商品的信息，所有的mac pro现在都更新CPU为i5了，而且价格没变。这实在太让人激动开心了。黑黑，看来我去年没有买成mac pro也是属于塞翁失马焉知非福吧。

第三：yahoo的邮箱更新了。其实这并不算是什么 新闻吧。不过自从我用yahoo的邮箱以来，这是第三次更新了。虽然每一次打开邮箱都感觉比较慢（应该是邮箱服务器在国外的关系吧），但是我想说的是用户体验。用过很多WEB邮箱，几乎到现在都没有更新过，几年前什么 界面现在还是。。。当然QQ邮箱变化是较大的，以前最喜欢用网易的邮箱，SINA以前是最烂的，现在好很多。139邮箱原来也不行，现在也好很多了。gmail的变化也比较小，只是一些小功能的更新，只是这些小功能的更新会让用户使用起来更流畅。

第四：Google JavaScript Style Guide。这个嘛，啥时候有空的时候翻译翻译吧。还是算比较好的，虽然只是google的js style，但是对我们开发人员来说也可以学习学习。原文在这里http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml?showone=Tips_and_Tricks

jquery在1.5的时候多了一个subclass，代码大约如下：

subclass: function(){
function jQuerySubclass( selector, context ) {
return new jQuerySubclass.fn.init( selector, context );
}
jQuerySubclass.superclass = this;
jQuerySubclass.fn = jQuerySubclass.prototype = this();
jQuerySubclass.fn.constructor = jQuerySubclass;
jQuerySubclass.subclass = this.subclass;
jQuerySubclass.fn.init = function init( selector, context ) {
if (context && context instanceof jQuery && !(context instanceof jQuerySubclass)){
context = jQuerySubclass(context);
}
return jQuery.fn.init.call( this, selector, context, rootjQuerySubclass );
};
jQuerySubclass.fn.init.prototype = jQuerySubclass.fn;
var rootjQuerySubclass = jQuerySubclass(document);
return jQuerySubclass;
},

未来怎么办，jQuery鼓励用户开发插件，但插件总不能老是给用户带来麻烦吧？所以这个subclass就成了新的插件机制所必备的方法，利用subclass来创建一个新的实例（即所谓的继承，当然也能覆写父类[jQuery]的方法 ）。

只是这样的频繁继承，肯定会造成效率降低吧。怎么样既能继承，又不降低效率，这恐怕就是未来jQuery团队要考虑的事情了？但是否靠什么behavior这种行为的方式来加载呢？现在都在讲究这种行为触发性的插件。jQuery是不是未来也会采用这种方式呢。