jQuery资源宝库

巧妙利用jQuery和PHP打造功能开关效果

jQuery小子 — Thu, 09 Feb 2012 21:52:41 GMT

本文介绍了使用jQuery、PHP和MySQL实现类似360安全卫士防火墙开启关闭的开关，可以将此功能应用在产品功能的开启和关闭功能上。

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

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读取数据表，并以列表的形式展示。

   
      
        
           
class="ad_on" title="点击关闭"class="ad_off" title="点击开启">

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

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

利用jQuery marquee实现响应设计

jQuery小子 — Wed, 08 Feb 2012 21:35:56 GMT

模板的设计综合多屏幕响应式设计和自运行的jQuery marquee(无间断滚动)技术，主要解决的难题是如何根据显示屏幕的大小利用jQuery的Ajax技术加载额外的互操作数据到模板中。利用CSS3 中的媒体查询功能以及包含一组通用的HTML和CSS标签，这个模板提供了非常出色的跨设备的用户体验。

注：关于仅基于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

jquery blockUI 扩展插件 Dialog

jQuery小子 — Mon, 09 Jan 2012 14:55:35 GMT

对jQuery blockUI插件进行了小的封装扩展，支持confirm、alert、dialog弹出窗口提示信息，支持按钮回调事件。可以自定义css样式、覆盖blockUI的样式等

首先要到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 = [

                '',

                '',

                message,

                '',

                '',

                ''

            ].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 = [

                '',

                '',

                message,

                '',

                ''

            ].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%;

}

examples.html





  

    blockUI Dialog Examples

    

    

    

    

    

    

    

    

    

    

    

  

      

  

      

          jQuery blockUI Dialog Demos

          dialog demo 

          confirm callback demos

          confirm callback demos 2

          confirm callback demos 3

          alert callback demos

          alert callback demos 2

          alert callback demos 3

      

      

      

          

              ok or cancel? asdfaf jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos jQuery blockUI Dialog Demos

截图效果

confirm

alert

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

利用jQuery Mobile和JSON建立移动应用程序

jQuery小子 — Tue, 06 Dec 2011 00:16:50 GMT

近来移动应用开发迅速受到很多公司的关注，他们寻求为现存的产品和应用程序添加移动展现或者“触点”。即便不是所有，大部分移动应用开发框架也都会适应某种现存的“桌面”开发平台。基于Web的框架则不同。业界当前采用jQuery来创建移动web应用程序.

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

压缩后的jQuery也大概有40-50K，可能还会稍微多一些，此外，如果你想要jQuery UI和一些动画功能，那么就还需要100K。对于移动设备来说，可能没有那么多空间。

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

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

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

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

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

◆小文件

◆主题

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

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

JQM把Ajax提升了一个层次，这是通过拦截页面请求，并在大多数情况下把这些请求转化为指定的Ajax调用达到的。最基本的结果是，当用户访问使用JQM构建的web应用程序时，只会修改页面的DOM结构，而不是每次都替换所有页面。

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

当JQM应用程序从一个页面切换到下一个页面时，发生的主要动作就是内容div中的内容会换成新页面的内容。

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

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

随着时间的推移，我们期望它能够整合到像PhoneGap之类的框架中，并且可能会整合到像Appcelerator的Titanium等开发环境中。

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

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

分享一个Jquery封装幻灯片效果

jQuery小子 — Tue, 29 Nov 2011 23:31:16 GMT

前几天在我同事博客里面看到一篇幻灯片所以觉得用Jqeury写幻灯片也并不是很难就是和我在博客里面的tab自动切换的原理是一模一样的只是形式不同而已！所以今天也写了一个常见的幻灯片效果用Jquery写的很简单也是用我上次tab自动切换的js 所以原理没有什么可说的不懂的可以看看上次写的TAB自动切换代码：下面的一张截图：

就是类似这种幻灯片：

下面是HTML结构和CSS样式

JS代码如下:

// 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();  
}

下面传个附件看不懂可以下载下来先看看效果然后稍微理解下就ok了！其实说真的js重要但是HTML结构和CSS样式同样重要有时结构写好的话 css写好的话 js就很简单！！

源代码下载

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

用jquery实现ajax跨域请求

jQuery小子 — Tue, 15 Nov 2011 12:45:34 GMT

业务需求：一台独立的新闻服务器（A），对外提供新闻。客户（B）网页引入A的js，即可请求新闻。

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

