Bolo的博客 » jQuery

jQuery选择器详解（一）

bolo — Sun, 18 Jul 2010 01:57:18 +0000

jQuery 的选择器借鉴了大量 CSS1 ~ CSS3 标准的特点，并且整理成一个强大的对象选择工具集。但要注意的是如果你的对象名里包含 “#;&,.+*~’:”!^$[]()=>|/” 这些元字符时，你必须用 “\\” 进行转义。例如你要选择文档里包含 “name=”names[]“” 的 input 元素时，在编写过滤规则时你必须先对 “[]” 进行转义，所以我们应该这样定义选择器：“$(“input[name=names\\[\\]]”)”。

泛选择器（*）

在 jQuery 选择器里，“*” 号是一个通配符，表示所有。例如：

1	$("*").css("border","3px solid red")

上面的一句表示遍历页面里的所有容器，并且全部赋予一个线宽为 3px 的红色实线边框。还有一种情况是我们只需要对某些容器里的内容进行操作，我们可以这样写：

1	$("#test").find("*").css("border","3px solid red")

上一句只对 ID 为 test 的容器里的子容器产生效果，为它们加上线宽为 3px 的红色实现边框。

:animated 选择器

:animated 选择器是用来选择当前执行 jQuery 动画的元素的，严格来说是一个特征过滤器。例如：在空 HTML 文档里建一些 Div ，其中一个 ID 为 mover ，然后编写以下的 jQuery 语句

1 2	$("#mover").slideToggle("slow", animateIt); $("div:animated").toggleClass("colored");

上面的代码执行后将先找到 ID 为 mover 的元素，并不断地进行展开和收缩的动画。然后浏览器遍历页面里所有的 Div 标签，如果该 Div （在这个例子里也就是 ID 为 mover 的 Div 了）正在执行动画的话，jQuery 将为这个 Div 加上 class=”colored”。具体的 Demo 可以看这个页面。

属性选择器

jQuery 的属性选择器是其所有选择器最强大的一个，也是最灵活复杂的，具体情况还可以继续进行细分。

属性字头选择器（Attribute Contains Prefix Selector）

jQuery 属性字头选择器的使用格式是 jQuery(‘[attribute|=value]‘) ，例如 jQuery(‘[herflang|=en]‘) 这句代码执行时将会选择文档中所有含有 herflang 属性，并且 herflang 的值以 “en” 开头的元素，即使 “en” 后面紧跟着连字符 “-” 也能进行选择。

属性开头选择器（Attribute Starts With Selector）

jQuery(‘[attribute^=value]‘) ，用于选择属性的值以某个字符串开头的元素，但和 jQuery(‘[attribute|=value]‘) 的区别是，如果 value 的后面是一个连字符的话，这个元素不会被选择。例如 jQuery(‘[rel^=no]‘) 将会选择所有 rel 的值以 “no” 开头的元素，但类似于 rel=”no-****” 的元素不会被选择。

属性包含选择器（Attribute Contains Selector）

基本使用方法为 jQuery(‘[attribute*=value]‘)，例如 jQuery(‘[rel*=no]‘)，表示所有带有 rel 属性，并且 rel 的值里包含子字符串 “no” 的元素（如 rel=”nofollow”，rel=”yesorno” 等等）都将会被选择。

属性单词选择器（Attribute Contains Word Selector）

jQuery(‘[attribute~=value]‘)，这个选择器的特别之处在于 value 的值只能必须是一个独立的单词（或者是字符串），例如 jQuery(‘[rel~=no]‘) ，此句在执行的时候会选择带有 rel=”yes or no” 的元素，但不会选择带有 rel=”yesorno” 的元素。这个选择器可以看做属性包含选择器的补充品，用于需要进行严格匹配的时候。

属性结尾选择器（Attribute Ends With Selector）

jQuery(‘[attribute$=value]‘) ，用于选择特定属性的值以某个字符串结尾的元素，例如 jQuery(‘[rel$=no]‘) 将会选择 rel 属性的值以 “no” 结尾的元素。

属性均等选择器（Attribute Equals Selector）

jQuery(‘[attribute=value]‘) ，只选择属性的值完全相等的元素，如：jQuery(‘[rel=nofollow]‘)，则只选择 rel=”nofollow” 的元素，差一点都不行！

属性非等选择器（Attribute Not Equal Selector）

jQuery(‘[attribute!=value]‘) ，和 :not([attr=value]) 的效果一样，用于选择属性不等于某个值的元素，例如 jQuery(‘[rel!=nofollow]‘)，所有 rel=”nofollow” 的元素都不会被选择。

按钮选择器（:button Selector）

jQuery(‘:button’) ，所有的 <input type=”button”> 和 <button> 元素都会被选择。

Checkbox 选择器（:checkbox Selector）

jQuery(‘:checkbox’) ，所有的 <input type=”checkbox”> 元素都会被选择。

Checked 选择器（:checked Selector）

jQuery(‘:checked’) ，可以看做是 Checkbox 选择器的补充，用于选择所有已经被勾选的 Checkbox 对象。

子元素选择器（Child Selector）

jQuery(‘parent > child’)，只选择 parent 的子元素（下一级元素），不对子元素以下的元素进行选择。

近期忙，少更新。

利用 Yahoo Pipes 和 jQuery 做一个 RSS 挂件

bolo — Tue, 01 Jun 2010 16:54:00 +0000

