HTML

<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
</ul>

CSS

ul { list-style:none; margin:0; padding:0; }
li { float:left; width:100px; margin:0; padding:0; text-align:center; }
li a { display:block; padding:5px 10px; height:100%; color:#FFF; text-decoration:none; border-right:1px solid #FFF; }
li a { background:url(bg.jpg) repeat 0 0; }
li a:hover { background-position:50px 0; }

//字母数字
jQuery.validator.addMethod(“alnum”, function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
}, ”只能包括英文字母和数字”);

// 手机号码验证
jQuery.validator.addMethod(“cellphone”, function(value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^(1\d{10})$/.test(value));
}, ”请正确填写手机号码”);

// 电话号码验证
jQuery.validator.addMethod(“telephone”, function(value, element) {
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, ”请正确填写电话号码”);

// 邮政编码验证
jQuery.validator.addMethod(“zipcode”, function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, ”请正确填写邮政编码”);

// 汉字
jQuery.validator.addMethod(“chcharacter”, function(value, element) {
var tel = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (tel.test(value));
}, ”请输入汉字”);

/**
* 身份证号码验证
*
*/
function isIdCardNo(num) {

var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
var parityBit=new Array(“1″,”0″,”X”,”9″,”8″,”7″,”6″,”5″,”4″,”3″,”2″);
var varArray = new Array();
var intValue;
var lngProduct = 0;
var intCheckDigit;
var intStrLen = num.length;
var idNumber = num;
// initialize
if ((intStrLen != 15) && (intStrLen != 18)) {
return false;
}
// check and set value
for(i=0;i<intStrLen;i++) {
varArray[i] = idNumber.charAt(i);
if ((varArray[i] < ’0′ || varArray[i] > ’9′) && (i != 17)) {
return false;
} else if (i < 17) {
varArray[i] = varArray[i] * factorArr[i];
}
}

if (intStrLen == 18) {
//check date
var date8 = idNumber.substring(6,14);
if (isDate8(date8) == false) {
return false;
}
// calculate the sum of the products
for(i=0;i<17;i++) {
lngProduct = lngProduct + varArray[i];
}
// calculate the check digit
intCheckDigit = parityBit[lngProduct % 11];
// check last digit
if (varArray[17] != intCheckDigit) {
return false;
}
}
else{        //length is 15
//check date
var date6 = idNumber.substring(6,12);
if (isDate6(date6) == false) {

return false;
}
}
return true;

}
/**
* 判断是否为“YYYYMM”式的时期
*
*/
function isDate6(sDate) {
if(!/^[0-9]{6}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
if (year < 1700 || year > 2500) return false
if (month < 1 || month > 12) return false
return true
}
/**
* 判断是否为“YYYYMMDD”式的时期
*
*/
function isDate8(sDate) {
if(!/^[0-9]{8}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
day = sDate.substring(6, 8);
var iaMonthDays = [31,28,31,30,31,30,31,31,30,31,30,31]
if (year < 1700 || year > 2500) return false
if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1]=29;
if (month < 1 || month > 12) return false
if (day < 1 || day > iaMonthDays[month - 1]) return false
return true
}

<script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js” type=”text/javascript”></script>
<script src=”http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js” type=”text/javascript”></script>
<script src=”http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/localization/messages_cn.js” type=”text/javascript”></script>

二、默认校验规则

messages: {
required: “This field is required.”,
remote: “Please fix this field.”,
email: “Please enter a valid email address.”,
url: “Please enter a valid URL.”,
date: “Please enter a valid date.”,
dateISO: “Please enter a valid date (ISO).”,
dateDE: “Bitte geben Sie ein g眉ltiges Datum ein.”,
number: “Please enter a valid number.”,
numberDE: “Bitte geben Sie eine Nummer ein.”,
digits: “Please enter only digits”,
creditcard: “Please enter a valid credit card number.”,
equalTo: “Please enter the same value again.”,
accept: “Please enter a value with a valid extension.”,
maxlength: $.validator.format(“Please enter no more than {0} characters.”),
minlength: $.validator.format(“Please enter at least {0} characters.”),
rangelength: $.validator.format(“Please enter a value between {0} and {1} characters long.”),
range: $.validator.format(“Please enter a value between {0} and {1}.”),
max: $.validator.format(“Please enter a value less than or equal to {0}.”),
min: $.validator.format(“Please enter a value greater than or equal to {0}.”)
},

<script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js” type=”text/javascript”></script>
<script src=”http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js” type=”text/javascript”></script>
<script src=”http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/localization/messages_cn.js” type=”text/javascript”></script>
$().ready(function() {
$(“#signupForm”).validate();
});

<form id=”signupForm” method=”get” action=”">
<p>
<label for=”firstname”>Firstname</label>
<input id=”firstname” name=”firstname” />
</p>
<p>
<label for=”email”>E-Mail</label>
<input id=”email” name=”email” />
</p>
<p>
<label for=”password”>Password</label>
<input id=”password” name=”password” type=”password” />
</p>
<p>
<label for=”confirm_password”>确认密码</label>
<input id=”confirm_password” name=”confirm_password” type=”password” />
</p>
<p>
<input type=”submit” value=”Submit”/>
</p>
</form>

$().ready(function() {
$(“#signupForm”).validate({
rules: {
firstname: “required”,
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: “#password”
}
},
messages: {
firstname: “请输入姓名”,
email: {
required: “请输入Email地址”,
email: “请输入正确的email地址”
},
password: {
required: “请输入密码”,
minlength: jQuery.format(“密码不能小于{0}个字符”)
},
confirm_password: {
required: “请输入确认密码”,
minlength: “确认密码不能小于5个字符”,
equalTo: “两次输入密码不一致不一致”
}
}
});
});
//messages处，如果某个控件没有message，将调用默认的信息

<form id=”signupForm” method=”get” action=”">
<p>
<label for=”firstname”>Firstname</label>
<input id=”firstname” name=”firstname” />
</p>
<p>
<label for=”email”>E-Mail</label>
<input id=”email” name=”email” />
</p>
<p>
<label for=”password”>Password</label>
<input id=”password” name=”password” type=”password” />
</p>
<p>
<label for=”confirm_password”>确认密码</label>
<input id=”confirm_password” name=”confirm_password” type=”password” />
</p>
<p>
<input type=”submit” value=”Submit”/>
</p>
</form>

$().ready(function() {
$(“#signupForm”).validate({
submitHandler:function(form){
alert(“submitted”);
form.submit();
}
});
});