A提供来让B 引入。

一般的ajax无法跨域请求，jquery的 $.ajax 也是如此。均提示访问被拒绝。这是由于浏览器对javascript的安全机制造成的。请求时服务器可以得到响应并生成数据，但无法跨域返回给B。查了很多资料，Jquery的jsonp可以实现跨域请求和响应。但是网上的写法各不相同，甚至不全面，经过多番研究得以实现。我将客户端的写法和服务端的写法写出来，与各位同仁一起分享。

首先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);
});
}

大家有发现这个url有些特别http://******?参数=值jsonpcallback=? 。这种写法是jsonp的写法。jquery就是通过jsonpcallback=? 这个参数找到回调函数function call(json) 的。所以请求中必须加jsonpcallback=?。
在服务器端会接收jsonpcallback这个值。jquery会把那个？做处理，jsonpcallback=jsonp1287199309053。
$.getJSON这个函数的的参数写法你可以去查一下。$.getJSON（地址，数据，回调函数）
由于我的数据已经与url合并，所以我的第二个参数为null，不写也可。
下面说服务器端对请求的数据如何处理和返回。重点只有两个。
1，json数据格式。2，为了让回调函数可以接受返回值，其写法特被。
第一json数据格式{name：value}.详细的自己去查。
第二。服务端一定要接收jsonpcallback=?

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

打印出来的结果就是
jsonp1287199543662({"info":"aaaa"}) //这里要看清楚。

重点讲完了，最后一点就是返回

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();

这样就实现了ajax跨域访问。很多事情做出来的时候再回想感觉特简单，当你摸索的过程中却云里雾里也很烦恼，尤其在网上查到的各种方法都无效的时候，烦。其实就这么简单。

深入了解jquery键盘事件

jQuery小子 — Wed, 09 Nov 2011 10:53:25 GMT

很多时候，我们需要获取用户的键盘事件，下面就一起来看看jquery是如何操作键盘事件的。

一、首先需要知道的是：

1、keydown()

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

2、keyup()

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

3、keypress()

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

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

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

$tips: 上面例子中,event.keyCode就可以帮助我们获取到我们按下了键盘上的什么按键,他返回的是ascII码,比如说上下左右键,分别是38,40,37,39；

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

      $(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");

 })

② 监测ctrl按键：

$(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键盘事件的常用方法，很多时候应该也够用了。

jQuery实现页面图片等比例放大和缩小

jQuery小子 — Mon, 07 Nov 2011 21:35:21 GMT

本文将利用jquery实现页面图片等比例放大和缩小。说明: 页面中经常需要将未知大小的图片展示在有限的空间里, 如果直接指定图片的width和height值, 就有可能造成图片走样, 这段代码就是为解决这个问题设计。

html代码结构:

样式:

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

脚本(jquery可自行添加):

$(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;
			$('').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 json解析详解

jQuery小子 — Thu, 03 Nov 2011 12:22:32 GMT

我们先以解析上例中的comments对象的JSON数据为例，然后再小结jQuery中解析JSON数据的方法。

上例中得到的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(
                    "" + item.id + "" + 
                    "" + item.nickname    + "
" +                     "" + item.content + "
");
        });
        });
}

正如上面，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+"");
        $("#content").append(data.content+"");
        //jquery解析map数据
        $.each(data.infomap,function(key,value){
            $("#mapinfo").append(key+"----"+value+"
");
        });
        //解析数组
        $.each(data.comments, function(i, item) {
            $("#info").append(
                    "" + item.id + "" + 
                    "" + item.nickname    + "" +
                    "" + item.content + "
");
        });
        });
}

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

上例的运行效果：

原文链接

12个非常有用的jQuery技巧

jQuery小子 — Thu, 13 Oct 2011 23:39:09 GMT

由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

1、关于页面元素的引用