如果我们希望把一个网站的更新实时发布到令一个网站上，最好的方法是通过 RSS 进行转载。如果只是需要简单的对更新的条目做个提示的话，使用 JavaScript 是最可行的方法。但是通过 JavaScript 解析一个 XML 文档十分麻烦。幸好 Yahoo Pipes 为我们提供了非常好的 RSS to JSON 功能，我们可以先把 RSS 转换成 JSON 再用 JavaScript 进行解析，这样比直接解析 XML 简单得多！

把 RSS 转换成 JSON

首先登录 http://pipes.yahoo.com ，新建一个 Pipe ( Creat a Pipe ) 。然后在左边的工具里选择 Sources > Fetch Feed ，在输入框里输入一个 RSS 地址。再用线把 Fetch Feed 和 Pipe Output 两个框框连起来（如右图），保存这个 Pipe，然后点击顶部的 Run Pipe… 。点击 Publish 发布这个 Pipe ，然后记下 Get as JSON 的 URL。简单几步就已经把一个 RSS 转换成 JSON 了，而且这个 JSON 会根据 RSS 的更新自动更新。

通过 jQuery 解析 JSON

jQuery 本身为我们提供了一个 getJSON() 函数，为我们解析 JSON 提供简单快捷的方法。

由于我希望做一个 AJAX 载入项目的效果，我先做一个 HTML 框架，然后通过 jQuery 的 append 方法把解析出来的内容添加到指定的容器里。HTML框架如下：

Loading RSS items...

然后编写 jQuery 调用：


<script type="text/javascript">
$('#rssdata').ready(function() {
	// JSON 地址 = 刚才记下的 URL + &_callback=?
	var pipe_url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=90caf3b6ba8f36459a3137248b47620e&_render=json&_callback=?';
 
	$.getJSON(pipe_url,function(data) {
		// 遍历 JSON 项目，并且确定输出哪些信息
		$(data.value.items).each(function(index,item) {
			var item_html = '+item.link+'">'+item.title+'
';
			// 把输出的内容插入页面里
			$('#rssdata ul.rss-items').append(item_html);
			});
		// 添加条目载入效果
		$('#rssdata div.loading').fadeOut();
		$('#rssdata ul.rss-items').slideDown();
	});
});
script>

当然要页面美观的话，写一些 CSS 是必要的，这个可以随自己的喜好而定。最终的效果可以看这个 DEMO。

动态调整图片尺寸

bolo — Sun, 22 Nov 2009 10:23:19 +0000

在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。
我前段时间写的一篇文章就遇到过这种事情，后来用CSS的overflow和max-width属性暂时解决了页面变形的问题。这种方法好处是简单，但坏处是会破坏某些细节的效果。
如overflow：hidden，意思是当内部元素宽度大于父框架时隐藏超出宽度的部分。这样做可能会是一些内容突然截断，被隐藏了，很对不起观众。
通过max-width属性限制文章插图最大宽度的话，需要考虑各浏览器的兼容性。IE6是不支持这个属性的，在我印象中，一些浏览器虽然支持这个属性，但图片不是等比缩放的（好像是Safari和Opera，记不清了），这样做的话对这些浏览器的用户很不公平。
因此，我最终选择的是通过JavaScript动态改变图片尺寸。这种方法对各种浏览器兼容性良好（现在应该很少人会禁用JavaScript吧？），如果换主题的话，也可以灵活地改变文章插图的最大尺寸。
方案有两个，由于我使用的主题是加载了jQuery库的，因此可以用以下代码实现：

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

如果不想加载jQuery库，可以用以下代码：

function ResizeImage(image, 插图最大宽度, 插图最大高度)
{
    if (image.className == "Thumbnail")
    {
        w = image.width;
        h = image.height;
 
        if( w == 0 || h == 0 )
        {
            image.width = maxwidth;
            image.height = maxheight;
        }
        else if (w > h)
        {
            if (w > maxwidth) image.width = maxwidth;
        }
        else
        {
            if (h > maxheight) image.height = maxheight;
        }
 
        image.className = "ScaledThumbnail";
    }
}

采用纯JavaScript的话，麻烦点，需要手动为图片加上class=”Thumbnail”，但最终效果是一样的。

jQuery插件：jwTabs

bolo — Thu, 19 Nov 2009 05:48:03 +0000

jwTabs是Jeffrey制作的一个基于jQuery的Tab插件，与比较出名的idTab相比，它具有以下优点：

1. 可以自由选择过渡效果
2. 可以自动切换Tab
3. 插件大小只有1K
4. Has everything you’d actually use…and nothing more.（怎么翻译？）
5. 不需要对代码进行特殊标记

插件的主页是：Introducing jwTabs

例子：

假设你需要对以下代码进行Tab处理：


 	
		1st tab
		 .......
	
 
	
		2nd tab
		......			
	
 
	
		3rd tab
		......			
		......			
		......						
		
 
 	
		4th tab
		......
	
 
 	
		5th tab
		......
	
 
 	
		6th tab
		......

你不需要对HTML再作任何处理，只需要添加以下脚本：

jQuery('#tab-container').jwTabs({
	interval : 6000,//自动切换Tab的时间间隔，单位ms
	startTab : 4,//默认显示的Tab序号
	tabTitleReference : 'h2'//Tab标签的标题
});

DEMO：http://jeffrey-way.s3.amazonaws.com/015_jwTabs/jwTabs/index.html

