ria之家--RIA三部曲：jquery、ext、flex » jquery教程

15个相当不错的jquery技巧

明河 — Fri, 15 Jul 2011 13:18:42 +0000

今天在tutorialzine发现一篇关于jquery使用技巧的，相当不错，翻译分享给各位。

1.使用最新的jquery版本

明河觉得这个建议有待商榷，虽然越新的jquery版本性能上更加优秀，但是有些方法的变迁还是会导致一些bug，比如从1.4.2到1.5时很多朋友就抱怨ajax上出现问题了。明河的建议是旧的页面的jquery升级需谨慎，新项目可以大胆的使用jquery新版本。
还有个建议是使用google的cdn上的jquery文件，加载速度更快。猛击Google Libraries API 进入查看。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">script>

2.保持选择器的简单

这个建议明河非常赞同，有很多朋友不喜欢给元素增加样式或id，希望保持html的简洁，使用jquery强大的选择器去检索元素，这不是好的习惯。首先越复杂的选择器，遍历的效率越低，这是显而易见的，最高效率无疑是使用原生的getElementById()；其次，复杂的选择器将标签名称和层级结构固化在里面，假如你的html结构发生了改变，或标签发生了改变，都直接造成检索失败。

$('li[data-selected="true"] a') // Fancy, but slow
$('li.selected a') // Better
$('#elem') // Best

访问DOM，是javascript最耗资源和性能的部分，所以尽量避免复杂或重复的遍历DOM。
避免重复遍历DOM的方法就是将$()检索的元素存储到变量，比如下面的代码：

var buttons = $('#navigation a.button');
// 使用$前缀来标示jquery对象，是非常好的习惯，推荐使用。
var $buttons = $('#navigation a.button');

jquery选择器支持大部分的css3伪类方法，像:visible, :hidden, :animated，虽然很便利，但请慎用，因为当你使用伪类选择器的时候，jQuery不得不使用querySelectorAll()，性能的损耗更大。

3.jQuery对象作为数组处理

jQuery对象定义了length属性，当使用数组的形式操作时候返回其实是DOM元素而不是子jQuery对象，比如下面代码。

// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');
// 遍历buttons对象
for(var i=0;i<buttons.length;i++){
console.log(buttons[i]); // 是DOM元素，而不是jQuery对象！
}
// We can even slice it:
var firstFour = buttons.slice(0,4);

根据实验，使用for或while循环，执行效率比$.each()来的高。详细测试可以看several times faster。
使用length属性来检查元素存在性：

if(buttons){ // This is always true
// Do something
}
if(buttons.length){ // True only if buttons contains elements
// Do something
}

4.selector属性

jQuery对象都带有一个selector属性，用于获取选择器名称，比如：

$('#container li:first-child').selector // #container li:first-child
$('#container li').filter(':first-child').selector // #container li.filter(:first-child)

留意第二行代码，selector返回的是获取的元素完整的选择器。
这个属性常用于编写jquery插件的时候。

5.创建一个空的jQuery对象

这种情况应用场景不多，当你需要先创建个空的jQuery对象，然后使用add()方法向此对象注入jQuery对象时会用到。

var container = $([]);
container.add(another_element);)

6.选择随机元素

应用场景不多，举个例子，现在你需要随机给li增加一个red的class。

(function($){
var random = 0;
$.expr[':'].random = function(a, i, m, r) {
if (i == 0) {
random = Math.floor(Math.random() * r.length);
}
return i == random;
};
})(jQuery);
$('li:random').addClass('glow');

需要扩展jquery的选择器，这段代码很好的演示了jQuery.expr的用法。

7.使用css钩子

jQuery.cssHooks是1.4.3新增的方法，用的不估计不多，当你定义新的CSS Hooks时实际上定义的是getter和setter方法，举个例子，border-radius这个圆角属性想要成功应用于firefox、webkit等浏览器，需要增加属性前缀，比如-moz-border-radius和-webkit-border-radius。你可以通过定义CSS Hooks将其封装成统一的接口borderRadius，而不是一一设置css属性。

$.cssHooks['borderRadius'] = {
        get: function(elem, computed, extra){
            // Depending on the browser, read the value of
// -moz-border-radius, -webkit-border-radius or border-radius
        },
        set: function(elem, value){
            // Set the appropriate CSS3 property
        }
};
// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

8.使用自定义的Easing（缓动动画效果）函数

easing plugin是用的非常多的函数，可以实现不少华丽的效果。当内置的缓动效果无法满足你的需求时，还可以自定义缓动函数。

$.easing.easeInOutQuad = function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
};
// To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');

9.$.proxy()的使用

关于$.proxy()，明河曾经详细介绍过，传送门在此《jquery1.4教程三：新增方法教程（3）》。
jquery有个让人头疼的地方，回调函数过多，上下文this总是在变化着，有时候我们需要控制this的指向，这时候就需要$.proxy()方法。

<div id="panel" style="display:none">
<button>Closebutton>
div>

$('#panel').fadeIn(function(){
// this points to #panel
$('#panel button').click(function(){
// this points to the button
$(this).fadeOut();
});
});

嵌套的二个回调函数this指向是不同的！现在我们希望this的指向是#panel的元素。代码如下：

$('#panel').fadeIn(function(){
// Using $.proxy to bind this:
$('#panel button').click($.proxy(function(){
// this points to #panel
$(this).fadeOut();
},this));
});

10.快速获取节点数

这是个常用的技巧，代码如下：

console.log( $('*').length );

11.构建个jquery插件

(function($){
$.fn.yourPluginName = function(){
// Your code goes here
return this;
};
})(jQuery);

关于jquery插件的构建，明河曾发过系列教程，传送门：制作jquery文字提示插件—jquery插件实战教程（1）。
这里就不再详述。

12.设置ajax全局事件

关于ajax全局事件，明河曾发过完整的介绍文章，传送门：《jquery的ajax全局事件详解—明河谈jquery》。

13.延迟动画

// This is wrong:
$('#elem').animate({width:200},function(){
setTimeout(function(){
$('#elem').animate({marginTop:100});
},2000);
});
// Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

当存在多个animate动画时，如何处理动画的执行顺序是个烦心事，原文作者是建议使用delay()函数，如上面的代码，但明河的建议是使用queue()方法，因为delay你要考虑延迟多少时间，而queue没有这个问题，进入队列的函数会一个个顺序执行。可以看明河以前的文章queue和dequeue—明河谈jquery。

15.jquery的本地存储

本地存储在现在web应用中使用越来越频繁，jquery有个专门用于本地存储的插件叫$.jStorage jQuery plugin。

// Check if "key" exists in the storage
var value = $.jStorage.get("key");
if(!value){
// if not - load the data from the server
value = load_data_from_server();
// and save it
$.jStorage.set("key",value);
}
// Use value

使用javascript生成文件

明河 — Sun, 10 Jul 2011 08:49:04 +0000

demo中演示了使用javascript生成文件的典型应用：用户可以在输入框输入自定义的数据，然后可以点击保存，将这些数据保存到本地，无需再手动在本地新建个txt然后再复制，帮用户省了一步操作。
还有一个比较典型的应用：系统输出一段密匙给用户，密匙一般很复杂，希望用户可以快速保存到本地，本文的技术就派上用场了。
从理论上来讲，想要单纯依靠javascript生成文件，是不可能的，目前主流的有二种方案可以实现生成文件功能：1、javascript+flash，该方案网上有现成的插件，插件的名字明河忘记了，-_-!明河比较健忘；2、javascript+服务器端语言，这是明河比较推崇的方案，本文的demo采用javascript+php实现的，接下来对这个方案，明河进行下简单说明。

原理简述：

原理并不复杂，整个流程如下图：

html代码：

<form action="./" method="post">
<h4>在下面输入框输入任意文字h4>
<textarea>textarea>
<a href="#" class="blueButton" id="download">下载a>
form>

php处理数据，返回文件：

if(empty($_POST['filename']) || empty($_POST['content'])){
exit;
}
$filename = preg_replace('/[^a-z0-9\-\_\.]/i','',$_POST['filename']);
header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');
echo $_POST['content'];
?>

服务器端最关键地就是对header的重写，比如上述代码中的

header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');

服务器端需要二个参数：filename和content，接下来我们来看如何通过脚本异步post过去。
异步post，条件反射地想到ajax，但这里我们借助iframe。

assets/jquery.generateFile.js

jquery.generateFile.js这个文件封装了生成文件的方法：

(function($){
// 创建一个jquery插件
$.generateFile = function(options){
options = options || {};
if(!options.script || !options.filename || !options.content){
throw new Error("参数配置不合法!");
}
// 创建一个1*1的iframe
var iframe = $('',{
width:1,
height:1,
frameborder:0,
css:{
display:'none'
}
}).appendTo('body');
var formHTML = '
'+
''+
''+
'';
// 加个延迟的原因是：给IE一些创建DOM的时间
setTimeout(function(){
// iframe的document中的body元素
var body = (iframe.prop('contentDocument') !== undefined) ?
iframe.prop('contentDocument').body :
iframe.prop('document').body; // IE
body = $(body);
// 向iframe添加内容
body.html(formHTML);
var form = body.find('form');
form.attr('action',options.script);
form.find('input[name=filename]').val(options.filename);
form.find('input[name=content]').val(options.content);
//提交表单
form.submit();
},50);
};
})(jQuery);

主要有如下几个关键步骤：

1.生成个iframe

// 创建一个1*1的iframe
var iframe = $('',{
width:1,
height:1,
frameborder:0,
css:{
display:'none'
}
}).appendTo('body');

2.向iframe添加一个表单

表单结构如下：

var formHTML = '
'+
''+
''+
'';

将上述html片段加入到iframe中：

// iframe的document中的body元素
var body = (iframe.prop('contentDocument') !== undefined) ?
iframe.prop('contentDocument').body :
iframe.prop('document').body; // IE
body = $(body);
// 向iframe添加内容
body.html(formHTML);

