Hiro技术站 » 前端工程 http://www.ihiro.org 插件专区新篇----Hiro.pagenav:自渲染、自解析的分页插件 v1.8更新 Thu, 02 Sep 2010 15:09:02 +0000 en hourly 1 http://wordpress.org/?v=3.0 读书:《高性能网站建设进阶指南:Web开发者性能优化最佳实践 》 http://www.ihiro.org/perforomance-best-pritices-for-web-developers http://www.ihiro.org/perforomance-best-pritices-for-web-developers#comments Sun, 04 Jul 2010 14:47:42 +0000 Hiro http://www.ihiro.org/?p=1477

相信关注互联网或者做前端的朋友一定阅读过《高性能网站建设指南》这本前端惊世之作，我也读过，读得不够详细，但从中也学到了一些前端性能优化的技术，并在实际的项目应用于其中。

今天推荐的这本书是《高性能网站建设指南》进阶版，原作者从更加详细的细节方面全面地介绍Web性能优化的知识。该书是今年4月的时候才出版，我也是近两天无意间发现有新书出版，便急切的在亚马逊购买了阅读起来。看了一些，发觉很是不错，便写篇文章推荐给大家。

购买链接：http://www.amazon.cn/gp/product/product-description/B003FO0MEC/ref=dp_proddesc_0?ie=UTF8&s=books

]]> 相信关注互联网或者做前端的朋友一定阅读过《高性能网站建设指南》这本前端惊世之作，我也读过，读得不够详细，但从中也学到了一些前端性能优化的技术，并在实际的项目应用于其中。

今天推荐的这本书是《高性能网站建设指南》进阶版，原作者从更加详细的细节方面全面地介绍Web性能优化的知识。该书是今年4月的时候才出版，我也是近两天无意间发现有新书出版，便急切的在亚马逊购买了阅读起来。看了一些，发觉很是不错，便写篇文章推荐给大家。

下面部分介绍来自卓越亚马逊。

内容简介

《高性能网站建设进阶指南:Web开发者性能优化最佳实践》是《高性能网站建设指南》姊妹篇。作者Steve Souders是Google Web性能布道者和Yahoo！前首席性能工程师。在《高性能网站建设进阶指南：Web开发者性能优化最佳实践》中，Souders与8位专家分享了提升网站性能的最佳实践和实用建议，主要包括：理解Ajax性能，编写高效的JavaScript，创建快速响应的应用程序、无阻塞加载脚本，跨域共享资源，无损压缩图片大小，使用块编码加快网页渲染；避免或取代iframe的方法，简化CSS选择符，以及其他技术。

章节介绍

第1章：理解Ajax性能
第2章：创建快速响应的Web应用
第 3章：拆分初始化负载
第4章：无阻塞加载脚本
第5章：整合异步脚本
第6章：布置行内脚本
第7章：编写高效的JavaScript
第8章：可伸缩的Comet
第9章：超越Gzip压缩
第10章：图像优化
第11章：划分主域
第12章：尽早刷新文档的输出
第 13章：少用iframe
第14章：简化CSS选择符

《高性能网站建设进阶指南:Web开发者性能优化最佳实践 》购买链接：http://www.amazon.cn/gp/product/product-description/B003FO0MEC/ref=dp_proddesc_0?ie=UTF8&s=books

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/perforomance-best-pritices-for-web-developers/feed 9 jQuery:揭露jQuery的隐藏功能 http://www.ihiro.org/uncovering-jquerys-hidden-features http://www.ihiro.org/uncovering-jquerys-hidden-features#comments Mon, 15 Mar 2010 05:43:30 +0000 Hiro http://www.ihiro.org/?p=1158

jQuery并不像他表面显示的那样，只有那些额定的方法供我们使用。其他在他库的代码内有着很多很酷很便捷的潜在方法，等待被我们发现。在本文中，我将带领你去领略一些我在jQuery库中发现的那些不怎么常见的方法。

jQuery中的隐藏功能远远不止文章提到的这些，在以后的文章中会再总结一些我自己发现的功能与大家分享。

本文翻译自：Uncovering jQuery’s Hidden Features

]]> jQuery并不像他表面显示的那样，只有那些额定的方法供我们使用。其他在他库的代码内有着很多很酷很便捷的潜在方法，等待被我们发现。在本文中，我将带领你去领略一些我在jQuery库中发现的那些不怎么常见的方法。

1.理解jQuery方法：

当你调用jQuery方法时会发生什么呢？看看jQuery的方法体，非常地简单。

1
2
3
4

jQuery = function (selector, context) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context);
};

在表层的代码之下，jQuery方法（通常称之为“包装”方法）将返回一个实例化后的jQuery对象，即’jQuery.fn.init’构造函数的一个实例。

理解了这一点非常有用，当我们每次调用jQuery方法时，都会返回一个带有一组属性的完全独立的对象。而jQuery的聪明之处在于返回的这个对象是以数组的方式返回的。该对象中的所有元素（通称”集合“）都是由一个数字索引所指向，就像数组中的下标一样。而且jQuery还返回了一个对象的length属性，就像数组中的长度一样。这种思想给jQuery方法提供了无限的想象空间。比如，我们可以从’Array.prototype’中借用一些功能性方法。jQuery中的slice方法就是一个典型的例子：

1
2
3
4
5
6
7
8
9
10

/* ... jQuery.fn.extend({ ... */
slice: function() {
    return this.pushStack(
        Array.prototype.slice.apply( this, arguments ),
        "slice",
        Array.prototype.slice.call(<wbr>arguments).join(",")
    );
},
/* ... */
</wbr>

在该slice方法不管this是否是一个真实的数组，它和其他的元素会和睦地相处，因为有着”length“这么一个属性。

jQuery中还有一些其他有趣的属性，比如”selector”—选择器，”context”—-上下文等。大部分的时候，只需给jQuery方法传递对象参数即可：

1
2

var jqObject = jQuery('a');
jqObject.selector; // => "a"

一个重要的提示是，jQuery有时会返回一个全新的对象供你使用。比如你试图通过执行一段代码来改变一个集合，如”parent()”方法，但是此时jQuery将不会修改当前的对象，它会返回给你一个全新的对象。

1
2
3
4

var originalObject = jQuery('a');
var anotherObject = originalObject.parents();
 
originalObject === anotherObject; // => false

所有试图改变集合的方法都会返回一个新的jQuery对象，你可以通过”.end()”方法或”.prevObject”属性来访问之前的那个对象。

2.面包、奶油元素的建立：

jQuery创建DOM的能力，是其核心功能之一。jQuery1.4新版本带来了一个全新的便捷地创建DOM对象的方法，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var myDiv = jQuery('<div />', {
    id: 'my-new-element',
    class: 'foo',
    css: {
        color: 'red',
        backgrondColor: '#FFF',
        border: '1px solid #CCC'
    },
    click: function() {
        alert('Clicked!');
    },
    html: jQuery('<a />', {
        href: '#',
        click: function() {
            // do something
            return false;
        }
    })
});

在1.4版本中，当你创建一个元素对象时，可以再传入第二参数，该第二参宿可以作为该元素对象的属性设置，也可以理解会调用了.attr()方法。当然，jQuery会自行匹配传入的参数们，如’click’对应了jQuery库中的.click方法，以及’css’、’html’分别对应了jQuery库中的.css()、.html()方法，等等…

3.序列化表单中的input元素：

jQuery提供了一个方法可以将1个或多个表单中的所有input元素进行序列化，这在Ajax提交数据时非常有用。其实该方法在jQuery库中已经存在很长的时间了，但一直很少谈及，所以很多的程序员都忽略了它。通过jQuery中的Ajax方法提交整个表单将变得非常简单。

1
2
3
4

var myForm = $('#my-form');
jQuery.post('submit.php', myForm.serialize(), function(){
    alert('Data has been sent!');
});

jQuery同样也通过了一个’serializeArray’方法，他通常用在多个form表单存在，需要自行收集数据的情况。在jQuery的命名空间下有一个’param’辅助方法可以将一个数组对象处理后返回成一个查询字符串。

1
2
3
4
5
6
7
8

var data = {
    name: 'Joe',
    age: 44,
    profession: 'Web Developer'
};
 
jQuery.param(data); // => "name=Joe&age=44&profession=<wbr>Web+Developer"
</wbr>

4.任何元素都可以动画方式展现：

jQuery中的’animate’方法也许是最灵活的jQuery的方法。它可以用几乎任何东西来制作动画，而不仅仅是CSS属性，或者是DOM元素。通常会这样使用’动画’：

1
2
3
4

jQuery('#box').animate({
    left: 300,
    top: 300
});