用jQuery制作页面风格切换开关

bolo — Fri, 14 Aug 2009 12:43:44 +0000

越来越多网站已经通过让访客自己选择页面风格来提高访客体验。这次我们利用jQuery这把锋利的剑来实现这个功能。
首先，在header加入几个风格链接是必须的。

="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
/*记得为候选风格加上rel="alternate"，否则会引起冲突*/
="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />
="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />

接下来在页面里加上开关链接，按下面的格式写

<a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch">styles1</a>
<a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch">styles2</a>
<a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch">styles3</a>

最后进行最关键的一部分，写脚本

(function($)
{
	$(document).ready(function() {
		$('.styleswitch').click(function()
		{
			switchStylestyle(this.getAttribute("rel"));
			return false;
		});
		var c = readCookie('style');
		if (c) switchStylestyle(c);
	});
 
	function switchStylestyle(styleName)
	{
		$('link[@rel*=style][title]').each(function(i) 
		{
			this.disabled = true;
			if (this.getAttribute('title') == styleName) this.disabled = false;
		});
		createCookie('style', styleName, 365);
		//把风格设置记录到cookie，并设置失效时间
	}
})(jQuery);
 
//创建cookie
function createCookie(name,value,days)
{
	if (days)
	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
//读取cookie
function readCookie(name)
{
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++)
	{
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
 
//清除cookie
function eraseCookie(name)
{
	createCookie(name,"",-1);
}

好了，想熟悉的话，自己动手，由于时间关系，我没有做DEMO，请谅解。

原文链接：http://www.kelvinluck.com/2006/05/switch-stylesheets-with-jquery/

使用 jQuery 简化 Ajax 开发

bolo — Sun, 14 Jun 2009 00:16:59 +0000

jQuery 是一个JavaScript 库，它有助于简化 JavaScript™ 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同，jQuery 具有独特的基本原理，可以简洁地表示常见的复杂代码。学习 jQuery 基本原理，探索其特性和功能，执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery。

jQuery 是什么？

jQuery 由 John Resig 创建于 2006 年初，对于任何使用 JavaScript 代码的程序员来说，它是一个非常有用的 JavaScript 库。无论您是刚刚接触 JavaScript 语言，并且希望获得一个能解决文档对象模型（Document Object Model，DOM）脚本和 Ajax 开发中一些复杂问题的库，还是作为一个厌倦了 DOM 脚本和 Ajax 开发中无聊的重复工作的资深 JavaScript 专家，jQuery 都会是您的首选。

jQuery 能帮助您保证代码简洁易读。您再也不必编写大堆重复的循环代码和 DOM 脚本库调用了。使用 jQuery，您可以把握问题的要点，并使用尽可能最少的代码实现您想要的功能。

毫无疑问，jQuery 的原理是独一无二的：它的目的就是保证代码简洁并可重用。当您理解并体会这一原理后，便可以开始学习本教程了，看看 jQuery 对我们的编程方式有多少改进吧。

一些简单的代码简化
下面是一个简单示例，它说明了 jQuery 对代码的影响。要执行一些真正简单和常见的任务，比方说为页面的某一区域中的每个链接附加一个单击（click）事件，您可以使用纯 JavaScript 代码和 DOM 脚本来实现，如清单 1 所示。
清单 1. 没有使用 jQuery 的 DOM 脚本

var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i &lt; links.length;i++) {
    var link = links.item(i);
    link.onclick = function() {
        return confirm('You are going to visit: ' + this.href);
    };
}

清单 2 显示了使用 jQuery 实现的相同的功能。
清单 2. 使用了 jQuery 的 DOM 脚本

$('#external_links a').click(function() {
    return confirm('You are going to visit: ' + this.href);
});

是不是很神奇？使用 jQuery，您可以把握问题的要点，只让代码实现您想要的功能，而省去了一些繁琐的过程。无需对元素进行循环，click() 函数将完成这些操作。同样也不需要进行多个 DOM 脚本调用。您只需要使用一个简短的字符串对所需的元素进行定义即可。

理解这一代码的工作原理可能会有一点复杂。首先，我们使用了 $() 函数 —— jQuery 中功能最强大的函数。通常，我们都是使用这个函数从文档中选择元素。在本例中，一个包含有一些层叠样式表（Cascading Style Sheet，CSS）语法的字符串被传递给函数，然后 jQuery 尽可能高效地把这些元素找出来。

如果您具备 CSS 选择器的基本知识，那么应该很熟悉这些语法。在清单 2 中，#external_links 用于检索 id 为 external_links 的元素。a 后的空格表示 jQuery 需要检索 external_links 元素中的所有<a>元素。用英语说起来非常绕口，甚至在 DOM 脚本中也是这样，但是在 CSS 中这再简单不过了。

$() 函数返回一个含有所有与 CSS 选择器匹配的元素的 jQuery 对象。jQuery 对象类似于数组，但是它附带有大量特殊的 jQuery 函数。比方说，您可以通过调用 click 函数把 click 处理函数指定给 jQuery 对象中的所有元素。

还可以向 $() 函数传递一个元素或者一个元素数组，该函数将把这些元素封装在一个 jQuery 对象中。您可能会想要使用这个功能将 jQuery 函数用于一些对象，比方说 window 对象。例如，我们通常会像下面这样把函数分配给加载事件：

window.onload = function() {
    // do this stuff when the page is done loading
};

使用 jQuery 编写的功能相同的代码：

$(window).load(function() {
    // run this when the whole page has been downloaded
});

您可能有所体会，等待窗口加载的过程是非常缓慢而且令人痛苦的，这是因为必须等整个页面加载完所有的内容，包括页面上所有的的图片。有的时候，您希望首先完成图片加载，但是在大多数情况下，您只需加载超文本标志语言（Hypertext Markup Language，HTML）就可以了。通过在文档中创建特殊的 ready 事件，jQuery 解决了这个问题，方法如下：

$(document).ready(function() {
    // do this stuff when the HTML is all ready
});

这个代码围绕 document 元素创建了一个 jQuery 对象，然后建立一个函数，用于在 HTML DOM 文档就绪的时候调用实例。可以根据需要任意地调用这个函数。并且能够以真正的 jQuery 格式，使用快捷方式调用这个函数。这很简单，只需向 $() 函数传递一个函数就可以了：

$(function() {
    // run this when the HTML is done downloading
});

到目前以止，我已经向大家介绍了 $() 函数的三种用法。第四种方法可以使用字符串来创建元素。结果会产生一个包含该元素的 jQuery 对象。清单 3 显示的示例在页面中添加了一个段落。

清单 3. 创建和附加一个简单的段落

$('
 
')
    .html('Hey World!')
    .css('background', 'yellow')
    .appendTo("body");

在前一个例子中您可能已经注意到，jQuery 中的另一个功能强大的特性就是方法链接（method chaining）。每次对 jQuery 对象调用方法时，方法都会返回相同的 jQuery 对象。这意味着如果您需要对 jQuery 对象调用多个方法，那么您不必重新键入选择器就可以实现这一目的：

$('#message').css('background', 'yellow').html('Hello!').show();

使 Ajax 变得简单
使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。
Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此，只需简单地选择所需的元素，然后使用 load() 函数即可。下面是一个用于更新统计信息的示例：

$('#stats').load('stats.html');

通常，我们只需简单地把一些参数传递给服务器中的某个页面。正如您所预料的，使用 jQuery 实现这一操作非常地简单。您可以使用 $.post() 或者 $.get()，这由所需的方法决定。如果需要的话，您还可以传递一个可选的数据对象和回调函数。清单 4 显示了一个发送数据和使用回调的简单示例。

清单 4. 使用 Ajax 向页面发送数据

$.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});

