1. $(‘#target div:not(#exclude)’).hide();
2. //或者
3. $(‘#target’).children().filter(‘:not(#exclude)’).hide();

filter()起到过滤的作用。

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

1. var foundin = $(‘*:contains(” 明河”)’);

获取垂直滚动距离

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

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

向表格追加一行数据

1. $(‘#myTable tr:last’).after(‘<tr>…</tr>’);

超过一个属性时的过滤

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

让cookies在X分钟后过期

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

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

1. //从第一个到第10个
2. $(‘a’).slice(0,10);
3. //或者
4. $(‘a:lt(10)’);

获取客户端的IP

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

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

解析XML数据源

1. <?xml version=”1.0″ ?>
2. <result>
3. <item>
4. <id>1</id>
5. <title>title1</title>
6. <description>desc1</description>
7. </item>
8. <item>
9. <id>2</id>
10. <title>title2</title>
11. <description>desc2</description>
12. </item>
13. <!– … –>
14. </result>

1. $.get(‘file.xml’,{},function(data){
2. $(‘item’,data).each(function(){
3. var $this&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; = $(this);
4. var id &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;= $this.find(‘id’).text();
5. var title &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;= $this.find(‘title’).text();
6. var description = $this.find(‘description’).text();
7. //do something …
8. });
9. });

获取在id中的数字

1. <div id=”sites”>
2. <a id=”site_1″ href=”http://siteA.com”>siteA</a>
3. <a id=”site_2″ href=”http://siteB.com”>siteB</a>
4. <a id=”site_3″ href=”http://siteB.com”>siteC</a>
5. …
6. </div>

1. $(“#sites a”).click(function(){
2. var $this &nbsp;&nbsp; &nbsp;= $(this);
3. var nmb &nbsp;&nbsp; &nbsp;= $this.attr(‘id’).match(/site_(\d+)/)[1];
4. …
5. });

将类似12343778 转成 12.343.778的形式

1. var delimiter = ‘.’;
2. $(‘#result’).html()
3. .toString()
4. .replace(new RegExp(“(^\\d{“+($this.html().toString().length%3||-1)+”})(?=\\d{3})”),”$1″ + delimiter)
5. .replace(/(\d{3})(?=\d)/g,”$1″ + delimiter);

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

向firebug的控制面板发送消息

1. jQuery.fn.log = function (msg) {
2. console.log(“%s: %o”, msg, this);
3. return this;
4. };
5. $(‘#some_div’).find(‘li.source > input:checkbox’).log(“sources to uncheck”).removeAttr(“checked”);

获取图片的宽高

1. var img = $(‘#imageid’);
2. var theImage = new Image();
3. theImage.src = img.attr(“src”);
4. alert(“Width: ” + theImage.width);
5. alert(“Height: ” + theImage.height);

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 实用jquery代码片段集合[上]
• 基于jQuery的新闻图片
• jQuery源码分析-each函数
• 简单的JQuery聚光灯效果教程
• 用jQuery和CSS构建下拉菜单
• 推荐9个jquery手风琴菜单插件
• 推荐8个独特应用的JQuery拖放插件
• 如何为您的博客图片添加水印效果？
• 基本代码安全知识
• 制作jquery文字提示插件

Feed enhanced by Better Feed from Ozh

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

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

修改图片src更新图片

1. $(imageobj).attr(’src’, $(imageobj).attr(’src’) + ‘?’ + Math.random() );

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

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

1. var totalimages = 10;
2. var loadedimages = 0;
3. $(“<img/>”).load(function() {
4. ++loadedimages;
5. if(loadedimages == totalimages){
6. //全部图片加载完成时…..
7. }
8. });

双击不选中文本

1. var clearSelection = function () {
2. if(document.selection && document.selection.empty) {
3. document.selection.empty();
4. } else if(window.getSelection) {
5. var sel = window.getSelection();
6. sel.removeAllRanges();
7. }
8. }
10. $(element).bind(‘dblclick’,function(event){
11. clearSelection();
12. });

对一个列表进行排序

1. <ul>
2. <li>cloud</li>
3. <li>sun</li>
4. <li>rain</li>
5. <li>snow</li>
6. </ul

1. var items = $(‘.to_order li’).get();
3. items.sort(function(a,b){
4. var keyA = $(a).text();
5. var keyB = $(b).text();
6. if (keyA < keyB) return -1;
7. if (keyA > keyB) return 1;
8. return 0;
9. });
10. var ul = $(‘.to_order’);
11. $.each(items, function(i, li){
12. ul.append(li);
13. });

（中文无效）

绑定右击事件

1. $(document).ready(function(){
2. $(document).bind(“contextmenu”,function(e){
3. return false;
4. });
5. });

扩展jquery的对象选择器

1. $.extend($.expr[':'], {
2. //选择器名
3. moreThanAThousand : function (a){
4. return parseInt($(a).html()) > 1000;
5. }
6. });
7. $(document).ready(function() {
8. $(‘td:moreThanAThousand’).css(‘background-color’, ‘#ff0000′);
9. });

检查对象是否存在

1. if ($(“#elementid”).length) {
2. //……
3. }

取消一个ajax请求

1. var req = $.ajax({
2. type: “POST”,
3. url: “someurl”,
4. data: “id=1″,
5. success: function(){
7. }
8. });
9. //取消ajax请求
10. req.abort()

检查cookies是否可用

1. $(document).ready(function() {
2. var dt = new Date();
3. dt.setSeconds(dt.getSeconds() + 60);
4. document.cookie = “cookietest=1; expires=” + dt.toGMTString();
5. var cookiesEnabled = document.cookie.indexOf(“cookietest=”) != -1;
6. if(!cookiesEnabled){
7. //cookies不能用……..
8. }
9. });

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

1. $(“ul > li”).click(function () {
2. var index = $(this).prevAll().length;
3. });

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

1. $(“ul > li”).click(function () {
2. var index = $(this).index();
3. });

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

1. jQuery.fn.center = function () {
2. this.css(“position”,”absolute”);
3. this.css(“top”, ( $(window).height() – this.height() ) / 2+$(window).scrollTop() + “px”);
4. this.css(“left”, ( $(window).width() – this.width() ) / 2+$(window).scrollLeft() + “px”);
5. return this;
6. }
7. $(element).center();

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

获取当前页面的URL

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

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 实用jquery代码片段集合[下]
• 基于jQuery的新闻图片
• jQuery源码分析-each函数
• 简单的JQuery聚光灯效果教程
• 用jQuery和CSS构建下拉菜单
• 推荐9个jquery手风琴菜单插件
• 推荐8个独特应用的JQuery拖放插件
• 如何为您的博客图片添加水印效果？
• 基本代码安全知识
• 制作jquery文字提示插件

Feed enhanced by Better Feed from Ozh

在这里我们将要创建一个独特的滑动导航菜单。这个想法是让装有菜单项的盒子（box）滑出，并且弹出一个缩略图 片。同时还要在有需要二级菜单的链接项调用一个子菜单盒子。这个子菜单要依靠在上级菜单的左边或右边的位置悬停。

这里我们要用到jQuery Easing Plugin和tibchris的一些美丽的图片。

1. HTML结构

先来写HTML结构，这里我们用一个无序的列表来放导航菜单的一级菜单，用DIV来放子菜单。

<ul id="sdt_menu" class="sdt_menu">
<li>
		<a href="#">
			<img src="images/1.jpg" alt="" />

			<span class="sdt_wrap">
				<span class="sdt_link">Portfolio</span>
				<span class="sdt_descr">My work</span>
			</span>
		</a>
<div class="sdt_box">
			<a href="#">Websites</a>
			<a href="#">Illustrations</a>
			<a href="#">Photography</a></div>
</li>

...</ul>

如果没有子菜单，DIV可以被忽视。图片在开始的时候不会被显示，我们要在CSS中为它的宽和高都设为０。

让我们开看看CSS样式

2. CSS

让我们首先为无序列表设置样式。

ul.sdt_menu{
	margin:0;
	padding:0;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
	width:1020px;
}

接下来，我们要去掉菜单链接中的text-decoration和outline。

ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}

我们要将列表项左浮动，并且要将position设置为relative，因为我们要为它内部的元素进行绝对定位。如要我们不那样设置，绝对定位刚是相对于整个网页的。

ul.sdt_menu li{
	float:left;
	width:170px;
	height:85px;
	position:relative;
	cursor:pointer;
}

这里来设计主链接的样式，我们有两个span，标题和描述。如下面这样来为它们写样式。

ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent url(../images/overlay.png) no-repeat bottom right;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}

注意z-index: 我们要为重要的元素定义堆叠顺序，来让它们能够停留在上面。
我们要用一个背景图片来创造一种半透明的渐变。当你用一些背景图片（像DEMO中的木纹背景）来创造一种美丽的效果，请务必用一些不同的纹理会让它看起来 棒级了。
你也可以加上阴影－改变一下值像2px 2px 6px #000 inset，同样会给你非常好看的效果。
接下来是图片的样式:

ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;
}

我们要加上图片由下升起的动画，这就是为什么定位它必然要用“bottom”作为参考点。我们同样加上了很棒的阴影效果。这里前两个值是0，使图片 的周围的阴影显得均匀。这甚至可以把阴影被用作一种特效，无论什么时候，你都可以创造一种边框效果。它的优点在于这些阴影不是真的存在－你不用考虑在元素 中如何来计算它的宽和高。当然现在的缺点是CSS3并不被ＩＥ支持。
下面是包涵标题和描述的span的样式

ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}

如果你有大量的文字，你则需要改变这些值。也要确保那些改变的值能匹配在JavaScript中设置动画的值。
下一步，我们要定义一个灰色的滑动盒子的样式。我们给它的高设为0并且定位它，在动画中我们只要增加它的高度就可以了。

ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#111;
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
}

接下来我们要为这些设置一些共有的样式。

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}

下面是标题和描述的样式。

ul.sdt_menu li span span.sdt_link{
	color:#fff;
	font-size:24px;
	float:left;
	clear:both;
}
ul.sdt_menu li span span.sdt_descr{
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px;
	font-size:10px;
	letter-spacing:1px;
}

子菜单盒子起初是一个隐藏在下面的灰色的盒子。我们要让它在我们在的地方动态的向右或向左滑动。像我们这个例子，当鼠标悬停在最后一个位置，我们要它动态的向左滑动，在其它的位置上我们要它向右滑动。

ul.sdt_menu li div.sdt_box{
	display:block;
	position:absolute;
	width:170px;
	overflow:hidden;
	height:170px;
	top:85px;
	left:0px;
	display:none;
	background:#000;
}
ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:30px;
	color:#0B75AF;
}

第一个子菜单链接需要设置一个margin-top

ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;
}

这是所有样式！让我们加上魔法！

3.JavaScript

当我们的鼠标悬停在这些列表元素上，我们要放大图片，并且显示全部，sdt_active和the sdt_wrap。如果这个元素含有子菜单(sdt_box)，将滑动到一旁。如果这个元素在菜单中是最后一个，其子菜单将滑动到左边，其余的滑向右边。