通过jQuery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jQuery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jQuery对象才能使用jQuery定义的方法。注意dom对象和jQuery对象是有区别的，调用方法时要注意操作的是dom对象还是jQuery对象。普通的dom对象一般可以通过$()转换成jQuery对象。
如：$(document.getElementById(”msg”))则为jQuery对象，可以使用jQuery的方法。
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。如：$(”#msg”) [0]，$(”div”).eq(1)[0]，$(”div”).get()[1]，$(”td”)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用jQuery的方法。

以下几种写法都是正确的：

$("#msg”).html();
$("#msg”)[0].innerHTML;
$("#msg”).eq(0)[0].innerHTML;
$("#msg”).get(0).innerHTML;

3、如何获取jQuery集合的某一项

对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jQuery对象，而 get(n)和索引返回的是dom元素对象。对于jQuery对象只能使用jQuery的方法，而dom对象只能使用dom的方法，如要获取第三个

元素的内容。有如下两种方法：

$("div”).eq(2).html(); //调用jQuery对象的方法
$("div”).get(2).innerHTML; //调用dom的方法属性

4、同一函数实现set和get

jQuery中的很多方法都是如此，主要包括如下几个：

$("#msg").html(); //返回id为msg的元素节点的html内容。
$("#msg").html("new content");
//将“new content" 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
$("#msg").text(); //返回id为msg的元素节点的文本内容。
$("#msg").text("new content");
//将“new content" 作为普通文本串写入id为msg的元素节点内容中,页面显示new content
$("#msg").height(); //返回id为msg的元素的高度
$("#msg").height("300″); //将id为msg的元素的高度设为300
$("#msg").width(); //返回id为msg的元素的宽度
$("#msg").width("300″); //将id为msg的元素的宽度设为300
$("input").val("); //返回表单输入框的value值
$("input").val("test"); //将表单输入框的value值设为test
$("#msg").click(); //触发id为msg的元素的单击事件
$("#msg").click(fn); //为id为msg的元素单击事件添加函数

同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能

对于jQuery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jQuery已经为我们提供的很方便的方法进行集合的处理。包括两种形式：

$("p”).each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。
$("tr”).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果
$("p”).click(function(){alert($(this).html())})
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能

$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jQuery扩展了min,max两个方法

使用扩展的方法（通过“$.方法名”调用）：

alert(”a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));

7、支持方法的连写

所谓连写，即可以对一个jQuery对象连续调用各种不同的方法。例如：

$("p”).click(function(){alert($(this).html())})
.mouseover(function(){alert(’mouse over event’)})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});

8、操作元素的样式

主要包括以下几种方式：

$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200″); //设定宽高
$("#msg").css({ color: “red", background: “blue" });//以名值对的形式设定样式
$("#msg").addClass("select"); //为元素增加名称为select的class
$("#msg").removeClass("select"); //删除元素名称为select的class
$("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能

jQuery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jQuery获取的对象添加事件。如：

$(”#msg”).click(function(){alert(”good”)}) //为元素添加了单击事件
$(“p”).click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件：

（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr”).hover(function(){
$(this).addClass(”over”);
,function(){
$(this).addClass(”out”);
});

（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){alert(”Load Success”)})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价

（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

//每次点击时轮换添加和删除名为selected的class。
$("p”).toggle(function(){
$(this).addClass(”selected”);
},function(){
$(this).removeClass(”selected”);
});

（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。例如：

$("p”).trigger(”click”); //触发所有p元素的click事件

（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定

从每一个匹配的元素中（添加）删除绑定的事件。例如：

$("p").bind("click", function(){alert($(this).text());}); //为每个p元素添加单击事件
$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件

10、几个实用特效功能

其中toggle()和slidetoggle()方法提供了状态切换功能。如toggle()方法包括了hide()和show()方法。slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法

$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。如

$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });

等同于：

var tempArr=[0,1,2];
for(var i=0;i
alert("Item #"+i+": "+tempArr[ i ]);
}

也可以处理json数据，如

$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });

结果为：

Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jQuery实现的继承方式。如：
$.extend(settings, options);
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。

可以有多个参数（合并多项并返回）$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。如：

var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为：[2,3]

$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。如：

$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]

$.trim(str)：删除字符串两端的空白字符。如：

$.trim(" hello, how are you? "); //返回"hello,how are you? "

12、解决自定义方法或其他类库与jQuery的冲突

很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，jQuery对此专门提供了方法用于解决此问题。
使用jQuery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 jQuery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。如：

jQuery.noConflict();
// 开始使用jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

如何动态地加载Jquery库文件

jQuery小子 — Sun, 09 Oct 2011 07:22:16 GMT

有时候，我们可能不会在网页中

请输入您的名字：
Jquery获取名字

是不是很简单呢，呵呵。

原文链接

试试自己定义jQuery扩展接口

jQuery小子 — Sun, 18 Sep 2011 09:58:41 GMT

作为一个优秀的JS框架，jquery除了拥有丰富的客户端处理功能、动画功能外，还提供了很多自定义扩展接口，方便我们jquery开发者更灵活地扩展jquery接口，那么本文就来讲讲如何自定义jquery扩展接口，希望能给各位jquery开发者带来帮助。

$.extend({  
      max: function(a, b) {  
          return a > b ? a : b;  
      },  
      min: function(a, b) {  
          return a > b ? b : a;  
      },  
      avg: function(a, b) {  
          return a / b;  
      }  
});

该示例用以在jQuery中增加新函数，该函数是静态函数。调用如下：

jQuery.min(2,3); // => 2  
jQuery.max(4,5); // => 5

如果针对组件的功能扩展函数，同样也是很简单。比如，你想要扩展TextBox的功能，使到它在获取焦点时，高亮显示；失去焦点时，则取消高亮。当然，高亮的效果可以使用CSS来实现，因此，你可以用一个颜色的名称作为参数进行调用。代码如下：

$.fn.hightlight = function(colorName) {  
    this.mouseover(function() {  
        $(this).css('background-color', colorName);   //this对是对组件自身的引用  
    });  
    this.mouseout(function() {  
        $(this).css('background-color', '');  
    });  
}

调用如下：

$(function() {  
    $('#test').hightlight('red');  
});

扩展jQuery的Json技巧

下面我们将分析在jQuery基础上扩展了其处理Json字符串能力，伟大的jQuery将会更伟大用jQuery写JavaScript非常高效，jQuery对Ajax的封装也非常到位；使用jQuery一段时间后发现，jQuery在处理Json字符串方面功能不是很强，至少比 prototype.js差远了。

以前用习惯了扩展Jquery的Json，在进行Ajax开发时，处理json数据非常方便；而在jQuery中，只提供了一个简单的 jQuery.getJSON()方法，并未提供jQuery本身对json数据的转换处理，将json字符串转换为Javascript数据对象还比较容易利用eval()函数即可，但要将Javascript的数据类型转换成json字符串就比较难了；刚开始不得同时使用prototype.js和 jQuery。扩展Jquery的Json代码：

//扩展jQuery对json字符串的转换    
jQuery.extend({     
 /** * @see 将json字符串转换为对象   
     * @param json字符串   
     * @return 返回object,array,string等对象 */      
 evalJSON: function(strJson)   
{      return eval("(" + strJson + ")");      
}    
});

jQuery.extend({      
/** * @see 将javascript数据类型转换为json字符串   
* @param 待转换对象,支持  
object,  
array,string,function,number,boolean,regexp   
* @return 返回json字符串 */      
toJSON: function(object) {        
var type = typeof object;        
if ('object' == type) {          
if (Array == object.constructor) type = 'array';          
else if (RegExp == object.constructor)   
type = 'regexp';          
else type = 'object';        
}        
switch (type) {        
case 'undefined':        
case 'unknown':          
return;          
break;        
case 'function':        
case 'boolean':        
case 'regexp':          
return object.toString();          
break;   
case 'number':          
return isFinite(object) ?   
object.toString() : 'null';          
break;        
case 'string':          
return '"' + object.replace(/(\\|\")/g, "\\$1").replace(/\n|\r|\t/g, function()   
{            
var a = arguments[0];           
return (a == '\n') ? '\\n': (a == '\r') ? '\\r': (a == '\t') ? '\\t': ""          
}) + '"';          
break;        
case 'object':          
if (object === null) return 'null';          
var results = [];          
for (var property in object) {            
var value = jQuery.toJSON(object[property]);            
if (value !== undefined) results.push(jQuery.toJSON(property) + ':' + value);          
}          
return '{' + results.join(',') + '}';          
break;        
case 'array':          
var results = [];          
for (var i = 0; i < object.length; i++) {            
var value = jQuery.toJSON(object[i]);            
if (value !== undefined) results.push(value);         
}          
return '[' + results.join(',') + ']';          
break;        
}      
}    
});  
示例：    
var obj = {      
name: "sean",      
friend: ["fans", "bruce", "wawa"],      
action: function() {      alert("gogogog")      
},      
boy: true,    age: 26,      
reg: /\b([a-z]+) \1\b/gi,      
child: {      name: "none",      age: -1    }  };   
 var json = $.toJSON(obj);    
var objx = $.evalJSON(json);

好了，本文到此结束，相信各位应该能了解如何自定义jquery扩展接口了，谢谢阅读！

分享一个JQuery写的点击上下滚动的小例子

jQuery小子 — Fri, 26 Aug 2011 06:34:53 GMT

功能需求：

1、滚动框内显示10条记录；
2、有向上和向下滚动按钮，每次点击按钮向上或向下滚动记录条数，不自动滚动；
3、记录条数不循环滚动，滚动到起点或终点则停止滚动。

下面介绍一个简单实现方法：

1、外层容器（div） overflow: hidden，内层列表（ul）

2、按钮点击事件触发一个修改列表的函数

3、应用animate实现动画效果

具体不再啰嗦，直接上代码

CSS设置

JQuery 代码

可以设置$("#scrollDiv").Scroll({ line: 10, speed: 500,up: "btn1", down: "btn2" });对滚动按钮，滚动行数，滚动速度进行设置。

Html Body 内容

信息滚动栏DEMO：

这是滚动信息的第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打造多彩动态投票显示进度条

jQuery小子 — Fri, 26 Aug 2011 06:24:18 GMT

下面是来自博客园的一篇文章，原文链接，主要是用jquery实现了一款多彩动态投票显示进度条，效果还可以，就转载了过来，下面先一起看看这些投票进度条的效果图：

HTML代码如下：

jquery代码如下：

var Vote = {};

Vote.ListShow = (function() {
    var b, c, g, j;
    function a(k) {
        b = k.id;       
        g = k.percent;
        j = k.width;
        styleData = h();
        bindItems = d()
    }
    function d() {
        var o = [];
        m = $(".vote-item-wrap");
        for (var n = 0, k = m.length; n < k; n++) {
            o.push(m[n].children[1]);
        }
        
        return o
    }
    function h() {
        var o = [];
        var n = ["#5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6", "#aee7f8", "#c2f263", "#d843b3", "#d8e929", "#e58652", "#e7ab6d", "#ee335f", "#fbe096", "#ffc535"];
        var q = n.slice();
        for (var p = 0, l = g.length; p < l; p++) {
            var k = Math.floor(Math.random() * q.length);
            o.push(q[k]);
            q.splice(k, 1);
            if (q.length == 0) {
                q = n.slice()
            }
        }
        return o
    }
    function f(l, k) {
        
        $(l.children[0]).css("background-color", k.color);
        $(l.children[1]).css({'background-color': k.color,'width': '0px'});
        $(l.children[2]).css("background-color", k.color);
    
    
    }
    function i() {
        var n = [];
        var l = [];
        for (var m = 0, k = g.length; m < k; m++) {
            f(bindItems[m], {color: styleData[m]});
            n.push(bindItems[m].children[1]);
            l.push(Math.round(g[m] * j))
        }
        e(n, 0, l, c)
    }
    function e(p, o, l, n) {        
         for (var r = 0, q = g.length; r < q; r++) {
             $(p[r]).animate({width: l[r]},"slow"); 
         }    
    }
    return {init: a,go: i}
})();

调用方法如下：

Vote.ListShow.init({
    id: 'appVoteBox',   
    percent: [
        0.02, 0.61, 0.36, 0.13, 0.03],
    width: 183 - 2
});

Vote.ListShow.go();

投票进度条CSS样式如下：

body {

    font: 12px/1.5 arial,宋体;

}

html, body {

    color: #333333;

}

li.vl-item {

    float: left;

    width: 100%;

}

.app-vote ul, .app-vote ol, .app-vote li, .app-vote dl, .app-vote dt, .app-vote dd, .app-vote form, .app-vote p, .app-vote h1, .app-vote h2, .app-vote h3 {

    margin: 0;

    padding: 0;

}

.app-vote em {

    font-style: normal;

}

.app-vote ul, .app-vote ol {

    list-style: none outside none;

}

.vote-box-list {

    float: left;

    width: 586px;

}

#appVote .vote-action {

    margin-top: 30px;

    width: 60px;

}

.vote-box-list li {

	list-style: none outside none;

}

.vote-box-list li .vote-item-wrap {

    padding: 5px 0;

}

.vote-box-list li.over {

    background-color: #FFE57F;

}

.vote-box-list li h4 {

    font-size: 1em;

    font-weight: normal;

    overflow: hidden;

    text-align: right;

    width: 260px;

    word-wrap: break-word;

}

.vote-box-list li .litem {

    background: none repeat scroll 0 0 #EFEFEF;

    border: 1px solid #E2E2E2;

    height: 14px;

    width: 183px;

}

.vote-box-list li p, .vote-box-list li h4 {

    float: left;

    margin: 0;

    padding: 0;

}

.vote-box-list li p input {

    float: left;

    margin: 0;

}

.vote-box-list li em, .vote-box-list li span {

    float: left;

    height: 14px;

    overflow: hidden;

}

.vote-box-list li .vleft, .vote-box-list li .right {

    width: 2px;

}

.vnum {

    text-indent: 5px;

    width: 90px;

}

ul.vote-ctrl-act-sep {

    margin: 5px 0;

    overflow: hidden;

}

ul.vote-ctrl-act-sep li {

    border-bottom: medium none;

    border-right: 1px solid #000000;

    float: right;

    margin-right: -1px;

    padding: 0 10px;

}

#appVoteAddForm dt {

    clear: left;

    text-align: right;

    width: 150px;

}

#appVoteAddForm .txt {

    width: 400px;

}

#appVoteAddForm .vote {

    height: 300px;

    width: 400px;

}

#appVoteAddForm .tip {

    color: #6B6B6B;

}

#appVoteAddForm .back_block {

    margin: 6px 0;

    width: 550px;

}