如果您确实需要编写一些复杂的 Ajax 脚本，那么需要用到 $.ajax() 函数。您可以指定 xml、script、html 或者 json，jQuery 将自动为回调函数准备合适的结果，这样您便可以立即使用该结果。还可以指定 beforeSend、error、success 或者 complete 回调函数，向用户提供更多有关 Ajax 体验的反馈。此外，还有一些其它的参数可供使用，您可以使用它们设置 Ajax 请求的超时，也可以设置页面 “最近一次修改” 的状态。清单 5 显示了一个使用一些我所提到的参数检索 XML 文档的示例。

清单 5. $.ajax() 使 Ajax 由复杂变简单

$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});

当 success 回调函数返回 XML 文档后，您可以使用 jQuery 检索这个 XML 文档，其方式与检索 HTML 文档是一样的。这样使得处理 XML 文档变得相当地容易，并且把内容和数据集成到了您的 Web 站点里面。清单 6 显示了 success 函数的一个扩展，它为 XML 中的每个元素都添加了一个列表项到 Web 页面中。

清单 6. 使用 jQuery 处理 XML 文档

success: function(xml){
    $(xml).find('item').each(function(){
        var item_text = $(this).text();
 
        $('
	
 
')
            .html(item_text)
            .appendTo('ol');
    });
}li>

为 HTML 添加动画

可以使用 jQuery 处理基本的动画和显示效果。animate() 函数是动画代码的核心，它用于更改任何随时间变化的数值型的 CSS 样式值。比方说，您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度，定为毫秒或者预定义的速度：慢速，中速或快速。
下面是一个同时变化某个元素高度和宽度的示例。请注意，这些参数没有开始值，只有最终值。开始值取自元素的当前尺寸。同时我也附加了一个回调函数。

$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
    alert('The element is done growing!');
});

jQuery 的内置函数使更多常见的动画更容易完成。可以使用 show() 和 hide() 元素，立即显示或者以特定的速度显示。还可以通过使用 fadeIn() 和 fadeOut()，或者 slideDown() 和 slideUp() 显示和隐藏元素，这取决于您所需要的显示效果。下面的示例定义了一个下滑的导航菜单。

$('#nav').slideDown('slow');

DOM 脚本和事件处理

或许 jQuery 最擅长的就是简化 DOM 脚本和事件处理。遍历和处理 DOM 非常简单，同时附加、移除和调用事件也十分容易，且不像手动操作那样容易出错。
从本质上说，jQuery 可以使 DOM 脚本中的常用操作变得更加容易。您可以创建元素并且使用 append() 函数把它们与其它的一些元素链接到一起，使用 clone() 复制元素，使用 html() 设置内容，使用 empty() 函数删除内容，使用 remove() 函数删除所有的元素，即便是使用 wrap() 函数，用其他元素将这些元素包装起来。
通过遍历 DOM，一些函数可以用于更改 jQuery 对象本身的内容。可以获得元素所有的 siblings()、parents() 和 children()。还可以选择 next() 和 prev() 兄弟元素。find() 函数或许是功能最强大的函数，它允许使用 jQuery 选择器搜索 jQuery 对象中元素的后代元素。
如果结合使用 end() 函数，那么这些函数将变得更加强大。这个函数的功能类似于 undo 函数，用于返回到调用 find() 或 parents() 函数（或者其它遍历函数）之前的 jQuery 对象。
如果配合方法链接（method chaining）一起使用，这些函数可以使复杂的操作看上去非常简单。清单 7 显示了一个示例，其中包含有一个登录表单并处理了一些与之有关的元素。