当您给.animate()方法指定一个属性时（例如’top’），jQuery会检查你是否是想通过某个css属性来控制动画风格。首先jQuery会检查css样式中是否存在该top属性，若不存在，则jQuery会自行地给对应元素加上该属性。下面是一个例子：

1
2
3
4

jQuery('#box').animate({
    top: 123,
    foo: 456
});

上面的代码中’top’是一个可用的css属性，则jQuery就会改变’element.style.top’,但是’foo’不是一个可用的css属性，所以jQuery将只更新’element.foo’。

我们可以利用这个优点来实现一些有趣的效果。比方说，例如，您要在一个画布上使一个正方形动画起来。首先让我们定义一个简单的构造和一个在每一步都会调用的’drwa’的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function Square(cnvs, width, height, color) {
 
    this.x = 0;
    this.y = 0;
    this.width = width;
    this.height = height;
    this.color = color;
 
    this.cHeight = cnvs.height;
    this.cWidth = cnvs.width;
    this.cntxt = cnvs.getContext('2d');
 
}
 
Square.prototype.draw = function() {
 
    this.cntxt.clearRect(0, 0, this.cWidth, this.cHeight);
    this.cntxt.fillStyle = this.color;
    this.cntxt.fillRect(this.x, this.y, this.width, this.height);
 
};

通过jQuery方法创建一个canvas画布元素（需要html5支持），再实例化一个正方形对象，通过调用.animate()方法在动画的每一步过程中调用.draw()方法，这样就可以轻易地使该正方形动画起来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// Create a <canvas /> element
var canvas = $('<canvas />').appendTo('body'<wbr>)[0];
canvas.height = 400;
canvas.width = 600;
 
// Instantiate Square
var square = new Square(canvas, 70, 70, 'rgb(255,0,0)');
 
jQuery(square).animate({
    x: 300,
    y: 200
}, {
    // 'draw' should be called on every step
    // of the animation:
    step: jQuery.proxy(square, 'draw'),
    duration: 1000
});
</wbr>

这是一个非常简单的效果，但它清楚地表明了jQuery的无限可能性。你可以通过下面的链接看到具体的效果（需要浏览器支持html5）：Demo

5.jQuery.ajax方法返回XHR对象：

jQuery的 Ajax方法是一个多功能的方法，它包含了’jQuery.ajax’, ‘jQuery.get’, ‘jQuery.post’等多个方法，这些方法在调用后都会返回一个’XMLHttpRequest’ 对象，从而来实现请求完成后的后续操作。如：

1
2
3
4
5
6
7
8
9
10
11
12
13

var curRequest;
 
jQuery('button.makeRequest').click(function(){
    curRequest = jQuery.get('foo.php', function(response){
        alert('Data: ' + response.responseText);
    });
});
 
jQuery('button.cancelRequest').click(function(){
    if (curRequest) {
        curRequest.abort(); // abort() is a method of XMLHttpRequest
    }
});

上面的代码中当我们点击’makeRequest’按钮时，Ajax请求将会被触发。而当我们点击’cancelRequest’按钮时，该请求则会被取消。

另一个潜在的用途是同步请求：

1
2
3
4
5
6

var myRequest = jQuery.ajax({
    url: 'foo.txt',
    async: false
});
 
console.log(myRequest.responseText);

请多的资料可以阅读‘XMLHttpRequest’，也可以阅读Ajax的API文档jQuery’s Ajax utilities

6.自定义队列：

jQuery的有一个内置的队列机制，一般都是有.animate等动画方法使用的（如：.fadeOut()、.fadeIn()等，实质都是有.animate()方法实现）。这种队列机制可以用一个简单的动画就可以说明：

1
2
3
4
5

jQuery('a').hover(function(){
    jQuery(this).animate({paddingLeft:'+=15px'});
}, function(){
    jQuery(this).animate({paddingLeft:'-=15px'});
});

快速地在一个链接标记上鼠标移入、移出，当再次移入时，会导致动画的效果反复执行。不信你可以到这里试试：Demo

‘queue’方法和大家熟知的’each’方法比较相似，你通过给方法传递一个函数参数，则该函数将被匹配集合中的每个元素所调用：

1
2
3

jQuery('a').queue(function(){
    jQuery(this).addClass('all-done').dequeue();
});

给’queue’方法只传入一个函数参数的话会导致该函数被添加到默认的’fx’队列中。若刚好该队列会被jQuery中的所有动画对象所调用，那么只有等前面的这些对象都调用后，才会轮到自己。
鉴于该点，在上面的代码中我给对象添加了一个名为’all-done’的class，根据协议，这个class只有在当前所有的动画都执行完成后才会添加。在代码中我们也调用了.dequeue()方法。这一点很重要，它将使jQuery的继续进行队列。jQuery1.4版本提供了另一个可以继续队列的方法nextItemInQueue()，它可以用来取代调用.dequeue()方法。它的调用只需将第一个参数传递给方法即可：

1
2
3
4
5

jQuery('a').queue(function(<wbr>nextItemInQueue){
    // Continue queue:
    nextItemInQueue();
});
</wbr>

当然两个方法也不完全相同，nextItemInQueue()可以在方法体内部的任何地方都可以调用，即使在一团糟的匿名函数内（典型情况是’this’对象被破坏）。当然在1.4版本前，你可以尽可能地保存一个对’this’对象的引用，但这样使用起来有点累。

要想向自定义队列中添加方法，只需将你自定义的队列名称作为第一参数，而将方法体作为第二参数传入即可：

1
2
3
4

jQuery('a').queue('customQueueName', function(){
    // Do stuff
    jQuery(this).dequeue('customQueueName');
});

需要认识的一点，为了不将该队列添加到默认的’fx’队列中，我们需要将自定义的队列名传入.dequeue()方法中，这样在队列结束后，可以保证jQuery队列可以继续执行下去。

更多的资料可以阅读‘queue’,‘dequeue’,‘jQuery.queue’

7.事件命名空间：

jQuery提供了一个命名时间名称的方法，这在编写插件或第三方组件时非常有用。当需要时，您的插件用户可以通过取消绑定这些你注册事件名称即可。

向命名空间中添加注册一个事件处理名称，只需在事件名称后添加自定义的后缀名（如：.fooPlugin):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

jQuery.fn.foo = function() {
 
    this.bind('click.fooPlugin', function() {
        // do stuff
    });
 
    this.bind('mouseover.fooPlugin', function() {
        // do stuff
    });
 
    return this;
};
 
// Use the plugin:
jQuery('a').foo();
 
// Destroy its event handlers:
jQuery('a').unbind('.fooPlugin');

取消绑定是只需调用.unbind()方法，并传入自定义事件名称即可实现。

总结：

jQuery中的隐藏功能远远不止这些，在以后的文章中会再总结一些我自己发现的功能与大家分享。

本文翻译自：Uncovering jQuery’s Hidden Features

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/uncovering-jquerys-hidden-features/feed 4 CSS:CSS3基础（附图） http://www.ihiro.org/css3-basic http://www.ihiro.org/css3-basic#comments Mon, 08 Mar 2010 02:41:14 +0000 Hiro http://www.ihiro.org/css-css3-based-with-photos

今日在Web Designer Wall博客上看到这篇介绍css3基础的博文，文章其实很普通，关键喜欢他配上了截图，看起来就更加明了。便花了点时间整理后发表出来与大家分享一下！

文中主要介绍了四个css3高级属性，也是最最常用的四个css3属性。

最后，css3高级属性远远不值文中的这些，文中讲到的是一些基础的，也是使用最多的，为了给用户带去更多的美好体验，努力学透css吧！

本文翻译自：Web Designer Wall -- The Basics of CSS3

]]> 今日在Web Designer Wall博客上看到这篇介绍css3基础的博文，文章其实很普通，关键喜欢他配上了截图，看起来就更加明了。便花了点时间整理后发表出来与大家分享一下！

文中主要介绍了四个css3高级属性，也是最最常用的四个css3属性。

1.RGBA

RBGA是用于css的background属性，前三个参数是RBG颜色值，最后一个参数是透明度设置。RGBA也可以使用在css中与颜色相关的所有属性中，如color,border-color,background-color,shadow-color等。

2.Text Shadow

text-shadow的设置值是由x-offset, y-offset, blur, color四个参数组成。若给x-offset设置一个负值，则阴影偏向左边；若个y-offset设置一个负值，则阴影偏向顶部；当然你也可以使用RGBA来设置第四个参数color。你也可以给text-shadow设置一系列的值（用逗号隔开）。下面的图片展示了两个值来设置一个单词的印刷效果（1px向上，1px向下）：

3.Border Radius