#text_vote_area p.m {

    color: #355E9D;

}

#text_vote_area p.t {

    color: #999999;

}

好了，一切OK，本文结束，谢谢阅读！

JQuery和Servlet来实现跨域请求

jQuery小子 — Tue, 02 Aug 2011 14:22:19 GMT

在网上看到很多的JQuery跨域请求的文章，比较有意思。这里我发表一个Servlet与JQuery配置实现跨域的代码，供大家参考。不足之处请指教

原理：JavaScript的Ajax不可以跨域，但是可以通过向本地的一个Servlet发出请求，由Servlet完成跨域。再把远程的结构返回给客户端。这样Ajax就可以跨域了。在后面，再发一个PHP版本的，请大家关注啊。下面是代码

JS代码：

注意：在Post方式时，param1和param2为向远程发送的参数值，可以有多个。

//GET方式
function reqeustCrossDomainProxyGet(){
	var url = "http://www.baidu.com";//远程请求地址
	var param = {'requesturl':url,'typedata':'JSON'};
	var data = getCrossDomainProxyRemote(param,"json");
}
//Post方式
function reqeustCrossDomainProxyPost(param1,param2){
	var url = apiServer+"/api/lucene/query";
	var param = {'requesturl':url,'typedata':'JSON','param1':param1,'param2':param2};
	var data = getCrossDomainProxyRemote(param,"json");
}