清单 7. 轻松地遍历和处理 DOM

$('form#login')
    // hide all the labels inside the form with the 'optional' class
    .find('label.optional').hide().end()
 
    // add a red border to any password fields in the form
    .find('input:password').css('border', '1px solid red').end()
 
    // add a submit handler to the form
    .submit(function(){
        return confirm('Are you sure you want to submit?');
    });

不管您是否相信，这个示例只是一行满是空白的被链接的代码。首先，选择登录表单。然后，发现其中含有可选标签，隐藏它们，并调用 end() 返回表单。然后，我创建了密码字段，将其边界变为红色，再次调用 end() 返回表单。最后，我在表单中添加了一个提交事件处理程序。其中尤为有趣的就是（除了其简洁性以外），jQuery 完全优化了所有的查询操作，确保将所有内容很好地链接在一起后，不需要对一个元素执行两次查询。
处理常见事件就像调用函数（比方说 click()、submit() 或 mouseover()）和为其传递事件处理函数一样简单。此外，还可以使用 bind(‘eventname’, function(){}) 指定自定义的事件处理程序。可以使用 unbind(‘eventname’) 删除某些事件或者使用 unbind() 删除所有的事件。有关这些函数的使用方法的完整列表，请参阅参考资料中的 jQuery 应用程序编程接口（Application Program Interface，API）文档。

释放 jQuery 选择器的强大能量
我们经常会使用 ID 来选择元素，比如 #myid，或者通过类名，比如 div.myclass 来选择元素。然而，jQuery 提供了更为复杂和完整的选择器语法，允许我们在单个选择器中选择几乎所有的元素组合。
jQuery 的选择器语法主要是基于 CSS3 和 XPath 的。对 CSS3 和 XPath 了解的越多，使用 jQuery 时就越加得心应手。有关 jQuery 选择器的完整列表，包括 CSS 和 XPath，请参阅参考资料中的链接。
CSS3 包含一些并不是所有浏览器都支持的语法，因此我们很少使用它。然而，我们仍然可以在 jQuery 中使用 CSS3 选择元素，因为 jQuery 具备自己的自定义选择器引擎。比方说，要在表格中的每一个空列中都添加一个横杠，可以使用：:empty 伪选择器（pseudo-selector）：

$('td:empty').html('-');

如果需要找出所有不含特定类的元素呢？ CSS3 同样提供了一个语法可以完成这个目的，使用 :not 伪选择器：如下代码显示了如何隐藏所有不含 required 类的输入内容：

$('input:not(.required)').hide();

与在 CSS 中一样，可以使用逗号将多个选择器连接成一个。下面是一个同时隐藏页面上所有类型列表的简单示例：

$('ul, ol, dl').hide();

XPath 是一种功能强大的语法，用于在文档中搜寻元素。它与 CSS 稍有区别，不过它能实现的功能略多于 CSS。要在所有复选框的父元素中添加一个边框，可以使用 XPath 的 /.. 语法：

$("input:checkbox/..").css('border', '1px solid #777');

jQuery 中也加入了一些 CSS 和 XPath 中没有的选择器。比方说，要使一个表更具可读性，通常可以在表格的奇数行或偶数行中附加一个不同的类名 —— 也可以称作把表分段（striping）。使用 jQuery 不费吹灰之力就可以做到这点，这需要归功于 odd 伪选择器。下面这个例子使用 striped 类改变了表格中所有奇数行的背景颜色：

$('table.striped > tr:odd').css('background', '#999999');

我们可以看到强大的 jQuery 选择器是如何简化代码的。不论您想处理什么样的元素，不管这个元素是具体的还是模糊的，都有可能找到一种方法使用一个 jQuery选择器对它们进行定义。

使用插件扩展 jQuery

与大多数软件不同，使用一个复杂的 API 为 jQuery 编写插件并不是非常困难。事实上，jQuery 插件非常易于编写，您甚至希望编写一些插件来使代码更加简单。下面是可以编写的最基本的 jQuery 插件：

$.fn.donothing = function(){
    return this;
};

虽然非常简单，但是还是需要对这个插件进行一些解释。首先，如果要为每一个 jQuery 对象添加一个函数，必须把该函数指派给 $.fn。第二，这个函数必须要返回一个 this（jQuery 对象），这样才不至于打断方法链接（method chaining）。
可以轻松地在这个示例之上构建。要编写一个更换背景颜色的插件，以替代使用 css(‘background’)，可以使用下面的代码：

$.fn.background = function(bg){
    return this.css('background', bg);
};