$(function() {
	$('#sdt_menu > li').bind('mouseenter',function(){
		var $elem = $(this);
		$elem.find('img')
			 .stop(true)
			 .animate({
				'width':'170px',
				'height':'170px',
				'left':'0px'
			 },400,'easeOutBack')
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'140px'},500,'easeOutBack')
			 .andSelf()
			 .find('.sdt_active')
			 .stop(true)
			 .animate({'height':'170px'},300,function(){
			var $sub_menu = $elem.find('.sdt_box');
			if($sub_menu.length){
				var left = '170px';
				if($elem.parent().children().length == $elem.index()+1)
					left = '-170px';
				$sub_menu.show().animate({'left':left},200);
			}
		});
	}).bind('mouseleave',function(){
		var $elem = $(this);
		var $sub_menu = $elem.find('.sdt_box');
		if($sub_menu.length)
			$sub_menu.hide().css('left','0px');

		$elem.find('.sdt_active')
			 .stop(true)
			 .animate({'height':'0px'},300)
			 .andSelf().find('img')
			 .stop(true)
			 .animate({
				'width':'0px',
				'height':'0px',
				'left':'85px'},400)
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'25px'},500);
	});
});

就是这样！我们希望你能喜欢这个小菜单，它能对你有帮助。
P.S. 这个在Google Chrome下看起来非常完美。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 用jQuery和CSS构建下拉菜单
• CSS3+JQuery实现固定头部的导航菜单
• 解密CSS Sprites：技巧、工具和教程
• 简单的JQuery聚光灯效果教程
• 推荐9个jquery手风琴菜单插件
• 制作jquery文字提示插件
• 八种布局方案改善你的设计
• jQuery + CSS3 实现图片圆角
• 40+ Web前端开发必备的备忘单[上]
• 35个 jQuery的动画教程

Feed enhanced by Better Feed from Ozh

所谓RIA，或者说富网络网应用，就是指可以像桌面程序一样操作的网络应用。 在RIA冒出来之前，大多数的网络应用都是静态的页面构建的。

Sumo Paint 是一个基于Flash的RIA, 具有像Photoshop一样的图形编辑功能。

跟桌面应用程序不同，任何一个网页的互动往往需要重新加载一个全新的页面。而桌面应用程序，在另一方面，有很多更好的用户交互性，因为所有处理都是在用户的机器本身，所以能给以更加无缝的用户体验。

因此，软件开发商开始问自己，“我们产品应该是一个桌面应用程序还是一个Web应用程序呢？”

这一直是一个公平的问题，因为这两种类型的应用程序都具有各自优点和缺点。

桌面应用程序具有流畅的用户交互性，但软件是售出去的，会遇到发布和更新的问题。

Web应用程序，另一方面，很容易从网上获得，摆脱相关的软件发布和更新的问题，但在用户交互性体验非常差。

因此，怎么样才能两全其美呢？

RIA就是两全其美。RIA通过网络发布，有非常丰富的用户交互。得益于Ajax的出现，一个无需刷新就可以发送服务器请求的网络应用的方法，新技术出现，加入了RIA的运动。

基于这些技术出现了一些框架，帮助开发人员构建和部署富网络应用程序，如JavaScript库，ICEfaces，Adobe Flash 4（Flex 3前身），微软Silverlight，以及HTML5的。

让我们来一个个探讨RIA的框架。

网络应用的JavaScript库

JavaScript库，例如 jQuery和MooTools 是首批技术之一，可以真正的帮助部署流畅和互动的富网络应用。它们提供通过杠杆客户端脚本来处理前端接口功能的RIA框架。它们是一些基本的 Javascript文件，由一些有用的，经过跨浏览器测试功能的集成。可以使用Ajax，以及处理普通的基于用户驱动事件的交互，如显示和隐藏内容。

目前最流行的有jQuery（尤其是使用jQuery UI），MooTools，YIU（雅虎用户界面库），以及EXTJS。这些库包括RIA组件，如网格，图表和复杂的表单元素，以及处理Ajax的工具。最引人入胜的是，大部分网络开发的JavaScript库都是开源的。

如果你不想购买一个集成开发环境（IDE），但仍希望在自己的网站绚丽而专业的RIA功能，JavaScript库是一个很不错的选择。

使用JavaScript库的网站有Google，Digg，雅虎，亚马逊，微软，Twitter，以及Best Buy。

ICEfaces

ICEfaces是标准的JavaServer Faces（JSF）的框架的扩展，旨在去除方程中的JavaScript从而简化程序员的工作流程。换句话说，ICEfaces通过Java应用接口为你处理了所有的JavaScript/Ajax。通过删除这些自定义JavaScript函数的复杂引入，大大简化了创建富网络应用的任务。

如果你的团队主要成员是Java开发人员，或者如果你的网络应用程序不需要其它ICEfaces没有的复杂组件，又或者如果你的网络应用程序是事件驱动的，那么使用ICEfaces是很好的选择。如果你的网路应用是事件驱动的，请确定你已经了解ICEfaces不提供真正的“服务器推”技术的，HTML5，Flash Builder 4和Silverlight都支持的。不过，相应地ICEfaces使用长轮询的方法来模拟服务器推技术。

使用ICEfaces的网站有波音，美国航空航天局，联合太平洋公司，T-Mobile，以及美国银行。

Adobe Flash Builder 4

Flash已经出现了很长一段时间，但是用使用Flash来构建整个网络应用十分麻烦，直到Flex的引进，这是Flash的一个扩展，提供RIA网络组 件。

Adobe Flash Builder 4最令人兴奋的是它的跨平台和跨浏览器特性，允许程序在所有的操作系统和所有的浏览器上以同样的方式运行。相比于JavaScript，浏览器有不同的 JavaScript引擎管理和处理的代码，而Adobe的Flash只有一个引擎，用户通过Adobe Flash浏览器插件来安装（通常的情况是他们有了）。

Flash Builder 4 应用之所以能如此，因为它们已经嵌入到HTML页面，这意味着浏览器本身并没有对应用程序的性能有什么影响。这意味着你如果你乐意， 你还可以在IE6上运行最复杂的网络应用程序。（这当然简单，因为Flash插件/引擎经常会更新，因此只是稍微依赖于用户插件的版本）。

这些应用通常是伴随着服务器端处理，比如一个Java后端处理，而且需要Flash Builder 4IDE做开发。

如果你的团队主要是Java开发（因为搭配Java运作良好），或者你的应用程序使用事件驱动的构架，可以选择Adobe Flash Builder 4。

使用Flash作为网络应用程序的网站有Mint.com，Flickr和Hyundai。

Silverlight

Silverlight是基本上微软版本的Adobe Flex /的Adobe Flash。现在已获得了一些吸引力，但似乎并没有达到的Adobe Flash的普及程度。

Silverlight应用程序明显约束于.NET的后端，因为它是微软的产品。这意味着，你不得不 Silverlight /.NET 和Adobe Flex / [一些服务器端脚本，如PHP] 之间整合考虑。

如果你的网络应用需要复杂的图形，或者如果你的团队主要是.NET开发人员，又或者如果你的应用程序使用事件驱动的架构，那你可以选择 Silverlight。

使用Silverlight的网站，如Netflix。

HTML5

HTML5的是RIA运动中的最新发展。 HTML5，在本质上是HTML4，JavaScript，CSS，Javascript代码库以及Falsh的最优合并，利用API模型成为一个单一规 范。 HTML5的是一个开放的技术，这意味着不会有单一的主管团体如Flash的Adobe或Silverlight的微软。

由于HTML5规范还没有完成，IE9尚未发布，要建立产品级的网络应用，你还需要等待一点点时间。

目前，所有主要浏览器除了IE8都支持HTML5。由于IE8的浏览器市场占据了主要部分，在IE9发布之前，HTML5实在难以成为主流。

一旦HTML5得到广泛支持，如果你不想购买和学习的IDE（像Flex和Silverlight框架所必需的），如果你的应用程序使用事件驱动架构，或 者如果你喜欢使用内置的HTML功能和JavaScript API 功能而不是使用第三方JavaScript库，那么使用HTML是很好的选择。

尽管HTML5中可以很好地处理图形，但是使用Flash和Silverlight来处理复杂图形和动画在目前仍然容易/更快的选择。

RIA 的未来

HTML5应用程序是互联网的未来吗？不完全是。只要那些创造性和创新性的网络开发人员还在不断的去创造一些特别的东西，就会总是出现一些新技术可以造出 些HTML5或其他任何网络技术无法完成的神奇的东西。

JavaScript库，ICEfaces，Flash，Silverlight和HTML5的存在首要原因是其创造力和创新性。未来的网络将会由许多 共存的技术组成，就像现在。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 页面输出时一些常用的小技巧
• 使用Adobe Flex 3开发(MMO)大型多人在线游戏
• XmlHttpRequest的串行异步
• RIA特别专题和Flash开发平台工具下载资源发布
• Ajax跨域访问解决方案
• 24 个漂亮的个性化 HTML 表单技术
• 10个绝妙的HTML5，CSS和Javascript示例
• 10个基于 JavaScript 的 WYSIWYG 编辑器
• 10个关于Ajax的IT人需要知道的事情
• 10个Google 推动的 AJAX 库 API

Feed enhanced by Better Feed from Ozh

1. Flip! 一个 jQuery 插件

这个演示 模仿流行的卡片翻转的效果，可以360度旋转自身，x或y维度！

2. jQuery Quicksand 插件

这是一个强大的插件用来在页面上排序数组的元素/图标,有酷的渐入 /渐出和动画特效！

3. ImageFlow

这个图像浏览器和苹果的CoverFlow界面很相似，让用户能够很熟悉他们的产品和应用！

4. 用jQuery代替flash建立一个交互性地图

这个演示展示了jQuery用ajax技术创造迷人的界面的强大能力！

5. 用jQuery & CSS3滑出消息

点击+号用漂亮的光滑的动画效果展示附加的信息！

6. Zoomer Gallery

在这个演示中看起来静态的画廊被multi-layer zoom特效变得富有交互性，当移到图像上时会产生缩放！

7. jQuery Circulate

这个演示展示了滚球的粒子效果，所有的特效都是用jQuery

8. Photo Zoom Out Effect

这个也是一个图像伸缩的特效，看起来静止的画面，会随着你的鼠标移过而变得富有生机！

9. Sliding Boxes and Captions with jQuery

这里我们可以看到原本只能被flash开发者创造的过渡特效，现在使用jQuery一样可以办到！

10. CSS3 Lightbox Gallery

这个插件看起来是为媒体展示图片特别制作的，你可以任意拖拽图片达到图片拼接的效果，你还可以单击放大图片！这是一个强大的图片展示特效！你还可以 用API使用ajax技术让人们分享图片到Flickr，twitter，Facebook或者其他网站！当然中国的新浪微博、人人网、开心网也能！

11. 用jQuery和CSS3创造一个拍照效果！