$.validator.setDefaults({
submitHandler: function(form) { alert(“submitted!”);form.submit(); }
});

$().ready(function() {
$(“#signupForm”).validate({
debug:true
});
});

<tr>
<td><label id=”lfirstname” for=”firstname”>First Name</label></td>
<td><input id=”firstname” name=”firstname” type=”text” value=”" maxlength=”100″ /></td>
<td></td>
</tr>
<tr>
<td style=”padding-right: 5px;”>
<input id=”dateformat_eu” name=”dateformat” type=”radio” value=”0″ />
<label id=”ldateformat_eu” for=”dateformat_eu”>14/02/07</label>
</td>
<td style=”padding-left: 5px;”>
<input id=”dateformat_am” name=”dateformat” type=”radio” value=”1″  />
<label id=”ldateformat_am” for=”dateformat_am”>02/14/07</label>
</td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan=”2″>
<div id=”termswrap”>
<input id=”terms” type=”checkbox” name=”terms” />
<label id=”lterms” for=”terms”>I have read and accept the Terms of Use.</label>
</div>
</td>
</tr>
errorPlacement: function(error, element) {
if ( element.is(“:radio”) )
error.appendTo( element.parent().next().next() );
else if ( element.is(“:checkbox”) )
error.appendTo ( element.next() );
else
error.appendTo( element.parent().next() );
}

$().ready(function() {
var validator = $(“#signupForm”).validate({
submitHandler:function(form){
alert(“submitted”);
form.submit();
}
});
$(“#reset”).click(function() {
validator.resetForm();
});
});

1. jQuery 选项卡界面 / 选项卡结构菜单教程
这种 类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此 演示哟，你一定会喜欢上它的。
演示 | 下载 | 介绍

2. jQuery目录导航插件
这个jQuery插件为我们提供了添加基于字母顺序的导航小部件到有序和无序列表的方法。一个在 列表之上的简易的(via CSS)导航条，向用户展示从A到Z的检索。通过从列表中选择一个字母来显示以此字母开头的所有元素。在可选字母上面显示的计数，是表明当你点击此字母的 时候会有多少项目被现实。除此之外还有其他的基本功能可供选择。
演示 | 下载 | 介绍

3. jQuery的Kwicks菜单
Kwicks起源于Mootools中的一个效果(相同名字),逐渐演变成一个高度可定制 的通用部件.
演示 | 下载 | 介绍

4. jQuery褪色菜单 -更换内容
CSS-tricks上很好的教程，讲解如何使用css和jQuery, 这次是他们教导如何使用 jquery使得菜单选项褪色。
演示 | 下 载 | 介绍

5. jQuery idTabs
idTabs是jQuery的插件。他能非常容易的为网站添加选项卡. 但是他也为无穷的可能性敞开大门。
演示 | 下载 | 介绍

6. jQuery + CSS创建顺畅的选显卡内容区
网页设计师设法把大量的信息浓缩在一个网页上而不失可用性是最大的挑战之 一。内容选项卡化是处理此类问题非常棒的方法，最近广泛被应用于博客。这是一篇非常棒的教程讲解，使用HTML建立一个小的选项卡信息盒，最后使用一些简 单js功能与jQuery库实现。
演示 | 下载 | 介绍

原文地址 http://www.jgpy.cn/blog/front-end/6_cool_tabs_nav_on_jQuery.htm

