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

/**
* 检查输入的一串字符是否全部是数字
* 输入:str 字符 串
* 返回:true 或 flase; true表示为数字
*/
function checkNum(str){
return str.match(/\D/) == null;
}

/**
* 检查输入的一串字符是否为小数
* 输入:str 字符串
* 返 回:true 或 flase; true表示为小数
*/
function checkDecimal(str){
if (str.match(/^-?\d+(\.\d+)?$/g) == null) {
return false;
}
else {
return true;
}
}

/**
* 检查输入的一串字符是否为整型数据
* 输入:str 字 符串
* 返回:true 或 flase; true表示为小数
*/
function checkInteger(str){
if (str.match(/^[-+]?\d*$/) == null) {
return false;
}
else {
return true;
}
}

/**************************************************************************************/
/*************************************字符的验 证*****************************************/
/**************************************************************************************/

/**
* 检查输入的一串字符是否是字符
* 输入:str 字符串
* 返 回:true 或 flase; true表示为全部为字符 不包含汉字
*/
function checkStr(str){
if (/[^\x00-\xff]/g.test(str)) {
return false;
}
else {
return true;
}
}

/**
* 检查输入的一串字符是否包含汉字
* 输入:str 字符串
* 返 回:true 或 flase; true表示包含汉字
*/
function checkChinese(str){
if (escape(str).indexOf(“%u”) != -1) {
return true;
}
else {
return false;
}
}

/**
* 检查输入的邮箱格式是否正确
* 输入:str 字符串
* 返 回:true 或 flase; true表示格式正确
*/
function checkEmail(str){
if (str.match(/[A-Za-z0-9_-]+[@](\S*)(net|com|cn|org|cc|tv|[0-9]{1,3})(\S*)/g) == null) {
return false;
}
else {
return true;
}
}

/**
* 检查输入的手机号码格式是否 正确
* 输入:str 字符串
* 返回:true 或 flase; true表示格式正确
*/
function checkMobilePhone(str){
if (str.match(/^(?:13\d|15[89])-?\d{5}(\d{3}|\*{3})$/) == null) {
return false;
}
else {
return true;
}
}

/**
* 检查输入的固定电话号码是否 正确
* 输入:str 字符串
* 返回:true 或 flase; true表示格式正确
*/
function checkTelephone(str){
if (str.match(/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/) == null) {
return false;
}
else {
return true;
}
}

/**
* 检查QQ的格式是否正确
* 输入:str 字符串
* 返 回:true 或 flase; true表示格式正确
*/
function checkQQ(str){
if (str.match(/^\d{5,10}$/) == null) {
return false;
}
else {
return true;
}
}

/**
* 检查输入的身份证号是否正确
* 输入:str 字符串
* 返 回:true 或 flase; true表示格式正确
*/
function checkCard(str){
//15位数身份证正则表达式
var arg1 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
//18位数身份证正则表达式
var arg2 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/;
if (str.match(arg1) == null && str.match(arg2) == null) {
return false;
}
else {
return true;
}
}

/**
* 检查输入的IP地址是否正确
* 输入:str 字符串
* 返 回:true 或 flase; true表示格式正确
*/
function checkIP(str){
var arg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
if (str.match(arg) == null) {
return false;
}
else {
return true;
}
}

/**
* 检查输入的URL地址是否正确
* 输入:str 字符串
* 返 回:true 或 flase; true表示格式正确
*/
function checkURL(str){
if (str.match(/(http[s]?|ftp):\/\/[^\/\.]+?\..+\w$/i) == null) {
return false
}
else {
return true;
}
}