一眼看去这个演示像游戏狙击，乍一看居然是拍照功能！这是一个很强大的工具，当用AJAX或者HTML5本地存储时，用来对付特别大的图像！

12. Awesome Bubble Navigation-可怕的泡沫导航效果

开发者用色彩变换和动画创造出一个非常吸引人的并且富有交互性的菜单！

13. Beautiful Background Image Navigation

酷炫的图片展示特效，用来做导航会有惊人的效果！

14. AviaSlider

AviaSlider采用经典的类似Flash的过渡效果，以强化滑块界面。

15. Background Image Slideshow

动画背景的地方flash用来支配的网页设计之一。这里有一个例子使用jQuery代替。

16. Panning Slideshow

另一个独特采取典型幻灯片界面。在这里，笔者增加了对角线导航的接口，并使其脱颖而出。

17. jqFancyTransitions

这个插件可以用来显示作为一个具有奇特法拉盛般的幻灯片过渡效果的照片。

18. iCarousel – Horizontal images slider

另一个幻灯片，添加了缓和的过渡和真的挺身而出。这也难怪他们选择在此演示，展示性感的Mac产品。

19. Making an Interactive Picture with jQuery

该演示可用于拍摄的网站那里有很多优势的屏幕空间。该网站上发现的第一个模式框点击它显示更多关于点击部分的信息。

20. Cloud Zoom

一个插件，看起来好像是在考虑电子商务设计。云缩放易于实现，能真正提高用户的体验。

21. Apple-like Retina Effect

任何人谁使用了一iPhone，iPod的触摸，或ipad，将扩大在屏幕上时，你碰了长时间的面积小面积熟悉。此演示实现这个桌面效果。

专为WDD编译 Kalim 舰队, 。他是一个专业网站设计者和博客与超过6年的经验。这个网站是他的激情,他自己的时间写博客的分裂,软件的发展和社会的媒体。他喜欢使用和开发新的应用网 络、移动、桌面。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 推荐8个独特应用的JQuery拖放插件
• FCBKcomplete v 2.02
• 6个jQuery图标插件的应用程序
• 50个表单功能，验证，安全和自定义化的jQuery插件
• 30个最好的jQuery表单插件
• 30+ 新鲜惊奇的 jQuery 插件与教程
• 2010年4月：最佳的jQuery插件
• 10+个jQuery图片滚动插件介绍
• 10 个帮助你处理Web页面层布局的jQuery插件
• 简单的JQuery聚光灯效果教程

Feed enhanced by Better Feed from Ozh

//当需要遍历的是一个对象时,name变量用于记录对象的属性名
var name,

//当需要遍历的是一个数组时,i变量用于记录循环的数组下标
i = 0,

//遍历数组长度,当需要遍历的对象是一个数组时存储数组长度
//如果需要遍历的是一个对象,则length === undefined
length = object.length,

//检查第1个参数object是否是一个对象
//根据object.length排除数组类型，根据isFunction排除函数类型(因为函数也是对象)
isObj = length === undefined || jQuery.isFunction(object);

//回调函数具有附加参数时,执行第一个分支
//if(!!args) {
if (args) {

//需要遍历的是一个对象
if (isObj) {

//遍历对象属性,name是对象的属性名,再函数顶部已声明
//许多人不太习惯for(var name in object)方式,如果不进行声明,则name就会被定义为全局变量
for (name in object) {

//调用callback回调函数,且回调函数的作用域表示为当前属性的值
//如:callback() { this; //函数中的this指向当前属性值
//将each的第3个参数args作为回调函数的附加参数
if (callback.apply(object[name], args) === false) {

//如果在callback回调函数中使用return false;则不执行下一次循环
break;
}
}
}
//需要遍历的是一个数组
else {

//循环长度,循环变量i在函数顶部已定义
//循环变量的自增在循环内部执行
for (; i &lt; length;) {

//调用callback函数,与上面注释的callback调用一致
//此处callback函数中的this指向当前数组元素
if (callback.apply(object[i++], args) === false) {
break;
}
}
}

}
//回调函数没有附加参数时,执行第二个分支
else {

//需要遍历的是一个对象
if (isObj) {

//循环对象的属性名,name在函数顶部已定义
for (name in object) {

//调用callback回调函数
//在不带参数的对象遍历中,作用域表示为当前属性的值
//且回调函数包含两个参数,第一个数当前属性名,第二个是当前属性值
//我觉得这句代码修改一下会更好用：if(callback.call(object, name, object[name]) === false) {
if (callback.call(object[name], name, object[name]) === false) {

//如果在callback回调函数中使用return false;则不执行下一次循环
break;
}
}
}
//需要遍历的是一个数组
else {
//这里的for写法有点BT,解释为：
//var value = object[0];
//for(; i &lt; length;) {
// if(false === callback.call(value, i, value)) {
// break;
// }
// value = object[++i];
//}
//同样,我觉得这里的代码稍加修改会更好用:
//for (; i &lt; length && false !== callback.call(object, i, object[i++]);) {
//}
for (var value = object[0]; i &lt; length && callback.call(value, i, value) !== false; value = object[++i]) {
}
}
}

//这里返回遍历的对象或数组,但object没有被更改,因此一般不给$.each()赋值
//但是如果按照我在注释中所修改的写法来使用,且在callback回调函数中对this(即对object的引用)进行了修改
//则这里返回的object是被修改后的对象或数组
return object;
}

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 实用jquery代码片段集合[下]
• 实用jquery代码片段集合[上]
• 基于jQuery的新闻图片
• 简单的JQuery聚光灯效果教程
• 用jQuery和CSS构建下拉菜单
• 推荐9个jquery手风琴菜单插件
• 推荐8个独特应用的JQuery拖放插件
• 如何为您的博客图片添加水印效果？
• 基本代码安全知识
• 制作jquery文字提示插件

Feed enhanced by Better Feed from Ozh

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 简单的JQuery聚光灯效果教程
• 用jQuery和CSS构建下拉菜单
• 推荐9个jquery手风琴菜单插件
• 推荐8个独特应用的JQuery拖放插件
• 实用jquery代码片段集合[下]
• 实用jquery代码片段集合[上]
• 如何为您的博客图片添加水印效果？
• 基于jQuery的新闻图片
• 制作jquery文字提示插件
• 初探 jQuery 的 Sizzle 选择器

Feed enhanced by Better Feed from Ozh

Animate Image Filling Up Using jQuery

Animate Curtains Opening with jQuery

Building an Animated Cartoon Robot with jQuery

jQuery Animations: A 7-Step Program

jQuery and CSS Sprite Animation Explained in Under 5 Minutes

Fun with jQuery’s Animate () Function

Animate a Hover with jQuery

How to Create a “MooTools Homepage” Inspired Navigation Effect Using jQuery

Crafting an Animated Postcard with jQuery

How to Create a Drop-Down Nav Menu with HTML5, CSS3 and jQuery

Creating a Polaroid Photo Viewer with CSS3 and jQuery

Quick Tip: Easy Sequential Animations in jQuery

Build an Incredible Login Form with jQuery

Learning jQuery: Revealing Photo Slider

Using jQuery for Background Image Animations

Animated Menus Using jQuery

Create a Cool Animated Navigation with CSS and jQuery

Animated Drop Down Menu with jQuery

How to Load In and Animate Content with jQuery

Puffing Smoke Effect in jQuery

How to Make an Impressive Animated Landscape Header with jQuery

Make an Animated Alphabet Using Keypress Events in jQuery

How to Make a Smooth Animated Menu with jQuery

Sliding Boxes and Captions with jQuery

Create a Realistic Hover Effect with jQuery

Glimmer “Freestyle” Animations

Create a Funky Parallax Background Effect Using jQuery

Create a Stunning Sliding Door Effect with jQuery

How to Build an Animated Header in jQuery

Create a Unique Gallery by Using Z-Index and jQuery

jQuery UI Animation Effects

Animate Your Message Boxes with jQuery

Sexy Opacity Animation with MooTools or jQuery

Controlling Animation Timing in jQuery

Methods for Animation Effects with jQuery 1.4

© 我想网 Akon 所有 , 2010. | 永久链接 | 1条评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 用jQuery和CSS构建下拉菜单
• 30个写给HTML初学者的最佳实践
• 20 个使用Photoshop进行高品质的网页设计教程
• 10个令人惊异的创建按钮的CSS3教程、方法
• 10个PHP实现的超酷的操作。
• 转换设计原图 PSD 为 HTML
• 深色调社交图标：免费且高质量的社交媒体图标集
• 如何正确购买一个已经存在的域名(SEO友好)
• 如何备份所有的浏览器 – 5 个小贴士(Google Chrome, Firefox, Safari, Internet Explorer, and Opera)
• 基本指南 – CSS处理大背景图片

Feed enhanced by Better Feed from Ozh

效果如下图，鼠标滑过链接出现文字提示，提示框的背景颜色可以自由控制。

• 查看示例
• 源码下载

制作教程

一、功能讲解

• 1、鼠标经过带有”title”属性的容器，出现title中的内容（一般是链接、图片）
• 2、可以控制提示框的背景颜色

二、创建html结构

最重要的是title属性，此属性用于控制提示框出现的内容。
class=”blue”用于控制提示框的背景颜色。
当你第一次滑过该容器时，会创建如下提示框容器：

1. <a class=”blue colorTipContainer” href=”http://www.iwanna.cn/archives/2010/07/17/4583/”>推荐9个jquery手风琴菜单插件
2. <span class=”colorTip” style=”margin-left: -60px;”>推荐9个jquery手风 琴菜单插件
4. <span class=”pointyTipShadow”></span>
6. <span class=”pointyTip”></span>
8. </span>
9. </a>

css部分的内容不是讲解关键，明河予以略过。

三、插件代码colortip-1.0-jquery.js