清注意，可以只从 css() 返回值，因为已经返回了 jQuery 对象。因此，方法链接（method chaining）仍然运作良好。
我建议在需要重复工作的时候使用 jQuery 插件。比方说，如果您需要使用 each() 函数反复执行相同的操作，那么可以使用一个插件来完成。
由于 jQuery 插件相当易于编写，所以有上百种可供你选择使用。jQuery 提供的插件可用于制表、圆角、滑动显示、工具提示、日期选择器，以及我们可以想到的一切效果。有关插件的完整列表，请参阅参考资料。
最为复杂、使用最为广泛的插件要属界面（Interface），它是一种动画插件，用于处理排序、拖放功能、复杂效果、以及其它有趣和复杂的用户界面（User Interface，UI）。界面对于 jQuery 来说就如 Scriptaculous 对于 Prototype 一样。
表单插件也同样流行且非常有用，通过它可以使用 Ajax 在后台中轻松地提交表单。这个插件用于处理一些常见的情况：您需要截获某个表单的提交事件，找出所有不同的输入字段，并使用这些字段构造一个 Ajax 调用。

结束语

我只是简要地介绍了使用 jQuery 可能完成的任务。jQuery 使用起来非常有趣，因此我们总是能学到看上去很简单的新技巧和新特性。从刚开始使用 jQuery 的那一刻起，jQuery 便可以完全简化您的 JavaScript 和 Ajax 编程；每学会一点新知识，您的代码就会更简单一点。
学习了 jQuery 之后，我在使用 JavaScript 语言进行编程的同时也获得了许多的乐趣。不用操心所有无聊的内容，我可以专注地编写有趣的内容。使用 jQuery 后，我几乎就告别了编写 for 循环代码的时代。甚至在想到要使用其它 JavaScript 库时，不禁会有所畏缩不前。jQuery 确确实实改变了我对 JavaScript 编程的看法。

参考资料

学习
您可以参阅本文在 developerWorks 全球网站上的英文原文。
Ajax 技术资源中心：developerWorks 上所有有关 Ajax 的问题都可以在这里找到解答。
developerWork 中国网站 XML 专区：了解 XML 的方方面面。
jQuery API 文档：通过一些教程和 API 参考资料的链接，研究完整的 jQuery 的文档。
jQuery 教程：参阅各种不同语言的 jQuery 教程，包括 40 篇英语文章。
可视化 jQuery：阅读这个交互式的、易于导航的 jQuery API 参考资料。
IBM XML 认证：看看如何才能成为一名 IBM 认证的 XML 及相关技术的开发人员。
XML 技术文档库：developerWorks XML 专区提供了大量技术文章、提示、教程、标准以及 IBM 红皮书。

获得产品和技术

讨论

jQuery 博客：有关 jQuery 的日常新闻和更新，请经常访问官方的 jQuery blog。
XML 专区讨论论坛：参与任何以 XML 为中心的论坛。

注：文中的“我”不是bolo，是这问仁兄：http://www.ibm.com/developerworks/cn/xml/x-ajaxjquery.html。

jQuery+CSS制作滑动门效果

bolo — Mon, 08 Jun 2009 23:21:10 +0000

本例利用jQuery实现背景图像动画效果。我们可以利用这种特效做一个“滑动门”菜单。请看demo。

这个效果的实现方法：
创建一个jquery.backgroundPosition.js文件，内容如下：

(function($) {
	$.extend($.fx.step,{
	    backgroundPosition: function(fx) {
            if (fx.state === 0 && typeof fx.end == 'string') {
                var start = $.curCSS(fx.elem,'backgroundPosition');
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
			}
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
 
           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
           }
        }
	});
})(jQuery);

建立html文件，内容如下：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>Garage Door Menu from CSS-Tricks</title>
 
	<style type="text/css">
	
	</style>
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.backgroundPosition.js"></script>
 
	<script type="text/javascript">
		$(document).ready(function() {
 
			//Set css in Firefox (Required to use the backgroundPosition js)
			$('#shutter1').css({backgroundPosition: '0px 0px'});
			$('#shutter2').css({backgroundPosition: '0px 0px'});
			$('#shutter3').css({backgroundPosition: '0px 0px'});
			$('#shutter4').css({backgroundPosition: '0px 0px'});
 
			//Animate the shutter  
			$(".link").hover(function(){
			      $(this).parent().animate({backgroundPosition: '(0px -100px)'}, 500 );
			    }, function() {
			      $(this).parent().animate({backgroundPosition: '(0px 0px)'}, 500 );
			}); 
		 });
	</script>
</head>
 
<body>
 
	<ul id="menuback">
	<li class="shutter" id="shutter1"><a class="link" href="#1">Link 1</a></li>
	<li class="shutter" id="shutter2"><a class="link" href="#2">Link 2</a></li>
	<li class="shutter" id="shutter3"><a class="link" href="#3">Link 3</a></li>
	<li class="shutter" id="shutter4"><a class="link" href="#4">Link 4</a></li>
	</ul>
 
</body>
 
</html>

可见这个效果的html结构是非常简单的，重点是好好地利用jQuery提供的效果。

jQuery实现链接背景淡出淡入效果

bolo — Mon, 08 Jun 2009 06:11:58 +0000

仅通过css的hover属性实现简单的背景变换已经满足不了一些追求美观的人。本实例即教大家如何在不修改原有CSS代码的前提下，使用jQuery实现光标悬停在链接上时的淡入淡出效果。

请看演示：demo。

通过演示，你可以发现例子里面，当鼠标停在链接上方是，背景图片会有一个淡出淡入过渡效果。实现这种效果的原理是这样的：