这里明河重点提下prop方法，这是jquery1.6的新方法哦，这个方法的作用是什么呢？
以前的jquery中，全部使用attr来访问对象的属性，比如取一个图片的alt属性，使用$(‘#img’).attr(‘alt’);
但是在某些时候，比如访问checkbox的disabled属性的时候，会有些问题。在有些浏览器里，只要写了disabled就可以，有些则要写：disabled = “disabled”。所以，从1.6开始，jq提供新的方法“prop”来获取这些属性。使用prop的时候，返回值是标准属性，true/false，比如$(‘#checkbox’).prop(‘disabled’)，不会返回 “disabled”或者“”，只会是true/false。当然赋值的时候也是如此。如此，我们便统一了所有操作，无论是从语法上还是语义上。

3.提交表单

var form = body.find('form');
form.attr('action',options.script);
form.find('input[name=filename]').val(options.filename);
form.find('input[name=content]').val(options.content);
//提交表单
form.submit();

初始化插件，生成文件

$('#download').click(function(e){
$.generateFile({
filename : 'export.txt',
content : $('textarea').val(),
script : 'download.php'
});
e.preventDefault();
});

使用jquery制作ajax提交表单时的交互按钮

明河共影 — Sat, 19 Feb 2011 13:56:35 +0000

当你的表单使用ajax来提交的时候，有一个点要关注：防止用户重复点击提交按钮，同时要跟用户一个良好的交互反馈，比如点击提交后，有“正在提交中….”的提示或者出现一张loading图片。

在这个demo很好的展示ajax表单提交时的按钮交互处理，同时代码也不会特别复杂，算是一个学习jquery的不错demo，原文请看《Create a Simple Interactive CSS Button with jQuery》。

点此下载

1.构建一个简单表单

<form method="post" action="" name="subscribeForm">
<fieldset>
<label>Name: label><input type="text" class="effect" name="name">
fieldset>
<fieldset>
<label>Email: label><input type="text" class="effect" name="email">
fieldset>
<div id="button">
<input type="submit" value="Subscribe" name="subscribeForm"/>
div>
form>

没什么太特别的地方，接下来看下表单样式，特别留意提交按钮。

2.表单样式

按钮样式设置：

#button {
margin-top:10px;
padding-right:20px;
text-align:right;
}
#button input {
margin:0 auto;
}
a.cssSubmitButton {
font-size: 12px;
background: #fff no-repeat 4px 5px;
display: inline-block;
padding: 5px 20px 6px;
color: #333;
border:1px solid #ccc;
text-decoration: none;
font-weight: bold;
line-height: 1.2em;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
position: relative;
cursor: pointer;
outline:none;
}
a.cssSubmitButton:visited {}
a.cssSubmitButton:hover {
border:1px solid #333;
}

cssSubmitButton这个样式，是脚本用a替换input时加上去了，也是说最后输出的按钮其实是个链接，之后会讲到，留言按钮的几种状态：可用、不可用、正在提交、鼠标滑过。按钮样式无视IE…….

3.js脚本

以下脚本会发送ajax请求，同时会给按钮添加loading样式：

var value = $('#button input').val();
var name = $('#button input').attr('name');
//将按钮容器内的input替换成链接，链接伪装成按钮
$('#button input').remove();
$('#button').html('' + name + '>' + value + '');
//监听单击事件
$('#button a').live('click', function () {
//使用$('form[name=' + $(this).attr('rel') + ']').submit();直接提交表单
var link = $(this);
//ajax提交表单
$.ajax({
url : 'load.php',
data: '',
type: 'GET',
cache: 'false',
beforeSend: function () {
//提交前，给链接，添加loading样式
link.addClass('loading');
},
success: function () {
link.removeClass('loading');
alert('Submitted');
}
});
});

大功告成！

使用jquery+css3制作旋转效果的幻灯片

明河共影 — Sat, 22 Jan 2011 06:33:10 +0000

这是tutorialzine上的一篇实战性颇强的教程，明河将其翻译过来，献给各位对css3敢兴趣的朋友。
这篇教程主要演示的是css3的旋转特性，由于浏览器间还是存在差异的，引入了jquery.rotate.js，姑且忽略IE。同时演示了jquery自定义事件的使用。

点此下载

1.创建一个幻灯片html结构

<div id="slideShowContainer">
<div id="slideShow">
<ul>
<li><img src="img/photos/1.jpg" width="100%" alt="Fish" />li>
<li><img src="img/photos/2.jpg" width="100%" alt="Ancient" />li>
<li><img src="img/photos/3.jpg" width="100%" alt="Industry" />li>
<li><img src="img/photos/4.jpg" width="100%" alt="Rain" />li>
ul>
div>
<a id="previousLink" href="#">»a>
<a id="nextLink" href="#">«a>
div>

#slideShowContainer容器内的元素全部为绝对定位，这是由交互特点决定的，采用其他定位方式还真不好处理，绝对定位有个问题就是要处理好z-index，尤其是图片容器间的z-index，默认是后面的遮住前面的，但我们需要脚本修正为前面遮住后面的。

2.关键css代码

#slideShow{
position:absolute;
height:490px;
width:490px;
background-color:#fff;
margin:10px 0 0 10px;
z-index:100;
-moz-box-shadow:0 0 10px #111;
-webkit-box-shadow:0 0 10px #111;
box-shadow:0 0 10px #111;
}
#slideShow ul{
position:absolute;
top:15px;
right:15px;
bottom:15px;
left:15px;
list-style:none;
overflow:hidden;
}
#slideShow li{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#slideShowContainer > a{
border:none;
text-decoration:none;
text-indent:-99999px;
overflow:hidden;
width:36px;
height:37px;
background:url('../img/arrows.png') no-repeat;
position:absolute;
top:50%;
margin-top:-21px;
}

#slideShow这个层很关键，所有的交互都基于这个层。

3.js脚本（已加中文注释）

$(document).ready(function(){
//幻灯片
var slideShow = $('#slideShow'),
ul = slideShow.find('ul'),
//幻灯片的图片容器
li = ul.find('li'),
//图片个数
cnt = li.length;
//设置每个图片容器（li）的z-index，递减（采用绝对定位，保证越前面的z-index应该越高）
updateZindex();
if($.support.transform){
//css3旋转
li.find('img').css('rotate',function(i){
// 逆时针旋转
return (-90*i) + 'deg';
});
//绑定一个自定义事件（参数：方向、角度）
slideShow.bind('rotateContainer',function(e,direction,degrees){
//扩大幻灯片容器
slideShow.animate({
width : 510,
height : 510,
marginTop : 0,
marginLeft : 0
},'fast',function(){
//下一张
if(direction == 'next'){
//渐隐第一张图片，并将这张图片添加到最后，同时更新所有li的z-index
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
}
//上一张
else {
//隐藏最后一张图片，移动这张图片到第一个位置，更新li的z-index，最后渐现该图片
var liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
}
//旋转动画（使用jquery.rotate.js来解决浏览器之间的差异）
slideShow.animate({
rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'
},'slow').animate({
width : 490,
height : 490,
marginTop : 10,
marginLeft : 10
},'fast');
});
});
//绑定二个自定义事件（下一张、上一张）
slideShow.bind('showNext',function(){
//二个参数：方向、角度
slideShow.trigger('rotateContainer',['next',90]);
});
slideShow.bind('showPrevious',function(){
slideShow.trigger('rotateContainer',['previous',-90]);
});
}
else{
// IE9以下浏览器，不支持旋转属性，去掉旋转效果
slideShow.bind('showNext',function(){
$('li:first').fadeOut('slow',function(){
$(this).remove().appendTo(ul).show();
updateZindex();
});
});
slideShow.bind('showPrevious',function(){
var liLast = $('li:last').hide().remove().prependTo(ul);
updateZindex();
liLast.fadeIn('slow');
});
}
//点击上一个箭头
$('#previousLink').click(function(){
//运动未结束，直接返回
if(slideShow.is(':animated')){
return false;
}
//触发自定义事件showPrevious，切换到上一张图片
slideShow.trigger('showPrevious');
return false;
});
//点击下一个箭头
$('#nextLink').click(function(){
//运动未结束，直接返回
if(slideShow.is(':animated')){
return false;
}
//触发自定义事件showNext，切换到下一张图片
slideShow.trigger('showNext');
return false;
});
//更新li的z-index
function updateZindex(){
//遍历li，让z-index递减
ul.find('li').css('z-index',function(i){
return cnt-i;
});
}
});

3.1更新图片容器li的z-index

//更新li的z-index
function updateZindex(){
//遍历li，让z-index递减
ul.find('li').css('z-index',function(i){
return cnt-i;
});
}

这是很关键的处理步骤，在每次改变图片时都要触发一次。

3.2初始默认设置图片的旋转角度的理由

//css3旋转
li.find('img').css('rotate',function(i){
// 逆时针旋转
return (-90*i) + 'deg';
});

外层容器#slideShow旋转了90度，里面的图片自然也跟着旋转了90度，那么最终显示的图片角度是错误的。所以我们需要一个方案，不管容器如何旋转，图片显示时角度都是正确的。所以这里给每个图片加上了旋转。

3.3jquery自定义事件的使用

slideShow.bind('showPrevious',function(){
slideShow.trigger('rotateContainer',['previous',-90]);
});

jquery自定义事件很重要，希望朋友们对看下相关教程。这里强烈推荐下《jquery cookbook》，关于jquery事件有非常详细的说明，英文版网上可以载的到。

3.4jquery.rotate插件的使用

slideShow.animate({
rotate:Math.round($.rotate.radToDeg(slideShow.css('rotate'))+degrees) + 'deg'
},'slow').animate({
width : 490,
height : 490,
marginTop : 10,
marginLeft : 10
},'fast');

上述代码，不止是旋转了容器，同时还改变了容器尺寸（恢复原来容器大小）。

jquery V1.4.3试用报告

明河共影 — Sat, 23 Oct 2010 09:13:19 +0000

jquery V1.4.3已经正式发布！相对于1.4.2更新内容并不多，但修正了一些bug，性能上有一些提高，看下图：

上图是1.4.3和1.4.2的css()方法效率的比较。

1.4.3重构了css()方法，新的css()将支持旋转设置

jquery V1.4.3 在Google’s CDN上的路径为：http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js

下载的话，可以猛击此处进入jquery官网下载。
（文章中的动画demo由于与主题的jquery冲突，无法运行，也导致RIA之家导航出不来，所以二个动画demo请看示例页。）

点此下载

一、jquery V1.4.3新方法测试

1、jQuery.isWindow

这个方法用来判断对象是否是一个window。

来看个例子:

$('#demo-1').click(function(){
    alert($.isWindow(window));
})

是不是感觉这个方法很多此一举？在web浏览器，通常我们不会去特意测试window对象。

2、jQuery.type()

相对于isWindow，type方法非常好用，jQuery.type()用于专门判断数据类型，判断的正确性高于直接使用typeof，typeof无法直接区分object和array，你甚至可以用jQuery.type()来判断是不是正则对象。

jQuery.type(true) === "boolean"
jQuery.type(3) === "number"
jQuery.type("test") === "string"
jQuery.type(function(){}) === "function"
jQuery.type([]) === "array"
jQuery.type(new Date()) === "date"
jQuery.type(/test/) === "regexp")

