杰拉斯的博客

jQuery Sina Emotion

一个用于方便快速地创建新浪微博表情选择对话框的 jQuery 插件。

有何特点

• 使用简单，一行代码即可创创建出表情选择对话框
• 自带智能表情解析方法（但还是建议表情解析在服务端进行）

• 兼容IE6+、Chrome、Firefox、Opera等各种浏览器

(阅读全文…)

jQuery Sina Emotion

重要说明：已更新，请通过 GitHub 获取最新版本。

这是什么？

一个用来方便快速地创建新浪微博表情选择对话框的jQuery插件。

有何特点

• 使用简单，一行代码即可创创建出表情选择对话框
• 自带智能表情解析方法（但还是建议表情解析在服务端进行）
• 兼容IE6+、Chrome、Firefox、Opera等各种浏览器

(阅读全文…)

上周，我整理了《jQuery设计思想》。

那篇文章是一篇入门教程，从设计思想的角度，讲解"怎么使用jQuery"。今天的文章则是更进一步，讲解"如何用好jQuery"。

我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》（jQuery Proven Performance Tips And Tricks）。他是jQuery开发团队的成员，具有一定的权威性，提出的结论都有测试数据支持，非常有价值。

(阅读全文…)

jQuery是目前使用最广泛的javascript函数库。

据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

虽然jQuery上手简单，比其他库容易学会，但是要全面掌握，却不轻松。因为它涉及到网页开发的方方面面，提供的各种方法和内部变化有上千种之多。初学者常常感到，入门很方便，提高很困难。

目前，互联网上最好的jQuery入门教材，是Rebecca Murphey写的《jQuery基础》（jQuery Fundamentals）。在Google里搜索"jQuery 培训"，此书排在第一位。jQuery官方团队已经同意，把此书作为官方教程的基础。

这本书虽然是入门教材，但也足足有100多页。我对它做了一个详细的笔记，试图理清jQuery的设计思想，找出学习的脉络。我的目标是全面掌握jQuery，遇到问题的时候，心里有底，基本知道使用它的哪一个功能，然后可以迅速从手册中找到具体的写法。

下面就是我的笔记，它应该是目前网上不多的jQuery中文教程之一。你只需要一点javascript语言的基本知识，就能看懂它，在最短的时间里，掌握jQuery的所有主要方面（除了ajax和插件开发）。

(阅读全文…)

有一个同学需要在网页里用到简单的焦点图效果，在网上找了许多jQuery插件都不甚满意，有一些效果虽然不错，但是根本用不到那么多功能，大材小用不说，还会加大代码量，降低网页前端性能，于是花了十分钟写了一个最最简单的jQuery焦点图插件，麻雀虽小，五脏俱全，可定制宽高，切换延迟。代码如下：

HTML部分，自然是一个非常简单的列表结构：

<ul id="slider" class="slider">
    <li><a target="_blank" href="javascript:void(0);"><img src="images/slider1.jpg" /></a></li>
    <li><a target="_blank" href="javascript:void(0);"><img src="images/slider2.jpg" /></a></li>
    <li><a target="_blank" href="javascript:void(0);"><img src="images/slider3.jpg" /></a></li>
    <li><a target="_blank" href="javascript:void(0);"><img src="images/slider4.jpg" /></a></li>
    <li><a target="_blank" href="javascript:void(0);"><img src="images/slider5.jpg" /></a></li>
</ul>

CSS部分，简单地定义一下样式：

.slider{
    margin: 0 auto;
    padding: 0;
    width: 600px;
    height: 400px;
    list-style: none;
    overflow: hidden;
    position: relative;
}

.slider li{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.slider img{
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    text-align: center;
}

接下来是精髓部分，JavaScript：

(function($){
    var slider = function(args){
        var index = 0;
        var that = this;
        var config = {
            width : 600,
            height : 400,
            delay : 3000,
        };
        config = $.extend({}, config, args);
        $(this).width(config.width).height(config.height).children().hide().eq(0).show();
        setInterval(function(){
            index = (index + 1) % $(that).children('li').length;
            $(that).children().stop(true, false).fadeOut().eq(index).stop(true, false).fadeIn();
        }, config.delay);
    };
    $.prototype.slider = slider;
})(jQuery);

调用方式如下：

$('#slider').slider({
    width : 720,
    height : 360,
    delay : 5000
});

当然，如果直接使用默认参数的话也可以直接这样调用：

$('#slider').slider();

这只是一个最简单的Slider例子，但却涵盖了一些比较好的JavaScript编写思路，还有闭包等，欢迎在此之上进行二次开发，也欢迎与我交流技术上的问题~

Demo下载地址：

http://vdisk.weibo.com/s/tbzlb

(阅读全文…)