/**
 * JS向本址的一个Servlet发送POST请求，所有关于远程请求的参数。
 * 在此处参POST方式发送给Servlet
 * @param param 远程请求参数
 * @param rtype JS返回类型（暂时没有用到）
 * @return
 */
function getCrossDomainProxyRemote(param,rtype){
	var url = "/cross/proxy";//Servlet的URL地址
	var returndata;
	$.ajax({
		url: url,type: 'POST',dataType: rtype,timeout: 40000,data:param, async:false,
		error: function(response,error) {alert(response.status);},
		success: function(data){returndata=data;}
	});
	return returndata;
}

Java代码：

public class CorssDomainProxy extends HttpServlet {
	
	public void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		this.doPost(req, resp);		
	}
	
	public void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		boolean requestType = false;//标记远程请求类型，默认为GET方式
		PrintWriter out = resp.getWriter();
		Enumeration keys = req.getParameterNames();//取出客户端传入的所有参数名
		ArrayList params = new ArrayList();
		String url=null;
		while (keys.hasMoreElements()){
			String key = (String) keys.nextElement();
			/**
			 * 如果请求参数内有如下几种表示，这此参数不参与远程请求
			 */
			if(key.equals("requesturl")){//判断参数是否是，远程请求地址
				url = req.getParameter(key);
			}else if(key.equals("typedata")){//判断请求数据类型，暂时没有用到
				
			}else if(key.equals("returntype")){//判断请求返回类型，暂时没有用到
				
			}else{
				params.add(key);//其它加入参数列表，此处为参与远程请求的参数
				requestType = true;//修改标记，表求远程请求为POST方式
			}
		}
		
	  	HttpClient client = new HttpClient();
	  	HttpMethod method = null;
	  	if(requestType){//判断请求方式，并实例化HttpMethod对象，true:POST,false:GET
	  		method = new UTF8PostMethod(url);
	  		for(String name : params){//迭代POST参数，加入到请求中
		  		String _value = req.getParameter(name);
				((PostMethod)method).setParameter(name,_value);
		  	}
	  	}else{
	  		method = new GetMethod(url);
	  	}		
		client.executeMethod(method);//执行请求
	  	String bodystr = method.getResponseBodyAsString();//返回结果
		out.println(bodystr);//将结果返回给客户端
	}
	
	/**
	 * 内部类，转换URL字符串为UTF-8
	 * @author Administrator
	 *
	 */
	private static class UTF8PostMethod extends PostMethod { 
		public UTF8PostMethod(String url) { 
			super(url); 
		} 
		@Override 
		public String getRequestCharSet() { 
			return "UTF-8"; 
		} 
	}
	
}