在此函数代码（linkFader.jquery.js）的帮助下，我们只需在链接标签<a>上添加一个名为“linkFader”的Class类，就可实现鼠标悬停在链接上时的淡入淡出效果。即使客户端的JavaScript处于不可用状态，CSS文件里面的HOVER效果仍将起作用。
请注意，要想使这个淡入淡出效果起作用，我们的链接标签<a>必须使用图片替换技术（即<a>需在CSS中定义为图片链接，具体请参考示例中的写法）来编写CSS代码，否则代码将不会起作用。这是因为此函数代码是基于背景（图片）位置偏移原理所编写，如果没有图片作为链接<a>的背景，偏移也就无从谈起了。

jQuery+CSS制作下拉菜单

bolo — Sun, 07 Jun 2009 12:10:38 +0000

看这篇文章之前请先看看效果：demo。
从有图形操作系统开始，下拉菜单和菜单栏就占据一个重要地位。到现在，它们的使用已经无处不在。甚至桌面应用程序和网页设计也在跟随这种潮流。本文旨在简单睇讲解如何在你的网页中利用jQuery和CSS技术加入强大的下拉菜单。

入门
首先，我们需要确定基本菜单级数，为了保持语法结构，我们将使用无序列表（ul）链接标准。我们将使用下面的代码作为一个例子。

<ul id="cssdropdown">
<li class="headlink">
	<a href="http://digan.cn">Search Engines</a>
	 <ul>
	  <li><a href="http://digan.cn">Google</a></li>
	  <li><a href="http://digan.cn/">Yahoo</a></li>
	  <li><a href="http://digan.cn/">Live Search</a></li>
	 </ul>
	 </li>
	  <li class="headlink">
	  <a href="http://digan.cn">Shopping</a>
         <ul>
	  <li><a href="http://digan.cn/">Amazon</a></li>
	  <li><a href="http://digan.cn/">eBay</a></li>
	  <li><a href="http://digan.cn/">CraigsList</a></li>
	 </ul>
 </li>
</ul>

效果如下：

创建下拉列表
把HTML语句和链接结构写好以后，我们可以在css中添加一些基本属性，提示：hover属性表示鼠标悬停在相应项目上是的样式。
我们可以通过css来清楚无序列表（ul）的默认样式。并设置列表项目在鼠标滑过是的样式。例如：

       li.headlink ul { display: none; }
       li.headlink:hover ul { display: block; }

最好在这个时候为菜单列表设置一些基本的样式，例如：对齐属性和宽度等，以确保菜单在显示和隐藏的时候不会变形。
完成这一步以后，我的效果如下：

解决兼容性问题
很遗憾，IE对hover属性支持得并不太好，在这一点上，一段精短的JavaScript就可以解决这个问题。我们需要做的是为ul标签里所有class=headlink的项目加上onmouseover和onmouseout事件，这个问题可以用一下js脚本解决：

	window.onload = function()
	{
		var lis = document.getElementsByTagName('li');
		for(i = 0; i < lis.length; i++)
		{
			var li = lis[i];
			if (li.className == 'headlink')
			{
				li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
				li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
			}
		}
	}

使用jQuery库的朋友则有一个更加简单的办法，使用下面的语句：

	$(document).ready(function(){
		$('li.headlink').hover(
			function() { $('ul', this).css('display', 'block'); },
			function() { $('ul', this).css('display', 'none'); });
	});

完成这一步后，你可以看到如下效果：

整理代码
现在，这个下拉菜单已经可以在大多数主流浏览器上正常运行，接下来要做的就是美化，整理代码，上线。
使用无需列表比标准列表更有利于设置基本样式，就是因为这一点，我们能更容易地设计出自己喜欢的菜单样式。

后期润色
设置一些符合网站风格的样式，并添加一些更加帅的特效。

用jquery制作平滑弹出菜单

bolo — Sat, 06 Jun 2009 04:30:34 +0000

先看看演示demo，效果华丽吧？

以下是源代码

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
/*Example 1 Style*/
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}
 
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
 
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
 
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
 
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
 
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
 
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black; 
color: white;
}
 
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
 
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
 
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
 
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
 
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
 
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
 
 
/* ######### CSS classes applied to down and right arrow images  ######### */
 
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
 
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
 
/* ######### CSS for shadow added to sub menus  ######### */
 
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
 
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}
 
/*Example 2 Style*/
.ddsmoothmenu-v ul{
margin: 0;
padding: 0;
width: 170px; /* Main Menu Item widths */
list-style-type: none;
font: bold 12px Verdana;
 
border-bottom: 1px solid #ccc;
}
 
.ddsmoothmenu-v ul li{
position: relative;
}
 
/* Top level menu links style */
.ddsmoothmenu-v ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
 
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{
background: #414141; /*background of menu items (default state)*/
color: white;
}
 
 
.ddsmoothmenu-v ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black; 
color: white;
}
 
.ddsmoothmenu-v ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
 
/*Sub level menu items */
.ddsmoothmenu-v ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
font-weight: normal;
visibility: hidden;
}
 
 
/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li { float: left; height: 1%; }
* html .ddsmoothmenu-v ul li a { height: 1%; }
/* End */
style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Smooth Navigational Menu title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">script>
<script type="text/javascript" src="ddsmoothmenu.js">
 
/***********************************************
* Smooth Navigational Menu
* This notice MUST stay intact for legal use
* Collection by bolo(http://digau.cn)
***********************************************/
 
script>
 
<script type="text/javascript">
 
