准备工作为了更好的演示本例，我们需要一个数据表，记录需要的功能说明及开启状态，表结构如下：

CREATE TABLE `pro` (  
  `id` int(11) NOT NULL auto_increment,  
  `title` varchar(50) NOT NULL,  
  `description` varchar(200) NOT NULL,  
  `status` tinyint(1) NOT NULL default '0',  
  PRIMARY KEY  (`id`)  
) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 

你可以向表中pro插入几条数据。

index.php

我们要在页面显示相关功能列表，使用PHP读取数据表，并以列表的形式展示。

<?php   
   require_once('connect.php'); //连接数据库   
   $query=mysql_query("select * from pro order by id asc");   
   while ($row=mysql_fetch_array($query)) {   
   ?>   
   <div class="list">   
     <div class="fun_title">   
        <span rel="<?php echo $row['id'];?>" <?php if($row['status']==1){ ?>   
class="ad_on" title="点击关闭"<?php }else{?>class="ad_off" title="点击开启"<?php }?>></span>   
        <h3><?php echo $row['title']; ?></h3>   
     </div>   
     <p><?php echo $row['description'];?></p>   
   </div>   
 <?php } ?>

连接数据库，然后循环输出产品功能列表。

CSS

为了渲染一个比较好的页面外观，我们使用CSS来美化页面，使得页面更符合人性化。使用CSS,我们只需用一张图片来标识开关按钮。