原文链接

jQuery如何动态改变图片显示大小

jQuery小子 — Fri, 29 Jul 2011 19:43:50 GMT

当我们要显示后台传过来若干个尺寸不一的图片时，为了保证图片大小的一致性及比例的协调，需要动态改变图片显示尺寸。通过搜索，我们可以从网上找到实现此功能的jQuery代码如下。这段代码可以使图片的大小保持在一定范围内，如果图片的原始尺寸都大于max*值，则显示出来的图片宽度都相等。

$(document).ready(function() {
    $('.post img').each(function() {
    var maxWidth = 100; // 图片最大宽度
    var maxHeight = 100;    // 图片最大高度
    var ratio = 0;  // 缩放比例
    var width = $(this).width();    // 图片实际宽度
    var height = $(this).height();  // 图片实际高度
 
    // 检查图片是否超宽
    if(width > maxWidth){
        ratio = maxWidth / width;   // 计算缩放比例
        $(this).css("width", maxWidth); // 设定实际显示宽度
        height = height * ratio;    // 计算等比例缩放后的高度 
        $(this).css("height", height);  // 设定等比例缩放后的高度
    }
 
    // 检查图片是否超高
    if(height > maxHeight){
        ratio = maxHeight / height; // 计算缩放比例
        $(this).css("height", maxHeight);   // 设定实际显示高度
        width = width * ratio;    // 计算等比例缩放后的高度
        $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
    }
});
});