对border radius的记忆方法就和padding、margin一样(如： border-radius: 20px)。为了达到多浏览器兼容，需要在该属性前加上“-moz-“用于火狐浏览器、加上”-webkit-“用于谷歌和苹果浏览器。（IE浏览器不支持此CSS3高级属性）你也可以分别设置四个角的圆角直径，火狐浏览器与苹果（谷歌)浏览器的设置属性有所差别，看图：

4.Box Shadow

box shadow属性设置值的构成与text-shadow是一样的，都是有四个属性：x-offset, y-offset, blur, color组成。当然，box-shadow也可以用一系列的值来设置属性，如：

1
2
3
4

-moz-box-shadow:
		-2px -2px 0 #fff,
		2px 2px 0 #bb9595,
		2px 4px 15px rgba(0, 0, 0, .3);

效果如下图：

最后，css3高级属性远远不值文中的这些，文中讲到的是一些基础的，也是使用最多的，为了给用户带去更多的美好体验，努力学透css吧！

本文翻译自:Web Designer Wall — The Basics of CSS3

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/css3-basic/feed 10 jQuery:1.4新版本中你应该知道的15个新特性(二) http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-2 http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-2#comments Fri, 22 Jan 2010 05:04:47 +0000 Hiro http://www.ihiro.org/?p=1054

继续发布jQuery1.4版本剩余的新特性：第9点至第15点。

九、去除标签元素的父标签；

十、不用删除数据，即可删除掉DOM中的标签元素；

十一、对.index()方法进行了扩展；

十二、DOM控制方法支持回调函数...

]]> 继续发布jQuery1.4版本剩余的新特性：第9点至第15点。

九、去除标签元素的父标签：

在之前的版本中已经有了.wrap()方法来个标签添加新的父标签，而在1.4新版本中又添加了相对的.unwrap()方法来去除标签的父标签。实例Html代码如下：

1
2
3

<div>
    <p>Foo</p>
</div>

jQuery1.4版本中实现代码：

1

jQuery('p').unwrap();

执行后的话题Html代码如下:

1

<p>Foo</p>

>>>>阅读更多关于.unwrap()方法的资料…

十、不用删除数据，即可删除掉DOM中的标签元素：

新版本中的.detach()方法允许你删除DOM中的任何标签元素，就像.remove()方法一样。但它与.remove()方法的不同之处是：.remove()是将标签直接删除，而.detach()方法则是将标签暂时移除，并通过方法内部调用.data()方法将标签缓存后赋予变量，再后面的代码中若还需要找回该标签，变量则会自动读取缓存的数据；另外若被.detach()方法移除的标签在移除前绑定了事件机制的话，在后面恢复后，该事件机制依然存在，无需再次绑定。
jQuery1.4版本中实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var foo = jQuery('#foo');
 
// Bind an important event handler
foo.click(function(){
    alert('Foo!');
});
 
foo.detach(); // Remove it from the DOM
 
// … do stuff
 
foo.appendTo('body'); // Add it back to the DOM
 
foo.click(); // alerts "Foo!"

>>>>阅读更多关于.detach()方法的资料…

十一、对.index()方法进行了扩展：

1.4新版本中新增了两个.index()的调用方法。而之前，我们将一个标签元素作为.index()方法的参数，并希望执行后返回一个标识当前集合中匹配元素序列号的数字结果。

若有一段XHtml代码如下：

1
2
3
4
5
6
7
8

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

点击li标签获得该li标签的序号

jQuery1.32版本中实现代码：

1
2
3

$('li').click(function() {
       alert($('li').index(this));	
});

jQuery1.4版本中实现代码：

1
2
3
4
5
6
7
8
9

$('li').click(function() {
       alert($(this).index());	
});
 
//或者
 
$('li').click(function() {
	alert($(this).index('li'));				   
});

>>>>阅读更多关于.index()方法的资料…

十二、DOM控制方法支持回调函数：

在1.4版本中绝大部分的DOM控制方法只支持回调函数作为唯一的参数，除了极个别的（比如：.attr()、.css()）方法中可以作为第二参数。这些回调函数将被匹配集合中所有元素所执行，
以确定哪些应作为该方法的实际值。

下面的这些DOM控制方法都支持回调函数：

在回调方法中，若你想访问该匹配集合的话，你需要使用”this”，或者序号index作为该方法的第一个参数。
jQuery1.4版本中实现代码：

1
2
3

jQuery('li').html(function(i){
    return 'Index of this list item: ' + i;
});

当然你可以给该回调函数传递第二个参数，比如是在使用设置类的DOM控制方法（如：.html()、.attr()等），你若想得到当前的值。

jQuery1.4版本中实现代码：

1
2
3

jQuery('a').attr('href', function(i, currentHref){
    return currentHref + '?foo=bar';
});

正如你看到的一样，在使用.attr()和.css()方法是，当该方法的第一个是属性名称时，你可以将回调函数作为方法的第二参数。

jQuery1.4版本中实现代码：

1
2
3

jQuery('li').css('color', function(i, currentCssColor){
    return i % 2 ? 'red' : 'blue';
});

十三、检测对象类型方法：

jQuery1.4新版本在命名空间下新增了两个帮助型的方法，用来帮助你检测对象类型。

第一个方法：.isEmptyObject()用来判断一个对象是否是空对象，返回一个布尔类型的结果；
第二个方法：.isPlainObject()用来判断一个对象是否是最原始的Javascript对象(该对象是否是通过{}或者new Object()创建)，同样也返回一个布尔类型的结果。

jQuery1.4版本中实现代码：

1
2
3
4
5
6

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false
 
jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

>>>>阅读更多关于.isEmptyObject().isPlainObject()方法的资料…

十四、.Closest()方法扩展：

扩展后的.Closest()支持数组选择器作为参数，这在遍历一个元素的祖先元素时非常有用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

< !DOCTYPE html>
<html>
<head>
  <style></style>
  <script src="/scripts/jquery-1.4.js"></script>
</head>
<body>
	<ul><li></li><li></li></ul>
<script>var close = $("li:first").closest(["ul", "body"]);
$.each(close, function(i){
  $("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
});</script>
</body>
</html>

执行后的结果是：

1
2

    * ul: UL
    * body: BODY

另外该方法还支持使用上下文对象作为它的第二参数，也就是说你可以遍历任意上下文对象直到的元素的祖先元素。这个扩展使用的列子非常少，但在内部使用时非常的有效率。

>>>>阅读更多关于.closest()方法的资料…

十四、新的事件机制（focusIn 、focusOut）：

新版本中若要给事件对象委派”focus”和”blur”事件，也可以使用.focusIn()和.focusOut()方法（它们是一一对应的）。更加重要的是focus和blur事件不支持.live()方法委派，但focusIn和focusOut事件是支持.live()方法委派。

jQuery1.4版本中实现代码：

1
2
3
4
5
6
7

   jQuery('form')
    .focusin(function(){
        jQuery(this).addClass('focused');
    });
    .focusout(function(){
        jQuery(this).removeClass('focused');
    });
1
2
3
4
5
6
7

   jQuery('input')
    .live('focusin', function(){
        jQuery(this).addClass('focused');
    });
    .live('focusout', function(){
        jQuery(this).removeClass('focused');
    });

>>>>阅读更多关于.focusin().focusin()方法的资料…

文章总结翻译来自：http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

更多的API文档资料请阅读：http://api.jquery.com/

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-2/feed 7 jQuery:1.4新版本中你应该知道的15个新特性(一) http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-1 http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-1#comments Wed, 20 Jan 2010 05:53:13 +0000 Hiro http://www.ihiro.org/?p=1028

题外话：前两天回了一趟泰州，星期二上班后看到了两条比较重大的新闻：1.谷歌耍了我们这些谷歌迷们一把，决定不离开中国了；2.jQuery1.4新版本也正式上线了。

从Nettuts+博客上看到了这票jQuery1.4新特性的总结性文章，该博总结了15条新的特性，便给出相应的实现代码。觉得不错，便整理后翻译过来供大家参考，并加入了1.32版本的实现方法进行比较性地学习。

文章较长，分两篇文章发布，请关心者耐心阅读与等待！上篇包含特性1-8点，下篇9-15点隔一日再发布！

]]> 题外话：前两天回了一趟泰州，星期二上班后看到了两条比较重大的新闻：1.谷歌耍了我们这些谷歌迷们一把，决定不离开中国了；2.jQuery1.4新版本也正式上线了。

从Nettuts+博客上看到了这票jQuery1.4新特性的总结性文章，该博总结了15条新的特性，便给出相应的实现代码。觉得不错，便整理后翻译过来供大家参考，并加入了1.32版本的实现方法进行比较性地学习。

文章较长，分两篇文章发布，请关心者耐心阅读与等待！上篇包含特性1-8点，下篇9-15点隔一日再发布！