jQuery 可以以 json 文件传输协议来传输数据(类似 xml，而且大有取代 xml 的趋势)，而网站后台代码必须与之配合使用。PHP 是用 json_encode 函数来对返回的数组数据进行编码的，但这个函数只有 PHP5.2版本以上才支持。

从网上找到一个 json 的操作类，本人在 PHP4.4.7 版本下测试通过。本人还建了个函数 function my_json_encode($phparr)，使代码兼容 PHP5.2 以上版本。

示例代码(包括 json 的类包软件)可以在以下网址下载：http://download.csdn.net/source/810895

以下是全部代码：

<html>
<head>
<title>jQuery Ajax 实例演示</title>
</head>
<script language=”javascript” src=”../lib/jquery.js”></script>
<script language=”javascript”>

$(document).ready(function ()
{
$(‘#send_ajax’).click(function (){
var params=$(‘input’).serialize(); //序列化表单的值
$.ajax({
url:’ajax_json.php’, //后台处理程序
type:’post’,         //数据发送方式
dataType:’json’,     //接受数据格式
data:params,         //要传递的数据
success:update_page  //回传函数(这里是函数名)
});
});

//$.post()方式：
$(‘#test_post’).click(function (){
$.post(
‘ajax_json.php’,
{
username:$(‘#input1′).val(),
age:$(‘#input2′).val(),
sex:$(‘#input3′).val(),
job:$(‘#input4′).val()
},
function (data) //回传函数
{
var myjson=”;
eval(‘myjson=’ + data + ‘;’);
$(‘#result’).html(“姓名:” + myjson.username + “<br/>工作:” + myjson['job']);
}
);
});

//$.get()方式：
$(‘#test_get’).click(function ()
{
$.get(
‘ajax_json.php’,
{
username:$(“#input1″).val(),
age:$(“#input2″).val(),
sex:$(“#input3″).val(),
job:$(“#input4″).val()
},
function(data) //回传函数
{
var myjson=”;
eval(“myjson=” + data + “;”);
$(“#result”).html(myjson.job);
}
);
});
});

function update_page (json)  //回传函数实体，参数为XMLhttpRequest.responseText
{
var str=”姓名:”+json.username+”<br />”;
str+=”年龄:”+json.age+”<br />”;
str+=”性别:”+json.sex+”<br />”;
str+=”工作:”+json.job+”<br />”;
str+=”追加测试:”+json.append;
$(“#result”).html(str);
}
</script>
<body>

<div id=”result” style=”background:orange;border:1px solid red;width:300px;height:200px;”></div>
<form id=”formtest” action=”" method=”post”>
<p><span>输入姓名:</span><input type=”text” name=”username” id=”input1″ /></p>
<p><span>输入年龄:</span><input type=”text” name=”age” id=”input2″ /></p>
<p><span>输入性别:</span><input type=”text” name=”sex” id=”input3″ /></p>
<p><span>输入工作:</span><input type=”text” name=”job” id=”input4″ /></p>
</form>
<button id=”send_ajax”>提交</button>
<button id=”test_post”>POST提交</button>
<button id=”test_get”>GET提交</button>

</body>
</html>

PHP 文件 ajax_json.php：

<?php
//$arr = $_POST; //若以$.get()方式发送数据，则要改成$_GET.或者干脆:$_REQUEST
$arr = $_REQUEST;
$arr['append'] = ‘测试字符串’;
//print_r($arr);
$myjson = my_json_encode($arr);
echo $myjson;

function my_json_encode($phparr)
{
if(function_exists(“json_encode”))
{
return json_encode($phparr);
}
else
{
require_once ‘json/json.class.php’;
$json = new Services_JSON;
return $json->encode($phparr);
}
}
?>

1. Facebook like Autosuggestion

查看演示

2. Coda Popup Bubbles

查看演示

3. Creating a Dynamic Poll with jQuery and PHP

查看演示

4. Create an apple style menu and improve it via jQuery

查看演示

5. Tabbed Content using jQuery and WP_Query

查看演示

6. Slide out and drawer effect

查看演示

7. Wordpress Sidebar Turned Apple-Flashy Using jQuery UI

查看演示

8. Image Fade Revisited

查看演示

9. Photo Slider Tutorial

查看演示

10. Create a Slick Tabbed Content Area using CSS & jQuery

查看演示

原文链接：http://dpxmag.com/10-super-jQuery-tutorials.html

Hello jQuery

在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:

$(document).ready(function() {
	// do stuff when DOM is ready
});

放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.

$(document).ready(function() {
	$('a').click(function() {
		alert('Hello world!');
	});
});

这样在你点击页面的一个链接时都会触发这个’Hello world’的提示。

让我们看一下这些修改是什么含义。$(‘a’) 是一个jQuery选择器(selector),在这里，它选择所有的a标签（译者Keel注：即<a></a>），$号 是 jQuery “类”(jQuery ‘class’)的一个别称，因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.

这里有一个拟行相似功能的代码:

<a href='#' onclick='alert('Hello world')'>Link</a>

不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样.

Find me:使用选择器和事件

jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构 造器（如：$(‘div > ul a’)）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。

为了测试一下这些选择器，我们来试着在我们starterkit.html中选择并修改第一个ordered list.

一开始，我们需要选择这个list本身，这个list有一个ID叫“orderedlist”，通常的javascript写法是document.getElementById(‘orderedlist’).在jQuery中，我们这样做：

$(document).ready(function() {
	$('#orderedlist').addClass('red');
});

这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注：参考测试包中的css目录下的core.css，其中定义了red样式)。因此，在你刷新了starterkit.html后，你将会看到第一个有序列表(ordered list )背景色变成了红色，而第二个有序列表没有变化.

现在，让我们添加一些新的样式到list的子节点.

$(document).ready(function() {
	$('#orderedlist > li').addClass('blue');
});

这样，所有orderedlist中的li都附加了样式’blue’。

现在我们再做个复杂一点的，当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效。

$(document).ready(function() {
	$('#orderedlist li:last').hover(function() {
		$(this).addClass('green');
	}, function() {
		$(this).removeClass('green');
	});
});

用这些选择器和事件你已经可以做很多的事情了，但这里有一个更强的好东东！

$(document).ready(function() {
	$('#orderedlist').find('li').each(function(i) {
		$(this).html( $(this).html() + ' BAM! ' + i );
	});
});

find() 让你在已经选择的element中作条件查找,因此 $(‘#orderedlist).find(‘li’) 就像 $(‘#orderedlist li’)一样。each()方法迭代了所有的li，并可以在此基础上作更多的处理。 大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字，并将之设置为li的html文本。（译者Keel注：从这个例子可以看到.html()方法是获取对象的html代码，而.html(‘xxx’)是设置’xxx’为对象的html代码）
另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法，想像一个在你用AJAX方式成功提交后的reset：

$(document).ready(function() {
	// use this to reset a single form
	$('#reset').click(function() {
		$('#form')[0].reset();
	});
});

这个代码选择了所有ID为’form’的元素，并在其第一个上call了一个reset()。如果你有一个以上的form，你可以这样做：

$(document).ready(function() {
	// use this to reset several forms at once
	$('#reset').click(function() {
		$('form').each(function() {
			this.reset();
		});
	});
});

这样你在点击Reset链接后，就选择了文档中所有的form元素，并对它们都执行了一次reset()。

还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list，你想要选择所有的没有ul子元素的li元素。

$(document).ready(function() {
	$('li').not(':has(ul)').css('border', '1px solid black');//原文为$('li').not('[ul]').css('border', '1px solid black');
});

这个代码选择了所有的li元素，然后去除了有ul子元素的li元素。刷新浏览器后，所有的li元素都有了一个边框，只有ul子元素的那个li元素例外。
可以在子元素和属性(elements and attributes)上用作过滤器，比如你可能想选择所有的带有name属性的链接:

$(document).ready(function() {
	$('a[name]').css('background-color','#eee'); //原文为“$('a[@name]').background('#eee');”在jQuery1.2及以上版本中,@符号应该去除,background方法被css方法取代
});

这个代码给所有带有name属性的链接加了一个背景色
更常见的情况是以name来选择链接，你可能需要选择一个有特点href属性的链接，这在不同的浏览器下对href的理解可能会不一致，所以我们的部分匹配(‘*=’)的方式来代替完全匹配(‘=’)：

$(document).ready(function() {
	$('a[href*=/content/gallery]').click(function() {
		// do something with all links that point somewhere to /content/gallery
	});
});

到现在为止，选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素，比如一个FAQ的页面，答案首先会隐藏，当问题点击时，答案显示出来，jQuery代码如下：

$(document).ready(function() {
	$('#faq').find('dd').hide().end().find('dt').click(function() {
         var answer = $(this).next();
         if (answer.is(':visible')) {
             answer.slideUp();
         } else {
             answer.slideDown();
         }
     });
});

这里我们用了一些链式表达法来减少代码量，而且看上去更直观更容易理解。像’#faq’ 只选择了一次，利用end()方法，第一次find()方法会结束(undone)，所以我们可以接着在后面继续find(‘dt’)，而不需要再 写$(‘#faq’).find(‘dt’)。
在点击事件中的，我们用 $(this).next() 来找到dt下面紧接的一个dd元素，这让我们可以快速地选择在被点击问题下面的答案。
除了选择同级别的元素外，你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时，它的父级元素–也就是文章的这一段突出显示，试试这个：

$(document).ready(function() {
	$('a').hover(function() {
		$(this).parents('p').addClass('highlight');
	}, function() {
		$(this).parents('p').removeClass('highlight');
	});
});

测试效果可以看到，移到文章某段的链接时，它所在的段全用上highlight样式，移走之后又恢复原样。
在我们继续之前我们先来看看这一步： jQuery会让代码变得更短从而更容易理解和维护，下面是$(document).ready(callback)的缩写法：

$(function() {
	// code to execute when the DOM is ready
});

应用到我们的Hello world例子中，可以这样:

$(function() {
	$('a').click(function() {
		alert('Hello world!');
	});
});

$(document).ready(function() {
	// generate markup
	var ratingMarkup = ['Please rate: '];
	for(var i=1; i <= 5; i++) {
		ratingMarkup[ratingMarkup.length] = '<a href='#'>' + i + '</a> ';
	}
	// add markup to container and applier click handlers to anchors
	$('#rating').append( ratingMarkup.join('') ).find('a').click(function(e) {
		e.preventDefault();
		// send requests
		$.post('rate.php', {rating: $(this).html()}, function(xml) {
			// format result
			var result = [
				'Thanks for rating, current average: ',
				$('average', xml).text(),
				', number of votes: ',
				$('count', xml).text()
			];
			// output result
			$('#rating').html(result.join(''));
		} );
	});
});

// lets use the shortcut
$(function() {
	var addClickHandlers = function() {
		$('a.clickMeToLoadContent').click(function() {
			$('#target').load(this.href, addClickHandlers);
		});
	};
	addClickHandlers();
});

// get some data
var foobar = ...;
// specify handler, it needs data as a paramter
var handler = function(data) {
  ...
};
// add click handler and pass foobar!
$('a').click( function(event) { handler(foobar); } );

// if you need the context of the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); } );

$(document).ready(function() {
	$('a').toggle(function() {
		$('.stuff').hide('slow');
	}, function() {
		$('.stuff').show('fast');
	});
});

$(document).ready(function() {
	$('a').toggle(function() {
		$('.stuff').animate({
			height: 'hide',
			opacity: 'hide'
		}, 'slow');
	}, function() {
		$('.stuff').animate({
			height: 'show',
			opacity: 'show'
		}, 'slow');
	});
});

<script src='lib/jquery.tablesorter.js' type='text/javascript'></script>

$(document).ready(function() {
	$('#large').tableSorter();
});

$(document).ready(function() {
	$('#large').tableSorter({
		stripingRowClass: ['odd','even'],	// Class names for striping supplyed as a array.
		stripRowsOnStartUp: true		// Strip rows on tableSorter init.
	});
});

$('input[type='checkbox']').each(function() {
	this.checked = true;
	// or, to uncheck
	this.checked = false;
	// or, to toggle
	this.checked = !this.checked;
});

$.fn.check = function() {
	return this.each(function() {
		this.checked = true;
	});
};

$('input:checkbox').check();

$.fn.check = function(mode) {
	var mode = mode || 'on'; // if mode is undefined, use 'on' as default
	return this.each(function() {
		switch(mode) {
		case 'on':
			this.checked = true;
			break;
		case 'off':
			this.checked = false;
			break;
		case 'toggle':
			this.checked = !this.checked;
			break;
		}
	});
};

$('input[type='checkbox']').check();
$('input[type='checkbox']').check('on');
$('input[type='checkbox']').check('off');
$('input[type='checkbox']').check('toggle');

$.fn.rateMe = function(options) {
	var container = this; // instead of selecting a static container with $('#rating'), we now use the jQuery context

	var settings = {
		url: 'rate.php'
		// put more defaults here
		// remember to put a comma (',') after each pair, but not after the last one!
	};

	if(options) { // check if options are present before extending the settings
		$.extend(settings, options);
	}

	// ...
	// rest of the code
	// ...

	return this; // if possible, return 'this' to not break the chain
});

jQuery已经不是什么新鲜的事儿，记得第一次听说是在catch the digital flow上。总把它认为是非常难的东西，也就没有认真去了解他了。直到学完CSS的大部分内容，才开始接触这种”write less, do more” 的Javascrīpt框架。今天，这篇文章的最重要内容是来自Web Designer Wall的一篇教程，一篇包含了10个jQuery特效的教程。这里不打算全文翻译，想以自己的语言来表达，或许这样更方便大家理解/自己以后学习，也可能更准确地描述。

提示：教程中所用的 jQuery 版本为1.2.3。这篇文章是为jQuery新手而写的。

先试试看？ View jQuery Demos ｜ Download Demo ZIP

jQuery是如何工作的?

首先，你需要下载一个jQuery版本，并将它插入到<head>标签内。然后，你将需要写函数来告诉jQuery做些什么，下面的这个图表将告诉你jQuery是怎样工作的（点击图片，查看大图）：

！

如何获取元素（Get the element）?

书写 jQuery 函数是一个非常简单的事（多亏了精彩的说明书）。关键是你要学习如何获取你想要实现的效果的确切元素。

• $("#header") = 获取 id=”header” 的元素
• $("h3") = 获取所有<h3>
• $("div#content .photo") = 获取<div id=”content”>里所有用class=”photo”定义的元素
• $("ul li") = 获取所以 <ul> 中 <li> 的元素
• $("ul li:first") = 只获取<ul>中第一个<li>

1. 简单的下拉面板

让我们来开始这个简单的下拉面板特效吧(view demo)，或许你已经见过很多次，现在，自己试试吧：

当包含class=”btn-slide”的元素被点击，它会下拉/上提<div id=”panel”>里的元素。然后切换到CSS中的class=”active”到<a class=”btn-slide”>元素。.active 将会以CSS的方式打开/关闭出面板。

$(document).ready(function(){

	$(".btn-slide").click(function(){	  $("#panel").slideToggle("slow");	  $(this).toggleClass("active");	});

});

2. 简单的隐藏效果

如图，当右上角的上图标被点击时，内容被隐藏。效果可以看Demo (view demo)

当被定义为 <img> 的图片被点击，它会手找到父级元素 <div> 并激活它的能力，慢慢消失，隐藏起来。

$(document).ready(function(){

	$(".pane .delete").click(function(){	  $(this).parents(".pane").animate({ opacity: "hide" }, "slow");	});

});

3 连续过渡效果

让我们来看看jQuery连贯性的威力吧。只需要几行代码，我能让这个方块渐变+缩放比例地飞来飞去(view demo)

Line 1: 当 <a> 被点击
Line 2: 激活 <div id=”box”> 的不透明度（opacity）=0.1，直到值达到400px，速度达到1200px/ms
Line 3: 当opacity=0.4, top=160px,height=20,width=20,以”slow”显示
Line 4: 当opacity=1, left=0, height=100, width=100,也以”slow”显示
Line 5: 当opacity=1, left=0, height=100, width=100, 也以”slow”显示
Line 6: 当top=0, 以”fast”显示
Line 7: 然后，以常速上滑 (default speed = “normal”)
Line 8: 然后以”slow”下滑
Line 9:返回失效会阻止浏览器跳向链接锚点

$(document).ready(function(){

	$(".run").click(function(){

	  $("#box").animate({opacity: "0.1", left: "+=400"}, 1200)	  .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")	  .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")	  .animate({top: "0"}, "fast")	  .slideUp()	  .slideDown("slow")	  return false;

	});

});

4a. 可折叠的模式 #1

这是第一个可折叠的样式， (view demo)

第一行将向<div> 内的第一个<H3> 添加一个CSS class为”active”的值。 第二行刚是隐藏<div>内非第一个< p >的内容。

当 <h3> 被点击时，当前<p>下拉，而原先下拉的<p> 上提。

$(document).ready(function(){

	$(".accordion h3:first").addClass("active");	$(".accordion p:not(:first)").hide();

	$(".accordion h3").click(function(){

	  $(this).next("p").slideToggle("slow")	  .siblings("p:visible").slideUp("slow");	  $(this).toggleClass("active");	  $(this).siblings("h3").removeClass("active");

	});

});

4b. 可折叠模式 #2

这个实例与#1非常类似，不过，它会让指定的面板像默认面板一样打开(view demo)

在CSS样式表中，设置.accordion p 为 display:none。现在，如果你像默认打开的样式一样，打开第三个面板，你可以写$(".accordion2 p").eq(2).show(); (eq = equal)来实现它，需要注意的是起始点是”0″，而不是”1″，所以，第三个相应的是”2″，而不是”3″。

$(document).ready(function(){

	$(".accordion2 h3").eq(2).addClass("active");	$(".accordion2 p").eq(2).show();

	$(".accordion2 h3").click(function(){	  $(this).next("p").slideToggle("slow")	  .siblings("p:visible").slideUp("slow");	  $(this).toggleClass("active");	  $(this).siblings("h3").removeClass("active");	});

});

5a. 鼠标经过激活效果 #1

这个将会实现一个非常漂亮的，当鼠标经过时出现渐变出现的效果 (view demo)

当鼠标经过菜单时，它会寻找紧接着的<em>，并在上方激活它的不透明度。

$(document).ready(function(){

	$(".menu a").hover(function() {	  $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");	}, function() {	  $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");	});

});

5b. 鼠标经过激活 #2

这个实例会显示菜单中链接的title 属性attribute，让其以变数方式存在，并添加<em>标签 (view demo)

第一行会添加一个空的<em>到菜单的<a>元素。

当鼠标经过菜单链接时，它会显示title的属性，让它以”hoverText（隐藏）”的形式显示，并使<em>中的文字显示隐藏文本的值。

$(document).ready(function(){

	$(".menu2 a").append("<em></em>");

	$(".menu2 a").hover(function() {	  $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");	  var hoverText = $(this).attr("title");	  $(this).find("em").text(hoverText);	}, function() {	  $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");	});

});

6. 整块可点击性效果

这个实例将会教你如何实现内容中元素可点击性效果，Best Web Gallery的侧边栏Tab就显示这样的效果 (view demo)

如果你想让class=”pane-list”的<ul>内的 <li> 可点击(整块)，你可以向 “.pane-list li”指派一个函数，使它被点击时，函数找到 <a>元素，重定向到它的href属性值。

$(document).ready(function(){

	$(".pane-list li").click(function(){	  window.location=$(this).find("a").attr("href"); return false;	});

});

7. 可收缩面板

让我们组合一下上面的实例，创造一给可收缩的面板（像Gmai收件箱面板l）。作者还在Web Designer Wall 的评论列表Next2Friends里应用这个(view demo)

First line: 隐藏<div>里第一个元素以后的元素
Second line: 隐藏所有第5个<li>后面的元素
Third part: 当<p>被点击里，显示/隐藏<div >
Fourth part: 当<a > 被点击时，上提所有<div>的元素
Fifth part: 当<a> 被点击，隐藏它，并显示<a>，并下拉第5个<li>以后的元素
Sixth part: 当<a> 被点击时，隐藏它，并显示<a>，并上提第5个 <li>以后的元素

$(document).ready(function(){

	//hide message_body after the first one	$(".message_list .message_body:gt(0)").hide();

	//hide message li after the 5th	$(".message_list li:gt(4)").hide();

	//toggle message_body	$(".message_head").click(function(){	  $(this).next(".message_body").slideToggle(500)	  return false;	});

	//collapse all messages	$(".collpase_all_message").click(function(){	  $(".message_body").slideUp(500)	  return false;	});

	//show all messages	$(".show_all_message").click(function(){	  $(this).hide()	  $(".show_recent_only").show()	  $(".message_list li:gt(4)").slideDown()	  return false;	});

	//show recent messages only	$(".show_recent_only").click(function(){	  $(this).hide()	  $(".show_all_message").show()	  $(".message_list li:gt(4)").slideUp()	  return false;	});

});

8. 模仿WordPress后台评论管理面板

我想你可能见过最多次这个效果是在Wordpress后台的评论管理面板。那好，让我们来用jQuery来模仿它的效果。为了实现背景颜色，你需要包含Color Animations这个插件(view demo)

First line: 向<div> 添加 “alt” class
Second part: 当<a>被点击，激活<div >的不透明度
Third part: 当<a >被点击， 首先让<div >显示黄色，然后变为白色，并添加类（addClass）”spam”
Fourth part: 当<a>被点击，首先让<div >显示绿色，然后变为白色，并移除类（removeClass）”spam”
Fifth part: 当<a>被点击，激活背景色为red并使其opacity =”hide”

//don't forget to include the Color Animations plugin//<script type="text/javascript" src="jquery.color.js"></script>

$(document).ready(function(){

	$(".pane:even").addClass("alt");

	$(".pane .btn-delete").click(function(){	  alert("This comment will be deleted!");

	  $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")	  .animate({ opacity: "hide" }, "slow")	  return false;	});

	$(".pane .btn-unapprove").click(function(){	  $(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")	  .animate({ backgroundColor: "#ffffff" }, "slow")	  .addClass("spam")	  return false;	});

	$(".pane .btn-approve").click(function(){	  $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")	  .animate({ backgroundColor: "#ffffff" }, "slow")	  .removeClass("spam")	  return false;	});

	$(".pane .btn-spam").click(function(){	  $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")	  .animate({ opacity: "hide" }, "slow")	  return false;	});

});

9. 轮换图片展栏

如果你有一个项目需要显示多个图片，并且你不希望链向另一个页面，那么你可以在当前面加载目标链接的JPG(view demo)

首先，添加一个<em>到H2标签。

当<p>内的元素被点击：
- 以可视的形式显示href属性的”largePath”路径
- 以可视的形式显示title 属性的”largeAlt”
- 代换<img id=”largeImg”>的scr属性内可视的”largePath”路径，并代换alt属性内可视的”largeAlt”
- 设置em内的内容(h2内) 为可视的largeAlt

$(document).ready(function(){

	$("h2").append('<em></em>')

	$(".thumbs a").click(function(){

	  var largePath = $(this).attr("href");	  var largeAlt = $(this).attr("title");

	  $("#largeImg").attr({ src: largePath, alt: largeAlt });

	  $("h2 em").html(" (" + largeAlt + ")"); return false;	});

});

10. 个性化不同的链接样式

在现代化的浏览器中，个性化不同的链接是非常容易的事，比如想让.pdf文件显示特殊的样式，你只需要添加上简单的CSS规则：a[href $='.pdf'] { ... }就可以实现，但不幸的是IE6并不支持这个。如果想实现这个，你可以利用jQuery (view demo)

前三行代码必需是连续的，它只是一个<a>的href属性中的一个CSS class。

第二部分将会获取所有href中没有”http://www.webdesignerwall.com” 和/或没有”#”的< a>元素，并添加”external” class和target= “_blank”。

$(document).ready(function(){

	$("a[@href$=pdf]").addClass("pdf");

	$("a[@href$=zip]").addClass("zip");

	$("a[@href$=psd]").addClass("psd");

	$("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]")	  .addClass("external")	  .attr({ target: "_blank" });

});

1. 标签式导航

2. 平滑移动导航

3. 滑动导航

4. jParallax (很酷的效果，眼人的视角一样)

5. Fancy-Zoom(放大效果，很漂亮)

6. jQzoom (局站放大，厉害)

7. Text-Zoom(文字放大)

8. 高亮背景

9. jQeury 图表

10. 可作装饰展栏



随着计算机网络、通信技术的迅速发展，特别是Internet的发展应用，使人们的行为方式受 到巨大的冲击及影响。电子商务作为一种崭新的商务运作方式，带来了一次新的产业革命，这场革命的最终结果将人类带入了信息经济时代。电子商务网站出现如雨 后春笋，但中国电子商务的发展较之发达国家尚处于起步阶段，

今天电子商务网站我们随处可见，如淘宝、拍拍、百度有啊……。电子商务在发展，网站技术也在不段的更新。由于电子商务网站的产品和种类的不段增加，以往的一级下拉菜单已经远不能满足现有电子商务网站发展了，多级下拉菜单是今后电子商务网站的新趋势。

一个好的菜单，能为电子商务网站增色不少。下面我就用jQuery+CSS来制做一款多级的下拉菜单。

jQuery+CSS实现多级下拉菜单

演示地址：http://www.56mp.cn/upload/mega-dropdowns/

HTML部分：

就像我的所有导航教程一样，首先创建一个无序列表。

<ul id=”topnav”>
<li><a href=”http://www.56mp.cn“>Home</a></li>
<li><a href=”http://www.56mp.cn“>Products</a></li>
<li><a href=”http://www.56mp.cn“>Sale</a></li>
<li><a href=”http://www.56mp.cn“>Community</a></li>
<li><a href=”http://www.56mp.cn“>Store Locator</a></li>
</ul>

CSS部分：

由于我们的下拉菜单将使用绝对定位，所以一定要添加一个相对定位的列表项。

ul#topnav {
margin: 0; padding: 0;
float:left;
width: 100%;
list-style: none;
font-size: 1.1em;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
position: relative;
}
ul#topnav li a {
float: left;
text-indent: -9999px;
height: 44px;
}
ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; }
ul#topnav a.home {
background: url(nav_home.png) no-repeat;
width: 78px;
}
ul#topnav a.products {
background: url(nav_products.png) no-repeat;
width: 117px;
}
ul#topnav a.sale {
background: url(nav_sale.png) no-repeat;
width: 124px;
}
ul#topnav a.community {
background: url(nav_community.png) no-repeat;
width: 124px;
}
ul#topnav a.store {
background: url(nav_store.png) no-repeat;
width: 141px;
}

子菜单HTML：

添加好子菜单后，每个无序列表要嵌套相应的类值。

无序列表嵌套相应的类值

<ul id=”topnav”>
<li><a href=”#”>Home</a></li>
<li>
<a href=”#”>Products</a>
<div>
<ul>
<li><h2><a href=”#”>Desktop</a></h2></li>
<li><a href=”#”>Navigation Link</a></li>
<li><a href=”#”>Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href=”#”>Laptop</a></h2></li>
<li><a href=”#”>Navigation Link</a></li>
<li><a href=”#”>Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href=”#”>Accessories</a></h2></li>
<li><a href=”#”>Navigation Link</a></li>
<li><a href=”#”>Navigation Link</a></li>
</ul>
<ul>
<li><h2><a href=”#”>Accessories</a></h2></li>
<li><a href=”#”>Navigation Link</a></li>
<li><a href=”#”>Navigation Link</a></li>
</ul>
</div>
</li>
<li><a href=”#”>Sale</a></li>
<li><a href=”#”>Community</a></li>
<li><a href=”#”>Store Locator</a></li>
</ul>

子菜单CSS:

ul#topnav li .sub {
position: absolute;
top: 44px; left: 0;
background: #344c00 url(sub_bg.png) repeat-x;
padding: 20px 20px 20px;
float: left;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
display: none;
}
ul#topnav li .row {
clear: both;
float: left;
width: 100%;
margin-bottom: 10px;
}
ul#topnav li .sub ul{
list-style: none;
margin: 0; padding: 0;
width: 150px;
float: left;
}
ul#topnav .sub ul li {
width: 100%;
color: #fff;
}
ul#topnav .sub ul li h2 {
padding: 0;  margin: 0;
font-size: 1.3em;
font-weight: normal;
}
ul#topnav .sub ul li h2 a {
padding: 5px 0;
background-image: none;
color: #e8e000;
}
ul#topnav .sub ul li a {
float: none;
text-indent: 0;
height: auto;
background: url(navlist_arrow.png) no-repeat 5px 12px;
padding: 7px 5px 7px 15px;
display: block;
text-decoration: none;
color: #fff;
}
ul#topnav .sub ul li a:hover {
color: #ddd;
background-position: 5px 12px ;
}

用jQuery设置鼠标悬停效果

对于那些谁不熟悉jQuery的，你可以看看他们的网站。

调用jQuery的文件

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

设置自定义配置和触发功能

//Set custom configurations
var config = {
sensitivity: 2,
interval: 100,
over: megaHoverOver,
timeout: 500,
out: megaHoverOut
};

$(“ul#topnav li .sub”).css({‘opacity’:'0′});
$(“ul#topnav li”).hoverIntent(config);

文章出自逸诚科技：http://www.56mp.cn