在我的js代码中，也采取了这种写法。然而在不同的浏览器测试效果时，发现此种写法不能适应chrome浏览器（chrome版本号为 10.0.648.204），会产生图片以原有尺寸显示出来的bug。后来把$('.post img').each()的代码用$(window).load()方法包装起来，就解决了chrome浏览器显示不正确的问题。那么在chrome浏览器中为什么会产生bug，并且$(document).ready和$(window).load有什么区别呢？
原来document ready事件是在HTML文档载入即DOM准备好就开始执行了，即使图片资源还没有加载进来。而window load事件执行的稍晚一些，它是在整个页面包括frames, objects和images都加载完成后才开始执行的。从这种区别可以分析出chrome浏览器在对于图片不采用$(window).load()方法处理时，图片载入与动态改变图片的js代码执行顺序不确定。

原文链接

解决jQuery.getJSON的缓存问题

jQuery小子 — Fri, 29 Jul 2011 00:58:13 GMT

今天做测试工作，发现了一个令我费解的问题，jquery的getJson方法在opera上运行可以得到返回的结果，但是在ie8上测试，竟发现没有发送请求，故不能取到任何返回的结果，经历了一翻周折，找到了百度空间http://hi.baidu.com/fengluolyn/blog /item/0ac6b7130d8985ddf7039e83.html上的解决办法，便摘抄了下来……