1. (function($){
2. $.fn.colorTip = function(settings){
4. var defaultSettings = {
5. //颜色
6. color : ‘yellow’,
7. //延迟
8. timeout : 500
9. }
10. //提示框的颜色
11. var supportedColors = ['red','green','blue','white','yellow','black'];
13. /* 合并默认参数和用户自定义参数 */
14. settings = $.extend(defaultSettings,settings);
16. return this.each(function(){
18. var elem = $(this);
20. // 如果该对象不包含title属性，直接予以返回
21. if(!elem.attr(‘title’)) return true;
23. // 实例化eventScheduler（定时器）
24. var scheduleEvent = new eventScheduler();
25. //实例化Tip(提示类，产生、显示、隐藏)
26. var tip = new Tip(elem.attr(‘title’));
28. // 产生提示框，并给提示框父容器添加样式
30. elem.append(tip.generate()).addClass(‘colorTipContainer’);
32. // 检查提示框父容器是否有颜色样式
34. var hasClass = false;
35. for(var i=0;i<supportedColors.length;i++)
36. {
37. if(elem.hasClass(supportedColors[i])){
38. hasClass = true;
39. break;
40. }
41. }
43. // 如果没有，使用默认的颜色
45. if(!hasClass){
46. elem.addClass(settings.color);
47. }
49. // 鼠标滑过提示框父容器时，显示提示框
50. // 鼠标移出，则隐藏
52. elem.hover(function(){
54. tip.show();
56. //清理定时器
58. scheduleEvent.clear();
60. },function(){
62. //启动定时器
64. scheduleEvent.set(function(){
65. tip.hide();
66. },settings.timeout);
68. });
70. //删除title属性
71. elem.removeAttr(‘title’);
72. });
74. }
77. /*
78. / 定时器类
79. */
81. function eventScheduler(){}
83. eventScheduler.prototype = {
84. set : function (func,timeout){
85. //添加定时器
86. this.timer = setTimeout(func,timeout);
87. },
88. clear: function(){
89. //清理定时器
90. clearTimeout(this.timer);
91. }
92. }
95. /*
96. / 提示类
97. */
99. function Tip(txt){
100. this.content = txt;
101. this.shown = false;
102. }
104. Tip.prototype = {
105. generate: function(){
106. //产生提示框
108. return this.tip || (this.tip = $(‘<span >’+this.content+
109. ‘<span class=”pointyTipShadow”></span><span class=”pointyTip”></span></span>’));
110. },
111. show: function(){
112. //显示提示框
113. if(this.shown) return;
114. this.tip.css(‘margin-left’,-this.tip.outerWidth()/2).fadeIn(‘fast’);
115. this.shown = true;
116. },
117. hide: function(){
118. //隐藏提示框
119. this.tip.fadeOut();
120. this.shown = false;
121. }
122. }
124. })(jQuery);

关键代码注释明河已经翻译了，插件的制作思路，明河将在接下来的教程详解。

四、jquery插件模板

jquery插件是有固定的模板的，你大概大部分的jquery插件源码，会发现都有一套固定模板。
模板如下：

1. (function($){
2. $.fn.插件名= function(settings){
3. //默认参数
4. var defaultSettings = {
6. }
8. /* 合并默认参数和用户自定义参数 */
9. settings = $.extend(defaultSettings,settings);
11. return this.each(function(){
13. });
15. }
17. })(jQuery);

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 简单的JQuery聚光灯效果教程
• 用jQuery和CSS构建下拉菜单
• 一个基于JQuery 和CSS3的滑动菜单
• CSS3+JQuery实现固定头部的导航菜单
• 10个为Web设计师准备的jQuery教程
• 解密CSS Sprites：技巧、工具和教程
• 推荐9个jquery手风琴菜单插件
• 推荐8个独特应用的JQuery拖放插件
• 掌握强大的WordPress的子主题
• 实用jquery代码片段集合[下]

Feed enhanced by Better Feed from Ozh

前序

jQuery相比1.2的版本，在内部代码的构造上已经出现了巨大的变化，其之一便是模块的分发.我记得09年在jquery 9月开的一次大会上 john放出的一张ppt上 也指出了当前的jquery下一步目标，不仅仅是除了sizzle选择器的分离，届时core，attribute，css以及 manipulation，包括event也都会独立成单独的js文件.（1.4的文件结构，其实已经分成单独的16个模块的组成）

随着jQuery被用来构建web app的场合愈来愈多，它的性能自然受到了大部分开发者的高度关注，它的内部实现机理又是如何，比如选择器的实现。

Sizzle，作为一个独立全新的选择 器引擎，出现在jQuery 1.3版本之后，并被John Resig作为一个开源的项目，可以用于其他框架：Mool, Dojo，YUI等。

好了，现在来看为什么Sizzle选择器如此受欢迎，使它能够在常用dom匹配上 都快于其他选择器而让这些框架们都垂青于它。

概要

一般选择器的匹配模式（包括jq1.2之前），都是一个顺序的思维方式，在需要递进式匹配时，比如$(‘div span’) 这样的匹配时，执行的操作都是先匹配页面中div然后再匹配它的节点下的span标签，之后返回结果。

Sizzle则采取了相反Right To Left的实现方式，先搜寻页面中所有的span标签，再其后的操作中才去判断它的父节点（包括父节点以上）是否为div，是则压入数组，否则pass， 进入下一判断，最后返回该操作序列。

另外，在很多细节上也进行了优化。

浅析源码

在探索 $ 符 和 Sizzle的协同工作原理前，先引用一张图片.

开始吧。（$符在这里不作过多的介绍）.

当我们给$符传递进一个参数（也可能是多个）时，此时它会根据参数的类型（domElement | string | fn | array）进入不同的流程，在此，重点看 string 类型的处理，因为只有它才可以触发Sizzle。首先调用正则匹配看是否为创建dom节点的操作，然后看是否为简单id匹配，这一步也由正则匹配完成，否 则进入jQuery.fn.find()函数，由此进入Sizzle的天地。

当进入Sizzle时，一般情况下会配备三参：所要匹配的选择符，上下文，匹配的结果集。调用正则对传入的selector做一次”预匹配”.

var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?/g,

让我们看一下一个简单选择器的实现过程：比如 div > p。我们要先找出符合条件的div[div]，再找出符合条件的p[p]，最后在上下文里[div]过滤出符合条件”>”的p[p];抽象一点的说 法就是：在已知的上下文里，根据关系找出相应的节点。 他们靠关系联系起来。那么对于选择器的操作也就是根据关系来分组。一次次缩小上下文，直到找出符合条件的节点。

回到我们的话题，还是先看看这个令人费解的正则，相信你会有更好的分析方法，但是眼下，我还是一点点的拆分，让它表达的更清晰一点。先按照分组拆， 即():

((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])
(\s*,\s*)?
((?:.|\r|\n)*)

第一行还是有点长，用’|’拆分它:

1. (?:\((?:\([^()]+\)
2.[^()]+)+\)
3. \[(?:\[[^[\]]*\]
4. [^[\]]+)+\]|\\.
5.[^ >+~,(\[]+)+
6.[>+~]

对于如div > p。会得到数组结果['div','>','p']。

对于更复杂的选择器，如div.classname > p.classname。会得到结果['div.classname','>','p.classname']。

对于具有合并的‘,’,只是递归调用下获取结果再合并而已。过程开始变得简单起来。

对于普通的解析过程，我们遵循着从左到右的顺序即可完成我们的目标。

让我们总结下步骤：

1.先查找页面上所有的div
2.循环所有的div，查找每个div下的p
3.合并结果

Sizzle用了截然相反的步骤：

1.先查找页面上所有的p
2.循环所有的p，查找每个p的父元素
  1.如果不是div，遍历上一层。
  2.如果已经是顶层，排除此p。
  3.如果是div，则保存此p元素。

由子元素来查找父元素，能得到更好的效率。看，打破常规思维后不仅步骤更简单了，而且效率上也得到了些许提升。

所有的选择器都可以这样解析吗？不是，采用right -> left的顺序是有前提条件的：没有位置关系的约束。

比如如下这段html：

<div>
p1content
p2content
</div>
<div>
p3content
p4content
</div>

对于选择器：$(“div p:first”)只会返回["#p1"]

而$(“div p:first-child”)则返回["#p1", "#p3"]

两者的区别在于位置filter的结果依赖于它前面的selector解析的结果，而其它 filter，只依赖于当前元素本身，就可以判断它是否满足filter。

那Sizzle是通过什么来判定进入哪一个流程呢，答案是origPOS的正则匹配,origPos指向了Expr中match对象的POS属性, 而POS中存储了五花八门的位置类约束，如下：

/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/     //POS的值

这样一来，第一步的流程判断就已明朗。

当处于1的情况时:

首先根据需要对当前处理的A数组元素进行一系列修正操作（Expr.relative主刀）。然后调用posProcess函数对修复后的元素进行 匹配.

其中，还需一层判断，如果有层级约束，eg ‘>,’:input’ 会转化为 ‘> :input’,因为在最初调用chunker进行预匹配的时候，这些是会被分割为单个数组元素的，但在这里需要将它们做一次合并，这是由 posProcess所处理的数据格式所决定的

源码片段a: — posProcess函数匹配核心

//如果存在伪类选择符，从selector中移除，并保存在later中
// 这样一来，匹配对象便分离出来：selector（简单选择符存储器）和later（伪类选择符存储器）。
while ( (match = Expr.match.PSEUDO.exec( selector )) ) {
    later += match[0];
    selector = selector.replace( Expr.match.PSEUDO, "" );
}
//构造selector，并调用Sizzle进行匹配,将结果存储在tmpSet中
selector = Expr.relative[selector] ? selector + "*" : selector;
for ( var i = 0, l = root.length; i < l; i++ ) {
    Sizzle( selector, root[i], tmpSet );
}
// 最后便是filter的过滤
return Sizzle.filter( later, tmpSet );

源码片段b: — 对预匹配后的数组A中元素的处理

//这个为特例，被正则分割的A数组长度为2，则合并数组元素，上下文则原封不动为Sizzle传递进来的context。
if ( parts.length === 2 && Expr.relative[ parts[0] ] ) {
    // 完成一次匹配， 由posProcess 内部调用 filter进行匹配
    // 但在匹配前，完成了一次连接选择符的操作
    // 存入set，注 set 当前还不是最终的结果，其这里的set和上面的tmpSet一样，都是一个"暂时性"的结果集
    set = posProcess( parts[0] + parts[1], context );

源码片段c: — 如果存在位置约束关系， 正向匹配。

set = Expr.relative[ parts[0] ] ?
    [ context ] :
    // 否则对队列首元素进行一次简单匹配操作
    Sizzle( parts.shift(), context );

分析Expr.relative，可以看出，它包含了4种dom元素间关系的判断，分别是 “+”, “>”, “”, “~”

每一轮的匹配，都会先判断A数组的首元素是不是代表tag间关系符(+,>等) ，而做后续处理.同时对A数组进行循环，依次做类似的处理

源码片段d — 对A数组(parts)的循环处理及后续

while ( parts.length ) {
    // 依次对 所匹配到的 数组中元素进行 递进匹配
    selector = parts.shift();
    //   '>'  -> '>input' 的形式
    if ( Expr.relative[ selector ] )
        selector += parts.shift();

    set = posProcess( selector, set );

当处于2的情况时:

就有着不同之处,先看小片代码

源码片段e: — 根据当前流程设置ret(两种情况)

//为ret绑定正确的返回值
var ret = seed ?       //seed 为上一次调用sizzle返回值， 即前文中提到的set|tmpset
    //将预匹配后的A数组(parts)中的最后元素设置为ret的expr属性，set属性设为上一次匹配的结果集。
    { expr: parts.pop(), set: makeArray(seed) } :
    //如果是第一次调用，则进行匹配操作,调用find函数
    // 以parts数组最末元素为当前选择符，进行匹配操作，同时设置与之相关的context
    Sizzle.find( parts.pop(), parts.length === 1 && context.parentNode ? context.parentNode : context, isXML(context) );

2的情况为一般逻辑处理，从这小段代码便可得到Sizzle的匹配机制，每一次的调用都以数组末元素为基准，以上一次（或预设context）为上 下文约束关系以右到左的匹配,最后返回匹配结果。结合了DOM结构的特性，性能上也得到了大幅的提升。

我们知道选择器的类型是有效率差别的，id选择器效率最高，其次是class、name、tag、最后是最差的*表达式。在Sizzle.find 函数中，会按照这个效率的顺序查找元素，如果没有id就找class，依次下去。当然，class的支持需要方法 getElementsByClassName。如果没有，就只好从id跳到name。

if ( document.getElementsByClassName && document.documentElement.getElementsByClassName ) (function(){
    // ...
    // 如果支持直接获取，则将获取class的方法 直接添加进 Expr.order中   ['ID', 'NAME', 'TAG']
    Expr.order.splice(1, 0, "CLASS");
    //同时在find中追加对class的获取
    Expr.find.CLASS = function(match, context, isXML) {
        if ( typeof context.getElementsByClassName !== "undefined" && !isXML ) {
            return context.getElementsByClassName(match[1]);
        }
    };
})();

在Sizzle.find函数中，做了一系列的逻辑判断，来保证返回结果的正确性，首先在进入find时，保证了expr不为空的，然后根据表达式 类型(id|name|tag|class?)来选择与之对应的匹配分支进行实现，最后再做适当的收尾工作，将返回结果定义为对象，来移交给 filter,完成整个流程。

源码片段f: — find 函数核心

//order: [ "ID", "NAME", "TAG" ]
// 当然，如果浏览器支持对class的直接获取时，order中就会出现class的相关匹配规则
for ( var i = 0, l = Expr.order.length; i < l; i++ ) {
    var type = Expr.order[i], match;
    // 根据 type 对所传进来的expr 进行正则匹配
    // match中通过正则限制了这三类匹配方式的条件。
    // 1. ID: /#((?:[\w\u00c0-\uFFFF_-]|\\.)+)/,
    // 2. NAME: /\[name=['"]*((?:[\w\u00c0-\uFFFF_-]|\\.)+)['"]*\]/,
    // 3. TAG: /^((?:[\w\u00c0-\uFFFF\*_-]|\\.)+)/,
    if ( (match = Expr.match[ type ].exec( expr )) ) {
        var left = RegExp.leftContext;
        //保证返回结果的正确性，如果存在\，则删除
        if ( left.substr( left.length - 1 ) !== "\\" ) {
            match[1] = (match[1] || "").replace(/\\/g, "");
            // 根据type调用 sizzle.selector.find方法获取结果集。
            set = Expr.find[ type ]( match, context, isXML );
            if ( set != null ) {
                //如果匹配成功，删除已经匹配的expr
                expr = expr.replace( Expr.match[ type ], "" );
                break;
            }
        }
    }
}

return {set: set, expr: expr};
};

在所返回的对象中，expr的作用便是为了辅佐filter这把大器所需要完成任务的工具,到此就可以调用Sizzle.filter对 ret.set再做一次精确匹配(匹配规则即ret.expr),以及tag间的位置约束关系的匹配（这部分同1中类似）.

源码片段g: — 和源码片段d有类似之处。不作详述

    while ( parts.length ) {
        var cur = parts.pop(), pop = cur;
        // 是否存在 类似这样的匹配 eg:  '+',  '>'等
        if ( !Expr.relative[ cur ] ) {
            cur = "";
        } else {
            //如果存在层间关系的约束  则修复 cur 和pop的指向
            // eg  ['div', '+', 'span'] =>   pop = div;  cur = '+'; 并进入 relative的匹配。
            pop = parts.pop();
        }
        //  确保拥有上下文 代码略过
        Expr.relative[ cur ]( checkSet, pop, isXML(context) );
    }

之后便接近sizzle尾声：结果集的处理(将所匹配的结果set 追加进 result中)。当然，如果有多表达式,便会再一次调用。

实例

以’div > span p span:last’这个选择符为例，看看它的调用链是如何顺次完成的。

根据对源码的剖析，理解如下：

1. 1. jquery.init -> jquery.prototype.find
2. 2. 进入Sizzle(对xml的判断) -> 设置parts数组等在匹配中所需要的元素 -> 根据数组长度以及调用origPos进行判断，来决定进入哪个分支，在这个实例下进入分支1
3. 3. 循环调用Sizzle进行匹配，将结果存入set中(因为在这一过程中是循环调用，所以对Sizzle的判断也是需要多次，进入哪一分支当然也会是不一样 的，比如第二轮循环判断则进入分支2中进行处理) ,对于>号的处理，也会将它合并在其后的span中，构成新的选择符 ‘>span’,然后进入Expr.relative进行匹配，同时调用posProcess。
4. 4. 调用Sizzle.find 匹配除伪类以外的部分(即这里的选择器不包含:last),首先会调用Expr.find的find方法来判断是否为哪一类匹配，在这一实例中，为TAG 匹配。
5. 5. 对从4步中生成的对象进行过滤,匹配’>’(这一步的匹配是由Sizzle.filter触发，由Expr.relative完成),而在匹 配’span:last’时则由posProcess来触发，设置later值(:first)以及selector(span)，对span的匹配和4 步骤一样，重复匹配，而对:first的匹配则是第5步的重头戏，也就是调用Sizzle.filter来完成, 由此便生成了最后的匹配结果。

对于有‘,’这样需要合并的选择器，Sizzle在获取结果后会按照文档流进行排序。所以，你可能会遇到这样的问题：把一个结果集append到新 的节点后，新的节点可能不会按照你书写的选择器的顺序出现。

以上，可以得出以下结论：大致通过如下步骤来完成：

1.对表达式分组。
2.选择合适的处理顺序。
3.在当前的上下文里过滤要找的节点。并更新上下文。重复这一过程，直到结尾。
4.对结果排序，如果需要的话。
5.返回结果数组。

前向兼容

querySelectorAll

其实不止这一处，在Sizzle的API手册中Internal部分的find 函数（与filter构成了Sizzle的两把宝剑），在传递进该方法的参数可以用 querySelectorAll() （依赖于当前的浏览器执行环境） 直接获取时，它则直接调用该方法，既拥有了向前兼容的特性，又达到了速度的提升。

虽然有些环境实现了方法querySelectorAll，但是会有bug。

//如果当前document 支持 querySelectorAll方法,则将浏览器可以完成的匹配完全交给浏览器
if ( document.querySelectorAll ) (function(){
    var oldSizzle = Sizzle;
    // 解决Safari bug 略过 ...
    Sizzle = function(query, context, extra, seed){
        context = context || document;

    // 因为querySelectorAll 在domElement 节点上操作时，存在bug 所以多了这样的判断
    // bug info: http://ejohn.org/blog/thoughts-on-queryselectorall/
        if ( !seed && context.nodeType === 9 && !isXML(context) ) {
            return makeArray( context.querySelectorAll(query), extra );
        }
        // querySelectorAll 可用则直接返回结果，否则才调用 sizzle
        return oldSizzle(query, context, extra, seed);
    };

    // oldSizzle 方法追加进 新的 Sizzle 中

})();

对于任何一个开发者，我想，若浏览器原生已提供了实现方法，他都不会去高效而求繁琐吧。这一点在Sizzle中得到了充分的体现，总是尽可能的使用 相应环境下已实现的原生方法。所以在IE的低版本中(比如IE6)Sizzle的表现更加出众，在高级的浏览器中的对比却没有那么大的差别。

扩展

如何定义自己的选择器呢.如果项目中频繁使用某些过滤规则，是不是把它作为一个选择器更有效呢。
既然javascript的对象可以任意扩充，只要我们访问得到，那么我们就可以很轻松得创建出自己的选择器

在jQuery.expr.filter对象中，有很多内置的选择器，比如 ‘disabled’,'text’,那我们就扩充它,比如，想寻找包含span的div元素

// filter的简写  ':'
jQuery.expr[":"] = jQuery.expr.filters;
$.extend($.expr[':'], {
    hasSpan: function(e) {
       return $(e).find('span').length > 0;
    }
});

这样，我们就拥有了 ‘:hasSpan’ 的选择器，使用当然和默认的一样。

//直接用就可以了
$('div:hasSpan')....

比较

再拾YUI3，在经过大幅度变化，以全新姿态出现，从选择器上的执行上效率不逊色于Sizzle几毫，初看YUI时就一直对它的模块细粒度化赞不绝 口，但是从如我这样的实用主义者的角度来看，选择器就应该是一个单独的模块，就如同jQuery分离而出的Sizzle。但在YUI term眼里，为了让代码的组织结构看上去更加的理想化，更加具有”YUI3“的特色，将之在代码结构上又细分出一二三，比起Sizzle的简洁，它显得 太过学院派。

除此，在选择器的扩展上，sizzle表现胜于YUI3 selector，在实现css1~css3选择器的基础上，又对常用的功能进行了扩展。比如对表单元素快捷操作。据我所知，开发者对这类型选择器的使用 频率并不是想象中那么低。既然有了模块的细分，为什么不将这部分作为一个可扩充性的功能点模块融入框架中呢。Sizzle于开发者就如同一块可口味佳的点 心，满足我们各式各样的胃口，简洁，不失其功能的强劲，这点非常值得称道。

总得来看，Sizzle与YUI就好象一个面向实际与理想主义的比较。这里没有对错之分，从不同角度来看，都能略窥其各自的禅意。前者从如何为开发 者带来便利的角度考虑，让开发者实时觉得它的简单可信赖。后者，也寄托了自己对web的构想，如果浏览器原生全部支持css3-selector，那岂不 是完全不用引入该模块了，不过我想，真到那时候，各框架也都会有很大的变化了，只是我对这一天的到来抱有比较消极的态度，这是后话。

总结

本文从总体上讨论了jQuery之Sizzle选择器的实现原理，通过一个初步的流程分析，让各位读者对此有一个大致印象，毫无疑问，更深层次的匹 配，也只是它的递归调用，再匹配而已。

这里，没有做与其他框架在效率上的比较，如果你还对它的效率还有所怀疑的话，你可以自行比较。

如果你感兴趣，更推荐你继续去探索在1.4中着重优化的api源码，或许，会给你更多的启示

思考

从jQuery的角度来讲，Sizzle的出现随之也带来了web上的一些新的局面，在追求效率的同时，即使是这类单种子模式的库也是需要将之分离 开来，来设计成能够独立使用，独立维护的引擎。

从选择器的角度来讲，Sizzle这次算法的提升，我初步的结论是它结合了DOM这一特定的数据结构，使其每次的匹配能够更精准,以此获得引擎效率 上的提升。

我们可否多想想，在思维的开拓上能给我们留下多少财富。很多问题的解决，在换一种新的思维方式后，是不是常常会有柳暗花明的感觉呢。

最后要申明的是，这篇文章是在导师一次次的指导下完成的，并且由我和obility共 同完成，再次谢谢导师和obility。

相关参考：

W3C css selector:CSS1,CSS2,CSS3

CSS Support History -Brian Wilson

CSS Selectors and Pseudo Selectors and browser support – kimblim.dk

Javascript CSS Selector Engine Timeline – Paul Irish

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 简单的JQuery聚光灯效果教程
• 用jQuery和CSS构建下拉菜单
• 推荐9个jquery手风琴菜单插件
• 推荐8个独特应用的JQuery拖放插件
• 实用jquery代码片段集合[下]
• 实用jquery代码片段集合[上]
• 如何为您的博客图片添加水印效果？
• 基于jQuery的新闻图片
• 制作jquery文字提示插件
• 几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比

Feed enhanced by Better Feed from Ozh

jqueryUI包中手风琴菜单，堪称经典，优势在于多样化的皮肤。

2、initMen3.1

非常简单的一个jquery手风琴菜单插件，缺点是样式有点丑。

3、 Making Accordion Menu Using jQuery

你可以控制采用何种事件改变菜单内容，同时增加了菜单上图标的变化。

4、jQuery Accordion Menu

5、 jQuery – Horizontal Accordion

横向手风琴菜单，这个插件明河要推荐下，很完整的API。

6、 jQuery Examples – Horizontal Accordion

简单的横向手风琴效果。

7、Regular and Hover Accordion Menus

8、 Slide Out and Drawer Effect

9、 Javascript Accordion Menu Wizard

类似RIA之家的导航区域的效果，有趣的是作者还提供了几个flash菜单，有兴趣的朋友可以看下。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 用jQuery和CSS构建下拉菜单
• 一个基于JQuery 和CSS3的滑动菜单
• 网站导航设计的6大分类
• 简单的JQuery聚光灯效果教程
• 推荐8个独特应用的JQuery拖放插件
• 实用jquery代码片段集合[下]
• 实用jquery代码片段集合[上]
• 如何为您的博客图片添加水印效果？
• 基于jQuery的新闻图片
• 制作jquery文字提示插件

Feed enhanced by Better Feed from Ozh

明河是推荐直接使用jquery UI包中的拖放，当你的需求jquery 拖放UI无法满足时，不妨看下以下插件。

1、Superfun

• 查看示例
• 点此下载

示例中演示了对倾斜容器的拖放，当然这个demo不兼容IE。

2、CropZoom

• 查看示例
• 点此下载

拖放在图片剪切中的应用，这个朋友么应该不陌生，这个jquery插件的强大之处在于，你不只可以改变剪切区域，还可以控制图片大小，以及图片的旋 转。

3、Jquery Iviewer

• 查看示例
• 点此下载

这款jquery插件可当做web地图的基础模型，对web地图有兴趣的朋友很有参考意义。

4、Dragscrollable

• 查看示例
• 点此下载

当你在容器内进行拖拉时滚动条也会随之滚动，明河觉得有意思的地方在于标尺。

5、Table Drag and Drop JQuery plugin

• 查看示例
• 点此下载

表格行数据拖放。

6、 jquery mb.containerPlus

• 查看示例
• 点此下载

华丽的弹出窗体拖拉，你可以自由的控制弹出的窗体。

7、Creating a Draggable Sitemap with JQuery

• 查看示例

可拖放的站点地图……貌似实际意义不大。

8、jQuery Reel Plugin

• 查看示例
• 点此下载

这个插件很有意思，产生类似全景的效果。

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• FCBKcomplete v 2.02
• 6个jQuery图标插件的应用程序
• 50个表单功能，验证，安全和自定义化的jQuery插件
• 30个最好的jQuery表单插件
• 30+ 新鲜惊奇的 jQuery 插件与教程
• 21个演示展示强大的jQuery特效
• 2010年4月：最佳的jQuery插件
• 10+个jQuery图片滚动插件介绍
• 10 个帮助你处理Web页面层布局的jQuery插件
• 简单的JQuery聚光灯效果教程

Feed enhanced by Better Feed from Ozh

目标是用 CSS3 border-radius 和 box-shadow 来实现如下图效果

左手: 圆角+外投影
你的右手旁边是我的左手: 圆角+内投影

问题
问题是这年头木有一档浏览器可以完美的在图片上应用圆角和阴影
webkit 可以显示圆角,但木有内投影
firefox 和内裤被戳破一样还坚挺的直着

CSS 淫技

灰常简单: 在图片外头套一层超薄<span />然后把原图作为 background-image.
要隐藏原图的话,可以 opacity:0 或 display:none
偶发现 opacity 更淫荡点,因为这么整用户还能图片另存为
当然出于某些阴暗目的或光明磊落隐私考虑,可能会偏向 display

最终用 jQuery 的解决方案

本着怎么偷懒怎么来的原则,我们用 jQuery 来自动给图片套<span />

不解释, 上代码先

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});

</script>

接下来开始解释
1. 调用 jQuery 库
2. ready 就是 DOM 全部加载后再触发的事件, 否则一旦有图片的 DOM 节点后于 JS 加载,就会绑定不到
3. $(“.rounded-img, .rounded-img2″) 选中所有 class 名为 rounded-img 和 rounded-img2 的元素
4. 给俩元素集绑定 load 事件 (偶很疑惑为何这么写)
5. 在每个图片外面包含一个 span, 这个 span 的 class 为原元素的 class ,这个 span 的 style 里的 background 取值自原图的 src 值, 宽高同理
6. 给每个图片写个style=”opacity:0″

看起来素酱紫滴:

大猫的调整

$(function(){
  $(".avatar").wrap(function(){
      return '<span style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    }).css("opacity","0");
});

理由:
1. $(document).ready(function(){}) 相当于 $().ready(function(){}) 相当于 $(function(){}) ,貌似有这么一说,嘻嘻
2. class名改为 .avatar 如果你是 wordpress 的评论头像, 都封装好了,要改结构也不是很方便,哈
3. 去掉图片的 .load 事件, 因为如果图片从缓存中获取, 有可能就不会触发这个事件, 反正是 DOM ready,霸王硬上弓了
4. 直接用链式写法点花点月点秋香

然后你得在你的主题 style.css 加上那么几条
因为 webkit 的内阴影配合圆角就是一坨屎,所以我用外阴影了
iPhone 的safari 还不支持 inset 内阴影, 如果有内阴影控, 可以用线性渐变配合RGBA假装是阴影…

.avatar {
	display: inline-block;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

IE 呢?
screw you!

不过目前偶是弄个中间镂空PNG遮罩,多一个请求
要是平滑那还得PNG32
要是PNG32那IE6捏?
IE6用 AlphaImageLoader 滤镜一旦图片加载失败,整个页面就脱光了死给你看

screw IE!

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 用jQuery和CSS构建下拉菜单
• 八种布局方案改善你的设计
• 一个基于JQuery 和CSS3的滑动菜单
• CSS3+JQuery实现固定头部的导航菜单
• 40+ Web前端开发必备的备忘单[上]
• 页面输出时一些常用的小技巧
• 面向对象的CSS
• 针对IE8正式版的CSS hack
• 跨浏览器的CSS固定定位{position:fixed}
• 跨浏览器兼容的 CSS 编码准则和技巧

Feed enhanced by Better Feed from Ozh

http://www.iwanna.cn/archives/2010/06/23/4164/

说实话，填写表单总是件很痛苦的事。那么对于开发者而言呢？可以创建一份表单说他们而言是件更为痛苦的事。没有人真正会喜欢他们，对于开发者而言，当涉及到表单开发时最困难的挑战并非仅仅在于创建一份简单且快速为用户所接受使用，但也必须是尽可能地方便且使用。这的确是相当的不容易啊。

本篇文章中，我们已经收集了50个JQuery插件以帮助您建立强大的表单。今后如果您碰到任何关于表单的解决方案，想必您会从这里找到您JQuery方案。

表单功能插件

Elastic – Make your textareas grow

这个jQuery插件让你textareas表单域增长和缩小，以适应它的内容。它的灵感来自于Facebook 的 textareas 域。
Elastic – Make your textareas grow »

jQuery “Highlight” Plugin

高亮区可以提高表单的可用性，突出页面上的交互元素。其主要是在表单中使用，但它也可用于表格，列表，或任何您指定的元素。
jQuery “Highlight” Plugin »

Autotab: jQuery Auto-Tabbing and Filtering

Autotab是一个jQuery插件，它提供的自动切换和过滤表单域中的文本域。一旦输入的字符串达到了已定义的文本长度，它会自动切换到自动设置的目标元素。
Autotab: jQuery Auto-Tabbing and Filtering »

Ajax Fancy Captcha

Ajax Fancy Captcha通过新页面帮助您保护页面远离机器人及垃圾邮件发送者的攻击，仅仅是通过很“人性化的验证”实现。这是通过将指定项拖拽到一个圆圈中实现的。
Ajax Fancy Captcha »

jQuery NobleCount

NobleCount可以动态地将textarea域中剩余字符的数目显示在本文中，Twitter风格。
jQuery NobleCount »

Password Strength Indicator and Generator

Password Strength Indicator and Generator 插件允许您设置元素的类，这样您就可以图形化显示密码的强度。
Password Strength Indicator and Generator »

FormToWizard Plugin

FormToWizard 插件允许您以“依次向左”的步骤实现表单信息提交。
FormToWizard Plugin »

Sliding Labels – jQuery Form Plugin

Sliding Labels – jQuery Form Plugin »

ToggleVal

ToggleVal会让您选择以不同的方式来填充表单文本字段（某些不同的方式），当接收和失去焦点的时候会自动切换至默认值。
ToggleVal »

jQuery AlphaNumeric

jQuery AlphaNumeric is a javascript control plugin that allows you to limit what characters a user can enter on textboxes or textareas.
jQuery AlphaNumeric »

Form Encyription and Password Security

jCryption

jCryption is a JavaScript HTML-Form encryption plugin, which encrypts the POST/GET data submitted by forms.
Normally, when you submit a form, data will be sent in plain text if no SSL is used. But SSL is not supported by every webhost nor it’s easy to install/apply at times. So in this situation the jCryption plugin helps you to encrypt your data with ease.
jCryption »

Password Validation Plugin

This plugin offers a function that rates passwords for factors like mixed upper/lower case, mix of characters (digits, special characters), length and similarity to a username (optional) and gives a custom method for the validation plugin that uses the rating function to display a password strength meter, requiring the field to have a “good” rating.
Password Validation Plugin »

Password Strength – Estimates brute force time

Password Strength tries to calculate how many possibilities the hacker needs to try to guess your password. It makes the assumption that it is possible to test 2800 million passwords per second.
Password Strength »

Password Strength Meter v2

The Password Strength Meter works by presenting a global variable score and at the end of the algorithm the plugin will decide the passwords strength according to the score value.
Password Strength Meter v2 »

Form Mask Plugin

Masked Input Plugin

The Masked Input Plugin allows a user to easily enter fixed width input fields where you would like them to enter the data in a certain format (dates,phone numbers, etc).
Masked Input Plugin »

autoNumeric()

autoNumeric() is a flexible International numeric formatter, that will automatically place a thousand separator as you type and supports nine different rounding methods.
autoNumeric() »

Form Upload Plugins

AJAX Upload

AJAX Upload allows you to easily upload multiple files without refreshing the page and can use any element to show the file selection window.
AJAX Upload »

jqUploader: jQuery Plugin for File Upload and Progressbar

jqUploader is a plugin that substitutes the html file input fields with a flash-based file upload widget, allowing you to display a progressbar and percentage.
jqUploader »

Uploadify

Uploadify is a plugin that allows the easy integration of a multiple (or single) file uploads on your website. It requires Flash and any backend development language. An array of options allow for full customization for advanced users, but basic implementation is so easy that even coding novices can do it.
Uploadify »

jQuery Uploadprogress Plugin

This plugin will augment a standard file upload form with a transparent background upload and add a progress meter that will keep you graphically informed.
jQuery Uploadprogress »

Form Skinning and Customisation

jQuery Checkbox

The jQuery Checkbox plugin is a lightweight custom styled checkbox implementation that can also work with radio buttons.
jQuery Checkbox »

Jqtransform – jQuery form plugin

This plugin is a jQuery styling plugin which allows you to skin form elements with relative ease.
Jqtransform »

In-Field Labels jQuery Plugin

This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.
In-Field Labels jQuery Plugin »

Niceforms

Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
Niceforms »

jNice

jNice makes it easy to style rough and simple html forms into beautiful web forms, checkboxes, input elements and selectboxes by creating custom looking form elements, that function just like normal form elements.
jNice »

Uniform – Sexy forms with jQuery

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.
Uniform »

prettyCheckboxes

prettyCheckboxes is for developers who wants to maintain a consistent style for checkboxes across all browsers. By using this script you wont loose any regular input usability.
prettyCheckboxes »

Form Select and Combo Boxes

jquery.combobox

jquery.combobox is an unobtrusive way of creating a HTML type combobox from a existing HTML Select element(s).
jquery.combobox »

JavaScript Image Combobox

The fully skinnable Image Combobox plugin allows you to add an icon with each option that works with your existing “select” element.
JavaScript Image Combobox »

SelectBox Plug-in

SelectBox Plug-in »

Two Sided Multi Selector

This plugin converts a multi select list into a two-sided multi-select list. This means you display a list of options in the left hand box and items you select are moved into the right hand box.
Two Sided Multi Selector »

flexselect

flexselect takes the select box, and creates a hidden input element to track the associated value and creates a text input for the selection. It uses the LiquidMetal scoring algorithm to narrow the selection.
flexselect »

Form Time and Date Pickers

jQuery.timepickr.js

jQuery.timepickr.js has been developed in a attempt to make the process of inputing time in a form as easy and natural as possible.
jQuery.timepickr.js »

DatePicker

DatePicker is a feature rich and easy to customize plugin that allows for single, multiple or range selection dates.
DatePicker »

jQuery datePicker

This is a clean, flexible and unobtrusive plugin for jQuery which allows you to easily add date inputing functionality to your web forms and pages.
jQuery datePicker »

jQuery Week Calendar

The jQuery Week Calendar plugin provides a simple and flexible way of including a weekly calendar in your application and has been inspired by other online weekly calendars such as Google calendar.
jQuery Week Calendar »

Form Auto-Suggest

AutoSuggest

AutoSuggest is a lightweight jQuery plugin that will will dynamically create all the HTML elements that is needed for turning any regular text input box into an auto-complete box.
AutoSuggest »

Autocomplete

By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.
Autocomplete »

Ajax Autocomplete

Ajax Autocomplete allows you to easily create autocomplete/autosuggest boxes for text input fields with every query result being cached and pulled from local cache for the same repeating query. If there are no results for a particular query it stops sending requests to the server for other queries with the same root.
Ajax Autocomplete »

FaceBook Like – jQuery and autosuggest Search Engine

FaceBook Like is a powerful jQuery plugin that transform an input field into a real time autocompletion search engine, designed, as the name suggests, similiar to the one on Facebook.
FaceBook LikePlugin »

Form Validation Plugins

A jQuery inline form validation, because validation is a mess

When an error needs to be displayed, this script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corners and shadows are pure CSS3 and degrade well in non compliant browsers.

Validation

The Validation plugin is one of the oldest jQuery plugins (started in July 2006) available that has proved itself due to reliabilty, ease of use and extensive docs.
Validation »

Highly Customizable Yet Simple Form Validation

With this highly customizable plugin the user can set his own class to define the rule, set events onError and OnValid for a particular class and you can also add their own effects, may be jquery animate().
Highly Customizable Form Validation »

LiveValidation – Validation as you type

LiveValidation is a small open source javascript library for making client-side validation quick, easy, and powerful. It comprises of two main parts. Firstly, it provides developers with a rich set of core validation methods, which can also be used outside the context of forms. Secondly, it provides your visitors with real-time validation information as they fill out forms, helping them to get it right first time.
LiveValidation »

Ketchup Plugin

Ketchup Plugin is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.
Ketchup Plugin »

jTip – The Jquery Tool Tip

jTip pulls content into a tool tip using the HttpXMLRequest object. By adding a class attribute value of “jTip” to a link element you can create a tooltip from the content found in the file the href is pointing too.
jTip »

jQuery Live Form Validation

This plugin helps you to easily create form validations with high flexibility and is a packaged with a huge set of options.
jQuery Live Form Validation »

Valid8 – An input field validation plugin

Valid8 solves both simple and complex validation scenarios. Everything from a basic required field to regular expressions, ajax requests and arbitrary javascript functions.
Valid8 – An input field validation plugin »

jVal – jQuery Form Field Validation Plugin

jVal is a jQuery form field validation plugin that provides an appealing animated message flyout that doesn’t impede form layout/design while being user-friendly.
jVal »

The Original jQuery Plugin

jQuery Form Plugin

And if all of the rest of the plugins on this page can’t help, you can always rely on the original jQuery form plugin: jQuery Form Plugin »

© 我想网 Akon 所有 , 2010. | 永久链接 | 1条评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 30个最好的jQuery表单插件
• 用jQuery和CSS构建下拉菜单
• FCBKcomplete v 2.02
• 25个优秀的jQuery滑块教程和插件
• 11 个优秀的制作移动友好网站的解决方案
• 转换设计原图 PSD 为 HTML
• 深色调社交图标：免费且高质量的社交媒体图标集
• 推荐8个独特应用的JQuery拖放插件
• 如何正确购买一个已经存在的域名(SEO友好)
• 如何备份所有的浏览器 – 5 个小贴士(Google Chrome, Firefox, Safari, Internet Explorer, and Opera)

Feed enhanced by Better Feed from Ozh

1、jCarousel

这款jquery图片滚动插件用的人很多，功能上颇为强大，你可以控制是水平滚动还是垂直滚动。

2、jCarousel Lite

这款插件优势在于小巧，只有2K的js，当然功能上会差些。

3、jQuery Carousel

更像一个幻灯片，你可以控制图片滑动方向。

4、jQuery Infinite Carousel

5、LoopedCarousel

6、MovingBoxes

点此下载

7、infinite-carousel

点此下载

8、Agile Carousel

• 查看示例
• 点此下载

（注：请从服务器端启动，不然无法正确运行）

9、jMyCarousel

• 查看示例
• 点此下载

10、easyslider1.7

点此下载

想要把图片滚动应用到你的站点中，不可避免要对这些jquery图片滚动插件的样式进行重写，接下来来推荐几个漂亮的应用图片滚动的站点。

1、Branded07

2、Deluge Studios

3、Golf Working

4、Dazzle Cat

5、Bret Glassett

6、What Is XV

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 推荐8个独特应用的JQuery拖放插件
• FCBKcomplete v 2.02
• 6个jQuery图标插件的应用程序
• 50个表单功能，验证，安全和自定义化的jQuery插件
• 30个最好的jQuery表单插件
• 30+ 新鲜惊奇的 jQuery 插件与教程
• 21个演示展示强大的jQuery特效
• 2010年4月：最佳的jQuery插件
• 10 个帮助你处理Web页面层布局的jQuery插件
• 简单的JQuery聚光灯效果教程

Feed enhanced by Better Feed from Ozh

• 查看示例
• 点此下载

效果说明：当你滚动页面的时候，菜单会放大，固定于头部一起滚动。

制作教程

一、创建如下的菜单结构

1. <div id=”navi”>
2. <div id=”menu” class=”default”>
3. <ul>
4. <li><a href=”#”>首页</a></li>
5. <li><a href=”#”>jquery</a></li>
6. <li><a href=”#”>设计</a></li>
7. <li><a href=”#”>flex</a></li>
8. <li><a href=”#”>air</a></li>
9. <li><a href=”#”>ajax</a></li>
10. <li><a href=”#”>html5</a></li>
11. <li><a href=”#”>css3</a></li>
12. <li><a href=”#”>WordPress</a></li>
13. </ul>
14. </div><!– close menu –>
15. </div><!– close navi –>

这是一个菜单列表，结构上很简单，跟一般的菜单结构类似。

二、使用css3构建华丽菜单

接下来我们需要用到css3的知识来实现如demo上的菜单效果。
完整代码如下：

1. #navi {
2. height: 50px;
3. margin-top: 50px;
4. font-size:14px;
5. }
7. #menu {
8. /*背景*/
9. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC), color-stop(100%,#2374C5));
10. background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);
11. /*圆角*/
12. border-radius: 5px;
13. -webkit-border-radius: 5px;
14. -moz-border-radius: 5px;
15. line-height: 50px;
16. text-align: center;
17. margin: 0 auto;
18. padding: 0;
19. }
22. ul {
23. padding: 0;
24. }
26. ul li {
27. list-style-type: none;
28. display: inline;
29. margin-right: 15px;
30. }
32. ul li a {
33. color: #fff;
34. text-decoration: none;
35. /*文字阴影*/
36. text-shadow: 1px 1px 1px #000;
37. padding: 6px 12px;
38. /*圆角*/
39. border-radius: 5px;
40. -webkit-border-radius: 5px;
41. -moz-border-radius: 5px;
43. -webkit-transition-property: color, background;
44. -webkit-transition-duration: 0.5s, 0.5s;
45. }
47. ul li a:hover {
48. background:#FFC;
49. color:#333;
51. -webkit-transition-property: color, background;
52. -webkit-transition-duration: 0.5s, 0.5s;
53. }
55. .default {
56. width: 850px;
57. height: 50px;
59. box-shadow: 0 5px 20px #888;
60. -webkit-box-shadow: 0 5px 20px #888;
61. -moz-box-shadow: 0 5px 20px #888;
62. }
64. .fixed {
65. position: fixed;
66. top: -5px;
67. left: 0;
68. width: 100%;
70. box-shadow: 0 0 40px #222;
71. -webkit-box-shadow: 0 0 40px #222;
72. -moz-box-shadow: 0 0 40px #222;
73. }

关键部分代码说明
1、给菜单添加渐变背景

1. /*背景*/
2. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC), color-stop(100%,#2374C5));
3. background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);