.list{padding:6px 4px; border-bottom:1px dotted #d3d3d3; position:relative}   
.fun_title{height:28px; line-height:28px}   
.fun_title span{width:82px; height:25px; background:url(switch.gif) no-repeat;    
cursor:pointer; position:absolute; right:6px; top:16px}   
.fun_title span.ad_on{background-position:0 -2px}   
.fun_title span.ad_off{background-position:0 -38px}   
.fun_title h3{font-size:14px; font-family:'microsoft yahei';}   
.list p{line-height:20px}   
.list p span{color:#f60}   
.cur_select{background:#ffc} 

CSS代码，我不想详述，提示下我们使用了一张图片，然后通过background-position来定位图片的位置，这是大多数网站使用的方法，好处咱就不说了。

jQuery

我们通过单击开关按钮，及时请求后台，改变对应的功能开关状态。这个过程是一个典型的Ajax应用。通过点击开关按钮，前端向后台PHP发送post请求，后台接收请求，并查询数据库，并将结果返回给前端，前端jQuery根据后台返回的结果，改变按钮状态。

$(function(){   
    //鼠标滑向换色   
    $(".list").hover(function(){   
        $(this).addClass("cur_select");   
    },function(){   
        $(this).removeClass("cur_select");   
    });   
       
    //关闭   
    $(".ad_on").live("click",function(){   
        var add_on = $(this);   
        var status_id = $(this).attr("rel");   
        $.post("action.php",{status:status_id,type:1},function(data){   
            if(data==1){   
                add_on.removeClass("ad_on").addClass("ad_off").attr("title","点击开启");   
            }else{   
                alert(data);   
            }   
        });   
    });   
    //开启   
    $(".ad_off").live("click",function(){   
        var add_off = $(this);   
        var status_id = $(this).attr("rel");   
        $.post("action.php",{status:status_id,type:2},function(data){alert(data);     
            if(data==1){   
                add_off.removeClass("ad_off").addClass("ad_on").attr("title","点击关闭");   
            }else{   
                alert(data);   
            }   
        });   
    });   
}); 

说明，代码中，首先实现了鼠标滑向功能列表换色的功能(详见demo)，然后就是单击开关按钮，向后台action.php发送Ajax请求，提交 的参数是对应功能的id和type，用于后台区分请求的是哪个功能和请求的类型(开启和关闭)。其实，大家稍微留神，可以看出，根据Ajax请求成功返回 结果后，开关按钮动态改变样式，实现改变开关状态的功能。

action.php

后台action.php接收到前端的请求，根据参数执行SQL语句，更新对应功能的状态，成功后将结果返回给前端，请看代码：

require_once('connect.php');   
$id = $_POST['status'];   
$type = $_POST['type'];   
if($type==1){ //关闭   
    $sql = "update pro set status=0 where id=".$id;   
}else{ //开启   
    $sql = "update pro set status=1 where id=".$id;   
}   
$rs = mysql_query($sql);   
if($rs){   
    echo '1';   
}else{   
    echo '服务器忙，请稍后再试！';   
}  

结束语通过本文您可以熟练掌握ajax在WEB开发中的应用，并能快速的应用到您的项目中。helloweba将一如既往的为广大开发者提供更具实用性的应用，致力于WEB前端技术的应用。

原文：http://www.helloweba.com/view-blog-153.html

注： 关于仅基于CSS的响应式设计和起始程序模板，更多信息 请参照 针对多屏幕开发的可自定义启动程序设计。

总体介绍: jQuery 和 Dreamweaver

Dreamweaver CS5.5其中一个很重要的特征是内嵌的jQuery支持。不论是jQuery的初学者还是一个很有经验的JavaScript开发人员， Dreamweaver包含的代码提示功能和内嵌的jQuery支持都无疑提高了开发效率(参照图1)。除了支持JQuery，Dreamweaver CS5.5也强力支持CSS3 媒体查询和多屏幕设计(也叫响应式设计)。

图 1. Dreamweaver 支持jQuery代码提示功能.

自定义jQuery 脚本

模板中包含了一个自定义的脚本库，该脚本库由 Codify Design Studio 开发，用来创建一个可交互主页marquee内容。滚动内容的实现完全基于标准HTML。在模板中marquee内容是由一组面板(也可以称做幻灯片)组 成，每个面板中包含了图片，标题以及用于面板切换的链接。面板和导航的内容是根据marquee_panels.html 文件中的html动态创建的(参照图2)。因为设置了自动播放功能，所以marquee内容默认是自动播放的，当用户用鼠标操作时，该播放功能自动关闭以 响应用户操作。

图2. 基于HTML内容动态生成面板和导航.

注: 特别鸣谢 Dimas Begunoff授予使用 jQuery Image Preloader plug-in的权限.

基于屏幕大小动态加载

当可视区域的宽度超过550个像素点时，该模板加载包含marquee 内容的html页面，预加载图片，然后生成可交互的marquee内容。当可视区域的宽度少于550可像素点时，例如通过一个设备访问，marquee 容器div会被隐藏，只会加载仅包含一个推荐条目的html 文件(参照图3)。这样做是为了在小屏幕上减少加载的内容，但保留CSS3媒体查询功能。

注：仅对Chrome用户。在这边文章发布的时候，Chrome禁止使用Ajax从本地操作系统加载本地文件，这将导致marquee或promo 区域变成空白区域。但是Chrome支持当从Web服务器上或者本地运行的web service上加载某个文件。更多信息请关注 Chrome 的开源浏览器项目。

图 3. 基于jQuery返回的可视区域加载的html.

除了使用HTML，CSS和jQuery技术,该模板还包含PSD 文件，用来自定义设计元素来匹配品牌的需求。

观看视频： 使用自定义模板

Chris Converse展示了如何使用Dreamweaver jQuery marquee 模板根据屏幕的大小来加载可交互的数据。利用CSS3的媒体查询功能，并且包含一组通用html 和css 标签，jQuery的Ajax制造了非常出色的跨设备的用户体验。

预览和下载模板

预览在不同的设备上marquee内容。 下载该模板相关的HTML，CSS和Photoshop 源文件。

图 4. 预览在不同设备上的marquee内容

原文：http://www.adobe.com/cn/devnet/dreamweaver/articles/dw-template-responsive-jquery-marquee.html

<div class="media"> 
    <object width="450" height="250" attr1="attrValue1" attr2="attrValue2" 
        codebase="http://www.apple.com/qtactivex/qtplugin.cab" 
        classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"> 
        <param name="src"      value="myBetterMovie.mov"> 
        <param name="autoplay" value="true"> 
        <param name="param1"   value="paramValue1"> 
        <param name="param2"   value="paramValue2"> 
        <embed width="450" height="250" src="myBetterMovie.mov" autoplay="true" 
            attr1="attrValue1" attr2="attrValue2" param1="paramValue1" param2="paramValue2" 
            pluginspage="http://www.apple.com/quicktime/download/" > </embed> 
    </object> 
</div> 

具体使用方法

html标记代码

<a class="media" href="sample.mov">My Quicktime Movie</a>
<a class="media" href="sample.swf">My Flash Movie</a>
<a class="media" href="sample.wma">My Audio File</a> 

$('.media').media(); 

选项

可以通过脚本对象或者jQuery Metadata Plugin来配置参数。

全局默认值：

$.fn.media.defaults = {
preferMeta: 1, // 如果为true, 则标记的meta值优先于脚本对象
autoplay: 0, // 标准化的跨播放器设置
bgColor: '#ffffff', // 背景颜色
params: {}, // 作为param元素添加到object标记中；作为属性添加到embed标记中
attrs: {}, // 作为属性添加到object以及embed中
flashvars: {}, // 作为flashvars参数或属性添加到flash中
flashVersion: '7', // 需要的最低flash版本
// 默认的flash视频和mp3播放器 // @see: http://jeroenwijering.com/?item=Flash_Media_Player
flvPlayer: 'mediaplayer.swf',
mp3Player: 'mediaplayer.swf',
// Silverlight选项 // @see http://msdn2.microsoft.com/en-us/library/bb412401.aspx
silverlight: {
  inplaceInstallPrompt: 'true', // 在适当的位置显示安装提示
  isWindowless: 'true', // 无窗口模式
  framerate: '24', // 最大帧速率
  version: '0.9', // Silverlight版本 onError: null, // onError回调函数
  onLoad: null, // onLoad回调函数
  initParams: null, // 对象初始化参数
  userContext: null // 传到load回调函数的参数
  }
}; 

$('.media').media( { width: 400, height: 300, autoplay: true } ); 

$('.media').media({
  width: 450,
  height: 250,
  autoplay: true,
  src: 'myBetterMovie.mov',
  attrs: { attr1: 'attrValue1', attr2: 'attrValue2' }, // object/embed attrs
  params: { param1: 'paramValue1', param2: 'paramValue2' }, // object params/embed attrs
  caption: false // supress caption text
});

‘src’选项

src选项指定了媒体文件的地址。它没有全局的默认值。如果未显示指定src选项的值，jQuery Media Plugin将使用href或者src属性的值来代替。

播放器和格式

jQuery Media Plugin默认为播放器和格式如下表所示：

播放器	文件格式
Quicktime	aif,aiff,aac,au,bmp,gsm,mov,mid, midi,mpg,mpeg,mp4,m4a,psd,qt,qtif, qif,qti,snd,tif,tiff,wav,3g2,3pg
Flash	flv, mp3, swf
Windows Media Player	asx, asf, avi, wma, wmv
Real Player	ra, ram, rm, rpm, rv, smi, smil
Silverlight	xaml
iframe	html, pdf

mediaplayer.swf

上表说明了，mp3格式被自动对应到了flash播放器。全局配置中的$.fn.media.defaults.mp3Player指定MP3媒体由 mediaplayer.swf文件播放。该swf文件是一个小型的mp3和flash视频播放器，可以从这里下 载：http://www.longtailvideo.com/players/jw-flv-player/

SWFObject

这个脚本很常见，用来将Flash内容嵌入到网页中，你不用考虑不同平台的Flash嵌入方式。但这个文件并非必需。如果它加载了，jQuery Media Plugin将使用它，反之jQuery Media Plugin将按自己的默认方式生成object/embed标记。更多信息可以参考：http://code.google.com/p/swfobject/

iframe Player

默认情况下，PDF和HTML格式被映射到了iframe。它们将显示在iframe中而非object/embed标记中。

添加或者修改格式关联

这个操作可以由插件的mapFormat方法实现，如

$.fn.media.mapFormat('mp3','quicktime'); 

在线demo

Video/Flash Demo

Audio Demo

sIFR Demo

Silverlight Demo

Misc Demo (pdf, html)

下载

直接下载jquery.media.js文件，或者在Github上下载历史版本

参考文章：jQuery Media Plugin：更方便地展示你的多媒体

转载请自觉注明原文：http://www.itivy.com/jquery/archive/2012/1/15/jquery-media-plugin.html

首先要到jquery blockUI 官方网址：http://malsup.com/jquery/block/

下载jquery.blockUI JS lib：http://malsup.com/jquery/block/jquery.blockUI.js?v2.38

而且还需要jquery lib：http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

jquery.blockUI.dialog.js

/***

 * jquery blockUI Dialog plugin 

 * v1.1 

 * @createDate -- 2012-1-4

 * @author hoojo

 * @email hoojo_@126.com

 * @requires jQuery v1.2.3 or later, jquery.blockUI-2.3.8

 * Copyright (c) 2012 M. hoo

 * Dual licensed under the MIT and GPL licenses:

 * http://hoojo.cnblogs.com

 * http://blog.csdn.net/IBM_hoojo

 **/

 

;(function ($) {

    

    var _dialog = $.blockUI.dialog = {};

    

    // dialog 默认配置

    var defaultOptions = {

        css: { 

            padding: '8px', 

            opacity: .7, 

            color: '#ffffff', 

            border: 'none', 

            'border-radius': '10px', 

            backgroundColor: '#000000' 

        },

        

        // 默认回调函数 取消或隐藏 dialog

        emptyHandler: function () {

            $.unblockUI();

        },

        

        // 用户回调函数

        callbackHandler: function (fn) {

            return function () {

                fn();

                defaultOptions.emptyHandler();

            };

        },

        

        // confirm 提示 html元素

        confirmElement: function (settings) {

            settings = settings || {};

            var message = settings.message || "default confirm message!";

            var okText = settings.okText || "ok";

            var cancelText = settings.cancelText || "cancel";

            

            if (typeof settings.onOk !== "function") {

                settings.onOk = this.emptyHandler;

            }

            if (typeof settings.onCancel !== "function") {

                settings.onCancel = this.emptyHandler;

            }

            var okCallback = this.callbackHandler(settings.onOk) || this.emptyHandler;

            var cancelCallback = this.callbackHandler(settings.onCancel) || this.emptyHandler;

            

            var html = [

                '<div class="dialog confirm">',

                '<p>',

                message,

                '</p>',

                '<input type="button" value="',

                okText,

                '" class="btn ok-btn"/>',

                '<input type="button" value="',

                cancelText,

                '" class="btn cancel-btn"/>'

            ].join("");

            

            var $el = $(html);

            $el.find(":button").get(0).onclick =  okCallback;

            $el.find(":button:last").get(0).onclick = cancelCallback;

            return $el;

        },

        

        // alert 提示html元素

        alertElement: function (settings) {

            settings = settings || {};

            var message = settings.message || "default alert message!";

            var okText = settings.okText || "ok";

            

            if (typeof settings.onOk !== "function") {

                settings.onOk = this.emptyHandler;

            }

            

            var okCallback = this.callbackHandler(settings.onOk) || this.emptyHandler;

            

            var html = [

                '<div class="dialog alert">',

                '<p>',

                message,

                '</p>',

                '<input type="button" value="',

                okText,

                '" class="btn ok-btn"/>'

            ].join("");

            

            var $el = $(html);

            

            $el.find(":button:first").get(0).onclick =  okCallback;

            return $el;

        }

    };

    

    var _options = defaultOptions;

    

    // 对外公开的dialog提示html元素，提供配置、覆盖

    $.blockUI.dialog.confirmElement = function () {

        return _options.confirmElement(arguments[0]);

    };

    

    $.blockUI.dialog.alertElement = function () {

        return _options.alertElement(arguments[0]);

    };

    

    // 提供jquery 插件方法

    $.extend({

        confirm: function (opts) {

            var i = (typeof opts === "object") ? 1 : 0;

            var defaults = {

                message: arguments[i++] || "default confirm message!",

                onOk: arguments[i++] || _options.emptyHandler(),

                onCancel: arguments[i++] || _options.emptyHandler(),

                okText: arguments[i++] || "ok",

                cancelText: arguments[i] || "cancel"

            };

            opts = opts || {};

            opts.css = $.extend({}, _options.css, opts.css);

            

            // 覆盖默认配置

            var settings = $.extend({}, _options, defaults, opts);

            settings = $.extend(settings, { message: _dialog.confirmElement(settings) });

            settings = $.extend({}, $.blockUI.defaults, settings);

            $.blockUI(settings);

        },

        alert: function (opts) {

            var i = (typeof opts === "object") ? 1 : 0;

            

            var defaults = {

                message: arguments[i++] || "default alert message!",

                onOk: arguments[i++] || _options.emptyHandler(),

                okText: arguments[i] || "ok"

            };

            

            opts = opts || {};

            opts.css = $.extend({}, _options.css, opts.css);

            

            var settings = $.extend({}, _options, defaults, opts);

            settings = $.extend(settings, { message: _dialog.alertElement(settings) });

            settings = $.extend({}, $.blockUI.defaults, settings);

            $.blockUI(settings);

        },

        

        // dialog提示

        dialog: function (opts) {

            var settings = $.extend({}, $.blockUI.defaults, _options, opts || {});

            $.blockUI(settings);

        },

        // 移除dialog提示框

        removeDialog: function () {

            _options.emptyHandler();

        }

    });

})(jQuery);

应用样式文件block.dialog.css

dialog是全局样式，btn是所有按钮的样式、ok-btn是ok按钮样式、cancel-btn是取消按钮样式

.dialog {

    font-size: 12px;

}

 

.dialog .btn {

    border: 1px solid white;

    border-radius: 5px;

    min-width: 25%;

    width: auto;

}

 

.dialog .ok-btn {

    background-color: #ccc;

}

 

.dialog .cancel-btn { 

    /*background-color: #aeface;*/

    margin-left: 10%;

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>blockUI Dialog Examples</title>

    

    <meta http-equiv="author" content="hoojo">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

    <link rel="stylesheet" href="blockUI/block.dialog.css" />

    <script type="text/javascript" charset="UTF-8" src="mobile/jquery-1.6.4.js"></script>

    <script type="text/javascript" charset="UTF-8" src="blockUI/jquery.blockUI-2.3.8.js"></script>

    <script type="text/javascript" charset="UTF-8" src="blockUI/jquery.blockUI.dialog-1.1.js"></script>

    

    <script type="text/javascript">

        ;(function ($) {

            $(function () {

            

                // dialog 提示框

                $("#dialog").click(function () {

                    //$.dialog();

                    //$.dialog({message: $("#callback")});

                    $.dialog({

                        //theme: true, // 设置主题需要jquery UI http://www.malsup.com/jquery/block/theme.html                

                        title: "dialog",

                        message: $("#callback"),

                        fadeIn: 1000,

                        fadeOut: 1200

                    });

                    setTimeout($.removeDialog, 2000);

                });

                

                // 带确定、取消按钮提示框，支持事件回调，及message等属性配置

                $("#confirm").click(function () {

                    $.confirm({

                        message: "你确定要删除吗？",

                        okText: "确定",

                        cancelText: "取消",

                        onOk: function () {

                            alert("你点击了确定按钮");

                        },

                        onCancel: function () {

                            alert("你点击了取消按钮");

                        }

                    });

                });    

                

                // 警告提示框 对象模式配置css、message、按钮文本提示

                $("#alert").click(function () {

                    $.alert({

                        message: "你确定要删除吗？",

                        okText: "确定",

                        css: {

                            "background-color": "white",

                            "color": "red"

                        },

                        onOk: function () {

                            alert("你点击了确定按钮");

                        }

                    });

                });

                

                // 非对象配置属性，多个参数配置

                /**

                  $.confirm 方法参数config配置介绍：

                  当第一个参数是一个对象：

                  对象中可以出现以下属性配置，并且可以出现$.blockUI的配置

                      {

                        message: arguments[i++] || "default confirm message!",

                        onOk: arguments[i++] || _options.emptyHandler(),

                        onCancel: arguments[i++] || _options.emptyHandler(),

                        okText: arguments[i++] || "ok",

                        cancelText: arguments[i] || "cancel"

                    }

                    message 是提示框的提示信息

                    onOk是确定按钮的click回调函数

                    onCancel 是取消按钮的click事件回调方法

                    okText是ok按钮的文字 默认是ok

                    cancelText是cancel按钮的文本内容

                  

                  如果第一个参数不是一个对象，那么

                      参数1表示 message 及提示文字

                    参数2表示ok按钮的click事件回调函数

                    参数3表示cancel按钮的click事件回调函数

                    参数4表示ok按钮的文本

                    参数5表示cancel按钮的文本内容

                    

                  注意：如果第一参数是一个对象，后面又出现了相应的参数配置；这种情况下对象配置优先于

                  后面的参数配置，而且参数的位置也会改变：

                      参数1是对象配置

                    参数2表示 message 及提示文字

                    参数3表示ok按钮的click事件回调函数

                    参数4表示cancel按钮的click事件回调函数

                    参数5表示ok按钮的文本

                    参数6表示cancel按钮的文本内容

                */

                $("#confirm2").click(function () {

                    $.confirm({ message: "is a message", timeout: 3000 }, "message", function () {

                            alert("success");

                        }, function () {

                            alert("failure");

                        }, "按钮");

                });    

                

                /**

                   第一个参数是对象配置，当对象配置中出现的选项会覆盖后面的参数配置

                   $.alert 方法 config 介绍：

                   当第一个参数 是一个对象：

                     {

                         message: arguments[i++] || "default alert message!",

                         onOk: arguments[i++] || _options.emptyHandler(),

                         okText: arguments[i] || "ok"

                    }

                    message 是提示框的提示信息

                    onOk是确定按钮回调函数

                    okText是ok按钮的文字 默认是ok

                    

                  当第一个参数不是一个对象的情况下，那么

                    参数1表示 message 及提示文字

                    参数2表示ok按钮的click事件

                    参数3表示ok按钮的文本

                    

                    注意：如果第一个参数是一个对象，对象中出现的配置：message、onOk、okText，这些配置将会

                    覆盖后面的配置，也就是说这些配置在第一个参数中出现后，后面的参数就不需要

                 */

                $("#alert2").click(function () {

                    $.alert({

                        css: {

                            "background-color": "red"

                        },

                        timeout: 1200,

                        onOk: function () {

                            alert("确定");

                        }

                    }, 

                    "你有一条消息", 

                    function () {

                        alert("被覆盖");

                    }, "yes?");

                });        

                

                var _confirm = function (msg) {

                    $.confirm({

                        message: msg,

                        onOk: function () {

                            alert("你点击了确定按钮");

                        },

                        onCancel: function () {

                            alert("你点击了取消按钮");

                        }

                    });

                };

                $("#confirm3").click(function () {

                    _confirm("message");

                });        

                

                var _alert = function (msg) {

                    $.alert({

                        message: msg,

                        css: {

                            "background-color": "white",

                            "color": "red"

                        },

                        onOk: function () {

                            alert("你点击了确定按钮");

                        }

                    });

                }

                $("#alert3").click(function () {

                    _alert();

                });    

            });

        })(jQuery);

    </script>

    

  </head>

      

  <body>

      <ul>

          <h2>jQuery blockUI Dialog Demos</h2>

          <li>dialog demo <input type="button" value="dialog" id="dialog"/></li>

          <li>confirm callback demos<input type="button" value="confirm" id="confirm"/></li>

          <li>confirm callback demos 2<input type="button" value="confirm" id="confirm2"/></li>

          <li>confirm callback demos 3<input type="button" value="confirm" id="confirm3"/></li>

          <li>alert callback demos<input type="button" value="alert" id="alert"/></li>

          <li>alert callback demos 2<input type="button" value="alert" id="alert2"/></li>

          <li>alert callback demos 3<input type="button" value="alert" id="alert3"/></li>

      </ul>

      

      <div style="display: none;">

          <div id="callback">

              <p>ok or cancel? asdfaf jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos</p>

              <input type="button" value="OK" class="btn ok-btn"/>

              <input type="button" value="Cancel" class="btn cancel-btn"/>

          </div>

      </div>

  </body>

</html>

截图效果

confirm

alert

原文链接：http://www.cnblogs.com/hoojo/archive/2012/01/05/2313059.html

jQuery Rounded Corners

各种圆角，太犀利了。有了这个，你还在为你的圆角实现准备N张图片来拼凑么？

青松雪舞-必应的美丽世界

貌似bing的首页一直都挺有创意的，这就是某一次首页的一张瀑布动画的图片，美丽的雪松，豪迈的瀑布，给力。需要HTML5支持，最好用chrome，所以就麻烦你切换成支持HTML5的浏览器看了。==！加载会有点慢，要等等。

Google首页纪念美国粘土动画大师阿特·克洛基【示例及源码】

这个是Google为纪念美国粘土动画大师阿特克洛基而制作的粘土小人动画，相当给力。

一个用纯CSS3制作的人物步行动画

这个特效是用纯CSS3制作而成，模拟人物的步行，震憾呐。当然这个需要比较新的firefox和chrome才能观看。

非常简洁的jQuery图片横向滚动示例及源码下载

这个特效比较朴实，一个基于jQuery的图片横向播放动画，十分实用。

JS仿微博的图片缩放和旋转示例及源码下载

微博大家都用过，在看那些图片帖子时，你可以放大缩小和翻转图片，下面的这个就是这些功能，赶紧下载试试吧。

jquery乌鸦飞行动画

这只乌鸦够萌的，貌似飞得好开心的样子，一起来围观吧。

jQuery结合CSS实现右上角翻页效果示例及源码

这是一个网页右上角撕页效果，用来放些广告比较合适，既大气又能尽可能小地给用户带来麻烦。

好了，就先搞这些了，下回再说。

转载请自觉注明来源：http://www.itivy.com/jquery/archive/2012/1/7/some-image-effects.html

Kwicks for jQuery

这个导航非常有个性，鼠标滑过，导航渐渐展开，效果不错，可以看看。

在线示例

仿支付宝的产品推广精美导航【源码下载】

这是一个仿支付宝的产品推广导航，我想说这几个图标不错，还能分屏展示。

仿猪八戒2010首页的导航【源码下载】

猪八戒网是国内最大的威客平台网站，下面是它2010年时的导航，当然现在已经改版了，不过看起来还是挺不错的样子。

左侧弹出导航

这款导航又是比较有个性的一个，它固定在左侧栏，等你鼠标滑过去就展开来，挺润滑的。

jQuery竖向弹性导航

这个导航是基于jQuery的，是有弹性伸缩的竖向导航，还不错。

仿Flash的Javascript+CSS的滑动菜单【源码下载】

这个导航的特点是它类似Flash的滑动特效，是用js和css实现的。

MAC样式的导航【源码下载】

这个是仿MAC的导航，可能很多朋友都已经看到过了，但是很经典，所以我还是把它发了上来，没看过的小盆友可要收藏了哦。

其实呢，还有很多导航，只是觉得那些大家应该大部分都看过了，于是我把这几个我觉得最给力的导航拿了出来与大家分享。就这样吧。想想下次分享什么了呢，大家有建议么

另外，转载请表明原文来自：http://www.itivy.com/jquery/archive/2012/1/5/634614034589573026.html

英文原文中有些重复和打不开链接的例子我去掉了。

注：转载请注明以下信息，否则保留那个什么的权利

英文原文：http://speckyboy.com/2010/05/26/20-awesome-jquery-enhanced-css-button-techniques/

译文链接：http://www.itivy.com/jquery/archive/2012/1/5/jquery-css-button.html

Creative Button Animations with Sprites and jQuery

这篇文章主要是展示了一个利用css sprites和jquery实现的鼠标滑过按钮的效果，第一部分教程主要告诉大家如何利用ps等画图工具制作这个精美的按钮。第二部分教程主要是将设计好的按钮图转换成HTML和CSS，并利用jQuery给这个按钮加上动画特效。

第一部分教程    |    第二部分教程    |    在线示例

GitHub-Style Buttons with CSS and jQuery (or MooTools, or the Dojo JavaScript)

这个按钮教程主要是介绍了一个仿GitHub的按钮特效，用到了一点点HTML、CSS、jQuery。

查看教程    |    在线示例

Cross-Browser Rounded Buttons with CSS3 and jQuery

这是一个带圆角的jquery按钮，放心，你不必担心在不同浏览器中会没有圆角，因为他几乎兼容所有版本的浏览器，包括IE6。

查看教程    |    在线示例

jQuery Imageless Buttons a la Google

这个jquery按钮则是仿Google搜索的按钮，你可以用少量的css代码去自定义这些按钮的样式。

查看教程    |    在线示例

Animated “Call to Action” Button

这个jquery按钮也是一个鼠标滑过特效，鼠标滑过时按钮出现渐变效果。

查看教程    |    在线示例

Nice Menu : CSS Animation & jQuery Animate

这个jquery按钮也是鼠标滑过特效，不同的是，当鼠标滑过时，按钮的padding发生变化，并且是带有动画的哦。

查看教程    |    在线示例

Skype-Like Buttons Using jQuery

这个jquery按钮非常有特色，是仿Skype的，当你鼠标移上去的时候，呵呵，自己去试试，我不说了。

查看教程    |    在线示例

jQuery iPhone Style Ajax Switch

呵呵，又是一个比较有特色的jquery按钮，这个是仿iPhone开锁键的，还不错，可以看看。

查看教程    |    在线示例

jQuery UI CSS Framework Buttons and Toolbars

OH，这个NB了，这是基于jquery ui的按钮，这个jquery按钮也可以用来做工具栏的按钮，真棒！

查看教程    |    在线示例

Simple "Call To Action" Button With CSS & jQuery

这个jquery按钮也是简单的鼠标移过特效，个人觉得还挺大气的。

查看教程    |    在线示例

Create a Simple Interactive CSS Button with jQuery

这个jquery按钮则是专为提交表但设计的，用Ajax提交的时候按钮出现一张waiting的gif图片，由此可见，这个按钮是重写过的，不信你自己看看。

查看教程    |    在线示例

Button Hover Fading Transition with jQuery

这个按钮其实也是一个鼠标滑过特效啦，在“ON”和“OFF”之间切换。

查看教程    |    在线示例

Cursor Hover Plugin

一个简单的jquery鼠标滑过渐变按钮，不多说，自己看。

查看教程    |    在线示例

jQuery hashchange event

这也是一个非常基本的jquery按钮，你可以自己定义一些颜色，其实个人觉得，只要颜色搭配好，即使简单的按钮也能炫目多彩。

查看教程    |    在线示例

Awesome CSS3 & jQuery Slide Out Button

这个jquery按钮也非常有特点，鼠标移上去，按钮立即展开，非常帅气。

查看教程    |    在线示例

好了，上面的这些jquery css按钮就介绍完了，是否有你喜欢的呢？请告诉我，我期待我的发现得到你的肯定。

在移动领域，除了对设备特定属性的支持之外，最主要的一个问题就是程序的大小，正如Aaron Quint所说：

JQM Alpha 3现在已经精简到17K，其中还有相关的CSS文件。

Enrique Ortiz还发现了JQM的其他优势：

◆总体上的简单性： 你可以主要使用标签驱动的方式开发页面，那样，你只需要使用很少或者不使用JavaScript。

◆进一步改善和得体的降格： jQuery Mobile哲学是要同时支持高端和性能较差的设备，包括那些不支持JavaScript的设备，并且还要尽可能提供最佳体验。

◆可访问性： jQuery已经支持可访问的富Internet应用程序(WAI-ARIA)，以有助于使用辅助技术让有残疾的访问者也能够访问网页。

◆小文件

◆主题

安装JQM很简单，只需要添加一个样式表文件和三个JavaScript文件：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1 /jquery.mobile-1.0a1.min.css" />  
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>  
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"> </script>  
<script src="http://jquery.ibm.navitend.com/utils.js"></script> 

此外，Frank还提到，在移动领域JQM的关键优势就在于，它能够使用AJAX让用户界面更平滑：

这种效果是通过使用HTML5的data-*属性达到的。在HTML5中，任何带有data-前缀的属性本质上都会被验证解析器忽略，而应用程序可以任意地拦截那些属性。JQM依赖于data-role属性把它的核心功能组合成字符串。

我们可以使用data-rel属性请求窗口如何显示，当它显示出来的时候，data-transition属性会告诉JQM做出相应的转换。我们可 以使用data-filter属性来指定data-role列表的行为，而该列表可以基于输入的关键字来过滤列表的值。Frank还说明了如何创建自定义 的data-*属性，从而实现应用程序的特殊属性。

JQM会在今年上半年发布。Frank最后做出结论：

你认为基于Web的移动应用程序有前途吗? 这只是框架和开发是否简单的问题，还是移动应用程序非常特殊(因为用户会使用自己的客户端，并期望获得最好的用户体验和安全性)以致于基于Web的应用程序只会成为新平台上的边缘程序。

查看英文原文：Using JQuery Mobile and JSON to Create Mobile Applications

就是类似这种幻灯片：

下面是HTML结构和CSS样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style> 
.Marquee{ width:490px; margin:50px auto 0; overflow:hidden;}  
body,div,ul,li{ margin:0; padding:0;}  
ul,li{ list-style:none;}  
img{ display:block; border:none;}  
.content-main{ width:490px; height:170px; overflow:hidden;}  
.content{ width:490px; height:170px; overflow:hidden;}  
.hide{ display:none;}  
.menu{ width:490px; height:22px; overflow:hidden; background:#966;}  
.menu li{ width:160px; height:22px; overflow:hidden; float:left; line-height:22px; text-align:center;}  
.menu li.last-col{ width:170px; height:22px; overflow:hidden;}  
.current{ background: #F00;}  
.content a{ width:490px; height:170px; overflow:hidden; display:block;}  
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>   
<script src="autoTab.js"></script> 
</head> 
 
<body> 
    <div id="Marquee" class="Marquee">   
        <div class="content-main"> 
            <div class="content"><a href="#" target="_blank"><img  src="images/1.jpg"/></a></div> 
            <div class="content hide"><a href="#" target="_blank"><img  src="images/2.jpg"/></a></div> 
            <div class="content hide"><a href="#" target="_blank"><img  src="images/3.jpg"/></a></div> 
        </div> 
        <ul class="menu"> 
            <li class="current">tab1</li> 
            <li>tab2</li> 
            <li class="last-col">tab3</li> 
        </ul> 
    </div>   
    <script type="text/javascript"> 
        new tabMarquee("#Marquee",3);  
    </script> 
</body> 
</html> 

// JavaScript Document  
 
function tabMarquee(obj,count){  
    _this = this;  
    _this.obj = obj;  
    _this.count = count;  
    _this.time = 3000;  //停留的时间  
    _this.n = 0;  
    var t;  
    this.slider = function(){  
        $(_this.obj + " .menu li").bind("mouseover",function(event){  
            $(event.target).addClass("current").siblings().removeClass("current");  
            var index = $(_this.obj + " .menu li").index(this);  
            $(_this.obj + " .content-main .content").eq(index).show().siblings().hide();  
            _this.n = index;      
        })  
    }  
      
    this.addHover = function(){  
        $(_this.obj).hover(function(){  
            clearInterval(t);     
        },function(){  
            t = setInterval(_this.autoPlay,_this.time);   
        })    
    }  
    this.autoPlay = function(){  
        _this.n = _this.n >=(_this.count-1) ? 0 : ++_this.n;  
        $(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");      
    }  
    this.factory = function(){  
        this.slider();  
        this.addHover();  
        t = setInterval(this.autoPlay,_this.time);    
    }  
    this.factory();  
}

源代码下载

原文链接：http://tugenhua.blog.51cto.com/3912301/726649

B请求新闻所产生的页面有A的js生成。

A提供<script type="text/javascript" src="http://newsdomain/js/news.js" > </script> 来让B 引入。

首先js的写法。news.js中

function requestNews(page,key,from,to,sort,language){
$.getJSON("http://"+domain+"/requestNews/getNews?mehtod=splitPage&page="+page+"&key="+k+"&from="+from+"&to="+to+"&sort="+sort+"&language="+language+"&jsonpcallback=?",null,function call(json){
alert(json.info);
});
}

String callBack = req.getParameter("jsonpcallback");
String  strJson = {"info":"aaaa"};
String result = callBack (strJson);// 这里很重要。

resp.setContentType("application/json;charset=UTF-8"); //这里的格式是json
resp.setHeader("Cache-Control","no-cache");
PrintWriter out = resp.getWriter();
out.print(callBack); // 这是是print 不是write。
out.close();

一、首先需要知道的是：

1、keydown()

     keydown事件会在键盘按下时触发.

2、keyup()

     keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件

3、keypress()

     keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键

二、获得键盘上对应的ascII码：

      $(document).keydown(function(event){ 
              console.log(event.keyCode); 
      });

三、实例（当按下键盘上的左右方面键时）

      $(document).keydown(function(event){

          //判断当event.keyCode 为37时（即左方面键），执行函数to_left();

          //判断当event.keyCode 为39时（即右方面键），执行函数to_right();

          if(event.keyCode == 37){

             //do something;
          }else if (event.keyCode == 39){ 
             //do something;
          } 
      });

比如：小说网站中常见的按左右键来实现上一篇文章和下一篇文章；按ctrl+回车实现表单提交；google reader和有道阅读中的全快捷键操作...（以此提高用户体验）

① 实现ctrl+Enter就是ctrl+回车提交表单：

$(document).keypress(function(event) {

      if (event.ctrlKey && event.which == 13)

     $("form:first").trigger("submit");

 })

$(document).keydown(function(event){

       //（ctrlKey和metaKey等效：都是监测）按下ctrl返回turn，按下非ctrl键返回false；

       console.log(event.ctrlKey);

       //console.log(event.metaKey);          

})

$(document).keydown(function(event){  

    var e = event || window.event;     //作用？？？

    var k = e.keyCode || e.which;  //获取按键的acdII 码

    switch(k) {

       case 37:

           //…

           break;

       case 39:

           //…

           break;

    }

    return false;

})

       //另外发现一个应用的方法：当页面转载完成的时候，第一个表单元素获得焦点，以便输入

       $("input[type=text]:first").trigger("focus");     

       //当表单没获得焦点，但用户却按下键盘的时候，自动为用户定位焦点到输入框上

       $(document).keydown(function(){

              $("input[type=text]:first").trigger("focus");

       })

该jquery 3d文字插件的代码如下，使用时可以把该代码直接引入到页面上或者放入单独的JS文件中然后引入到页面中：

(function($){

	$.fn.textDepth = function(ops){
		var defaultOptions = {
			depth: 3,
			wrapper: "body",
			shade_color: '#c7c7c7',
			gradient: true,
			extra_classes: "",
			direction: "downRight"
		};
		var layers = [];
		
		return this.each(function(){
			var options = $.extend({}, defaultOptions, ops);
			var t = $(this);
			var def_class = "textDepthSuperDuperClass" + t.attr('id');
			
			if(t.css('position') == 'relative' || t.css('position') == 'absolute'){
				if(options.wrapper != null){
				
					if(t.css('z-index') < options.depth || t.css('z-index') == "auto")
						t.css('z-index', (options.depth + 1));
				
					//Remove previous remains:
					$('.' + def_class).remove();
					
					var t_top = parseInt(t.css('top'));
					var t_left = parseInt(t.css('left'));
					var z_index = parseInt(t.css('z-index'));
					var opacity = 1.0;

					for(var i = 0; i < options.depth; i++){
						switch(options.direction){
							case "downRight":
								t_top++;
								t_left++;
								break;
								
							case "downLeft":
								t_top++;
								t_left--;
								break;
								
							case "upRight":
								t_top--;
								t_left++;
								break;
								
							case "upLeft":
								t_top--;
								t_left--;
								break;
								
							case "up":
								t_top--;
								break;
								
							case "left":
								t_left--;
								break;
								
							case "right":
								t_left++;
								break;
								
							case "down":
								t_top++;
								break;
						}
						
						z_index--;
						opacity = 1 - parseFloat((i / options.depth));
						
						var shadeDiv = $(document.createElement('div')).css({'position':'absolute',
																			 'top':t_top,
																			 'left':t_left,
																			 'color':options.shade_color,
																			 'z-index':z_index
																			 })
																	   .addClass(options.extra_classes)
																	   .addClass(def_class)
																	   .html(t.html());
						
						if(options.gradient)
							shadeDiv.css('opacity', opacity);
							
						$(options.wrapper).append(shadeDiv);
					}
				}
			}
		});
	};
})(jQuery);

$('.foo').textDepth({
   wrapper: "body",
   shade_color: "#6f6f6f",
   depth: 7,
   direction: "downRight",
   extra_classes: "sidebarText"
});

$(".foo")即为class是foo的文字渲染3d效果；

wrapper：即一个范围，在这个范围中，class为foo的文字会被渲染；

shade_color：也就是投影的颜色啦；

depth：投影的深度；

direction：投影方向，有如下几种选择：downRight、downLeft、upRight、upLeft、up、left、right、down；

extra_classes：为文字额外附加的class，多个的话用空格隔开。

html代码结构:

<a href=""><img src="images/tmp_376x470.jpg" width="300" height="300" alt=""/></a>
<a href=""><img src="images/tmp_409x265.jpg" width="300" height="300" alt=""/></a>
<a href=""><img src="images/tmp_572x367.jpg" width="300" height="300" alt=""/></a>

a{width:300px;height:300px;background:#fff;border:1px solid #666;display:inline-block} /* 这里需要指定a标签的高宽,背景和边框为可选 */  

$(function () {
	var imgs = $('a>img');
	imgs.each(function () {
		var img = $(this);
		var width = img.attr('width');//区域宽度
		var height = img.attr('height');//区域高度
		var showWidth = width;//最终显示宽度
		var showHeight = height;//最终显示高度
		var ratio = width / height;//宽高比
		img.load(function () {
			var imgWidth, imgHeight, imgratio;
			$('<img />').attr('src', img.attr('src')).load(function () {
				imgWidth = this.width;//图片实际宽度
				imgHeight = this.height;//图片实际高度
				imgRatio = imgWidth / imgHeight;//实际宽高比
				if (ratio > imgRatio) {
					showWidth = height * imgRatio;//调整宽度太小
					img.attr('width', showWidth).css('margin-left', (width - showWidth) / 2);
				} else {
					showHeight = width / imgRatio;//调高度太小
					img.attr('height', showHeight).css('margin-top', (height - showHeight) / 2);
				}
			});
		});
	});
});

原文链接：http://blog.csdn.net/yorts52/article/details/6938359

好吧，说到这里，就请出今天的主角吧，他是一款比较轻量级的jquery文字投影插件叫CSS-3 Text-Shadow，使用之前先来看看几张效果图吧。

该项目的主页地址：http://www.hintzmann.dk/testcenter/js/jquery/textshadow/

下面我简单介绍下这个文字阴影插件的使用方法吧。

1、当然先要在页面上引入jquery主库和jquery.textshadow.js 脚本库，具体就不讲了，你懂的。

2、为你要实现阴影效果的文字加上CSS属性，如要为H1文字加阴影特效，那么CSS代码如下：

h1 { 
  text-shadow: 2px 2px 2px #999; 
}

3、调用textShadow()来实现上面定义的阴影CSS，注意，这个需要在DOM加载完成才可以调用，代码如下：

$(document).ready(function(){
  $("h1").textShadow();
})

var option = {
  x:      1, 
  y:      2, 
  radius: 3,
  color:  "#ccff00"
}

$("h1").textShadow( option );

是吧，很简单，短短的几行代码就可以帮助你实现兼容各种版本浏览器的jquery文字阴影效果，如果你喜欢，可以把本文分享给你的同事或者朋友，帮助他们简化繁琐的开发。

如果你要转载，也可以，不过请注明出处和原文链接，谢谢合作！

jQuery news ticker是一个使用非常便捷的jQuery插件，能够非常方便地让你生成类似上图所示的一个新闻行情效果。插件的demo演示

它能够通过列表，HTML甚至是RSS（只能加载本站的RSS feed）来生成新闻内容，并且支持前后播放和停止。这个插件支持一系列的自定义选项，例如：

• 播放速度
• 播放效果
• 播放方向
• 显示时间

<link href="css/ticker-style.css" rel="stylesheet" type="text/css" />
<script src="jquery.ticker.js" type="text/javascript"></script>

<div id="ticker-wrapper" class="no-js">
    <ul id="js-news" class="js-hidden">
        <li class="news-item"><a href="#">This is the 1st latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 2nd latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 3rd latest news item.</a></li>
        <li class="news-item"><a href="#">This is the 4th latest news item.</a></li>
    </ul>
</div>

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker();
    });
</script>

1、Slides

这是一个比较流畅的jquery图片播放插件，颇有iphone图片特效的感觉

2、Face Detection

这个一看插件名称就知道这个特效是干嘛了吧，是的，这个jquery图片特效插件正式用来圈人脸的，非常给力哦。

3、AviaSlider

这亦是一个jquery图片播放插件，与第一个不同的是，这个在切换播放的时候可以加上切换特效，非常炫。

4、Fullscreenr

顾名思义，这个jquery图片特效插件是用来图片全屏显示用的，有时候我们正在苦恼如何让网页背景图全屏显示，于是，这个插件就能帮上你了，很酷吧。

5、MobilyNotes

这个图片播放插件与其他的又有点不太一样，图片切换时仿佛是从底部一张张抽取出来一样，别有一番风味。

6、Fancy Thumbnail Hover Effect w/ jQuery

这是一个基于jquery的鼠标滑过特效，当你把鼠标滑过时缩略图就能放大，这个图片特效有点像google图片搜索中的图片浏览形式。

好了，我个人觉得这6个jquery图片特效非常诱人，于是便拿出来分享了，当然以上有些jquery图片特效你可能已经看到过了，那恭喜你，你是一个见多识广的web前端开发狂人，本人自惭形秽。最后，希望上面的这几个jquery图片特效能帮到有需要的朋友。

再最后，本文欢迎转载，但请注明出处：jquery资源宝库    并在文章明显处注明原文链接，否则，你懂的。

再再最后，推荐几个你可能还会比较感兴趣的文章：

一款很炫的jquery图片播放插件Cloud Carousel

jquery和css3打造桌面式图片浏览插件

一款仿苹果样式的jquery图片播放插件【附源码】

一款基于jquery的媒体和图片浏览插件YoxView

再再再最后，在欢笑中结束本文，谢谢阅读！

上例中得到的JSON数据如下，是一个嵌套JSON：

{"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]}

获取JSON数据，在jQuery中有一个简单的方法 $.getJSON() 可以实现。

下面引用的是官方API对$.getJSON()的说明：

jQuery.getJSON( url, [data,] [success(data, textStatus, jqXHR)] )

urlA string containing the URL to which the request is sent.

dataA map or string that is sent to the server with the request.

success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds.

回调函数中接受三个参数，第一个书返回的数据，第二个是状态，第三个是jQuery的XMLHttpRequest，我们只使用到第一个参数。

$.each()是用来在回调函数中解析JSON数据的方法，下面是官方文档：

jQuery.each( collection, callback(indexInArray, valueOfElement) )

collectionThe object or array to iterate over.

callback(indexInArray, valueOfElement)The function that will be executed on every object.

$.each()方法接 受两个参数，第一个是需要遍历的对象集合（JSON对象集合），第二个是用来遍历的方法，这个方法又接受两个参数，第一个是遍历的index，第二个是当 前遍历的值。哈哈，有了$.each()方法JSON的解析就迎刃而解咯。(*^__^*) 嘻嘻……

function loadInfo() {
    $.getJSON("loadInfo", function(data) {
        $("#info").html("");//清空info内容         $.each(data.comments, function(i, item) {
            $("#info").append(
                    "<div>" + item.id + "</div>" + 
                    "<div>" + item.nickname    + "</div>" +                     "<div>" + item.content + "</div><hr/>");
        });
        });
}

正如上 面，loadinfo是请求的地址，function(data){...}就是在请求成功后的回调函数，data封装了返回的JSON对象，在下面 的$.each(data.comments,function(i,item){...})方法中data.comments直接到达JSON数据内包 含的JSON数组：

[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}]

$.each()方法中的function就是对这个数组进行遍历，再通过操作DOM插入到合适的地方的。在遍历的过程中，我们可以很方便的访问当前遍历index(代码中的”i“)和当前遍历的值(代码中的”item“)。

上例的运行结果如下：

如果返回的JSON数据比较复杂，则只需多些$.each()进行遍历即可，嘿嘿。例如如下JSON数据：

{"comments":[{"content":"很不错嘛","id":1,"nickname":"纳尼"},{"content":"哟西哟西","id":2,"nickname":"小强"}],
"content":"你是木头人，哈哈。","infomap":{"性别":"男","职业":"程序员",
"博客":"http:\/\/www.cnblogs.com\/codeplus\/"},"title":"123木头人"}

js如下：

function loadInfo() {
    $.getJSON("loadInfo", function(data) {
        $("#title").append(data.title+"<hr/>");
        $("#content").append(data.content+"<hr/>");
        //jquery解析map数据
        $.each(data.infomap,function(key,value){
            $("#mapinfo").append(key+"----"+value+"<br/><hr/>");
        });
        //解析数组
        $.each(data.comments, function(i, item) {
            $("#info").append(
                    "<div>" + item.id + "</div>" + 
                    "<div>" + item.nickname    + "</div>" +
                    "<div>" + item.content + "</div><hr/>");
        });
        });
}

值得注意的是，$.each()遍历Map的时候，function()中的参数是key和value，十分方便。

上例的运行效果：

原文链接

事件模型

说到事件，就要追溯到网景与微软的“浏览器大战”了。当时，事件模型还没有标准，两家公司的实现就是事实标准。网景在Navigator中实现了 “事件捕获”的事件系统，而微软则在IE中实现了一个基本上相反的事件系统，叫做“事件冒泡”。这两种系统的区别在于当事件发生时，相关元素处理（响应） 事件的优先权不同。

下面举例说明这两种事件机制的区别。假设文档中有如下结构：

<div>
    <span>
        <a>...</a>
    </span>
</div>

后来，W3C的规范要求浏览器同时支持捕获和冒泡机制，并允许开发人员选择把事件注册到哪个阶段。于是就有了下面这个注册事件的标准方法：

target.addEventListener(type, listener, useCapture Optional );

• type：字符串，表示监听的事件类型
• listener：监听器对象（JavaScript函数），在指定事件发生时可以收到通知
• useCapture：布尔值，是否注册到捕获阶段

在实际应用开发中，为了确保与IE（因为它不支持捕获）兼容，useCapture一般都指定为false（默认值也是false）。换句话说，只把事件注册到冒泡阶段；对于上面那个简单的例子来说，响应顺序就是：a > span > div。

冒泡的副作用

如前所述，IE的冒泡事件模型基本上成为了事实标准。但冒泡有一个副作用。

仍以前面的文档结构为例，假设它是界面中的一个菜单项，我们希望用户鼠标离开div时隐藏菜单。于是，我们给div注册了一个mouseout事 件。如果用户鼠标是从div离开的，那么一切正确。而如果用户鼠标是从a或span离开的，问题就来了。因为由于事件冒泡，从这两个元素开始分派的 mouseout事件都会传播到div，从而导致鼠标并没有离开div，菜单就提前隐藏了。

当然，冒泡的副作用不难避免。比如，给div内部的每个元素都注册mouseout事件，并使用.stopPropagation()方法阻止事件 进一步传播。对于IE，就得将事件对象的cancelBubble属性设置为false，取消事件冒泡。不过，这仍然回到自己处理浏览器不兼容性问题的老 路上了。

优化方案

为了避免冒泡的副作用，jQuery提供了mouseenter和mouseleave事件，就使用它们来代替mouseover和mouseout吧。

下面这个摘自jQuery的内部函数withinElement，就是为mouseenter和mouseleave提供支持的。翻译了一下注释，仅供大家参考。

// 下面这个函数用于检测事件是否发生在另一个元素的内部
// 在 jQuery.event.special.mouseenter 和 mouseleave 处理程序中使用
var withinElement = function( event ) {
    // 检测 mouse(over|out) 是否还在相同的父元素内
    var parent = event.relatedTarget;

    // 设置正确的事件类型
    event.type = event.data;

    // Firefox 有时候会把 relatedTarget 指定一个 XUL 元素
    // 对于这种元素，无法访问其 parentNode 属性
    try {

        // Chrome 也类似，虽然可以访问 parentNode 属性
        // 但结果却是 null
        if ( parent && parent !== document && !parent.parentNode ) {
            return;
        }

        // 沿 DOM 树向上
        while ( parent && parent !== this ) {
            parent = parent.parentNode;
        }

        if ( parent !== this ) {
            // 如果实际正好位于一个非子元素上面，那好，就处理事件
            jQuery.event.handle.apply( this, arguments );
        }

    // 假定已经离开了元素，因为很可能鼠标放在了一个XUL元素上
    } catch(e) { }
},

结论

在jQuery里，可以使用mouseenter和mouseleave事件来避免事件冒泡的副作用。

原文链接：http://www.ituring.com.cn/article/420

其官方网站：http://trentrichardson.com/Impromptu/index.php

在我们引入了这个库之后，我们可以使用一个最简单的调用方式：

$.prompt('Example 1');

正如大家看到的，非常简单的代码就能构造出一个很不错的对话框，当然这个插件的功能不止这些，还能更加强大，下面我就再举几个例子。

我们还可以自定义对话框中显示的内容，甚至是定制我们自己的HTML，并且为对话框中的按钮指定回调事件：

var txt = 'Please enter your name:<br />
    <input type="text" id="alertName" 
    name="alertName" value="name here" />';
    
function mycallbackform(v,m,f){
    if(v != undefined)
    $.prompt(v +' ' + f.alertName);
}

$.prompt(txt,{
    callback: mycallbackform,
    buttons: { Hey: 'Hello', Bye: 'Good Bye' }
});

当我们点击 Hey这个按钮之后，就会触发相应的回调事件，在我们的回调事件中，是弹出了另外一个对话框来显示问候信息：

我们还可以通过改变它的CSS前缀来修改对话框的外观：

var brown_theme_text = '<h3>Example 13</h3>'+
    '<p>Save these settings?</p>'+

    '<img src="images/help.gif" alt="help" '+
    'class="helpImg" />';
$.prompt(brown_theme_text,{
    buttons:{Ok:true,Cancel:false}, 
    prefix:'brownJqi'
});

好了，这个JQuery Impromptu插件就简单介绍到这里了，希望对大家有帮助

• .ui-helper-hidden: Applies display: none to elements. (隐藏元素，适用于display:none可以隐藏的元素)
• .ui-helper-hidden-accessible: Applies accessible hiding to elements (via abs positioning off the page) (隐藏元素，适用于绝对定位的元素，直接裁剪为1×1px的大小)
• .ui-helper-reset: A basic style reset for UI elements. Resets things such as padding, margins, text-decoration, list-style, etc. (进行复位)
• .ui-helper-clearfix: Applies float wrapping properties to parent elements
• .ui-helper-zfix: Applies iframe "fix" css to iframe elements when needed in overlays.

Widget Containers(控件容器)

• .ui-widget: Class to be applied on outer container of all widgets. Applies font family and font size to widget. Also applies same family and 1em font size to child form elements specifically, to combat inheritance issues in Win browsers. (容器，主要设置字体和字体大小)
• .ui-widget-header: Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons. (容器标题区)
• .ui-widget-content: Class to be applied to content containers. Applies content container styles to an element and its child text, links, and icons. (can be applied to parent or sibling of header)(容器内容区)

Interaction States(交互状态)

• .ui-state-default: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons. (默认状态)
• .ui-state-hover: Class to be applied on mouseover to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons. (鼠标移到元素上时的状态)
• .ui-state-focus: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons. (元素获得焦点时的状态)
• .ui-state-active: Class to be applied on mousedown to clickable button-like elements. Applies "clickable active" container styles to an element and its child text, links, and icons.(激活（在鼠标点击与释放之间发生的事件）的元素的状态)

Interaction Cues(交互提示)

• .ui-state-highlight: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons. (高亮状态)
• .ui-state-error: Class to be applied to error messaging container elements. Applies "error" container styles to an element and its child text, links, and icons. (错误状态)
• .ui-state-error-text: An additional class that applies just the error text color without background. Can be used on form labels for instance. Also applies error icon color to child icons. (错误状态，不包括图标)
• .ui-state-disabled: Applies a dimmed opacity to disabled UI elements. Meant to be added in addition to an already-styled element. (禁用的状态)
• .ui-priority-primary: Class to be applied to a priority-1 button in situations where button hierarchy is needed. Applies bold text. (首要终点)
• .ui-priority-secondary: Class to be applied to a priority-2 button in situations where button hierarchy is needed. Applies normal weight text and slight transparency to element.(次要重点)

Icons(图标)

States and images(状态和图片)

• .ui-icon: Base class to be applied to an icon element. Sets dimensions to 16px square block, hides inner text, sets background image to "content" state sprite image. Note: .ui-icon class will be given a different sprite background image depending on its parent container. For example, a ui-icon element within a ui-state-default container will get colored according to the ui-state-default's icon color.(不同的状态是不同的图片)

有如下几种：

1.ui-icon (默认图标)
2.ui-widget-content .ui-icon (容器中内容图标)
3.ui-widget-header .ui-icon (容器中标题图标)
4.ui-state-default .ui-icon (默认状态图标)
5.ui-state-hover .ui-icon, .ui-state-focus .ui-icon (鼠标移动到上方时或获得焦点时图标)
6.ui-state-active .ui-icon (激活时图标)
7.ui-state-highlight .ui-icon (高亮时图标)
8.ui-state-error .ui-icon, .ui-state-error-text .ui-icon (错误时图标)

Icon types

After declaring a ".ui-icon" class, you can follow up with a second class describing the type of icon you'd like. Icon classes generally follow a syntax of .ui-icon-{icon type}-{icon sub description}-{direction}.

For example, a single triangle icon pointing to the right looks like this: .ui-icon-triangle-1-e

jQuery UI's ThemeRoller provides the full set of CSS framework icons in its preview column. Hover over them to see the class name.

Misc Visuals(杂项)

Corner Radius helpers(圆角帮助)

• .ui-corner-tl: Applies corner-radius to top left corner of element. (左上角圆角)
• .ui-corner-tr: Applies corner-radius to top right corner of element. (右上角圆角)
• .ui-corner-bl: Applies corner-radius to bottom left corner of element. (左下角圆角)
• .ui-corner-br: Applies corner-radius to bottom right corner of element. (右下角圆角)
• .ui-corner-top: Applies corner-radius to both top corners of element. (左上和右上角圆角)
• .ui-corner-bottom: Applies corner-radius to both bottom corners of element. (左下和右下角圆角)
• .ui-corner-right: Applies corner-radius to both right corners of element. (右上和右下角圆角)
• .ui-corner-left: Applies corner-radius to both left corners of element. (左上和左下角圆角)
• .ui-corner-all: Applies corner-radius to all 4 corners of element.(四个角全部圆角)

Overlay & Shadow(遮罩层和阴影)

• .ui-widget-overlay: Applies 100% wxh dimensions to an overlay screen, along with background color/texture, and screen opacity. (遮罩层)
• .ui-widget-shadow: Class to be applied to overlay widget shadow elements. Applies background color/texture, custom corner radius, opacity, top/left offsets and shadow "thickness". Thickness is applied via padding to all sides of a shadow that is set to match the dimensions of the overlay element. Offsets are applied via top and left margins (can be positive or negative)(阴影)