一、给jQuery(…)方法传递新的参数：

jQuery()方法是jQuery库的核心方法之一，在1.32版本及早期的版本中，该方法是用来获取节点或者创建DOM对象的，它只支持一个参数。在使用来创建新的DOM对象时，我们若要给该DOM对象添加属性的话，只能通过attr()方法在后面追加，很是不方便，阅读起来也比较累。在jQuery1.4中，给jQuery方法新增了一个对象型的参数，用来创建新的DOM对象设置该DOM对象相应的属性。

jQuery1.32版本中实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

jQuery('<a></a>').attr({
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external'
}).text('Go to Google!')
   .css({
       fontWeight: 700,
       color: 'green'
   })
   .click(function(){
       alert('Foo has been clicked!');
   });

jQuery1.4版本中实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

jQuery('<a />', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!',
    css: {
        fontWeight: 700,
        color: 'green'
    },
    click: function(){
        alert('Foo has been clicked!');
    }
});

>>>>阅读更多关于jQuery(…)方法的资料…

二、新增”until”系列方法：

新增”until”系列方法中有三个方法：”nextUntil”, “prevUntil” 和”parentsUntil”，这些方法是用来获取符合条件内的DOM对象。中文你可以理解为“直到”的意思。

若有一段XHtml代码如下：

1
2
3
4
5
6
7
8

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

现在我想选取从含有apple的li到含有pear的li,则代码实现：

jQuery1.32版本中实现代码：

1

jQuery('ul li').slice(1, 4);

jQuery1.4版本中实现代码：

1

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');

虽然上面两者的选取效果是一样的，但若现在我在含有apple的li到含有pear的li中间再添加内容的话，1.32版本的代码就需要修改了，而1.4版本的则可继续使用，也就说1.4版本的代码可用性和语义性增强了。

>>>>阅读更多关于prevUntil, nextUntil, parentsUntil方法的资料…

三、给事件对象一次绑定多个事件：

1.4不再像1.32版本中那样链式地给一个时间对象绑定时间，现在你可以将多个时间归纳后绑定到一个方法中。

jQuery1.32版本中实现代码：

1
2
3
4
5
6
7

jQuery('#foo).bind('click', function() {
        // do something
}).bind('mouseover', function() {
        // do something
}).bind('mouseout‘， function() {
        // do something
});

jQuery1.4版本中实现代码：

1
2
3
4
5
6
7
8
9
10
11

jQuery('#foo).bind({
    click: function() {
        // do something
    },
    mouseover: function() {
        // do something
    },
    mouseout: function() {
        // do something
    }
});

当然对.one()一次点击事件也是适用的哦！

>>>>阅读更多关于.bind(…)方法的资料…

四、Per-Property Easing动画效果

在1.32版本中，我们使用animate()方法给对象添加动画效果时，特效很单一，只能再引入jquery.easing.js插件来丰富动画特效。在新版本1.4中将该插件集成到了jQuery库中，这样在使用过的过程中就更加地方便了。

jQuery1.4版本中实现代码：

1
2
3
4

jQuery('#foo').animate({
    left: 500,
    top: [500, 'easeOutBounce']
}, 2000);

当然也可以给附加的属性参数内添加动画效果，如：

1
2
3
4
5
6
7
8
9

jQuery('#foo').animate({
    left: 500,
    top: 500
}, {
    duration: 2000,
    specialEasing: {
        top: 'easeOutBounce'
    }
});

>>>>阅读更多关于per-property easing的资料…

五、新增live事件：

在1.32版本中，live()方法只对click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup这些时间提供了支持，而不支持也比较常用的focus和blur时间。在1.4版本中新增了submit, change, focus, blur四种时间的支持。其中focus对应的是focusin事件，而blur对应了focusout事件。

jQuery1.4版本中实现代码：

1
2
3
4
5

jQuery('input').live('focusin', function(){
    // do something with this
}).live('focusout', function(){
    // do something with this
});

六、控制方法的上下文对象：

1.4版本在jQuery命名空间下新增了一个名叫”proxy“的方法，该方法有两个参数：一个是作用域，一个是准备执行的处理方法。在Javascript中，this关键字很巧妙地自动执行父亲对象或某个DOM元素对象。当有时候我们希望this指向的不是一个DOM元素对象，而是希望它指向一个之前创建的对象。

举个列子，就很容易明白！比如，现在我们有一个app对象，该对象内部有一个”clickHandler“方法和一个命名为”config“的对象。代码如下：

1
2
3
4
5
6
7
8

var app = {
    config: {
        clickMessage: 'Hi!'
    },
    clickHandler: function() {
        alert(this.config.clickMessage);
    }
};

当我们调用app.clickHandler()方法时，app对象就有了自己的上下文对象：clickHandler方法中的this指向的是app对象。执行后会弹出内容为”Hi!“的提示框。若现在我希望将该app对象下的clickHandler方法绑定在一个超链接上，如下：

1

jQuery('a').bind('click', app.clickHandler);

而此时，当我们点击该超链接时，app对象下的clickHandler方法并不会执行，用Firebug测试则会提示”app.clickHandler is not a function!”。原因在于jQuery（以及绝大部分的事件对象）默认地将事件对象作为了该clickHandler方法的上下文对象，也就是此时this指向了a超链接标签元素。而我们的实际愿望是希望this执行app对象，那么1.4中我们就可以使用新增的proxy()方法来处理这一问题。代码如下：

1
2
3
4

jQuery('a').bind(
    'click',
    jQuery.proxy(app, 'clickHandler')
);

这样执行后提示框就会正常地弹出了。proxy()方法返回的是一个包装后的方法，它将执行你所期望的对象（通过第一个参数传递）。这在其他上下文对象中也很实用，比如给其他方法或插件传递回调函数。

>>>>阅读更多关于jQuery.proxy()方法的资料…

七、延迟动画队列：

在平时编写代码时，你或许发现有一个动画效果还没完成呢，下面的代码就已经执行完了。而我们希望的是等动画效果执行完成后或执行一段时间后再执行后面的代码。1.4版本中新增了delay()方法来延迟代码的执行。

jQuery1.32版本中实现代码：

1
2
3

setTimeout(500, function() {
        // do something
});

jQuery1.4版本中实现代码：

1
2
3
4

jQuery('#foo')
    .slideDown() // Slide down
    .delay(200) // Do nothing for 200 ms
    .fadeIn(); // Fade in

若你希望延迟一个动画队列比默认的“fx”(queue()函数的默认参数)还要慢的话，你只需要将这个queue的变量名当作delay()方法的第二个参数传递即可。

>>>>阅读更多关于.delay(…)方法的资料…

八、判断一个DOM父对象中是否含有某个匹配的子对象：

1.4中新增了一个过滤型的方法has()来判断某个对象是否在某个标签或集合内出现过。该方法将返回在标签中出现的所有匹配子对象的集合，至少会包含一个子对象。若没有找到匹配子对象，则返回的是一个空的集合。

1

jQuery('div').has('ul');

当然jQuery1.32版本中的.contains()方法其实也可以达到同样的效果，1.4版本又对.contains()进行了完善。在1.4版本中通过给.contains()方法传递两个DOM对象参数，从而判断第二个参数对象是否在第一个参数对象中。代码如下：

1
2
3

jQuery.contains(document.documentElement, document.body);
// Returns true - <body> is within <html>
</html></body>

>>>>阅读更多关于.has(…)，jQuery.contains(…)方法的资料…

剩余的7点新特性隔一日发布！敬请期待吧，呵呵。

文章总结翻译来自：http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/jquery-1-4-released-the-15-new-features-you-should-know-1/feed 6 Javascript:10个Javscript编程的技巧 http://www.ihiro.org/10-javascript-tips http://www.ihiro.org/10-javascript-tips#comments Fri, 18 Dec 2009 09:45:50 +0000 Hiro http://www.ihiro.org/?p=941

今天在Blog：Impressive Webs上看到这篇总结了10个Javascript技巧的文章。觉得比较受用，便简约地理解后翻译了给需要的朋友学习学习。

文章中的10条小技巧或许对大家来说已经是了然于胸了，但有时候编程晕头晕脑的，不经意间就会忘记。所以在平时的编程过程中养成一个良好的编程习惯是一个程序员最基础的素质要求。只要多练、多看、多学习，我们的编程技术就会越来越高明的！

该文整理来自：Impressive Webs:10 JavaScript Quick Tips and Best Practices

]]> 今天在Blog：Impressive Webs上看到这篇总结了10个Javascript技巧的文章。觉得比较受用，便简约地理解后翻译了给需要的朋友学习学习。

1.外部引入js文件时，使用defer属性供IE浏览器解析