1 让每次调用的url都不一样
方法：在参数中加一个随机数。
例1：
jQuery.getJSON("$!{Root}/a/a/s.ashx",{ID:"123456",Name:"john",random:Math.random()},function(responseText){}
例2：
"xxx.aspx?randID="+Math.random
例3：

"xxx.aspx?randID="+ escape(new Date())

2 将cache设为False
$.ajax不缓存版:
$.ajax({
type:"GET"
url:'test.html' ,
cache:false,
dataType:"html",

success:function(msg){

alert(msg);
}

});

3.在labels.html文件的顶部加入以下声明：

4.load函数不仅可以调用HTML，也可以调用script，比如labels.php，可以在php文件里使用header函数：

header("Cache-Control: no-cache, must-revalidate");

5 使用post代替get方法。
使用Post方式需注意：

设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变量. 通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x-www- form-urlencoded;")。例：

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
参数是名/值一一对应的键值对,每对值用&号隔开.如 var name=abc&sex=man&age=18，注意var name=update.php?abc&sex=man&age=18以及var name=?abc&sex=man&age=18的写法都是错误的;
参数在Send(参数)方法中发送,例： xmlHttp.send(name); 如果是get方式，直接 xmlHttp.send(null);

服务器端请求参数区分Get与Post。如果是get方式则$username = $_GET["username"]; 如果是post方式，则$username = $_POST["username"];

6 在服务端加 header("Cache-Control: no-cache, must-reva lidate");

7 在ajax发送请求前加上 xmlHttpRequest.setRequestHeader("If-Modified-Since","0");

8 在ajax发送请求前加上 xmlHttpRequest.setRequestHeader("Cache-Control","no-cache");、

原文链接

jquery对象和DOM对象的互相转换

jQuery小子 — Wed, 27 Jul 2011 21:50:24 GMT

刚开始学习jQuery，可能一时会分不清楚哪些是jQuery对象，哪些是DOM对象。至于DOM对象不多解释，我们接触的太多了，下面重点介绍一下jQuery，以及两者相互间的转换。

什么是jQuery对象？

---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。
比如：
$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码：
document.getElementById("id").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如：$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
还有一个要注意的是：用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象，这两者并不等价。请参看如下说的两者间的转换。
既然jQuery有区别但也有联系，那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定：如果一个获取的是jQuery对象，那么我们在变量前面加上$，如：var $variab = jQuery对象；如果获取的是DOM对象，则与习惯普通一样：var variab = DOM对象；这么约定只是便于讲解与区别，实际使用中并不规定。

jQuery对象转成DOM对象：

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
如：var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
如：var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)
如：var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后，就可以任意使用jQuery的方法了。

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法

jquery打造一款侧边弹出的垂直导航

jQuery小子 — Mon, 18 Jul 2011 20:13:32 GMT

这是一款利用jquery动画特效和css打造的侧边弹出垂直导航，整个弹出过程比较流畅，而且代码很简单，如果你正在寻找一款带动画的垂直导航，那么可以试试这个。下面是在线demo

HTML源码：

Jquery+CSS侧边弹出垂直导航 






    
        Corange.cn

        Go home!
ASP
    
    
        About Me
        Get to know me.
    
    

        Portfolio
        Get to check out my featured work!
    
    
        Blog
        Tutorials, articles and resources.
    

    
        Contact
        Don't hesitate to drop me a line!
    
    
        Rss
        News, Video and so on.

点击下载源码

jQuery实现翻转效果菜单

jQuery小子 — Wed, 06 Jul 2011 00:15:04 GMT

代码简介：

jQuery精仿手机上的翻牌效果菜单，很平滑的动画翻牌效果，每点击一下菜单，就会翻去一下，貌似很灵敏的动作。注意：如果预览时没看到效果，请刷新一下页面，让jquery载入就行了，在实际使用时不会出现这种情况。

代码内容：




jQuery精仿手机上的翻牌效果菜单_网页代码站(www.webdm.cn)





预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了。
  1
  2
  3
  4
  5
  6

原文链接

jQuery资源宝库

巧妙利用jQuery和PHP打造功能开关效果

利用jQuery marquee实现响应设计

jquery blockUI 扩展插件 Dialog

jQuery blockUI Dialog Demos

利用jQuery Mobile和JSON建立移动应用程序

分享一个Jquery封装幻灯片效果

用jquery实现ajax跨域请求

深入了解jquery键盘事件

jQuery实现页面图片等比例放大和缩小

jquery json解析详解

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

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

12个非常有用的jQuery技巧

如何动态地加载Jquery库文件

试试自己定义jQuery扩展接口

分享一个JQuery写的点击上下滚动的小例子

jquery打造多彩动态投票显示进度条

A：

B：

C：

D：

5：

JQuery和Servlet来实现跨域请求

jQuery如何动态改变图片显示大小

解决jQuery.getJSON的缓存问题

jquery对象和DOM对象的互相转换

jquery打造一款侧边弹出的垂直导航

jQuery实现翻转效果菜单