/**
* 检查输入的字符是否具有特殊字符
* 输入:str 字符串
* 返 回:true 或 flase; true表示包含特殊字符
* 主要用于注册信息的时候验证
*/
function checkQuote(str){
var items = new Array(“~”, “`”, “!”, “@”, “#”, “$”, “%”, “^”, “&”, “*”, “{“, “}”, “[", "]“, “(“, “)”);
items.push(“:”, “;”, “‘”, “|”, “\\”, “<”, “>”, “?”, “/”, “<<”, “>>”, “||”, “//”);
items.push(“admin”, “administrators”, “administrator”, “管 理员”, “系统管理员”);
items.push(“select”, “delete”, “update”, “insert”, “create”, “drop”, “alter”, “trancate”);
str = str.toLowerCase();
for (var i = 0; i < items.length; i++) {
if (str.indexOf(items[i]) >= 0) {
return true;
}
}
return false;
}

/**************************************************************************************/
/*************************************时间的验 证*****************************************/
/**************************************************************************************/

/**
* 检查日期格式是否正确
* 输入:str 字符串
* 返 回:true 或 flase; true表示格式正确
* 注意：此处不能验证中文日期格式
* 验证短日期（2007-06-05）
*/
function checkDate(str){
//var value=str.match(/((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(11|0?[469])(-)(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(0?2)(-)(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)(-)(0?2)(-)(29)$)|(^([3579][26]00)(-)(0?2)(-)(29)$)|(^([1][89][0][48])(-)(0?2)(-)(29)$)|(^([2-9][0-9][0][48])(-)(0?2)(-)(29)$)|(^([1][89][2468][048])(-)(0?2)(-)(29)$)|(^([2-9][0-9][2468][048])(-)(0?2)(-)(29)$)|(^([1][89][13579][26])(-)(0?2)(-)(29)$)|(^([2-9][0-9][13579][26])(-)(0?2)(-)(29)$))/);
var value = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
if (value == null) {
return false;
}
else {
var date = new Date(value[1], value[3] – 1, value[4]);
return (date.getFullYear() == value[1] && (date.getMonth() + 1) == value[3] && date.getDate() == value[4]);
}
}

/**
* 检查时间格式是否正确
* 输入:str 字符串
* 返回:true 或 flase; true表示 格式正确
* 验证时间(10:57:10)
*/
function checkTime(str){
var value = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/)
if (value == null) {
return false;
}
else {
if (value[1] > 24 || value[3] > 60 || value[4] > 60) {
return false
}
else {
return true;
}
}
}

/**
* 检查全日期时间格式是否正确
* 输入:str 字符串
* 返 回:true 或 flase; true表示格式正确
* (2007-06-05 10:57:10)
*/
function checkFullTime(str){
//var value = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/);
var value = str.match(/^(?:19|20)[0-9][0-9]-(?:(?:0[1-9])|(?:1[0-2]))-(?:(?:[0-2][1-9])|(?:[1-3][0-1])) (?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]:[0-5][0-9]$/);
if (value == null) {
return false;
}
else {
//var date = new Date(checkFullTime[1], checkFullTime[3] – 1, checkFullTime[4], checkFullTime[5], checkFullTime[6], checkFullTime[7]);
//return (date.getFullYear() == value[1] && (date.getMonth() + 1) == value[3] && date.getDate() == value[4] && date.getHours() == value[5] && date.getMinutes() == value[6] && date.getSeconds() == value[7]);
return true;
}

}

/**************************************************************************************/
/************************************身份证号码的 验证*************************************/
/**************************************************************************************/

/**
* 身份证15位编码规则：dddddd yymmdd xx p
* dddddd： 地区码
* yymmdd: 出生年月日
* xx: 顺序类编码，无法确定
* p: 性别，奇数为男，偶数为女
* <p />
* 身 份证18位编码规则：dddddd yyyymmdd xxx y
* dddddd：地区码
* yyyymmdd: 出生年月日
* xxx: 顺序类编码，无法确定，奇数为男，偶数为女
* y: 校验码，该位数值可通过前17位计算获得
* <p />
* 18 位号码加权因子为(从右到 左) Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2,1 ]
* 验 证位 Y = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ]
* 校验位计算公 式：Y_P = mod( ∑(Ai×Wi),11 )
* i为身份证号码从右往左数的 2…18 位; Y_P为脚丫校验码所在校验码数 组位置
*
*/
var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1];// 加权因子
var ValideCode = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2];// 身份证验证位值.10代表X
function IdCardValidate(idCard){
idCard = trim(idCard.replace(/ /g, “”));
if (idCard.length == 15) {
return isValidityBrithBy15IdCard(idCard);
}
else
if (idCard.length == 18) {
var a_idCard = idCard.split(“”);// 得到身份证数组
if (isValidityBrithBy18IdCard(idCard) && isTrueValidateCodeBy18IdCard(a_idCard)) {
return true;
}
else {
return false;
}
}
else {
return false;
}
}

/**
* 判断身份证号码为18位时最后的验证位是否正确
* @param a_idCard 身份证号码数组
* @return
*/
function isTrueValidateCodeBy18IdCard(a_idCard){
var sum = 0; // 声明加权求和变量
if (a_idCard[17].toLowerCase() == ‘x’) {
a_idCard[17] = 10;// 将最后位为x的验证码替换为10方便后续操作
}
for (var i = 0; i < 17; i++) {
sum += Wi[i] * a_idCard[i];// 加权求和
}
valCodePosition = sum % 11;// 得到验证码所位置
if (a_idCard[17] == ValideCode[valCodePosition]) {
return true;
}
else {
return false;
}
}

/**
* 通过身份证判断是男是女
* @param idCard 15/18位身份证号码
* @return ‘female’- 女、’male’-男
*/
function maleOrFemalByIdCard(idCard){
idCard = trim(idCard.replace(/ /g, “”));// 对身份证号码做处理。包括字符间有空格。
if (idCard.length == 15) {
if (idCard.substring(14, 15) % 2 == 0) {
return ‘female’;
}
else {
return ‘male’;
}
}
else
if (idCard.length == 18) {
if (idCard.substring(14, 17) % 2 == 0) {
return ‘female’;
}
else {
return ‘male’;
}
}
else {
return null;
}
}

/**
* 验证18位数身份证号码中的生日是否是有效生日
* @param idCard 18位书身份证字符串
* @return
*/
function isValidityBrithBy18IdCard(idCard18){
var year = idCard18.substring(6, 10);
var month = idCard18.substring(10, 12);
var day = idCard18.substring(12, 14);
var temp_date = new Date(year, parseFloat(month) – 1, parseFloat(day));
// 这里用getFullYear()获取年份，避免千年虫问题
if (temp_date.getFullYear() != parseFloat(year) ||
temp_date.getMonth() != parseFloat(month) – 1 ||
temp_date.getDate() != parseFloat(day)) {
return false;
}
else {
return true;
}
}

/**
* 验证15位数身份证号码中的生日是否是有效生日
* @param idCard15 15位书身份证字符串
* @return
*/
function isValidityBrithBy15IdCard(idCard15){
var year = idCard15.substring(6, 8);
var month = idCard15.substring(8, 10);
var day = idCard15.substring(10, 12);
var temp_date = new Date(year, parseFloat(month) – 1, parseFloat(day));
// 对于老身份证中的你年龄则不需考虑千年虫问题而使用getYear()方法
if (temp_date.getYear() != parseFloat(year) ||
temp_date.getMonth() != parseFloat(month) – 1 ||
temp_date.getDate() != parseFloat(day)) {
return false;
}
else {
return true;
}
}

//去掉字符串头尾空格
function trim(str){
return str.replace(/(^\s*)|(\s*$)/g, “”);
}

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

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

• 页面输出时一些常用的小技巧
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页打开新窗口的解决方案,拒绝屏蔽
• 相见恨晚的一些 JavaScript 技巧
• 用JS制作的网页版NES模拟器 IE8直接出局
• 用css+js控制图片大小的方法
• 有关 JavaScript 的 10 件让人费解的事情
• 新 API 寻求让 JavaScript 操作本地文件
• 并发下载javascript
• 如何用 JavaScript 检测 IE8 浏览器的文档版本

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

1.web端代理的方式，即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，由该页 面代替用户页面完成交互，从而返回合适的结果。

2.iframe，解决方案就是用window.location对象的hash属性，利用JS改变hash值 网页不会刷新，可以这样实现通过JS访问hash值来做到通信，大体就是AB网站各嵌入一个对方网站的iframe，然后通过连续不断的监听hash值的 变化来进行通信。比如A网站通过改变B网站iframe的hash后，B网站监听到hash的变化后就进行处理，这种方式需要开发者可以控制两个网站的代 码。

3.通过script标签来请求，原理就是在本域内的A内生成一个JS标签，它的SRC指向请求的另外一个域的 某个页面B，这个src里面通常会加一个A页面定义好的回调函数，B返回数据即可，可以直接返回调用这个回调函数，这种跨域的通信方式被称为JSONP， 此方案存在的缺陷是， script的src属性完成该调用时采取的方式时get方式，如果请求时传递的字符串过大时，可能会无法正常运行。

4.window.name，window.name是一种解决跨域数据传输的新技术，通过在iframe中加 载一个跨域的HTML文件，并且在HTML文件中设置window.name的值为需要传给接受者的数据，接收者就可以取得到window.name的值 并且返回，比较关键的是同源策略的影响对location的控制不受限制，所以需要加载一个代理的页面来让发送页面读取window.name.

5.使用flash，原理是JavaScript将数据提交给本域下的 Flash，通过 Flash 中转去访问其他域的接口，只需要其他域的根目录下有一个crossdomain.xml文件，文件中设置允许所有域名或允许本域访问即可。

了解更多，请看：

http://www.phpchina.com/html/48/n-33848.html

http://www.sitepen.com/blog/2008/07/22/windowname-transport/

http://www.planabc.net/2008/09/01/window_name_transport/

http://hikejun.com/demo/windowname/demo_windowname.html

http://blog.s135.com/ajaxcdr/

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

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

• 使用框架建立富联网应用
• XmlHttpRequest的串行异步
• 10个关于Ajax的IT人需要知道的事情
• 10个Google 推动的 AJAX 库 API
• 页面输出时一些常用的小技巧
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页打开新窗口的解决方案,拒绝屏蔽
• 简单的Ajax实例
• 相见恨晚的一些 JavaScript 技巧
• 用JS制作的网页版NES模拟器 IE8直接出局

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

‘newwindow’ 弹出窗口的名字（不是文件名），非必须，可用空”代替；

height=100 窗口高度；

width=400 窗口宽度；

top=0 窗口距离屏幕上方的象素值；

left=0 窗口距离屏幕左侧的象素值；

toolbar=no 是否显示工具栏，yes为显示；

menubar，scrollbars 表示菜单栏和滚动栏。

resizable=no 是否允许改变窗口大小，yes为允许；

location=no 是否显示地址栏，yes为允许；

status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

用这个方法在浏览器中，基本都会被屏蔽，大家可以通过

var val = window.open(url),返回值来判断

if(!val){

这里表示被屏蔽了，没有成功，。大家可以在这里加个相对应的业务代码。我当时如果处理是如果屏蔽了，

用document.location.href=url内部跳转。

}

2、以上方法最基本的问题没有解决，就是屏蔽。所以告诉大家一个最完美window.open()不会

屏蔽的，道理很简单，就是建一个form.然后提交form，因为form可以在新窗口提高

给大家看看代码吧。

在你的页面里<form action=”" method=”get” target=”_blank” id=”tzForm” name=”tzForm”/>

<div id=”J_formStr”></div>

</form>

然后js

function openUrl(urlStr){

var pStr=”";

if(urlStr.indexOf(“?”)!= -1){

var str = urlStr.substr(urlStr.indexOf(“?”)+1,urlStr.length);

strs = str.split(“&”);

for(var i = 0; i < strs.length; i ++){

pStr=pStr+”<input type=’hidden’ name=’”+strs[i].split(“=”)[0]+”‘ value=’”+strs[i].split(“=”)[1]+”‘ />”;

}

}

document.getElementById(“J_formStr”).innerHTML=pStr;

document.tzForm.action=urlStr;

document.tzForm.submit();

}

大家可能会问，为什么还要这多代码。不就是一个提交表单。给大家说说原因吧

(1) 为什么用get，而不用post,在新窗口页面如果用post然后刷新。会有一个提交数据的对话框，所以才用get

(2)用get提交有个很关键的问题，如果你的url提交地址中有相对应的参数，打个比方，***.jsp?a=1&b=2在新窗口中

?a=1&b=2参数丢失掉。所以在上面有个pStr这个就是解析url中的参数，然后动态创建的表单元素，这样参数就不会

丢失。

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

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

• 页面输出时一些常用的小技巧
• 表单元素：40个CSS/JS风格和功能技术处理
• 相见恨晚的一些 JavaScript 技巧
• 用JS制作的网页版NES模拟器 IE8直接出局
• 用css+js控制图片大小的方法
• 有关 JavaScript 的 10 件让人费解的事情
• 新 API 寻求让 JavaScript 操作本地文件
• 并发下载javascript
• 常用JS验证函数总结
• 如何用 JavaScript 检测 IE8 浏览器的文档版本

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

运行缓慢的代码：

1
2
3
4

function addMethod(object, property, code) {
	object[property] = new Function(code);
}
addMethod(myObj, 'methodName', 'this.localVar=foo');

运行更快的代码：

1
2
3
4

function addMethod(object, property, func) {
	object[property] = func;
}
addMethod(myObj, 'methodName', function () { 'this.localVar=foo'; });

2.避免使用with
尽管很方便，with需要附加的查找引用时间，因为它在编译的时候并不知道作用域的上下没。

运行缓慢的代码：

1
2
3
4

with (test.object) {
	foo = 'Value of foo property of object';
	bar = 'Value of bar property of object';
}

运行更快的代码：

1
2
3

var myObj = test.object;
myObj.foo = 'Value of foo property of object';
myObj.bar = 'Value of bar property of object';

3.不要在性能要求关键的函数中使用try-catch-finally
try-catch-finally在运行时每次都会在当前作用域创建一个新的变量，用于分配语句执行的异常。
异常处理应该在脚本的高层完成，在异常不是很频繁发生的地方，比如一个循环体的外面。
如果可能，尽量完全避免使用try-catch-finally。

运行缓慢的代码：

1
2
3
4
5
6
7
8

var object = ['foo', 'bar'], i;
for (i = 0; i < object.length; i++) {
	try {
		// do something that throws an exception
	} catch (e) {
		// handle exception
	}
}

运行更快的代码：

1
2
3
4
5
6
7
8

var object = ['foo', 'bar'], i;
try {
	for (i = 0; i < object.length; i++) {
		// do something
	}
} catch (e) {
	// handle exception
}

4.避免使用全局变量
如果你在一个函数或者其它作用域中使用全局变量，脚本引擎需要遍历整个作用域去查找他们。
全局作用域中的变量在脚本的生命周期里都存在，然后局部范围的会在局部范围失去的时候被销毁。

运行缓慢的代码：

1
2
3
4
5
6
7
8

var i,
str = '';
function globalScope() {
	for (i=0; i < 100; i++) {
		str += i; // here we reference i and str in global scope which is slow
	}
}
globalScope();

运行更快的代码：

1
2
3
4
5
6
7
8

function localScope() {
	var i,
	str = '';
	for (i=0; i < 100; i++) {
		str += i; // i and str in local scope which is faster
	}
}
localScope();

5.避免在性能要求关键的函数中使用for-in
for-in循环需要脚本引擎建立一张所有可枚举属性的列表，并检查是否与先前的重复。
如果你的for循环作用域中的代码没有修改数组，可以预先计算好数组的长度用于在for循环中迭代数组。

运行缓慢的代码：

1
2
3
4

var sum = 0;
for (var i in arr) {
	sum += arr[i];
}

运行更快的代码：

1
2
3
4

var sum = 0;
for (var i = 0, len = arr.length; i < len; i++) {
	sum += arr[i];
}

6.使用字符串累加计算风格
使用+运算会在内存中创建一个新的字符串并把连接的值赋给它。仅仅是将这个结果赋值给一个变量。
为了避免连接结果的中间变量，可以使用+=来直接赋值结果。

运行缓慢的代码：

a += 'x' + 'y';

运行更快的代码：

a += 'x'; a += 'y';

7.原操作会比函数调用快
可以考虑在性能要求关键的循环和函数中使用可以替代的原操作。
运行缓慢的代码：

1
2

var min = Math.min(a, b);
arr.push(val);

运行更快的代码：

1
2

var min = a < b ? a : b;
arr[arr.length] = val;

8.设置setTimeout() 和 setInterval() 时传递函数名而不是字符串
如果你传递一个字符串到setTimeout() 或者 setInterval()中，字符串将会被eval计算而导致缓慢。
使用一个匿名函数包装来代替，这样在编译的时候就可以被解释和优化。

运行缓慢的代码：

1
2

setInterval('doSomethingPeriodically()', 1000);
setTimeOut('doSomethingAfterFiveSeconds()', 5000);

运行更快的代码：

1
2

setInterval(doSomethingPeriodically, 1000);
setTimeOut(doSomethingAfterFiveSeconds, 5000);

9.避免在对象中使用不需要的DOM引用

不要这么做：

1
2
3

var car = new Object();
car.color = "red";
car.type = "sedan"

更好的一种形式：

1
2
3
4

var car = {
	color : "red";
	type : "sedan"
}

10.最清晰的目标速度，最小化作用域链

低效率方法：

var url = location.href;

一种高效形式：

var url = window.location.href;

11.试着在脚本中少使用注释，避免使用长变量名
尽可能的保证注释少或者避免使用注释，特别是在函数，循环以及数组中。
注释不必要的减缓脚本执行并且增加了文件大小。比如：

不建议的形式：

1
2
3
4

function someFunction()
{
	var person_full_name="somename"; /* stores the full name*/
}

更好的写法：

1
2
3
4

function someFunction()
{
	var name="somename";
}

12.在当前作用域存储应用的外部变量
当一个函数被执行的运行上下问被穿件，一个活动的对象会包含所有局部变量会被推到上下文链的前面。
在作用域链中，最慢的是清楚的识别标识符，意味着局部变量是最快的。存储频繁使用的外部变量读和写都会明显的加快。这对于全局变量和其他深层次的标识符查 找特别明显。
同样，在当前作用域中的变量(var myVar)比对象像属性的访问速度快(this.myVar)。

运行缓慢的代码：

1
2
3
4
5
6
7

function doSomething(text) {
	var divs = document.getElementsByTagName('div'),
		text = ['foo', /* ... n ... */, 'bar'];
	for (var i = 0, l = divs.length; i < l; i++) {
		divs[i].innerHTML = text[i];
	}
}

运行更快的代码：

1
2
3
4
5
6
7
8

function doSomethingFaster(text) {
	var doc = document,
		divs = doc.getElementsByTagName('div'),
		text = ['foo', /* ... n ... */, 'bar'];
	for (var i = 0, l = divs.length; i < l; i++) {
		divs[i].innerHTML = text[i];
	}
}

如果你需要访问一个元素（如 head）在一个大的循环中，使用一个本地的DOM访问(如例子中的get)会更快。
运行更快的代码：

1
2
3
4
5
6

function doSomethingElseFaster() {
	var get = document.getElementsByTagName;
	for (var i = 0, i < 100000; i++) {
		get('head');
	}
}

13.使用变量缓存值
在做重复工作的地方使用局部变量缓存值。
下面的一组例子表明了存储值到局部变量的广泛意义。

例子1.计算执行前在循环体内使用变量存储数学函数
错误的方法：

1
2
3
4

var d=35;
for (var i=0; i<1000; i++) {
	y += Math.sin(d)*10;
}

更好的处理：

1
2
3
4
5

var d = 55;
var math_sind = Math.sin(d)*10;
for (var i=0; i<1000; i++) {
	y += math_sind;
}

例子2.保存数组的长度在循环中使用
糟糕的处理:
数组的长度每次都会被重复计算

1
2
3

for (var i = 0; i < arr.length; i++) {
	// do something
}

更好的改进：
更好的方法是保存数组的长度

1
2
3

for (var i = 0, len = arr.length; i < len; i++) {
	// do something
}

总的来说，如果已经做了一次，我们就不需要重复的做不必要的工作。例如，作用域或者函数中多次使用到计算的一个表达式的值，保存到变量可以使它多次 被使用，否则我们会过头的声明一个变量并赋值然后只适用一次。所以请记住这些。

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

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

• 页面输出时一些常用的小技巧
• 表单元素：40个CSS/JS风格和功能技术处理
• 网页打开新窗口的解决方案,拒绝屏蔽
• 相见恨晚的一些 JavaScript 技巧
• 用JS制作的网页版NES模拟器 IE8直接出局
• 用css+js控制图片大小的方法
• 有关 JavaScript 的 10 件让人费解的事情
• 新 API 寻求让 JavaScript 操作本地文件
• 并发下载javascript
• 常用JS验证函数总结

Feed enhanced by Better Feed from Ozh