这个属性可加可不加，不管添加defer属性是不是一个好的编程技巧，但该属性在适当的时候会派上用场的。它的使用方法如下：

1

<script type="text/javascript" defer="defer"></script>

添加defer属性的目的是在引入外部js文件时告诉Ie浏览器，只有在等页面加载完成后才执行引入的js文件中的js代码。当然这也可以通过一些比较好的代码实现，这些好的代码可以避免页面在没有加载完DOM就执行外部引入的js代码的问题。

注：defer属性只有IE浏览器才会支持。

2.使用一个CDATA区域来避免XHTML Strict文件验证的错误

XHTML Strict文件对页面中的标签和代码要求甚高，而js代码中常常出现运算符，而W3C验证XHTML Strict文件时，会认为页面js代码中的”< "、">“等运算符为一个标签的开始和结束，这样就会出现验证错误。

所以比较好的XHTML Strict文件中js编程习惯时给js代码外围加上一个CDATA区域，以达到该段js可以通过W3C验证。效果如下：

1
2
3
4
5
6
7
8

<script type="text/javascript">
//< ![CDATA[
var my_variable = 100;
if (my_variable < 50) {
	// do something here...
}
//]]>
</script>

3.避免使用Javascript的关键字来自定义变量

每一种编程语言都有默认的一些关键字，在日常的代码编写过程中都因避免使用关键字作为自定义变量名。Javascript中的关键字有:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

4.避免使用Javascript的保留字来自定义变量

同样每一种编程语言都有一定量的保留字，在自定义变量时也因避免使用这些保留字作为自定义变量名。Javascript的保留字有:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

5.在自定义一个变量并赋予相应的类型后，在之后的代码中避免改变该变量的类型

在Javascript编程中，如下的写法是不太理想的：

1
2

var my_variable = "This is a String";
my_variable = 50;

在第一行给my_variable变量赋予了一个String的类型，而在第二行却改变为了Integer类型，这样写是一个不好的习惯，应该避免这种情况的发生。

6.不要使用全局变量

为了防止可能发生的冲突，99％的情况下，使用var关键字最初声明变量和赋予该变量值。这将确保您的变量是局部的，而不是声明它们的功能函数之外。这样的话，在两个不同的函数体内使用相同的变量名就不会发生变量的冲突。而这里在函数体内定义的变量在函数执行完成后就会被取消，从而节省了命名空间。

7.Javascript对大小写敏感

看下面的两个自定义变量，它们代表了两个不同的变量：

1
2

var myVariable = "data";
var myvariable = "more data";

所以，在日常的编写代码时，养成一个好的编程习惯，不要无意间因大小写的问题而定义了两个变量，其实你需要的只是一个变量。

8.使用switch声明来处理多种条件判断

在多个条件判断代码的编写时，不要如下编写代码：

1
2
3
4
5
6
7
8
9
10
11

if (example_variable == "cyan") {
	// do something here...
} else if (example_variable == "magenta") {
	// do something here...
} else if (example_variable == "yellow") {
	// do something here...
} else if (example_variable == "black") {
	// do something here...
} else {
	// do something here...
}

而是应该这样使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

switch (example_variable) {
	case "cyan":
		// do something here...
		break;
	case "magenta":
		// do something here...
		break;
	case "yellow":
		// do something here...
		break;
	case "black":
		// do something here...
		break;
	default:
		// do something here...
		break;
}

上面的两端代码执行的结果是一样的，但第二种使用swicth编写的代码便于阅读、管理和修改。

9.使用try-catch，以防止向用户显示错误

将需要执行的代码包含在try-catch中，这样用户就永远看不多Javascript的报错信息。如下：

1
2
3
4
5

try {
	nonExistentFunction();
} catch (error) {
	document.write("An error has occured.")
}

在上面的代码中我试图去调用一个实际不存在的函数来产生一个错误。而浏览器则不会显示“not an object” 或者 “object expected”错误，而是现实了我在catch体内自定义的错误信息。当然你也可以在catch体内不懈任何代码，这样什么错误信息都不会输出。或者也可以在catch体内调用一个自定义的捕获错误的函数，以便调试其中的错误。

当然，错误也有可能来自开发人员本身代码的错误，所以在代码中加上适当的注释信息是必不可少的。

10.使用简约的多行注释对代码进行说明

在Javascript中，注释有单行注释和多行注释之分。而有时候的注释文字很长时，良好的习惯是将注释文字放在多行中，以便于阅读。

1
2
3
4
5
6
7

/*
 * 我是多行注释 ...
 * 注释..
 * 注释...
 * 注释...
 * 注释...
 */

总结：上面的10条小技巧或许对大家来说已经是了然于胸了，但有时候编程晕头晕脑的，不经意间就会忘记。所以在平时的编程过程中养成一个良好的编程习惯是一个程序员最基础的素质要求。只要多练、多看、多学习，我们的编程技术就会越来越高明的！

该文整理来自：Impressive Webs:10 JavaScript Quick Tips and Best Practices

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/10-javascript-tips/feed 3 jQuery:通过事件委派一次绑定多种事件，以减少事件冗余 http://www.ihiro.org/jquery-once-through-the-event-delegate-to-bind-a-variety-of-time-in-order-to-reduce-the-event-of-redundancy http://www.ihiro.org/jquery-once-through-the-event-delegate-to-bind-a-variety-of-time-in-order-to-reduce-the-event-of-redundancy#comments Wed, 16 Dec 2009 03:42:39 +0000 Hiro http://www.ihiro.org/?p=932

jQuery的最大特色之一就是方法连缀写法，这样的书写方式使得阅读起来更加方便。于是乎，在日常的开发中大量使用连缀写法，而事件方法连缀就是一个特例。若给一个Dom对象使用了绑定了多个事件，便于阅读和书写，习惯了使用连缀写法，但这样的书写方式会造成时间的冗余。

1.事件冗余：多个事件方法中多次调用相同的代码

2.事件委派：一次性绑定多个事件，根据事件类别委派相应的操作

]]> jQuery的最大特色之一就是方法连缀写法，这样的书写方式使得阅读起来更加方便。于是乎，在日常的开发中大量使用连缀写法，而事件方法连缀就是一个特例。若给一个Dom对象使用了绑定了多个事件，便于阅读和书写，习惯了使用连缀写法，但这样的书写方式会造成时间的冗余。

1.事件冗余：多个事件方法中多次调用相同的代码

下面的代码是一个事件方法连缀的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

jQuery(function($) {
	$('<div id="livetip"></div>').hide().appendTo('body');
	var tipTitle = '';
	$('#mytable').bind('mouseover', function(event) {
		var $link = $(event.target).closest('a');
		if ($link.length) {
			var link = $link[0];
			tipTitle = link.title;
			link.title = '';
			$('#livetip').css({
				top: event.pageY + 12,
				left: event.pageX + 12
			})
			.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>')
			.show();
		};
	}).bind('mouseout', function(event) {
		var $link = $(event.target).closest('a');
		if ($link.length) {
			$link.attr('title', tipTitle);
			$('#livetip').hide();
		};
	}).bind('mousemove', function(event) {
		var $link = $(event.target).closest('a');
		if ( $link.length) {
			$('#livetip').css({
				top: event.pageY + 12,
				left: event.pageX + 12
			});
		};
	});
});

其中第5|6行、第18|19行、第24|25行多次地使用了同样的一段代码去判断事件对象是否存在。这不管是从代码效率还是代码文件大小的方面来说都是不合理的方法。

2.事件委派：一次性绑定多个事件，根据事件类别委派相应的操作

为了更好地优化上面的代码，可以通过事件委派来修改代码，修改后的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

jQuery(function($) {
	var $liveTip = $('<div id="livetip"></div>').hide().appendTo('body');
	var tipTitle = '';
 
	$('#mytable').bind('mouseover mouseout mousemove', function(event) {
	  var $link = $(event.target).closest('a');
	  if (!$link.length) { return; }
	  var link = $link[0];
 
	  if (event.type == 'mouseover' || event.type == 'mousemove') {
		$liveTip.css({
		  top: event.pageY + 12,
		  left: event.pageX + 12
		});
	  };
 
	  if (event.type == 'mouseover') {
		tipTitle = link.title;
		link.title = '';
		$liveTip.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>')
			.show();
	  };
 
	  if (event.type == 'mouseout') {
		$liveTip.hide();
		if (tipTitle) {
			link.title = tipTitle;
		};
	  };
	});
});

该段代码中一次性地将多个事件绑定到一个待处理的DOM对象之上，在代码的内部通过判断事件的类别来委派不同的处理代码。这样可以避免代码的重复定义，以达到避免时间冗余的效果。

以上两种代码的执行后的效果是完全一样的，相信大家一眼就可以看中哪一种代码的执行效率更加的快速吧！