webkit和firefox在渐变背景的使用上有出入，语法并不相同，firefox更简洁，webkit更符合标准。接下来明河详细说明下这些 参数是什么意思。
先来看firefox的语法：

1. background: -moz-linear-gradient(top, #8AB9EB, #5C9DDC, #2374C5);

这里有四个参数，含义如下：

• 第一个参数，渐变的起始点，这里用到了简写，本来应该是 left top，火狐可以只用left，top是默认的，也就是至上向下。
• 第二个参数，起始渐变色
• 第三个参数，中间渐变色
• 第四个参数，终点渐变色

1. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8AB9EB), color-stop(40%,#5C9DDC), color-stop(100%,#2374C5));

webkit的参数比较多，含义如下：

• linear 线性渐变
• left top起始位置
• left bottom终点位置
• color-stop(0%,#8AB9EB)起始颜色
• color-stop(40%,#5C9DDC)中间颜色
• color-stop(100%,#2374C5)终点颜色

关于渐变背景的详细说明请点此。
2、给菜单容器添加圆角

1. /*圆角*/
2. border-radius: 5px;
3. -webkit-border-radius: 5px;
4. -moz-border-radius: 5px;

这个很简单，明河就不说明了
3、给菜单项加入如下样式

1. ul li a {
2. color: #fff;
3. text-decoration: none;
4. /*文字阴影*/
5. text-shadow: 1px 1px 1px #000;
6. padding: 6px 12px;
7. /*圆角*/
8. border-radius: 5px;
9. -webkit-border-radius: 5px;
10. -moz-border-radius: 5px;
12. -webkit-transition-property: color, background;
13. -webkit-transition-duration: 0.5s, 0.5s;
14. }

留意这里的文字阴影的用法。

1. -webkit-transition-property: color, background;
2. -webkit-transition-duration: 0.5s, 0.5s;

只适用于webkit浏览器，是控制背景透明度。

三、使用jquery让菜单跟随页面滚动

1. $(function(){
2. var menu = $(‘#menu’),
3. pos = menu.offset();
5. $(window).scroll(function(){
6. if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass(‘default’)){
7. menu.fadeOut(‘fast’, function(){
8. $(this).removeClass(‘default’).addClass(‘fixed’).fadeIn(‘fast’);
9. });
10. } else if($(this).scrollTop() <= pos.top && menu.hasClass(‘fixed’)){
11. menu.fadeOut(‘fast’, function(){
12. $(this).removeClass(‘fixed’).addClass(‘default’).fadeIn(‘fast’);
13. });
14. }
15. });
16. })

关键代码说明：

1. pos = menu.offset();

offset()获取菜单在当前页面的位置，返回的是一个object:{top:”XXpx”,left:”XXpx”}。

1. $(window).scroll(function(){
2. ……..
3. });

监听窗体的滚动事件。

1. $(this).scrollTop()

scrollTop()将得到滚动条的滚动距离，非常重要的一个值。

1. $(this).scrollTop() > pos.top+menu.height() && menu.hasClass(‘default’)

根据滚动距离，确定菜单是否还可见，不可见，则改变菜单的定位方式.

1. menu.fadeOut(‘fast’, function(){
2. $(this).removeClass(‘default’).addClass(‘fixed’).fadeIn(‘fast’);
3. });

给菜单加入了fixed样式：

1. .fixed {
2. position: fixed;
3. top: -5px;
4. left: 0;
5. width: 100%;
7. box-shadow: 0 0 40px #222;
8. -webkit-box-shadow: 0 0 40px #222;
9. -moz-box-shadow: 0 0 40px #222;
10. }

有二个关键的点：

• position: fixed;将其定位方式改变成固定定位
• box-shadow ：加入阴影

完毕！有问题可以给明河留言谢谢！

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 用jQuery和CSS构建下拉菜单
• 一个基于JQuery 和CSS3的滑动菜单
• 解密CSS Sprites：技巧、工具和教程
• 简单的JQuery聚光灯效果教程
• 制作jquery文字提示插件
• 八种布局方案改善你的设计
• jQuery + CSS3 实现图片圆角
• 40+ Web前端开发必备的备忘单[上]
• 10个令人惊异的创建按钮的CSS3教程、方法
• 10个为Web设计师准备的jQuery教程

Feed enhanced by Better Feed from Ozh

jQuery Slider Tutorials:

A Beautiful Apple-Style Slideshow Gallery with CSS & jQuery

Automatic Image Slider with CSS & jQuery

Animate Panning Slideshow with jQuery

Creating a Slick Auto-Playing Featured Content Slider

How to Make a Threadless Style T-Shirt Gallery

Automatic Infinite Carousel

How to Create a Simple iTunes-Like Slider

A Bulletproof Content Viewer

Making a Content Slider with jQuery UI

Create Featured Content Slider Using jQuery UI

Using the Wonderful jFlow Plugin

Build a Content Slider with jQuery

Create a Resizable Image Grid with jQuery

jQuery Slider Plugins:

Moving Boxes

loopedSlider

Nivo Slider

AnythingSlider

ImageSwitch

CrossSlide

jQuery Cycle Plugin

s3Slider

Pirobox

Zoomimage

jQuery Panel Gallery

ColorBox

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 用jQuery和CSS构建下拉菜单
• 50个表单功能，验证，安全和自定义化的jQuery插件
• 30个最好的jQuery表单插件
• 转换设计原图 PSD 为 HTML
• 深色调社交图标：免费且高质量的社交媒体图标集
• 如何正确购买一个已经存在的域名(SEO友好)
• 如何备份所有的浏览器 – 5 个小贴士(Google Chrome, Firefox, Safari, Internet Explorer, and Opera)
• 基本指南 – CSS处理大背景图片
• 分析：一个PHP程序员的价值
• 关于浮动的所有实现

Feed enhanced by Better Feed from Ozh

最为人所熟悉的jquery表格增强插件，Flexigrid的风格接近ext的grid组件，虽然功能上有所不如，但已经够用了。

关于Flexigrid，明河曾经发过一篇文章，想要详细了 解的请点击：flexigrid教 程（一）-jquery最好的grid插件。

2、DataTables

DataTables功能上很接近Flexigrid，比Flexigrid好的一点在于其UI的可定制性强，使用的jquery UI的界面。

这二个插件的确很全面，但比较臃肿，很多时候我们并不需要这么多的功能，接下来介绍应用于特定方面的表格增强插件。

简单增强型

1、Ingrid

2、jQuery Grid Plugin

表格排序增强型

1、Tablesorter

这个插件颇有名气，用的人不少，让表格支持排序。

与之类似的还有下面这款插件

2、TableSort

明河更喜欢这一款的样式，功能上不输于Tablesorter。

树形表格增强型

以上的表格插件，都没办法产生树形的表格，接下来推荐二款这方面功能的表格插件

1、jQueryTreeTable

可即时编辑型

1、TableEditor

2、Zentable

可拆合型

1、Expand table rows with jQuery – jExpand plugin

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 简单的JQuery聚光灯效果教程
• 用jQuery和CSS构建下拉菜单
• 推荐9个jquery手风琴菜单插件
• 推荐8个独特应用的JQuery拖放插件
• 实用jquery代码片段集合[下]
• 实用jquery代码片段集合[上]
• 如何为您的博客图片添加水印效果？
• 基于jQuery的新闻图片
• 制作jquery文字提示插件
• 初探 jQuery 的 Sizzle 选择器

Feed enhanced by Better Feed from Ozh

1、Pikachoose – lightweight Jquery Image Gallery plugin

效果还算不错，当然跟以前推荐的几个画廊插件还是有一些差距。
推荐指数：

2、 Sliding Boxes and Captions with jQuery

此画廊有意思的地方在于图片滑动效果（貌似IE下无效，原因不明）。
推荐指数：

3、 Creating a polaroid photo viewer with CSS3 and jQuery

这个效果非常不错，图片乱序叠加，还可以拖拉图片
推荐指数：

4、E2 Photo Gallery

这个插件很牛！独有的视图切换模式，完备的API，与各后台脚本交互的demo…..问题是它是收费的-_-!
推荐指数：

5、ImageFlow 0.9

非常牛的图片画廊！明河强烈推荐！

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 简单的JQuery聚光灯效果教程
• 用jQuery和CSS构建下拉菜单
• 推荐9个jquery手风琴菜单插件
• 推荐8个独特应用的JQuery拖放插件
• 实用jquery代码片段集合[下]
• 实用jquery代码片段集合[上]
• 如何为您的博客图片添加水印效果？
• 基于jQuery的新闻图片
• 制作jquery文字提示插件
• 初探 jQuery 的 Sizzle 选择器

Feed enhanced by Better Feed from Ozh

1.xml文件:menu.xml

<?xml version=”1.0″ encoding=”gb2312″?>
<menus>
<menu>
<id>1</id>
<name>system</name>
<parentId>0</parentId>
<target>mainFrame</target>
<url></url>
</menu>
<menu>
<id>2</id>
<name>company</name>
<parentId>1</parentId>
<target>mainFrame</target>
<url></url>
</menu>

</menus>

2.自定义js文件解析xml文件:index.js

$(document).ready(function(){
$.ajax({
url:”xml/menu.xml ”,
type:”POST”,
dataType:”xml”,
success:function(data){
$(data).find(“menu”).each(function(){

alert(“success”);
alert($(this).text());
});
},
error:function(data){
alert(“fail:”);
}
});
});

3.新建index.html文件引入jQuery.js、xml文件及index.js文件，在ie中（任何版本）运行index.html，结 果总是弹出“fail”，但是在Firefox中的结果却是“success”。

在网上搜了很多资料，最后在这篇文章http://www.newmediafun.com/2009/07/parsing-xml-with-jquery-in-internet-explorer/上 找到了解决方案。是因为ie中的限制无法正确解析xml文件，它解析出 的是一个text对象(在我引用的文章中有更详细的解释)所以针对这个加入判断就可以解决了

正确代码index.js

$(document).ready(function(){
$.ajax({
url:”xml/menu.xml”,
type:”POST”,
dataType:($.browser.msie) ? “text” : “xml”,
success:function(data){
var xml;
if( typeof data == “string” ){
xml = new ActiveXObject(“Microsoft.XMLDOM”);
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
}
$(xml).find(“menu”).each(function(){

alert(“success”);
alert($(this).text());
});
},
error:function(data){
alert(“fail:”);
}
});
});

作者: Flighting_Chou

© 我想网 Akon 所有 , 2010. | 永久链接 | 没有评论 | 提交到 Google Reader 鲜果 抓虾

您可能会感兴趣的其他文章

• 40+ Web前端开发必备的备忘单[上]
• 让IE8兼容IE7
• 解决IE6背景图片不缓存的BUG
• 简单的JQuery聚光灯效果教程
• 用jQuery和CSS构建下拉菜单
• 用 PHP 读取和编写 XML DOM
• 浏览器中样式的高度自适应
• 推荐9个jquery手风琴菜单插件
• 推荐8个独特应用的JQuery拖放插件
• 打败 IE 的葵花宝典：CSS Bug Table

Feed enhanced by Better Feed from Ozh