//** 1) Now supports vertical (side bar) menu mode- set "orientation" to 'v'
//** 2) In IE6, shadows are now always disabled
 
 
var ddsmoothmenu={
 
//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
//arrowimages: {down:['downarrowclass', 'down.gif', 23], right:['rightarrowclass', 'right.gif']},you can edit this row
 
transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds
shadow: {enabled:true, offsetx:5, offsety:5},
 
///////Stop configuring beyond here///////////////////////////
 
detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit")!=-1, //detect WebKit browsers (Safari, Chrome etc)
detectie6: document.all && !window.XMLHttpRequest,
 
getajaxmenu:function($, setting){ //function to fetch external page containing the panel DIVs
	var $menucontainer=$('#'+setting.contentsource[0]) //reference empty div on page that will hold menu
	$menucontainer.html("Loading Menu...")
	$.ajax({
		url: setting.contentsource[1], //path to external menu file
		async: true,
		error:function(ajaxrequest){
			$menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText)
		},
		success:function(content){
			$menucontainer.html(content)
			ddsmoothmenu.buildmenu($, setting)
		}
	})
},
 
 
buildmenu:function($, setting){
	var smoothmenu=ddsmoothmenu
	var $mainmenu=$("#"+setting.mainmenuid+">ul") //reference main menu UL
	$mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"
	var $headers=$mainmenu.find("ul").parent()
	$headers.hover(
		function(e){
			$(this).children('a:eq(0)').addClass('selected')
		},
		function(e){
			$(this).children('a:eq(0)').removeClass('selected')
		}
	)
	$headers.each(function(i){ //loop through each LI header
		var $curobj=$(this).css({zIndex: 100-i}) //reference current LI header
		var $subul=$(this).find('ul:eq(0)').css({display:'block'})
		this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
		this.istopheader=$curobj.parents("ul").length==1? true : false //is top level header?
		$subul.css({top:this.istopheader && setting.orientation!='v'? this._dimensions.h+"px" : 0})
		//$curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: smoothmenu.arrowimages.down[2]} : {}).append( //add arrow images
			//'
			//+'" class="' + (this.istopheader && setting.orientation!='v'? smoothmenu.arrowimages.down[0] : smoothmenu.arrowimages.right[0])
			//+ '" style="border:0;" />'
		//)
		if (smoothmenu.shadow.enabled){
			this._shadowoffset={x:(this.istopheader?$subul.offset().left+smoothmenu.shadow.offsetx : this._dimensions.w), y:(this.istopheader? $subul.offset().top+smoothmenu.shadow.offsety : $curobj.position().top)} //store this shadow's offsets
			if (this.istopheader)
				$parentshadow=$(document.body)
			else{
				var $parentLi=$curobj.parents("li:eq(0)")
				$parentshadow=$parentLi.get(0).$shadow
			}
			this.$shadow=$('+(this.istopheader? ' toplevelshadow' : '')+'">
').prependTo($parentshadow).css({left:this._shadowoffset.x+'px', top:this._shadowoffset.y+'px'})  //insert shadow DIV and set it to parent node for the next shadow div
		}
		$curobj.hover(
			function(e){
				var $targetul=$(this).children("ul:eq(0)")
				this._offsets={left:$(this).offset().left, top:$(this).offset().top}
				var menuleft=this.istopheader && setting.orientation!='v'? 0 : this._dimensions.w
				menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader && setting.orientation!='v'? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft //calculate this sub menu's offsets from its parent
				if ($targetul.queue().length< =1){ //if 1 or less queued animations
					$targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).animate({height:'show',opacity:'show'}, ddsmoothmenu.transition.overtime)
					if (smoothmenu.shadow.enabled){
						var shadowleft=this.istopheader? $targetul.offset().left+ddsmoothmenu.shadow.offsetx : menuleft
						var shadowtop=this.istopheader?$targetul.offset().top+smoothmenu.shadow.offsety : this._shadowoffset.y
						if (!this.istopheader && ddsmoothmenu.detectwebkit){ //in WebKit browsers, restore shadow's opacity to full
							this.$shadow.css({opacity:1})
						}
						this.$shadow.css({overflow:'', width:this._dimensions.subulw+'px', left:shadowleft+'px', top:shadowtop+'px'}).animate({height:this._dimensions.subulh+'px'}, ddsmoothmenu.transition.overtime)
					}
				}
			},
			function(e){
				var $targetul=$(this).children("ul:eq(0)")
				$targetul.animate({height:'hide', opacity:'hide'}, ddsmoothmenu.transition.outtime)
				if (smoothmenu.shadow.enabled){
					if (ddsmoothmenu.detectwebkit){ //in WebKit browsers, set first child shadow's opacity to 0, as "overflow:hidden" doesn't work in them
						this.$shadow.children('div:eq(0)').css({opacity:0})
					}
					this.$shadow.css({overflow:'hidden'}).animate({height:0}, ddsmoothmenu.transition.outtime)
				}
			}
		) //end hover
	}) //end $headers.each()
	$mainmenu.find("ul").css({display:'none', visibility:'visible'})
},
 
init:function(setting){
	if (typeof setting.customtheme=="object" && setting.customtheme.length==2){ //override default menu colors (default/hover) with custom set?
		var mainmenuid='#'+setting.mainmenuid
		var mainselector=(setting.orientation=="v")? mainmenuid : mainmenuid+', '+mainmenuid
		document.write('