downloaddemo

以上的代码来自：Learning jQuery:Binding Multiple Events to Reduce Redundancy with Event-Delegation Tooltips

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/jquery-once-through-the-event-delegate-to-bind-a-variety-of-time-in-order-to-reduce-the-event-of-redundancy/feed 7 jQuery:如何在页面和插件代码中自定义别名 http://www.ihiro.org/how-to-custom-alias-in-plugins-and-page-code http://www.ihiro.org/how-to-custom-alias-in-plugins-and-page-code#comments Tue, 01 Dec 2009 14:03:47 +0000 Hiro http://www.ihiro.org/?p=860

众所周知，jQuery是采用$符号作为库的别名，但若是和其他类型的库一直使用是，其他库也有用$符号作为别名的，这样就会引起函数的冲突。所以更多的时间是建议大家使用jQuery来做为别名，或者自定义别名。该片文章重点地讲述了如何在页面代码和插件代码中自定义别名，以便于其他库的兼容，为之后的插件开发之旅铺垫道路！

1.在页面使用代码中如何自定义别名；

2.在插件代码中如何自定义别名。

]]> 众所周知，jQuery是采用$符号作为库的别名，但若是和其他类型的库一直使用是，其他库也有用$符号作为别名的，这样就会引起函数的冲突。所以更多的时间是建议大家使用jQuery来做为别名，或者自定义别名。该片文章重点地讲述了如何在页面代码和插件代码中自定义别名，以便于其他库的兼容，为之后的插件开发之旅铺垫道路！

1.在页面使用代码中如何自定义别名

通常，我们是这样开始jQuery库的使用的：

1
2
3
4
5
6
7

$(document).ready(function() {
	//一些代码
});
//或者是简写的方式：
$(function() {
	//一些代码
});

但是，若遇到了使用其他非jQuery库的情况，就需要对上面的代码进行改动了，所以兼容性不够好。比较好的方法是将$符号写全（jQuery）：

1
2
3

jQuery(function() {
	//一些代码
});

但是大家或许发现了，这样写的话，以后查找dom、或调用jQuery库中的函数，都需要写jQuery(‘p’)、jQuery.trim()。是否觉得比较麻烦，还是觉得$符号好用呢？

那么为你来介绍如何在页面代码中自定义别名的方法吧。格式如下：

1
2
3
4

jQuery(function(hiro) {
	//在内部我就可以这样使用,来弹出我当前使用浏览器的版本号
    alert(hiro.browser.version);
});

只需要在function中传入一个自定义的参数，该参数就是你的自定义别名了。该别名可以随意地自定义，当然可以使用$符号来自定义了，格式如下：

1
2
3
4

jQuery(function($) {
	//在内部我就可以这样使用,来弹出我当前使用浏览器的版本号
    alert($.browser.version);
});

这样使用的好处是，即使你在引入新的库后，也不会和新库产生冲突。

2.在插件代码中如何自定义别名

插件的实现原理就是将所有的插件代码都写在一个方法体内，然后执行即可。就像这样：

1
2
3
4

(function() {
  // 这里可以写插件的代码
  var xyz; // xyz 不是一个全局变量，他只在该方法体内可以获得
})(); // 该方法会立即执行（这里用到了匿名函数的概念）

这里多余的括号是必须的，因为你若不加括号的话，匿名函数就得不到执行。

那么在插件中自定义别名就很简单了，和在页面中自定义别名类似，格式如下：

1
2
3
4

(function($) {
  // 这里可以写插件的代码
  var xyz; // xyz 不是一个全局变量，他只在该方法体内可以获得
})(jQuery);

在上面的我给方法传入一个jQuery的参数，是因为该方法是对jQuery库的扩展，那么在该方法体内就可以调用jQuery库中的函数；若不传入，则无法调用jQuery库

一个小的插件编写技巧：

在我阅读国外的开发人员编写的插件时，发现很多的插件都会在代码的开始部分加上一个分号，格式如下：

1
2
3
4

;(function($) {
  // 这里可以写插件的代码
  var xyz; // xyz 不是一个全局变量，他只在该方法体内可以获得
})(jQuery);

我猜测这是因为很多的插件在代码的最前面会加上一些版权信息和使用方法的注释信息，加一个分号是为了防止注释结束遗忘吧，也告示着插件代码的开始！(个人猜测，仅供参考！)

具体的代码实现格式和运用可以阅读jQuery.tooltips.js的源代码，他的编写方式比较“正统”！

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/how-to-custom-alias-in-plugins-and-page-code/feed 5 HTML:编写干净的且富有语义的html代码 http://www.ihiro.org/coding-clean-and-rich-semantic-html http://www.ihiro.org/coding-clean-and-rich-semantic-html#comments Mon, 30 Nov 2009 03:44:08 +0000 Hiro http://www.ihiro.org/?p=845

如果你是一个使用div标签做任何事的家伙，那么这篇文章将对你十分有益。该问重点讲述了如何通过使用富有语义的标签和最少的div标记来编写干净的html代码。你是否曾经也试图去修改别人的一些html模板，那么你一定会被代码里那些肮脏的标签所抓狂。编写干净的html代码，不仅对你自己有益，而且对你的团队也有益。他将大大地节约了你的开发与错误调试时间（特别是比较大的一些项目）。

1.尽可能少地使用div标签；
2.使用div标签来控制页面的整体布局，如头部，内容部，侧边栏，底部等；
3.内容必须包含在对应的语义标签内，而不是包含在div内；
4.格式化你的源代码并且在结束标签处给出对应的注释语言。

该文翻译自：WebDesignWall: Coding Clean and Semantic Templates

]]> 如果你是一个使用div标签做任何事的家伙，那么这篇文章将对你十分有益。该问重点讲述了如何通过使用富有语义的标签和最少的div标记来编写干净的html代码。你是否曾经也试图去修改别人的一些html模板，那么你一定会被代码里那些肮脏的标签所抓狂。编写干净的html代码，不仅对你自己有益，而且对你的团队也有益。他将大大地节约了你的开发与错误调试时间（特别是比较大的一些项目）。

1.去除不必要的div标签：

我曾经看到好多的人将form和ul标签都包含在了div标签内。为什么要写一个不必要的标签呢。你可以给适当的选择器赋予css规则，这样也可以达到同样的效果。

例子一：

下面的列子将展示给你如何删除多余的div标签，而将css规则声明给内部的form标签。clean_html_01_div-form

例子二：

有时侯我们会将一些内容用额外的div标签包含起来，其目的是为了严格地控制布局的空隙。在这个例子的左边使用了一个<div class=”box”>来控制两个box之间的外边距margin。但如果每个box内都有一个标题h4，那么我们可以通过h4标签来控制外间距margin，从而可以删除掉多余的<div class=”box”>标签。clean_html_02_div-sidebox

2.使用富有语义的标记：

你必须时刻都使用富有语义的标记来编写html代码（如：h1用作标题，p用作文章段落，ul则用于列表项）。那么，即使你的css文件没有引入或者没有被支持，你的html文档看起来也是富有意义的。

例子：

下面的一张图片比较了使用div标记和使用富有语义的标记编写的一段html代码（没有css代码的支持）在浏览器中编译后的效果。clean_html_03_semantic-markups

3.尽可能地少使用div标签：

你是否看到过一些到处都是div的html文档，它是否让你非常地抓狂？是否你曾忘记关闭一个</div>或者无意添加了一个打开的<div>标签呢？我确定绝大多数的开发者都曾有过这样的经验。所以你需要尽可能少地使用div标签。这样以后的调试和改错的过程就会变得更加容易。

例子一：

用p标签来替代div标签去包含一个面包屑导航。clean_html_04_div-breadcrumb

例子二：

下面的例子展示了如何通过css规则来将两个div标签替换成一个span标签。这两种写法得到的结果是完全一致的。clean_html_05_div-date

4.格式化（缩进）你的代码：

你在开发的过程中始终要格式化你的源代码（如缩进嵌套的标签），这样的可以方便以后的阅读和错误调试。如果你使用Adobe Dreamweaver的话，那么你可以很简单地去格式化源代码。方法：点击“命令”菜单下的“应用源代码”选项即可。clean_html_06_format-code

5.在</div>结束处给出相应的注释：

当你编写一个平台模板(如：WordPress主题)代码时，这些模板文件会被分割成多个不同的文件：如：index.php, header.php, sidebar.php, 和 footer.php。因此，你必须在</div>结束处给出相应的注释。比如：当我看到</div><!– /wrapper –>时，我就知道这里是<div id=”wrapper”>标签的结束处。clean_html_07_comment-code

总结：