3、jQuery.fx.interval

jQuery.fx.interval是一个属性，不是方法，用于设置动画一帧的秒数，默认为11毫秒，设置得越低，动画就越顺滑，当然cpu资源就消耗越大。

jQuery.fx.interval = 80;

$("#demo-2").click(function(){
  $("#demo-2-div").toggle( 3000 );
});

可以明显感觉到动画变的非常不流畅，这是因为将jQuery.fx.interval设置过高的缘故。

4、event.namespace

这是event新的一个属性，用于返回事件的命名空间（假如该事件有命名空间）

$("#test-p").bind("test.ria", function(event) {
  alert( event.namespace );
});
$("#demo-3").click(function(event) {
  $("#test-p").trigger("test.ria");
});

二、jquery V1.4.3的方法改进

1、事件方法的改进

当bind/unbind第二个参数为逻辑类型时，用于直接判断是否阻止浏览器事件默认动作和冒泡。

猛击这里

 	$("#demo-4").bind('click',false)

这个改进还是非常实用的，可以看到链接不再触发跳转。

事件的第二个改进在于事件方法（比如click）的第一个参数可以为一个对象，click的第二个参数监听函数可以取到该对象的值。

$("#demo-5").click({'36ria':'明河共影'},function(evt){
    alert(evt.data['36ria']);
})

2、所有的动画方法支持缓动

$("#demo-6").click(function(){
  $("#demo-6-div").toggle('slow','easeOutBounce');
});

使用easing（缓动）请先引入easing插件。

三、明河结语

当然jquery1.4.3的改进不只明河提到的内容，更为详细的请猛击这里。

jquery的ajax全局事件详解—明河谈jquery

明河共影 — Mon, 09 Aug 2010 14:31:39 +0000

jquery在ajax方面是非常强大和方便的，以下是jquery进行ajax请求时方法模板：

$.ajax({
type: "get",
url: "",
data : {},
beforeSend : function(){
},
success : function(data){
},
complete : function(){
}
});

关于$.ajax()方法的使用，不是明河写这篇文章的目的，今天明河主要讲解当进行ajax请求时整个完整的事件流程。

jquery的ajax方法的全部全局事件：

ajaxStart：ajax请求开始前
ajaxSend：ajax请求时
ajaxSuccess：ajax获取数据后
ajaxComplete：ajax请求完成时
ajaxError：ajax请求发生错误后
ajaxStop：ajax请求停止后

当你使用jquery的ajax方法,不管是$.ajax()、$.get()、$.load()、$.getJSON()等都会默认触发全局事件，只是通常不绑定全局事件，但实际上这些全局事件非常有用处。

ajax方法的全局事件的用处

ajax全局事件，有个典型的应用场合：
你的页面存在多个甚至为数不少的ajax请求，但是这些ajax请求都有相同的消息机制。ajax请求开始前显示一个提示框，提示“正在读取数据“；ajax请求成功时提示框显示“数据获取成功”；ajax请求结束后隐藏提示框。
不使用全局事件的做法是：
给$.ajax()加上beforeSend、success、complete回调函数，在回调函数中加上处理提示框。
使用全局事件的做法是：

$(document).ajaxStart(onStart)
.ajaxComplete(onComplete)
.ajaxSuccess(onSuccess);
function onStart(event) {
//.....
}
function onComplete(event, xhr, settings) {
//.....
}
function onSuccess(event, xhr, settings) {
//.....
}

ajax方法完整事件流

为了更直观的说明，明河使用Axure画了二个流程图，画的不好还请见谅，O(∩_∩)O

ajax方法完整事件流演示

为了让朋友更容易理解整个事件流，明河做了以下demo。

点此下载

使用jquery制作背景变化菜单

明河共影 — Tue, 03 Aug 2010 06:45:58 +0000

jquery动画函数animate是不支持背景移动动画的，即无法对backgroundPosition进行处理，需要使用一个插件，这个插件名为jquery.backgroundPosition，接下来将使用这个插件，制作一个背景变化的菜单。

点此下载

制作过程

1、创建如下html菜单结构

<ul>
<li><a href="http://www.36ria.com/">首页a>li>
<li><a href="http://www.36ria.com/">关于作者a>li>
<li><a href="http://www.36ria.com/">联系作者a>li>
ul>

2、加上css样式

ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;margin:0;padding:0;text-align:center;font-size:14px;}
li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
li a {background:url(../images/bg2.jpg) repeat 0 0;}
li a:hover, li a:focus, li a:active {background-position:-150px 0;}

示例中有5个demo，共用了四张背景图片：

分别对应相应的动画demo样式：

#a a {background:url(../images/bg.jpg) repeat -20px 35px;}
#b a {background:url(../images/bg2.jpg) repeat 0 0;}
#c a {background:url(../images/bg3.jpg) repeat 0 0;}
#d a {background:url(../images/bg4.jpg) repeat 0 0;}

3、javascript脚本

引入jquery库和jquery.backgroundPosition：

<script type="text/javascript" src="js/jquery-1.4.2.min.js">script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js">script>