1.尽可能少地使用div标签；
2.使用div标签来控制页面的整体布局，如头部，内容部，侧边栏，底部等；
3.内容必须包含在对应的语义标签内，而不是包含在div内；
4.格式化你的源代码并且在结束标签处给出对应的注释语言。

该文翻译自：WebDesignWall: Coding Clean and Semantic Templates

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/coding-clean-and-rich-semantic-html/feed 12 jQuery:增强型走马灯公告栏，可以抛弃marquee标签了 http://www.ihiro.org/jquery-enhanced-marquee-bulletin-board http://www.ihiro.org/jquery-enhanced-marquee-bulletin-board#comments Thu, 26 Nov 2009 15:30:43 +0000 Hiro http://www.ihiro.org/?p=835

昨天晚上收到的求助邮件，说因上级的要求需要制作一个走马灯效果的公告栏，希望我可以帮助他解决。因看到邮件的时候都快要睡觉了，所以并没有立即处理。

今天早上到了公司，放开手边的工作，花了一点点时间给他制作了一个主流浏览器都兼容的走马灯公告栏。然后mail给他，但他过会儿回邮件说缺少鼠标悬停时停止的效果。于是乎有花了几分钟添加了相应的代码。到了下午快下班的时候，该同学又发来了邮件，说我的公告栏的效果有点欠缺，现在的效果和marquee标签的效果一样，需要等内容上移完成后才会重复滚动，如果可以连续滚动的话那就完美了。

于是就在刚刚的时间我有花了几分钟的时间给他解决了，mail给他。不知道他是否还会有什么新的要求呢，期待啊！毕竟这对我来说也是一个挑战嘛，同时也帮助到了别人，何乐而不为呢！

]]> 昨天晚上收到的求助邮件，说因上级的要求需要制作一个走马灯效果的公告栏，希望我可以帮助他解决。因看到邮件的时候都快要睡觉了，所以并没有立即处理。

今天早上到了公司，放开手边的工作，花了一点点时间给他制作了一个主流浏览器都兼容的走马灯公告栏。然后mail给他，但他过会儿回邮件说缺少鼠标悬停时停止的效果。于是乎有花了几分钟添加了相应的代码。到了下午快下班的时候，该同学又发来了邮件，说我的公告栏的效果有点欠缺，现在的效果和marquee标签的效果一样，需要等内容上移完成后才会重复滚动，如果可以连续滚动的话那就完美了。

于是就在刚刚的时间我有花了几分钟的时间给他解决了，mail给他。不知道他是否还会有什么新的要求呢，期待啊！毕竟这对我来说也是一个挑战嘛，同时也帮助到了别人，何乐而不为呢！

因为觉得功能差不多都实现了，所以也共享出来与大家分享，或许会对你有所帮助呢。

downloaddemo

1.Html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="container">
    <ul class="noticeList">
        <li><a href="http://www.ihiro.org/wordpress-the-article-automatically-appear-as-two" title="Wordpress:将文章自动显示为两列">Wordpress:将文章自动显示为两列</a></li>
        <li><a href="http://www.ihiro.org/film-2012-really-have-that-day-discovery-channel-expose-for-you" title="电影:《2012》真的有那一天吗？探索频道为你揭露">电影:《2012》真的有那一天吗？探索频道为你揭露</a></li>
        <li><a href="http://www.ihiro.org/information-november-2009-programming-language-list" title="资讯:2009年11月编程语言排行榜">资讯:2009年11月编程语言排行榜</a></li>
        <li><a href="http://www.ihiro.org/a-busy-week-for-rent-a-house-was-finally-gaoding" title="租房:忙碌一周，房子终于搞定">租房:忙碌一周，房子终于搞定</a></li>
        <li><a href="http://www.ihiro.org/my-third-theme-innernews" title="主题:我的第三个主题innerNews提供下载">主题:我的第三个主题innerNews提供下载</a></li>
        <li><a href="http://www.ihiro.org/my-first-plugin-scrolltop" title="插件:我的第一个插件–简约的scrollTop滑动插件">插件:我的第一个插件–简约的scrollTop滑动插件</a></li>
        <li><a href="http://www.ihiro.org/celebrate-my-blog-pr-catapulted-3" title="PageRank:庆贺我的博客PR连升3级">PageRank:庆贺我的博客PR连升3级</a></li>
        <li><a href="http://www.ihiro.org/myeclipse-8-and-registration-number" title="软件:MyEclipse 8.0发布，附注册码">软件:MyEclipse 8.0发布，附注册码</a></li>
        <li><a href="http://www.ihiro.org/tv-leng-jian" title="电视:《冷箭》，让我“失眠”的谍战片">电视:《冷箭》，让我“失眠”的谍战片</a></li>
        <li><a href="http://www.ihiro.org/hd-is-an-attitude" title="下载:高清，是一种态度！">下载:高清，是一种态度！</a></li>
    </ul>
</div>

2.CSS代码：

1
2
3
4
5
6
7
8

* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#666; text-align:center;}
 
#container { width:180px; margin:30px auto; text-align:left; padding:10px; border:1px solid #ccc; height:250px; position:relative; overflow:hidden;}
	.noticeList { width:180px; list-style:inside; position:absolute; top:270px; left:10px;}
	.noticeList li { padding-bottom:5px;}
	.noticeList li a { color:#606060; text-decoration:none;}
	.noticeList li a:hover { color:#09F;}

3.JS代码：（备了部分注释，不懂的可以留言询问。）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

jQuery(function($) {
	function ScrollAction(listObj, listElem, speed, isSeries) {	//listObj为需要滚动的列表，  speed为滚动速度
		var pos, top, aniTop, height;
		var id = '';  //记录setInterval的标记id
 
		pos = listObj.position();	
		top = pos.top;			//列表的top
		aniTop = top;				//记录当前运动时的top
		height = listObj.height();	//列表的高度
 
		var scrollUp = function() {
			aniTop--;
			if(!isSeries) {	//isSeries变量控制是否连续滚动，false不连续，true连续
				if(aniTop == -height) {	//不连续，滚动玩重新滚动
					listObj.css({'top': top});
					aniTop = top;
				};
			} else {
				if(aniTop == -listObj.children().eq(0).height()) {	//连续滚动
					var firstItem = '< ' + listElem +'>' + listObj.children().eq(0).html() + '< /' + listElem +'>';
					listObj.children().eq(0).remove();
					listObj.append(firstItem);
					aniTop = 4;
				};
			};
			listObj.css({'top': aniTop + 'px'});
		};
 
		var hover = function(id) {
			listObj.hover(function() {
				clearInterval(id);
			}, function() {
				id = setInterval(scrollUp, speed);
			});
		};
 
		this.start = function() {
			id = setInterval(scrollUp, speed);
			hover(id);
		};
 
	};
	var sa = new ScrollAction($('.noticeList'), 'li', 30, true);
	sa.start();
});

使用时别忘了引入jQuery库哦，也希望大家给我提出意见，或功能扩充等要求。

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/jquery-enhanced-marquee-bulletin-board/feed 11 Ajax:当前页面更改内容，前端实现 http://www.ihiro.org/ajax-editing-in-placing http://www.ihiro.org/ajax-editing-in-placing#comments Wed, 23 Sep 2009 04:26:22 +0000 Hiro http://www.ihiro.org/?p=677

相信大家有用过Google Doc或Flickr，或者一些SNS社区的图片添加描述信息的效果，他们是在点击了一段文字后出现一个输入框，在输入框内输入你要填写的内容，点击“确认”或者“发表”即可立即显示出来。

今天做的这个效果呢，就是其中的截取版本。为什么这么说呢，因为我的效果只实现了前端的更改后立即发布的效果，而没有实际的与服务器端交互，也没有将输入的内容添加到数据库中，主要是为大家介绍一下实现原理。

注意：源代码中没有jQuery库文件，请下载查看代码的朋友根据源代码路径自行添加。

]]> 相信大家有用过Google Doc或Flickr，或者一些SNS社区的图片添加描述信息的效果，他们是在点击了一段文字后出现一个输入框，在输入框内输入你要填写的内容，点击“确认”或者“发表”即可立即显示出来。

今天做的这个效果呢，就是其中的截取版本。为什么这么说呢，因为我的效果只实现了前端的更改后立即发布的效果，而没有实际的与服务器端交互，也没有将输入的内容添加到数据库中，主要是为大家介绍一下实现原理。

downloaddemo

1.HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div id="container">
  <h1>Ajax Editing</h1>
  <p>鼠标移动到列表上，双击即可以进行编辑！</p>
  <div class="block">
    <h2>一、电影列表</h2>
    <ul class="editable">
      <li>《建国大业》，<span class="color_red">更新中...</span></li>
      <li><a href="http://www.ihiro.org/film-eternal-beloved">《爱有来生》</a></li>
      <li><a href="http://www.ihiro.org/movie-coco-chanel">《COCO Chanel》</a></li>
      <li><a href="http://www.ihiro.org/one-night-in-supermarket">《夜店》</a></li>
      <li><a href="http://www.ihiro.org/the-legend-of-1900">《海上钢琴师–1900的传说》</a></li>
      <li><a href="http://www.ihiro.org/film-xinsushijian-feedback">《新宿事件》</a></li>
    </ul>
  </div>
  <div class="block">
    <h2>二、书籍列表</h2>
    <ul class="editable">
      <li>《精通Javascript》</li>
      <li>《jQuery基础教程》</li>
      <li>《Flex入门到精通》</li>
      <li>《PHP与MySQL Web开发》</li>
      <li>《Google，你可以做什么》</li>
      <li>《不抱怨的世界》</li>
    </ul>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

* { margin:0; padding:0;}
body { font:12px/20px Georgia, "Times New Roman", Times, serif; color:#404040;}
 
h2 { font-size:24px;}
 
.color_red { color:#F00;}
 
#container { width:400px; margin:30px auto; overflow:hidden; height:1%;}
 
	/* 标题样式 */
	#container h1 { text-align:center; font:32px "Lucida Sans Unicode", "Lucida Grande", sans-serif; margin-bottom:20px;}
 
	.block { width:180px; float:left; margin:30px 20px 0 0;}
 
	/* 列表li的样式 */
	ul.editable li { padding:10px 0; list-style:none;}
 
	/* 高亮当前编辑的列表li */
	.hover { background:#E8F3FF;}
 
	/* 高亮当前的input输入框 */
	.editInput { width:160px; border:2px solid #E8F3FF; display:block;}
 
 
	/* save和cancel按钮的效果，鼠标移动到上面的效果 */
	.btnSave, .btnCancel { padding:0 5px; border:1px solid #09F; background:#36F; color:#fff; text-decoration:none; margin:10px 0 0 20px;}
	.btnSave:hover, .btnCancel:hover  { border:1px solid #36F; color:#39F; background:#fff;}

3. jQuery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

$(function() {
 
	var oldText, newText;
 
	//鼠标移动到列表li上后，添加一个高亮的背景
	$('.editable li').hover(function() {
		$(this).addClass('hover');
	}, function() {
		$(this).removeClass('hover');
	}).bind('dblclick', function() {
 
		//获得列表li中原先的html代码
		oldText = $(this).html().replace(/"/g, "&quot;");
 
		//将原先的html代码放在一个input中，并追加save和cancel按钮后插入到列表li中
		$(this).html('<input type="text" class="editInput" value="' + oldText +'" /><a href="#" class="btnSave">save</a><a href="#" class="btnCancel">cancel</a>');
	}).children('a').attr('target', '_blank');	//链接在新窗口中打开
 
	//点击save按钮，将新的值插入在列表li中
	$('.btnSave').live('click', function() {
		newText = $(this).siblings('input').val().replace(/"/g, "&quot;");
 
		$(this).parent('li').html(newText);
 
		//设置超链接a的跳转为否
		return false;
	});
 
	//若点击cancel按钮，则将最初的html代码插入在列表li中
	$('.btnCancel').live('click', function() {
		$(this).parent('li').html(oldText);
 
		//设置超链接a的跳转为否
		return false;
	});
 
});

双击列表li后，将原先列表li中的html源码保存在oldText变量中，并且在列表li标签内插入一个input输入框和两个链接作为按钮save和cancel之用；
点击save按钮后，将input中的新的html源码保存在newText变量中，重新插入到列表li中，从而覆盖了列表里中的input源码；
点击cancel按钮，浙江原先的html代码oldText重新插入到列表li中，覆盖掉因双击插入的input输入框和两个链接按钮。

注意：源代码中没有jQuery库文件，请下载查看代码的朋友根据源代码路径自行添加。

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/ajax-editing-in-placing/feed 14 jQuery:两个样式下拉菜单(click hover) http://www.ihiro.org/drop-down-menu http://www.ihiro.org/drop-down-menu#comments Thu, 06 Aug 2009 06:51:18 +0000 Hiro http://www.ihiro.org/?p=367

一直都很喜欢下拉菜单，因为这样可以导航到更多的页面，给访问者一目了然的感觉。

之前在公司的网站上就是用的下拉菜单导航栏的方式进行导航，当时是使用了li:hover的方式通过鼠标移动到li上，显示出li下的ul。而在ie6中则使用javascript修复li:hover。这样做出来是没有动态的效果，下拉菜单一下子就凭空出现了。

运用jQuery库制作下拉菜单的好处就是可以做出各种不同的动态效果，我今天讲解的是运用slideDown()和slideUp()函数实现的卷页效果。

]]> dropdownmenu

一直都很喜欢下拉菜单，因为这样可以导航到更多的页面，给访问者一目了然的感觉。

之前在公司的网站上就是用的下拉菜单导航栏的方式进行导航，当时是使用了li:hover的方式通过鼠标移动到li上，显示出li下的ul。而在ie6中则使用javascript修复li:hover。这样做出来是没有动态的效果，下拉菜单一下子就凭空出现了。

运用jQuery库制作下拉菜单的好处就是可以做出各种不同的动态效果，我今天讲解的是运用slideDown()和slideUp()函数实现的卷页效果。

说明：第一个导航#nav1是点击后出现下拉菜单，而第二个导航#nav2是鼠标移动到上面后出现导航。(样式只为效果，没有美化，望见谅)

DownloadDemo

1.html代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<ul class="nav" id="nav1">
    	<li>点击方式下拉菜单:click</li>
    	<li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">技术</a>
        	<ul class="subnav">
            	<li><a href="#">wordpress</a></li>
                <li><a href="#">php</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">CSS</a></li>
            </ul>
        </li>
        <li><a href="#">影视</a>
        	<ul class="subnav">
            	<li><a href="#">电视剧</a></li>
                <li><a href="#">电影</a></li>
                <li><a href="#">舞台剧</a></li>
            </ul>
        </li>
        <li><a href="#">联系</a></li>
    </ul>
 
    <ul class="nav" id="nav2">
    	<li>移动方式下拉菜单:hover</li>
    	<li><a href="#">首页</a></li>
        <li><a href="#">关于</a></li>
        <li><a href="#">技术</a>
        	<ul class="subnav">
            	<li><a href="#">wordpress</a></li>
                <li><a href="#">php</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">CSS</a></li>
            </ul>
        </li>
        <li><a href="#">影视</a>
        	<ul class="subnav">
            	<li><a href="#">电视剧</a></li>
                <li><a href="#">电影</a></li>
                <li><a href="#">舞台剧</a></li>
            </ul>
        </li>
        <li><a href="#">联系</a></li>
    </ul>

2. CSS源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

* { margin:0; padding:0;}
body { font:14px '宋体';}
li { list-style:none;}
a { text-decoration:none;}
a:hover { text-decoration:underline;}
 
#nav1 { margin-bottom:200px;}
 
.nav { margin:10px auto; width:500px; background:#333; height:35px; padding:0 10px; color:#F60;}
.nav li { float:left; padding-right:10px; text-align:center; position:relative; height:35px; line-height:35px;}
.nav li a { padding:0 10px; height:35px; line-height:35px; display:block; color:#fff; float:left;}
 
.nav li span { float:left; width:17px; height:35px; background:url(subnav_btn.gif) no-repeat center top;}
.nav li span.subhover { background-position:center bottom; cursor:pointer;}
 
ul.subnav { display:none; float:left; position:absolute; top:35px; left:-20px; width:100px; background:#666;}
ul.subnav li { padding:0; clear:both; width:100px;}

3. jQuery代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$(document).ready(function() {
	$('<span></span>').insertBefore($('.subnav'));
 
	//鼠标点击向下箭头
	$('#nav1 li span').hover(function() {
		$(this).addClass('subhover');
		$(this).parent().hover(function() {
		}, function() {
			$(this).parent().find('ul.subnav').slideUp('fast');
		});
	}, function() {
		$(this).removeClass('subhover');
	}).click(function() {
		$(this).parent().find('ul.subnav').slideDown('slow');
	});
 
	// 鼠标移动到含有下拉菜单的li标签上时
	$('#nav2 li').hover(function() {
		$(this).find('span').addClass('subhover').end()
			   .find('ul.subnav').slideDown('slow');
	}, function() {
		$(this).find('span').removeClass('subhover').end()
			   .find('ul.subnav').slideUp('fast');
	});
});

你也许会喜欢阅读这些：

]]> http://www.ihiro.org/drop-down-menu/feed 8