$(function(){
$('#a a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
$('#b a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
$('#c a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
$('#d a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});

引入jquery.backgroundPosition后animate()开始支持backgroundPosition背景位移动画。后二个颜色渐变的例子，也是通过渐变背景图片上下移动产生的。

原文：http://snook.ca/archives/javascript/jquery-bg-image-animations/

基础模板的缺陷—jquery插件开发进阶教程（2）

明河共影 — Mon, 02 Aug 2010 01:56:41 +0000

这个系列的第一篇教程明河讲述了：jquery插件开发规范，今天这篇教程明河将讲述jquery插件基础模板的缺陷。

在jquery插件实战教程，明河曾以Colortip文字提示插件，讲解了jquery插件的基础模板：

(function($){
$.fn.插件名 = function(settings){
var defaultSettings = {
}
/* 合并默认参数和用户自定义参数 */
settings = $.extend({},defaultSettings,settings);
return this.each(function(){
});
}
})(jQuery)

（明河再次提醒，这个基础模板很重要，尽量看懂用懂它。）
在教程的最后，明河同时也指出了Colortip这个插件的缺陷，Colortip的缺陷，归根到底还是jquery插件基础模板的缺陷引起的。

jquery插件基础模板的缺陷

1、难以实现类与类之间的继承

比如明河写了yitip，原理与colortip一样，但是无法通过扩展colortip的方式，只能重新写个完整插件。

2、无法开放API供外部调用

这是jquery插件基础模板最大的缺陷，以colortip例子，在初始化colortip后，你无法改变提示框出现的位置、内容、动画效果、延迟时间等，colortip没有相应的API，但是明河写的yitip，却可以实现相应的控制。
colortip的演示：http://www.36ria.com/demo/colortips/colortips.html
yitip的演示：http://www.36ria.com/demo/yitip/
可以看到yitip提供了相应的API供使用者操作，那么yitip又是如何实现API的开放呢？接下来的教程明河会展开叙述。

3、无法提供自定义事件支持

比如你想要在提示框显示前弹出一个对话框，在隐藏提示框后删除提示框等。

4、无法模拟出接口。

你无法很直观的知道你所使用的方法插件支不支持，插件到底有几个方法，传递给方法的参数个数和数据类型对不对等。

5、缺少debug能力。

插件有可能会调用失败，这时候你希望知道插件在调用的过程中所发生的所有的事，你需要打印一系列的流程到调用面板中，jquery插件基础模板无法提供这一功能。

结语

正是jquery插件基础模板存在如此多的缺陷，所以明河才觉得有必要讲述一个jquery插件的高级模板，用于解决这些缺陷。
下一篇教程：jquery插件的高级模板

实用jquery代码片段集合（下）

明河共影 — Thu, 29 Jul 2010 01:51:40 +0000

如何隐藏除了特定选择器下的全部对象

$('#target div:not(#exclude)').hide();
//或者
$('#target').children().filter(':not(#exclude)').hide();

filter()起到过滤的作用。

寻找带有指定字符串的元素

var foundin = $('*:contains("明河")');

获取垂直滚动距离

alert($(document).scrollTop());

scrollTop()非常实用的一个方法。

向表格追加一行数据

$('#myTable tr:last').after('...');

超过一个属性时的过滤

var elements = $('#someid input[type=sometype][value=somevalue]').get();

让cookies在X分钟后过期

var date = new Date();
date.setTime(date.getTime() + (x * 60 * 1000));
$.cookie('example', 'foo', { expires: date });

选择从第一个到第X个的元素

//从第一个到第10个
$('a').slice(0,10);
//或者
$('a:lt(10)');

获取客户端的IP

$.getJSON("http://jsonip.appspot.com?callback=?",function(data){
alert( "你的IP：" + data.ip);
});

这是利用了jsonip.appspot.com提供的取IP服务。

解析XML数据源

xml version="1.0" ?>
<result>
<item>
<id>1id>
<title>title1title>
<description>desc1description>
item>
<item>
<id>2id>
<title>title2title>
<description>desc2description>
item>
result>

$.get('file.xml',{},function(data){
$('item',data).each(function(){
var $this       = $(this);
var id             = $this.find('id').text();
var title         = $this.find('title').text();
var description = $this.find('description').text();
//do something ...
});
});

获取在id中的数字

<div id="sites">
<a id="site_1" href="http://siteA.com">siteAa>
<a id="site_2" href="http://siteB.com">siteBa>
<a id="site_3" href="http://siteB.com">siteCa>
...
div>

$("#sites a").click(function(){
var $this     = $(this);
var nmb     = $this.attr('id').match(/site_(\d+)/)[1];
...
});

将类似12343778 转成 12.343.778的形式

var delimiter = '.';
$('#result').html()
.toString()
.replace(new RegExp("(^\\d{"+($this.html().toString().length%3||-1)+"})(?=\\d{3})"),"$1" + delimiter)
.replace(/(\d{3})(?=\d)/g,"$1" + delimiter);

这个正则值得收藏，颇为经典。

向firebug的控制面板发送消息

jQuery.fn.log = function (msg) {
console.log("%s: %o", msg, this);
return this;
};
$('#some_div').find('li.source > input:checkbox').log("sources to uncheck").removeAttr("checked");

获取图片的宽高

var img = $('#imageid');
var theImage = new Image();
theImage.src = img.attr("src");
alert("Width: " + theImage.width);
alert("Height: " + theImage.height);

实用jquery代码片段集合（上）

明河共影 — Wed, 28 Jul 2010 08:47:53 +0000

加载google的jquery库

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">script>

有利于加快加载速度（已经得到验证）。

修改图片src更新图片

$(imageobj).attr('src', $(imageobj).attr('src') + '?' + Math.random() );

（这是很实用的技巧，曾经有人问明河，为什么他已经修改了图片的src，但图片没变化呢？原因在于缓存，给图片路径后加个随机数参数即可。

加载多张图片，判断加载完成状态

var totalimages = 10;
var loadedimages = 0;
$("").load(function() {
++loadedimages;
if(loadedimages == totalimages){
//全部图片加载完成时.....
}
});

双击不选中文本

var clearSelection = function () {
if(document.selection && document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
}
$(element).bind('dblclick',function(event){
clearSelection();
});

对一个列表进行排序

<ul>
<li>cloudli>
<li>sunli>
<li>rainli>
<li>snowli>
ul

var items = $('.to_order li').get();
items.sort(function(a,b){
var keyA = $(a).text();
var keyB = $(b).text();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
var ul = $('.to_order');
$.each(items, function(i, li){
ul.append(li);
});

（中文无效）

绑定右击事件

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});

扩展jquery的对象选择器

$.extend($.expr[':'], {
//选择器名
moreThanAThousand : function (a){
return parseInt($(a).html()) > 1000;
}
});
$(document).ready(function() {
$('td:moreThanAThousand').css('background-color', '#ff0000');
});

检查对象是否存在

if ($("#elementid").length) {
//......
}

取消一个ajax请求

var req = $.ajax({
type: "POST",
url: "someurl",
data: "id=1",
success: function(){
}
});
//取消ajax请求
req.abort()

检查cookies是否可用

$(document).ready(function() {
var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if(!cookiesEnabled){
//cookies不能用........
}
});

获取当前元素在元素集内的索引值

$("ul > li").click(function () {
var index = $(this).prevAll().length;
});

如果你用的是jquery1.4，明河推荐使用以下方法：

$("ul > li").click(function () {
var index = $(this).index();
});

让一个元素相对于屏幕居中

jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
$(element).center();

这个方法非常实用，明河严重推荐收藏

获取当前页面的URL

$(document).ready(function() {
var pathname = window.location.pathname;
});

原文：http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/

jquery插件开发规范—jquery插件开发进阶教程（1）

明河共影 — Tue, 27 Jul 2010 02:28:16 +0000

在明河真正讲解jquery插件开发进阶教程前，明河觉得很有必要先来说明下jquery插件开发规范，这些规范是明河学习jquery时不断积累下来的，不一定完全正确，甚至于你在开始编写第一个jquery插件时，觉得这些规范毫无意义。如果你有一天编写jquery时突然发现这些规范很有用处，恭喜你，你的水平上升了一个层次！

一、请给你的代码加上注释

明河以前很不喜欢加注释，嫌太麻烦了，这是个非常糟糕的习惯，幸运的是现在明河已经改正了这个不良习惯。

这个世界不存在百分百的完美的jquery插件，注释不止是给别人看、更重要的是给自己看。

你应该把注释当做你代码的一部分，养成随手加注释的习惯，尤其是编写javascript的时候。

1、在全部代码前加上文件说明注释

以下是明河给自己写的yitip插件加的注释：

/**
* $.yitip
* @extends jquery.1.4.2
* @fileOverview 创建文字提示框
* @author 明河共影
* @email mohaiguyan12@126.com
* @site wwww.36ria.com
* @version 0.1
* @date 2010-07-17
* Copyright (c) 2010-2010 明河共影
* @example
* $("a").yitip();
*/
(function($){
.......
})(jQuery);

这是jsdoc的写法，什么是jsdoc？请点此。jsdoc简单点来说是一种javascript文档工具，使用方法可以点此。现在对jsdoc不理解没关系，你只要创建明河上述类似的说明文档即可。jsdoc的命令请点此查看。

2、函数务必加注释

比如以下代码是yijs.Yitip一个方法setContent：

yijs.Yitip.prototype = {
/**
*向提示框添加内容
* @param {Object | String} content 内容
*/
setContent : function(content){
...........
}
}

依旧遵循jsdoc规范，而不是匆匆加上“//”了事，关于jsdoc，有机会明河会详细讲解。

3、参数务必加注释

比如：

//默认参数
$.fn.yitip.defaults = {
/**目标容器*/
applyTo : null,
/**内容*/
content : "",
/**提示框位置*/
position : "topMiddle",
/**提示框位置偏移*/
offest : {"left":0,"top":0},
/**提示框颜色*/
color : "yellow"
}

4、函数体内关键代码前加注释

二、javascript变量规范

在javascript世界中，没有真正意义的共有变量、私有变量、常量等概念，当你的javascript代码达到一定数量级时，过段时间你回头看自己的代码，都会把自己搞晕。

1、请在私有变量前加“_”

比如：

var _pos = this.pos;

2、常量请大写

比如：

this.DATA_COLOR = "color";

3、jquery对象变量前加“$”

比如：

this.$applyTo = $(".yitip");

4、object、array变量前加“o”、“a”

很多人喜欢给数组变量加个”s”，这也是可以的，按个人习惯，如果你觉得有必要还可以给函数前加个“fn”。

三、jquery插件开发的一些建议

1、请多使用data()方法

jquery中data()方法非常有用，尤其在jquery插件开发中，因为data()所创建的缓存，可以完整的保存各种数据类型的数据，这是其他缓存机制无法比拟的。

2、请使用bind来绑定事件

很多朋友喜欢以下的代码：

$(".yitip").click(function(){
........
})

但在jquery插件开发中明河更提倡使用bind：

$(".yitip").bind('click',function(){
.........
})

以后的教程中明河会予以解释。

3、善用typeof

typeof用于判断数据类型，这个方法在参数判断中非常有用处

4、插件名加个独有前缀

jquery插件成千上万，插件撞车时很容易的事，比如提示框插件：

$.fn.tip = function(options){
}

但tip的冲突率无疑很高，所以明河加个“yi”前缀，如果你有在网上看到以yi做前缀的插件，那估计就是明河写的，呵呵。

四、其他规范

1、设置版本号

有很多插件作者将版本号作为插件的一个属性，也是一个比较好的做法，比如：

$.fn.yitip.version = 0.1

你可以不设置为属性，但在你的文件头务必加上版本注释，比如：

/**
* $.yitip
* @version 0.1
*/

明河喜欢以0.1起始，然后把正式版的插件设置为1.0

2、将插件代码托管到网上

可以去sourceforge注册个账号，新建个开源项目，将代码托管上去，如果你不喜欢sourceforge，可以使用google的代码托管，可以看明河曾发表过的使用Google Code托管代码教程。有机会发篇教程讲述如何在sourceforge上托管代码。

（欢迎指正和补充）

Colortip的缺陷—jquery插件实战教程（完结篇）

明河共影 — Mon, 26 Jul 2010 02:42:17 +0000

jquery插件实战教程，明河已经发了四篇教程：

今天这篇教程将是这个系列教程的完结篇，明河主要讲解Colortip这个jquery提示框插件的缺陷，既然有缺陷，当然明河会提供相应的解决方案，所以这篇教程既是完结篇，又是下一个jquery插件进阶教程的引子。

整个系列教程，最重要的是第二篇教程：jquery插件基础解析—jquery插件实战教程（2），所以如果你想学jquery插件制作，这篇教程尽量把它看懂，至于其他篇教程，看不懂，不影响你实际演练。

Colortip的缺陷

这个世上没有百分百完美的人，同样也没有百分百完美的程序，Tutorials无疑是个优秀的前端工程师，但Colortip一样有缺陷。

一、Colortip的bug

根据明河的测试，Colortip在IE6下存在2个bug：

1、IE6下，倒三角部分高度失效，出现难看的背景颜色：（请看下图的高亮部分）

明河说明：其实这个是IE6常见的一个bug，就是一个层，无端出现12px的高度，当你所设置的高度小于12px时都无效。解决方法很简单，给这个层加上overflow:hidden;

2、IE6下，提示框位置错误，提示框不是相对于目标容器居中显示，而是变成靠右显示

二、Colortip的先天缺陷

1、将提示框添加到目标容器内部

Tutorials的思路是把提示框当做目标容器的子容器，当鼠标滑过目标容器时，显示子容器提示框，这个思路本身没错，但明河觉得考虑不足。当把提示框当做目标容器的子容器，也就是说提示框的样式将会继承于目标容器，而目标容器的样式你无法确定，这是一个样式继承的风险！

2、提示框的内容无法修改，只针对带有title属性的目标元素

Colortip只能处理一种情况，如果你想要在提示框中显示图片或者列表，Colortip就爱莫能助了。

三、Colortip的功能缺陷

请跟着明河思考以下问题：

如果我想控制提示框的出现位置，该如何办？
有没有一种方法我可以控制提示框的内容？
我能不能自由的控制提示框的显示/隐藏？
显示/隐藏提示框的效果能不能自由控制？
我能不能在显示/隐藏提示框后干些其他事？

你思考完这些问题，再回头看Colortip，你会发现，很遗憾，Colortip明显无法满足我们的要求。
所以明河依照Colortip的原理，写了个新的jquery提示框插件，明河将其命名为：yitip，而yitip，恰恰能解决以上问题。

四、jquery插件基础模板的缺陷

先来回忆下jquery插件基础模板：

(function($){
$.fn.插件名 = function(settings){
var defaultSettings = {
}
/* 合并默认参数和用户自定义参数 */
settings = $.extend({},defaultSettings,settings);
return this.each(function(){
});
}
})(jQuery);

（明河再次提醒：这个模板非常重要，请尽量看懂它。）
Colortip的功能缺陷，实际上有很大原因是由于jquery插件基础模板的缺陷引起的。那么jquery插件基础模板的缺陷在哪呢？又是如何解决这些缺陷呢？请看下一个系列教程：jquery插件制作进阶教程

使用jquery制作仿Skype的动画按钮

明河共影 — Fri, 21 May 2010 03:05:40 +0000

这个教程主要讲解如何jquery制作仿Skype的动画按钮。

点此下载

制作过程

创建如下按钮链接：

<a class="button" href="#">
<img src="button.png" alt="" />Send info
a>
or <a href="#">cancela>

给这个按钮链接，添加样式

.button {
padding: 4px 10px 3px 25px;
border: solid 1px #8AB134;
position: relative;
cursor: pointer;
display: inline-block;
background-image: url( 'bkg.png' );
background-repeat: repeat-x;
font-size: 11px;
height: 16px;
text-decoration: none;
color: #40740D;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
.button img {
position: absolute;
top: -4px;
left: -12px;
border: none;
}
.button:hover {
color: #8AB134;
}

这里用到了css3的圆角属性，在IE下无法正常显示圆角，而且使用的是png，IE6下需要自行修正。
按钮链接内的修饰图标使用绝对定位。

动画关键脚本：

$(".button").hover(function(){
$(".button img")
.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200)
.animate({top:"-7px"}, 100).animate({top:"-4px"}, 100)
.animate({top:"-6px"}, 100).animate({top:"-4px"}, 100);
});

改变钮链接内的修饰图标的top值，形成上下跳动的动画形式。

使用jquery制作动感的鼠标滑过效果

明河共影 — Tue, 18 May 2010 05:07:13 +0000

效果说明：鼠标滑过图标，图标向上移动，同时，底部的阴影开始变淡，鼠标移开图标，效果复位。

演示：http://www.36ria.com/demo/Realistic-Hover-Effect/

点此下载

制作过程

1、准备图标和底部阴影，示例包内已经包含了，可以参照着制作。

2、构建如下html代码：

<ul id="nav-shadow">
<li><a href="#" title="分享到嘀咕"><img src="images/digu.png" width="64" height="64" />a>li>
<li><a href="#" title="分享到新浪微博"><img src="images/sinaminiblog.png" width="64" height="64" />a>li>
<li><a href="#" title="分享到做啥"><img src="images/zuosa.png" width="64" height="64" />a>li>
<li><a href="#" title="分享到人间"><img src="images/renjian.png" width="64" height="64" />a>li>
<li><a href="#" title="分享到gbuzz"><img src="images/gbuzz.png" width="64" height="64" />a>li>
<li><a href="#" title="分享到鲜果"><img src="images/xianguo.png" width="64" height="64" />a>li>
<li><a href="#" title="分享到9dian"><img src="images/9dian.png" width="64" height="64" />a>li>
ul>

非常简单的列表结构。

3、构建如下css样式：

#nav-shadow {
margin: 0 auto 50px auto;
padding: 50px 0 0 127px;
width: 650px;
min-height: 130px;
text-align: center;
background: url(../images/page-shadow.jpg) top center no-repeat;
list-style: none;
}
#nav-shadow li {
margin-right: 15px;
width: 81px;
height: 76px;
position: relative;
float: left;
}
#nav-shadow a{
margin: 0 auto;
width: 64px;
height: 64px;
text-indent: -9999px;
overflow: hidden;
display: block;
position: relative;
z-index: 2;
}
#nav-shadow a img{
display:block;
}
/*按钮阴影*/
#nav-shadow li img.shadow {
margin: 0 auto;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}

4、编写javascript脚本：

$(document).ready(function() {
//给每个li添加阴影图片
$("#nav-shadow li").append('');
// 鼠标滑过按钮，动画开始
$("#nav-shadow li").hover(function() {
var e = this;
$(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
$(e).find("a").animate({ marginTop: "-10px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
},function(){
var e = this;
$(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
$(e).find("a").animate({ marginTop: "0px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0", opacity: 1 }, 250);
});
});

脚本不复杂，这效果还是很不错的。
效果要领说明：

让图标产生位移，这里使用负外边距
改变阴影图片的宽度、高度、外边距还有透明度

动画的关键脚本如下：

var e = this;
$(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
$(e).find("a").animate({ marginTop: "-10px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);

记得这里的stop()必不可少哦，不然动画会有bug，关于这个问题可以详见，我以前写的文章：
hoverFlow —终止jquery的animation

blog正缺少分享按钮列表，这几天整成个jquery插件发布出去。

php+jquery实现ajax星级评价教程

明河共影 — Mon, 26 Apr 2010 08:31:51 +0000

web2.0的站点和博客很多都开始启用星级评价，可以达到和读者互动的目的，增加用户体验，这个教程主要是讲解如何使用php+jquery实现ajax星级评价。

demo：http://demo.tutorialzine.com/2009/11/fancy-quotes/demo.php

点此下载

这个demo实现的功能如下：

右侧文章列表，随鼠标而滚动。
点击文章列表中的文章，切换左侧内容。
鼠标滑过左侧内容出现投票框。
ajax提交评级。
提交过不允许重复评级。

1、数据库配置

在demo包里面有个tables.sql，导入数据库中。

有二张表：

quotes为文章表

quotes_votes评级表

修改connect.php中的数据库连接配置：

$db_host = 'localhost';
$db_user = 'root';
$db_pass = '123';
$db_database = 'rate';

根据你机子的情况而修改。

如果一切顺利的话，运行demo.php即可正常看到demo了。

2、用到的jquery以及jquery的UI、插件

jquery1.3.2
jquery-ui1.7
ui.stars 星级评价UI插件
jquery.qtip-1.0.0 提示层插件

3、生成文章列表

连接文章表和投票表进行查询：

$result = mysql_query("SELECT q.*, IF(v.id,1,0) AS voted
FROM quotes AS q
LEFT JOIN quotes_votes AS v
ON q.id = v.qid
AND v.ip =".$ip."
AND v.date_submit = '".$today."'
");

生成投票列表字符串变量$str

while($row=mysql_fetch_assoc($result))
{
// Looping through all the quotes and generating the list on the right of the page:
$str.= '<div id="q-'.$i.'">'.substr($row['txt'],0,20).
'<span>...</span><div id="rating-'.$i.'">';
$row['rating'] = round($row['rating']);
for($z=0;$z<5;$z++)
{
$str.='<input type="radio" name="rate-'.$i.'" value="'.($z+1).'" '.($z+1==$row['rating']?'checked="checked"':'').' disabled="disabled" />';
}
$str.='</div></div>';
// Each quote calls the fillData JS function
$script.="fillData(".formatJSON($row).");".PHP_EOL;
$i++;
}

这种星级样式是jquery的ui.stars转换的，php只要生成5个单选框即可，单选框的值从1-5，当然要读下数据库中的rating字段的值，然后判定该选中哪个单选框。

留意

$script.="fillData(".formatJSON($row).");".PHP_EOL;

formatJSON（）这个php函数在function.php中，将结果集转成json。

fillData()是javascript函数，在script.js中，将json数据保存到数组。（这些数据在进行ajax提交评级数据的时候要用到）

4、将单选框转成评级UI

代码在script.js中：

$(".star-rating").stars();

关于ui.stars的配置请详见我以前写的教程：

http://www.36ria.com/1310

到此如图部分创建结束

5、给列表的文章添加单击事件，切换左侧内容

$('.thumb').click(function(e){
/* 点击文章 */
var obj = quotes[parseInt(e.target.id.replace('q-',''))-1];
/* 获取该文章的在数据库中的数据，这里要把id过滤下，因为层的id有个'q-'前缀 */
$('#quote-content').fadeOut('fast',function(){
/* 动画隐藏内容层后触发的回调函数 */
if(!obj) return false;
/* 替换标题和作者信息 */
$(this).find('h1').html(obj.txt);
$(this).find('span').html(obj.author);
/* 改变页面背景颜色 */
if(obj.bgc) $('body').stop().animate({backgroundColor:obj.bgc},'slow');
/* 产生一个自动提示层和用于评级的5个单选框 */
var tmpstr='';
for(var z=0;z<5;z++)
{
tmpstr+='<input type="radio" name="voteQ" value="'+(z+1)+'" ';
if(z+1==obj.rating) tmpstr+='checked=checked ';
if(parseInt(obj.voted)) tmpstr+='disabled="disabled" ';
tmpstr+='/>';
}
tmpstr='<div id="voteRating">'+tmpstr+'</div>';
/* 更新提示层的内容 */
$('#box').qtip("api").updateContent(tmpstr);
/* 将单选框转成评级UI */
$('#voteRating').stars({
cancelShow: false,
oneVoteOnly: true,
callback:function(ui, type, value){vote(obj,value);}
});
Cufon.refresh();
/* 显示内容层 */
$(this).fadeIn('fast');
});
});

加了中文注释，就不再一一解释了，要留意的有二处地方：

1、

$('#box').qtip("api").updateContent(tmpstr)

updateContent是$.qtip()的方法用于更新提示层的内容

2、

$('#voteRating').stars({
cancelShow: false,
oneVoteOnly: true,
callback:function(ui, type, value){vote(obj,value);}
});

这里的的评级UI多了几个参数：

oneVoteOnly: true，允许投票

callback:function(){}，投票后的回调函数。（ajax提交评级）

6、创建提示层

关于qtip的配置问题，不在这里讨论，有机会会专门发篇教程。

$('#box').qtip({
content: {
text:'This is an active list element',
title: { text: 'Vote for this quote'},
prerender:true
},
show: 'mouseover',
hide: {
delay:1000,
fixed:true,
when:'mouseout'
},
position: {
corner: {
target: 'bottomMiddle',
tooltip: 'topMiddle'
},
adjust:{
y:20
}
},
style: {
border: {
width: 2,
radius: 6
},
name:'light',
tip: 'topMiddle'
}
});

7、ajax评级方法vote()

function vote(ob,value)
{
/*ajax将投票数据发给vote.php*/
$.post('vote.php',{qid:ob.id,vote:value},function(data){
if(data=="1")
{
/* 更新json数据 */
ob.voted=1;
ob.votes=ob.votes+1;
ob.vsum=ob.vsum+parseInt(value);
ob.rating = Math.round(ob.vsum/ob.votes);
/* 更新评级UI */
$('#rating-'+ob.id).stars("select", ob.rating);
quotes[ob.id-1]=ob;
}
});
}

8、保存投票数据vote.php

/* 将用户ip转成长整型 */
$ip = ip2long($_SERVER['REMOTE_ADDR']);
/* 将文章id和评级值转成整形 */
$qid = (int)$_POST['qid'];
$v = (int)$_POST['vote'];
/* 向数据库插入数据 */
mysql_query(' INSERT INTO quotes_votes (qid,ip,vote,date_submit)
VALUES ('.$qid.','.$ip.','.$v.',CURDATE())');
/* 更新文章表的评级统计数据 */
if(mysql_affected_rows($link)==1)
{
mysql_query("UPDATE quotes SET votes=votes+1, vsum=vsum+".$v.", rating=vsum/votes WHERE id=".$qid);
echo'1';
}
else echo '0';

原文：http://tutorialzine.com/2009/11/fancy-quotes/
非常长的一篇教程，我敲了三个小时，有不明白的地方可以给偶留言，谢谢

如何让层水平垂直居中页面

明河共影 — Wed, 14 Apr 2010 02:02:51 +0000

让一个层水平垂直居中是一个非常常见的布局方式，但在html中水平居中使用margin:0px auto;可以实现，但垂直居中使用外边距是无法达到效果的。（页面设置height:100%;是无效的），这里使用绝对定位+负外边距的方式来实现垂直居中，但同时要考虑页面重置大小的情况，需要使用js来修正。

请看demo：http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

点此下载

示例逐层演示了让层水平垂直居中的过程。

1、让层水平居中

.className{
width:270px;
height:150px;
margin:0 auto;
}

使用margin:0 auto;让层水平居中，留意宽度可高度必不可少。

2、让层垂直居中

.className{
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;
}

将层设置为绝对定位，left和top为50%，这时候使用负外边距，负外边距的大小为宽高的一半。

3、在重置窗体的时候层依旧保持居中

$(document).ready(function(){
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width()
- $('.className').outerWidth())/2,
top: ($(window).height()
- $('.className').outerHeight())/2
});
});
$(window).resize();
});

这里用到的jquery的方法。
resize()事件：当在窗体重置大小时触发。
outerWidth()：获取第一个匹配元素外部宽度（默认包括补白和边框）。

原文：http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/

使用jquery+php获取和设置Cookies

明河共影 — Tue, 13 Apr 2010 02:41:59 +0000

jquery.Cookie是个非常常用的jquery插件，用来获取和设置Cookies。这篇实战教程将讲解jquery.Cookie和php如何获取和设置。

来看个demo：http://www.36ria.com/demo/cookies/demo.php

示例中会记录你访问该页面的次数，并且保存输入框的值。

点此下载

制作教程：

php代码部分

// 浏览页面次数
$visited = (int)$_COOKIE['pageVisits'] + 1;
setcookie( 'pageVisits', // cookie名
$visited, // cookie值
time()+7*24*60*60 // 过期时间
);
?>

当运行这个页面时服务器端会写入个cookie值，用于保存你访问该页面的次数。这里应用到了php的setcookie方法。

输出这个值：

<div class="counter">php echo $visited?>div>

现在来看如何使用js获取和设置cookie

var cookie = $.cookie('demoCookie');
if(cookie) $('.jq-text').text(cookie).show();
$('.fields a').click(function(e){
var text = $('#inputBox').val();
// 设置cookie的值
$.cookie('demoCookie',text,{expires: 7});
$('.jq-text').text(text).slideDown('slow');
e.preventDefault();
});
$('#form1').submit(function(e){ e.preventDefault(); })

var cookie = $.cookie(‘demoCookie’);
获取键名demoCookie的值（如果不存在返回的是null）。

$.cookie(‘demoCookie’,text,{expires: 7});
当点击保存链接的时候，将输入框的值写入cookie。

原文：http://tutorialzine.com/2010/03/microtut-getting-and-setting-cookies-with-jquery-php/

使用ajax+jquery+php创建即时编辑可拖拉的菜单

明河共影 — Tue, 06 Apr 2010 05:29:15 +0000

中文示例下载：

点此下载

英文demo：http://demo.tutorialzine.com/2010/03/ajax-todo-list-jquery-php-mysql-css/demo.php

一、前言：

有用过DZ或phpwind的朋友应该有留意到，其中的菜单项编辑非常的方便和人性化，这篇教程，主要就是讲解如何创建即时编辑删除保存的菜单控制。

在你看这边教程时，最好掌握或了解以下技术：

jquery（示例使用1.42）
jqueryUI（示例中有用到二个jqueryUI插件：拖拉和弹出窗）
php（最好掌握类的写法）
ajax（掌握或理解ajax的机制）
mysql

如果你具备这些知识，想要了解综合这些技术，创建web2.0程序，那么这篇教程将对你非常有用处。

代码不一一讲解，这里只讲解前后台脚本的关键部分

二、javascript关键代码讲解

在初始化jquery拖拉UI中有个update回调函数，在拖拉后（数据改变）后触发：

update : function(){

var arr = $(“.todoList”).sortable(‘toArray’);

// 去掉菜单项的todo-前缀，只保留id
arr = $.map(arr,function(val,key){
return val.replace(‘todo-’,”);
});

// ajax保存修改
$.get(‘ajax.php’,{action:’rearrange’,positions:arr});
}

可以alert(arr)看看结果集，就会明白这里为什么要去掉，数组值中的’todo-’前缀，最后将这个数组传递给后台（包含所有的菜单项，而不只是有交换位置的2个菜单项。）

配置弹出窗

//配置删除窗体
$(“#dialog-confirm”).dialog({
resizable: false,
height:130,
modal: true,
autoOpen:false,
buttons: {
“删除”: function() {
$.get(“ajax.php”,{“action”:”delete”,”id”:currentTODO.data(‘id’)},function(msg){
currentTODO.fadeOut(‘fast’);
})

$(this).dialog(‘close’);
},
“取消”: function() {
$(this).dialog(‘close’);
}
}
});

删除弹出提示框的提示文字在#dialog-confirm容器内。
currentTODO就是当前操作的菜单项。这个值是在什么情况下赋予的呢，来看下面代码：

$(‘.todo a’).live(‘click’,function(e){

currentTODO = $(this).closest(‘.todo’);
currentTODO.data(‘id’,currentTODO.attr(‘id’).replace(‘todo-’,”));

e.preventDefault();
});

当你单击所有的菜单项下的链接的时候都会给currentTODO赋值（也就是点击保存、删除或取消按钮时）。
留意这里使用live()来给菜单项绑定事件，因为菜单项有可能随着你的操作，对象发生改变，所以使用live动态绑定事件。

来看点击编辑按钮后触发的方法。

//给编辑按钮监听单击事件

$(‘.todo a.edit’).live(‘click’,function(){

var container = currentTODO.find(‘.text’);

if(!currentTODO.data(‘origText’))
{
currentTODO.data(‘origText’,container.text());
}
else
{
return false;
}

$(‘

‘).val(container.text()).appendTo(container.empty());

// 添加保存和取消按钮:
container.append(
‘

‘+
‘保存 or 取消‘+
‘

‘
);

});

将该菜单项的文字写入缓存，并生成一个输入框，写入这个值。
同时生成保存和取消按钮。

三、php后台脚本关键部分讲解

todo.class.php是是一个自定义的php类。

我们来看这个类的关键部分。

public function __toString(){
return ‘

‘.$this->data['text'].’

编辑
删除

‘;
}

__toString是个魔法方法，当你输出类时，会自动触发这个方法。比如：

public static function createNew($text){

$text = self::esc($text);
if(!$text) throw new Exception(“输入框文字不合法！”);

$posResult = mysql_query(“SELECT MAX(position)+1 FROM tz_todo”);

if(mysql_num_rows($posResult))
list($position) = mysql_fetch_array($posResult);

if(!$position) $position = 1;

mysql_query(“INSERT INTO tz_todo SET text=’”.$text.”‘, position = “.$position);

if(mysql_affected_rows($GLOBALS['link'])!=1)
throw new Exception(“无法添加新的菜单项”);

// 创建个新的ToDo对象，并输出

echo (new ToDo(array(
‘id’ => mysql_insert_id($GLOBALS['link']),
‘text’ => $text
)));

exit;
}

createNew这个静态方法用于创建一个新的菜单项。留意函数内的echo()

public static function rearrange($key_value){

$updateVals = array();
foreach($key_value as $k=>$v)
{
$strVals[] = ‘WHEN ‘.(int)$v.’ THEN ‘.((int)$k+1).PHP_EOL;
}

if(!$strVals) throw new Exception(“No data!”);

mysql_query(” UPDATE tz_todo SET position = CASE id
“.join($strVals).”
ELSE position
END”);

if(mysql_error($GLOBALS['link']))
throw new Exception(“无法编辑菜单项位置”);
}

这是这个类中最复杂的代码，来重点说明下。rearrange这个静态方法用于在你拖拉菜单项结束后，根据位置值，来调整菜单项的位置。
接受的参数是包含二个菜单项位置值的数组。

上面是前台传递的参数情况。
关于mysql中case,when,then的使用，大家可以百度下，数据库不是我的专长，以免误人子弟。
对这段代码能比较好解读的童鞋，可以给在本页留言，谢谢。

connect.php：数据库连接配置

请将示例包内的.sql批处理文件导入数据库，并根据你机子的数据库情况，进行重新配置。

css部分

该示例有用到了css3，所以在IE下有部分效果看不到，比如圆角、阴影、发光效果，请使用其他支持css3的浏览器查看。

ul.todoList li{
background-color:#F9F9F9;
border:1px solid #EEEEEE;
list-style:none;
margin:6px;
padding:6px 9px;
position:relative;
cursor:n-resize;

/* CSS3 圆角和阴影样式 */

text-shadow:1px 1px 0 white;

-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
ul.todoList li:hover{
border-color:#9be0f9;

/* CSS3 发光效果: */
-moz-box-shadow:0 0 5px #A6E5FD;
-webkit-box-shadow:0 0 5px #A6E5FD;
box-shadow:0 0 5px #A6E5FD;
}

更多的细节就留给各位朋友们琢磨，有不明白的，可以给明河留言，或加入RIA之家群进行讨论，谢谢。

原文请看：http://tutorialzine.com/2010/03/ajax-todo-list-jquery-php-mysql-css/

jquery中的hover方法教程—明河谈jquery

明河共影 — Wed, 31 Mar 2010 02:31:20 +0000

点此下载

jQuery中的hover方法是个非常常用的方法，接受二个参数，第一个参数为鼠标移入对象时触发的事件，第二个参数为鼠标移出对象时触发的事件。

很多人误以为hover()是mouserover和mouseout的结合体，实际上不是。

hover = mouseenter+mouseleave

mouseenter和mouseleave这二个事件，jquery新手应该会觉得很陌生，实际上它实现的功能和mouserover和mouseout是极为类似的，那为什么会出现这二个事件，而不使用mouserover和mouseout呢？

这就要从mouseout的诡异bug说起了，mouseout会在你离开子元素的时候就把事件冒泡到父元素上，也就是说不管你的鼠标是否还在父元素中，只要你一离开子元素，就会触发mouseout。

这说法非常的抽象，来看demo：

http://www.36ria.com/demo/hover/demo.html

尤其看下第三个关于mouseout的示例，你就会发现这个问题的所在。

例子的代码非常简单，这里就不再累述，重点说明下最后一个例子的写法：

$('.selectorClass4').hover(function(){
this.check = this.check || 1;
$(this).stop().fadeTo('slow',this.check++%2==0 ? 1 : 0.4);
});

留意了，这里的hover只有一个参数，也就是只有移入事件，但同样实现了移入和移出。那是如何实现的呢？
非常关键的一个属性：this.check
大家可以使用alert(this.check )试下，非常有意思，奇数为移入，而偶数为移出，但注意第一次移入为undefined，所以才需要this.check = this.check || 1;当this.check不存在时赋值1

jquery结合JSONP教程—明河谈jquery

明河共影 — Mon, 22 Mar 2010 03:35:59 +0000

今天群里的布川せ酷子童鞋向偶询问在juqery下jsonp的问题，借此机会写个关于jquery结合jsonp的教程。

1、什么是jsonp？

Ajax技术现在非常的盛行，但javascript的跨域问题一直是个问题，而jsonp的出现算是比较好的解决方案。

关于jsonp最详细的介绍请看：http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/

jsonp的基础知识上面这个页面已经非常详细了，不再重复。接下来重要演示jquery下jsonp的使用。

2、jquery与jsonp

jquery已经可以完美的使用jsonp，而且一如既往的便利。

$.getJSON()

这是最关键的函数，返回json数据，与其他的ajax门面函数类似，比如$.get(),$.getScript()等，但有个非常不一样的地方。来看下面代码

jQuery.getJSON("http://api.zuosa.com/statuses/public_timeline.json?callback=?", function(data) {
alert(data);
});

这里我使用微博做啥网的一个API，public_timeline.json返回json数据。
这里留意的是callback=?，非常关键的点，jQuery 自动将 ? 替换为要调用的生成函数名，所以callback相当于一个接口，是解决跨域的关键。后面的？是必须的。
运行后如图：

那么实际返回的json数据是什么情况呢？请看下面的截图：

数据太多了，可以运行下demo然后用firebug查看。
现在的firebug可以查看格式化的json数据，效果如下：

点击进去后可以查看的到详细的单条json数据，如下：

实际过程就是这么简单，可以在回调函数中对数据进行操作。
我在demo页面里面输出了，一个列表，有兴趣的可以参考下代码。

点此下载

关于服务器端生成jsonp请看，IBM那个介绍页面。

使用jquery制作文字背景图片特效

明河共影 — Wed, 17 Mar 2010 03:38:00 +0000

前几天在gayadesign上看到了一个颇有意思的效果，自己就模范写了一个。

点此下载

背景图片，可以自己更改，我这里面使用了《air》和《最终幻想7》的壁纸，嘿嘿，欢迎动漫爱好者交流。

由于使用的是png，不支持IE6。

制作教程：

创建一个文字遮罩图片：

使用ph0toshop制作图片如下：

图层关系如下：

创建如下html页面，引入jquery库还有动画增强插件easing，还有最重要的，务必引入jquery.backgroundPosition.js

backgroundPosition插件用于修正背景图片无法使用动画的问题。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">script>
<script type="text/javascript" src="jquery.easing.1.3.js">script>
<script type="text/javascript" src="jquery.backgroundPosition.js">script>

<div class="scrollBg">
<img src='mask.png' alt='RIA之家' width="500" height="109" />
div>
<div id="scrollBg2" class="scrollBg">
<img src='mask.png' alt='RIA之家' width="500" height="109" />
div>

创建2个图片容器，里面为遮罩图片，就是文字图片

样式如下：

body {background-color: #000000;}
.scrollBg {
background-image: url(bg.jpg);
background-color: #000000;
width: 500px;
height: 109px;
}
.scrollBg img {display: block;}
#scrollBg2{background-image: url(bg2.jpg);}

js代码如下

$(document).ready(function() {
moveBgAround('.scrollBg');
});
/**
*移动背景
*/
function moveBgAround(applyTo,x,y) {
var _applyTo = applyTo;
var _maxX = x || 1000;
var _maxY = y || 700;
//随机移动距离
var x = Math.floor(Math.random()*_maxX);
var y = Math.floor(Math.random()*_maxY);
//随机速度
var time = Math.floor(Math.random()*1001) + 2000;
//让背景开始移动
$(_applyTo).animate({
backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
}, time, "swing", function() {
//回调函数
moveBgAround(_applyTo,_maxX,_maxY);
});
}

脚本很短，有不明白的地方可以给我留言。

jquery1.4中文参考手册下载

明河共影 — Wed, 03 Mar 2010 10:22:43 +0000

最新的jquery中文手册，不包含1.42的一个新方法，其他的内容基本上是全了。

点此下载

《jquery1.4指南》（英文）下载

明河共影 — Tue, 23 Feb 2010 11:30:58 +0000

书名：《jQuery+1.4+Reference+Guide》

点此下载

这是一本全面介绍jquery1.4的书，非常不错的jquery新手手册，带有非常详实的用例，目前只有英文版，有兴趣的朋友先凑合着看。

再推荐一本实战的书，也是英文版的

书名：《Packtpub.jQuery.1.3.with.PHP》

很好的一本jquery实战书。主要是讲解jquery和php结合时的技巧、实例。也只有英文本。

点此下载

jquery1.4.2发布！

明河共影 — Sun, 21 Feb 2010 01:24:09 +0000

没想到jquery这次居然更新这么快，jquery1.4的教程我还没有发二周，jquery1.4.2就发布了。

这次jquery1.4.2更新的内容主要是性能和新增了一些新的API。

性能方面：看下图

点此下载

包含了压缩版（24K）和完整版。

你也可以直接在网页中引入：

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js

新增方法：

.delegate( selector, eventType, handler )

这个函数的确很有用。用于给指定的对象附加一个事件监听。

selector：选择器

eventType：事件类型

handler：监听函数

Delegate这个方法用于替代1.3.2中的.live()方法。这个方法比live来的方便，而且也可以达到动态添加事件的作用。

来看下面示例：给表格的每个td绑定hover事件
以前的写法如下：

$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});

现在只要如此：

$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});

一行代码搞定

当然既然有.delegate()自然也有.undelegate()，用于解除事件绑定

jquery1.4中你不可不知的九大改进

明河共影 — Sat, 23 Jan 2010 02:23:59 +0000

花了一周时间终于将jquery1.4的新的API以及特性介绍完毕。

jquery1.4发布信息和下载请看：http://www.36ria.com/?p=1340

jquery1.4的变化不可谓不大，今天总结下jquery1.4中最为关键的九大变化：

一、便利的设置函数

jquery1.4的大部分设置值对方法都可以设置第二个参数为回调函数。比如：.css(), .attr(), .val(), .html(), .text()。

具体说明请看：http://www.36ria.com/?p=1344

二、ajax方法的改进，留意新增一个全新属性Context

具体说明请看：http://www.36ria.com/?p=1348

三、.detach()：用于删除对象，同时保留删除对象数据。

detach这个方法非常有用，作用近似于.remove()，但比remove来的强大。detach在删除的同时，会返回被删除对象。

具体说明请看：http://www.36ria.com/?p=1366

四、.has() ：测试一个jquery对象是否包含指定的Dom或选择器的对象。

这个方法非常有用。接受一个参数：选择器或DOM,你可以对只存在指定子节点的jquery对象进行操作。

具体说明请看：http://www.36ria.com/?p=1368

五、.nextUntil([selector])：选取jquery对象接下来的同级所有与选择器匹配的对象。

这个方法很有用。jquery的查找方法next()很常用，但next()只选取接下来的一个对象，无法选取多个。而如果使用siblings()又不方便，1.4新加的nextUntil()就是用于解决这个问题。同时这个方法有个神奇的地方，即找到跟jquery对象选择器一样时候会会终止选取。

具体说明请看：http://www.36ria.com/?p=1368

六、jQuery.proxy() ：提取一个函数，并返回一个带有指定作用域的新函数。

具体说明请看：http://www.36ria.com/?p=1372

七、.focusin()和.focusout()

作用近似于focus和blur事件，但是修正了鼠标获取焦点和失去焦点，无法冒泡的问题。

具体说明请看：http://www.36ria.com/?p=1376

八、bind()支持批量绑定事件

具体说明请看：http://www.36ria.com/?p=1376

九：快速创建html

这个改进非常重要，可以减少你不少的代码量。
$(““,{“id” : “test_span”,css:{“display” : “none”}}).appendTo(this);
$()接受第二个参数为一对象字面量，你可以直接在里面给对象添加样式、id、样式名等。不用再像以前那样使用attr()和css()了。
具体说明请看：http://www.36ria.com/?p=1376

jquery1.4教程四：新增事件和其他改进

明河共影 — Sat, 23 Jan 2010 02:06:07 +0000

jquery1.4中新增了二个事件：

.focusin()和.focusout()

作用近似于focus和blur事件，但是修正了鼠标获取焦点和失去焦点，无法冒泡的问题。

还是来看示例：http://www.36ria.com/demo/jquery1.4测试/focusin.html

源代码如下：

<p><input type="text" />p>

$("p").bind({
"focusin" : function(){
$(this).children("span").length == 0 && $("",{"id" : "test_span",css:{"display" : "none"}}).appendTo(this).html("测试测试").fadeIn("fast");
},
"focusout" : function(){
var $span = $(this).children("span");
$(this).children("span").fadeOut(1000);
$span.queue(function(){$(this).remove();$(this).dequeue();})
}
})

在这个示例中我也同时演示了jquery1.4的二大关键改进：

一、bind()支持批量绑定事件

示例中，我同时给$(“p”)绑定了focusin和focusout事件。

二、快速创建html

$("123",{"id" : "test_span",css:{"display" : "none"}}).appendTo(this);

下面来说说jquery1.4其他方面的改进

eq()和get()二个方法支持负数参数

取负数时，从最后向前读取。比如下面代码：

$("div").eq(-2);
$("div").get(-2);

toggleClass()支持多个样式

比如下面代码：

$("div").toggleClass("current active");

data() 支持批量设值

比如下面代码：

$('body').data({one: 1, two: 2});

after() 参数可以为一个函数

比如：

$('p').after(function() {
return '
' + this.className + '
';
});

将给每个段落都加上一个层
同样before也支持。

jQuery.param()支持序列化html5表单元素值。

到此jquery1.4大部分的API都已经介绍完毕，如有补充可以给我留言。

教程中出现的全部示例下载：
点此下载

jquery1.4教程三：新增方法教程（3）

明河共影 — Fri, 22 Jan 2010 02:25:14 +0000

.last() ：选取与选择器匹配的最后一个对象

在1.4之前，只有$(“:last”)，没有last()这个方法，last()的作用很容易理解。

来看示例：http://www.36ria.com/demo/jquery1.4测试/last.html

<<ul>
<li>测试1li>
<li>测试2li>
<li>测试3li>
<li>测试4li>
<li>测试5li>
ul>

$('li').last().css('background-color', 'red');
$('li').first().css('background-color', 'green');

从示例中可以看到，最后一个li的背景设置成了红色。

既然有.last()，当然也有.first()，作用相反，这里就不在演示。

jQuery.proxy() ：提取一个函数，并返回一个带有指定作用域的新函数。

这个函数有些不好理解，留意我写的demo，此函数的作用更多体现在事件监听中，改变的是this德指向。重点说明下：

jQuery.proxy( function, scope )：

第一个参数，为将被改变作用域的函数
第二个参数，新的作用域

jQuery.proxy( scope, name )：

第一个参数：用于设置作用域的对象
第二个参数：作用域将被改变的函数名

来看demo：http://www.36ria.com/demo/jquery1.4测试/proxy.html
源代码如下：

<input name="t" id="t" type="button" value="不使用proxy()" />
<input name="test" id="test" type="button" value="使用proxy()" />

var obj = {
name: "RIA之家",
test: function() {
alert(this.name);
// $("#test").unbind("click", obj.test);
}
};
var obj2 = {
name: "36ria"
};
$("#t").click(function(){
obj.test();
})
$("#test").click(jQuery.proxy(obj.test, obj2) );

从示例中可以看到：

jQuery.proxy()返回的是一个函数。

jQuery.proxy(obj.test, obj2)：将原test()中的this.name的this，指向obj2。所有新的函数返回的值为obj2中的name，而不是obj的name。

.toArray() ：将juqery对象内容序列化成数组

这个方法很好理解。但有一点要说明下，返回的是DOM对象数组。

来看示例：http://www.36ria.com/demo/jquery1.4测试/toArray.html
源代码如下：

<div>测试1div>
<div>测试2div>
<div>测试3div>
<h4>h4>
<input name="test" id="test" type="button" value="测试" />

$("#test").click(function(){
var divs = $("div").toArray();
var aHtml = [];
$.each(divs,function(){
aHtml.push($(this).html());
})
alert(aHtml);
$("h4").html(aHtml.join("|"));
})

.unwrap() ：用于删除匹配的父级元素

大家应该对wrap()这个方法非常熟悉了，1.4新加入的unwrap()作用与wrap()相反，用于删除父级元素。

来看示例：http://www.36ria.com/demo/jquery1.4测试/unwrap.html

源代码：

<p>测试1p>
<p>测试2p>
<p>测试3p>
<input name="test" id="test" type="button" value="测试" />

$("#test").toggle(function(){
$("p").wrap("
");
}, function(){
$("p").unwrap();
});

从示例中可以看到，当第一次点击时，给p包裹一个div，再点击时使用unwrap()删除父级的div。

至此jquery1.4新增的方法，全部介绍完毕，有问题的可以给我留言，下期介绍新增事件。

jquery1.4教程三：新增方法教程（2）

明河共影 — Thu, 21 Jan 2010 08:16:35 +0000

这篇教程将继续介绍jquery1.4新的实用方法：

.has() ：测试一个jquery对象是否包含指定的Dom或选择器的对象。

这个方法非常有用。接受一个参数：选择器或DOM,你可以对只存在指定子节点的jquery对象进行操作。

来看demo：http://www.36ria.com/demo/jquery1.4测试/has.html
源代码如下：

<ul>
<li>测试1li>
<li>测试2
<ul>
<li>测试2.1li>
<li>测试2.1li>
ul>
li>
<li>测试3li>
<li>测试4li>
ul>

$('li').has('ul').css('background-color', 'red');

示例中只有嵌套ul的li才加上红色背景。

jQuery.isEmptyObject() ：测试一个对象是否为空

比如：

jQuery.isEmptyObject({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false

jQuery.isPlainObject() ：测试变量类型是否为Object

比如：

jQuery.isPlainObject({}) // true
jQuery.isPlainObject("test") // false

.nextUntil([selector])：选取jquery对象接下来的同级所有与选择器匹配的对象。

这个方法很有用。jquery的查找方法next()很常用，但next()只选取接下来的一个对象，无法选取多个。而如果使用siblings()又不方便，1.4新加的nextUntil()就是用于解决这个问题。同时这个方法有个神奇的地方，即找到跟jquery对象选择器一样时候会会终止选取。有些拗口，看下面示例

来看示例：http://www.36ria.com/demo/jquery1.4测试/nextUntil.html

源代码如下：

<dl>
<dt>dt1dt>
<dd>dd1dd>
<dd>dd2dd>
<dd>dd3dd>
<dd>dd4dd>
<dt id="term-2">dt2dt>
<dd>dd1dd>
<dd>dd2dd>
<dd>dd3dd>
<dt>dt3dt>
<dd>dd1dd>
<dd>dd2dd>
dl>

$('#term-2').nextUntil('dt').css('background-color', 'red');

可以看到，只选中了$(‘#term-2′)以下的dd，但是遇到下个

dt3

时就终止选取了！

既然有nextUntil当然就有prevUntil，作用相反，这里就不再做演示。

jQuery.noop() ：返回一个空函数

这个方法对制作插件有些用处。

.parentsUntil( [ selector ] )

这个方法，我不知道如何才能表述的易于理解。还是看官方英文说明：http://api.jquery.com/parentsUntil/

jquery1.4教程三：新增方法教程（1）

明河共影 — Wed, 20 Jan 2010 02:50:34 +0000

接下来几篇教程，将重点讲解jquery1.4新增的16个方法，有几个方法还是非常实用的。

.clearQueue()：移除队列中还没有运行的所有函数

clearQueue()的作用与stop(true)很类似，简化了stop(true)，在1.4后stop()主要用于终止动画，而终止队列函数使用clearQueue()，clearQueue()接受一个参数：队列名称，即移除特定队列。

来看demo：http://www.36ria.com/demo/jquery1.4测试/clearQueue.html

源代码如下：

<input name="" id="start" type="button" value="开始运行动画" />
<input name="" id="stop" type="button" value="终止动画" />
<div>div>

$(function(){
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").clearQueue();
$("div").stop();
});
})

留意stop的监听函数中的
$(“div”).clearQueue();
$(“div”).stop();
大家可以看看将这二句其中一句注释掉后，看下效果，体会下clearQueue与stop的区别。

.contains()：检查一个DOM元素是否包含另外一个DOM元素

留意contains接受二个参数是DOM元素，如下形式：

jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false

.delay()：设置一个定时器，用于延迟队列中函数的运行

接受二个参数：

第一个参数：用于定时器的持续时间
第二个参数：对列名（可选）

来看demo：http://www.36ria.com/demo/jquery1.4测试/delay.html
源代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>delay()title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">script>
<style>
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
style>
head>
<body>
<p><button>运行button>p>
<div class="first">div>
<div class="second">div>
<script>
$("button").click(function() {
$("div.first").slideUp(300).delay(800).fadeIn(400);
$("div.second").slideUp(300).fadeIn(400);
});
script>
body>
html>

留意第一个绿色的层，在隐藏后，延迟了800毫秒才又触发fadeIn显示。

.detach()：用于删除对象，同时保留删除对象数据。

detach这个方法非常有用，作用近似于.remove()，但比remove来的强大。detach在删除的同时，会返回被删除对象。
来看demo：http://www.36ria.com/demo/jquery1.4测试/detach.html
源代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>detach()title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">script>
<style>p { background:yellow; margin:6px 0; } p.off { background: black; }style>
head>
<body>
<button>添加/删除段落button>
<p>这是一个用于测试的段落p>
<script>
var p;
$("button").click(function(){
if (p) {
p.appendTo("body");
p = null;
} else {
p = $("p").detach();
}
});
script>
body>
html>

留意p = $(“p”).detach();。删除了$(“p”)。但将$(“p”)写入了p 这个变量。

所有教程结束了，将把所有demo压缩下放出。

ria之家--RIA三部曲：jquery、ext、flex » jquery教程

15个相当不错的jquery技巧

1.使用最新的jquery版本

2.保持选择器的简单

3.jQuery对象作为数组处理

4.selector属性

5.创建一个空的jQuery对象

6.选择随机元素

7.使用css钩子

8.使用自定义的Easing（缓动动画效果）函数

9.$.proxy()的使用

10.快速获取节点数

11.构建个jquery插件

12.设置ajax全局事件

13.延迟动画

15.jquery的本地存储

使用javascript生成文件

原理简述：

html代码：

php处理数据，返回文件：

assets/jquery.generateFile.js

1.生成个iframe

2.向iframe添加一个表单

3.提交表单

初始化插件，生成文件

使用jquery制作ajax提交表单时的交互按钮

1.构建一个简单表单

2.表单样式

3.js脚本

使用jquery+css3制作旋转效果的幻灯片

1.创建一个幻灯片html结构

2.关键css代码

3.js脚本（已加中文注释）

3.1更新图片容器li的z-index

3.2初始默认设置图片的旋转角度的理由

3.3jquery自定义事件的使用

3.4jquery.rotate插件的使用

jquery V1.4.3试用报告

一、jquery V1.4.3新方法测试

1、jQuery.isWindow

2、jQuery.type()

3、jQuery.fx.interval

4、event.namespace

二、jquery V1.4.3的方法改进

1、事件方法的改进

2、所有的动画方法支持缓动

三、明河结语

推荐6个使用jquery制作的选项卡

1、Create A Tabbed Interface Using jQuery

2、Sweet AJAX Tabs With jQuery 1.4 & CSS3

3、Create a Slick Tabbed Content Area using CSS & jQuery

4、Fancy Sliding Form with jQuery

5、Create A Tabbed Interface Using jQuery

6、Tabify

jquery的ajax全局事件详解—明河谈jquery

jquery的ajax方法的全部全局事件：

ajax方法的全局事件的用处

ajax方法完整事件流

ajax方法完整事件流演示

使用jquery制作背景变化菜单

制作过程

1、创建如下html菜单结构

2、加上css样式

3、javascript脚本

基础模板的缺陷—jquery插件开发进阶教程（2）

jquery插件基础模板的缺陷

1、难以实现类与类之间的继承

2、无法开放API供外部调用

3、无法提供自定义事件支持

4、无法模拟出接口。

5、缺少debug能力。

结语

实用jquery代码片段集合（下）

如何隐藏除了特定选择器下的全部对象

寻找带有指定字符串的元素

获取垂直滚动距离

向表格追加一行数据

超过一个属性时的过滤

让cookies在X分钟后过期

选择从第一个到第X个的元素