jquery函数与技巧_H5之家 - 中国HTML5教程资源分享第一站

一些应该熟记于心的 jQuery 函数和技巧
高级选择器（selector）在 jQuery 中，我们可以使用各种各样的选择器，这使得选择器的使用变得非常精确。 51CTO 也曾经和读者分享过 jQuery 选择器深入分析：避免不必要的调用，下面我们来一步一步地讲解这些选择器并看看在其他语境中如何使用这些选择器。基于属性的选择器在 HTML 中，几乎所有元素都具

有属性，比如：
? ? <img src="" alt="" width="" height="" border="0" /> <input type="text" name="email" value="" size="80" />

上面两个 HMTL 元素中包含了九个属性。利用 jQuery，我们可以根据元素的属性和属性值来对元素进行选择。一起看看以下例子中的选择器：
? ? ? ? ? ? ? ?? ?? ?? ?? ?? ?? }); }); //All the inputs whose name ends with'email' $("input[name$='email']").focus(function(){ alert("Thisinputhasanamewhichendswith'email'."); }); $(document).ready(function(){ //All the images whose width i s600px $("img[width=600]").click(function(){ alert("You'vejustselectedanimagewhosewidthis600px"); }); //Alltheimageshavingawidthdifferentto600px $("img[width!=600]").click(function(){ alert("You'vejustselectedanimagewhosewidthisnot600px");

在官方文档中，我们可以看到许多选择器与上例中的选择器非常类似。但关键点是一样的，属性和属性值。多重选择器如果你开放的是一个较为大型的网站，选择器的使用会变得困难。有时为了让代码变得更为简单，最好将它们分割为两个或三个选择器。实际上这是非常简单和基础的知识，不过非常有用，我们应该把这些知识熟记于心。
?? $(document).ready(function(){ ?? ?? //Alltheimageswhosewidthis600pxORheightis400px $("mon[width=600],mon[height=400]").click(function(){

?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? });

alert("Selectedanimagewhosewidthis600pxORheightis400px"); }); //Allpelementswithclassorange_text,divsandimages. $("p.orange_text,div,img").hover(function(){ alert("Selectedapelementwithclassorange_text,adivORanimage."); }); //Allthejpgimageswithanaltattribute(thealt'svaluedoesn'tmatter) $("img[alt][src$='.jpg']").click(function(){ alert("Youselectedajpgimagewiththealtattribute."); });

?? //Wecanalsocombinetheattributesselectors

Widget 组件选择器除了插件的选择器之前，还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器：
? ? ? ? ? ? ? ? ? ?? ?? ?? ?? ?? ?? ?? }); $(document).ready(function(){ //All the hidden images are shown $("img:hidden").show(); //The first pis going to be orange $("p:first").css("color","orange"); //Input with type password //thisis$("input[type='password']") $("input:password").focus(function(){ alert("This is a password!"); }); $("div:has(p)").css("color","green"); //Allnotdisabledcheckboxes $("input:checkbox(:not(:disabled))").hover(function(){ alert("Thischeckboxisworking."); });

?? //Divswithparagraph ?? //Wecanalsocombinethem.with()

如上例所示，可供使用的选择器是多种多样的，并且它们之前不是互相独立的，所以我们可以将这些选择器组合起来进行使用，如上例中的选择器。理解网站的结构网络的结构可能看起来非常复杂，但事实上并非如此，如果我们想要使用某些选择器以及作用于网络结构之上的方法。我们可以将网站视为一个颠倒的树，树根在顶部，而其他元素从根部延伸出来。查看下面的代码，试着想象一棵树，树根是 body 标签。
?? <html xmlns="">

?? <head>...</head> ?? <body> ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? <div id="wrapper"> <div id="main"> <h1>CreateanAccount!</h1> <form id="myform" action="#" method="post"> <legend>PersonalInformation</legend> <input type="text" name="email_address"

value="EmailAddress"/> <input type="checkbox" name="checking" value=""/> </form> <p>Message</p> </div> </div> <div id="footer"> <p>Footermessage</p> </div>

?? </body> ?? </html>

以上示例代码的树形图如下：

很简单，是不是？从现在开始我们可以将 html 或 xhtml 看做一棵树，不过我们想做的是程序员，这些植物学的理论有什么用处？答案就在下一个要点之中。

对树进行选择和转换选择就想树一样，网站结构中叶存在子与父。在 jQuery 中，我们可以利用这一结构。假设我们拥有相同的 html，但是现在我们想要选择名为“main”的 div 中的 p 元素，但是不想对任何有关 p 元素的东西造成变化。

我们有三种可能的方案，如下：
? ? ? $("#wrapper").children('#main').children('p').css("color","orange"); $("#wrapper").children().children('p').css("color","orange"); $("#main").children('p').css("color","orange");

利用 children 方法可以选择树中位于其他元素下的某个元素。如果我们传递给它一个选择器，该方法将仅选择我们需要的元素，如果不是这样，父元素的所有子元素都将被选中。让我们看看第一个和第二个选择器直接的区别。唯一的不同之处在于：第二个选择器中我们什么也没有指定，所有每一个子元素都会被选中。此处的关键在于：在上图中 wrapper 这个 div 元素下除 main 之外并没有其他子元素，所以我们得到的结果是一样的。添加元素现在我们在树中添加元素。这个元素可以是段落、div 元素、表格等等，假设我们想要添加一个列表，如下：

? ? ? ? ?

<ul> <li>Dog</li> <li>Cat</li> <li>Frog</li> </ul>

只是一些字符串，所以我们可以在 JavaScript 代码中这样写：
? ?? ?? ?? ?? var list= "<ul>\n" + "<li>Dog</li>\n" + "<li>Cat</li>\n" + "<li>Frog</li>\n" "</ul>";

现在我们要在 html 中某个地方添加字符串。比如，在之前我们选择的 p 元素之后。

最后我们可以输入完整的代码，如下所示：
?? $(document).ready(function(){ ?? ?? ?? ?? ?? ?? ?? $("#wrapper").children('#main').append(list); var list= "<ul>\n" + "<li>Dog</li>\n" + "<li>Cat</li>\n" + "<li>Frog</li>\n" "</ul>";

?? });

字面上我们将字符串附加到 HTML 中的</p>，结果是这个列表显示在 p 元素之后。移除元素移除元素并不难，当我们谈到对树进行转换时，在这一过程一定会涉及元素的移除。下面我们来移除之前选择的那个段落（注意我们可以再次使用选择器）。
?? $("#wrapper").children('#main').children('p').remove();

在这一代码中，位于选中元素之中的所有元素都将被移除，所以必须十分小心。如果 div 下有一个列表，当我们移除该 div 时，div 和列表都会被移除。表面之下 jQuery 类似只露出一角的冰山，在水面之下还有更多内容。这一小结中，我们将向你展示某些表面之下的内容。绑定（Bind）绑定是一种方法，利用它，我们可以将一个事件（鼠标点击、悬置等等）与一个方法连接起来。这有点类似：当用户单击此处时，调用该方法。听起来很熟悉，对吗？没错，我们经常这样做。看看以下示例：
?? $(document).ready(function(){ ?? ?? ?? ?? }); $("#id").click(function(){ alert("Thatclickwasamazing!"); });

上文中 click()方法在以下代码相对于 wrapper：
?? $(document).ready(function(){ ?? ?? ?? ?? }); $('#id').bind('click', function (){ alert("Thatclickwasamazing!"); });

此外，使用 unbind()方法可以解除事件与元素的连接。定义你自己的 jQuery 方法目前我们看到了一些方法， click、如 bind、 hover 等等，但是我们如何定义自己的方法？如何使用$(?selector?).mymethod()这样的语句调用这些方法？以下代码提供了这些问题的解决方案。定义一个方法，显示一个元素的值。
? ? ? //ThenamewillbealertVal jQuery.fn.alertVal= function(){ var element=$(this[0]); //That'sourelement

? ? ? ? ? };

if (element.val()) alert(element.val()); //That'sourelement'svalue //Thisisthewaywecanuseit $("selector").alertVal();

回调（callback）是常用的解决方案使用回调，我们可以在其他方法完成时执行某个方法。你可以将回调方法看做对别人说：但你做完时，给我电话，因为我要做我的那份工作。不过现在的问题是：如何使用回调？
? ?? ?? ?? ?? } $.get('myhtmlpage.html',myCallBack); $(document).ready(function(){ myCallBack= function(){ alert("I'macallbackalert.");

?? //WhenthegetfinishesthenmyCallBackisexecuted ?? });

注意：如果该函数包含参数，我们必须使用以下方式：
?? $(document).ready(function(){ ?? ?? ?? ?? }); $.get('myhtmlpage.html',function(){ myCallBack(param1,param2); });

结论本文只是介绍一些技巧，能够让你更好的理解有关 jQuery 的知识。当然，还有许多技巧比本文所讲的内容更为高级，但你可以将本文看做一名优秀的 jQuery 开发者迈出的第一步。

jQuery 另类视角：动态扩展对象
大家都知道 Javascript 是动态语言，它对动态的支持是与身俱来的， jQuery 作为 Javascript 最为流行的框架之一，同样有着这样的特性。文章将从个人的角度出发，研究 jQuery 的开发者是如何设计出 access 函数，并让它去支持动态扩展对象。 51CTO 推荐专题： jQuery 从入门到精通例如：有一个 employee 对象：
? function employee(){

? ? ? }

this.e_id = 0; this.e_name = "";

现在需要为它动态的新增"age"属性和"toString()"方法：
? ? ? var empObj = new employee(); empObj["age"] = 20; empObj["toString"] = function() { return this.e_id.toString() +

this.e_name; };

一行简单的代码就承担了这项工作，这是 Javascript 内置支持的，不过往往我们需要在这基础上支持一定程度的扩展，所以会将这一行简单的代码抽成一个方法：
? ? ?? ?? ?? } function dym_setprop(obj, key, value) { if (obj && key) { obj[key] = value; }

看到这里，我们先让思路做个跳转，跳到 C#中的 employee 对象，如下：

在面向对象的编程中，对外使用的都是属性（Get/Set），那么想想如何将这种方式签入到 Javascript 中，现在让我们跳回 dym_setprop 函数内，既在 dym_setprop 方法中不能使用 obj[key]=value 的直接赋值方式，而要支持 Set。
?? function dym_setprop(obj, key, value, fn) { ?? ?? ?? ?? } if (obj && key) { fn(obj, key, value); }

参数 fn，在 dym_setprop 中不直接操作任何对象，使用函数 fn 来代替相应的操作代码，则在这里除了支持 Set 外，还有其他很大的自由空间。让我们继续深入 dym_setprop 方法，现在我们把关注点放在参数 value 上，大家都清楚 value 可以是值类型，也可以是函数，对于值类型来说，不用考虑其他东西直接赋值就可以了，对于函数来说就没有这么简单，它支持两种操作：

1、直接将函数赋给新扩展的属性； 2、将函数执行的返回值赋给新扩展的属性。
?? function dym_setprop(obj, key, value, fn, exec, pass) { ?? ?? ?? ?? ?? ?? ?? } if (obj && key) { var temp = value; if (exec) { } fn(obj, key, temp, pass); }

?? temp = value.call(obj, key, fn(obj, key));

在这段代码中参数 exec 充当了上面两种操作选择的角色，参数 pass 是一个额外的执行参数。除此之外，大家也许会对 fn 有些疑惑，因为上面有两个地方使用了，区别只有参数个数不同，fn 到底代表什么？！再次想下 C#中的属性，它是有 Get/Set 的，那么在这里 fn(obj,key)就相当与 Get，而 fn(obj,key,temp,pass)就相当与 Set。例如：看下面的代码，对于 fn 的定义与使用，
?? employee.AccessProp = function(obj, key, value) { ?? ?? ?? ?? ?? ?? ?? } ?? dym_setprop(empObj, "age", function(key, value) { return value + 10; }, employee.AccessProp, true); if (value) { obj[key] = value; } else { return obj[key]; }

看了这么多，也许大家觉得郁闷，简单的动态扩展对象程序为什么要以这种方式来编写，有种没事找事的感觉，其实不然，如果你只想做动态扩展对象，那么我建议你别采用上述 dym_setprop 的思路，但是如果你想从更加抽象的角度上思考，将 dym_setprop 内的程序作为一个流程执行的模板，那么这是一个不错的方式，因为 dym_setprop 内部不承担任何具体代码(obj[key]=value 或 obj[key])的执行，它都通过函数 fn 来代替，这样对于具体执行来说有完全自由的空间。理解完上述的思路后，让我们进入本文的核心，jQuery 是如何实现动态扩展对象的？access 函数，
?? function access( elems, key, value, exec, fn, pass ) { ?? ?? ?? ?? var length = elems.length; // Setting many attributes if ( typeof key === "object" ) { for ( var k in key ) {

?? access( elems, k, key[k], exec, fn, value );

?? ?? ?? ?? ?? ?? ?? ??

} return elems; } // Setting one attribute if ( value !== undefined ) { // Optionally, function values get executed if exec is true exec = !pass && exec && jQuery.isFunction(value); for ( var i = 0; i < length; i++ ) {

?? fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass ); ?? ?? ?? ?? ?? ?? } } return elems; } // Getting an attribute return length ? fn( elems[0], key ) : null;

仔细看完 access 函数的代码，你一定发现它和 dym_setprop 的相试度很高，它只是多了一段代码：
?? if ( typeof key === "object" ) { ?? ?? ?? ?? ?? } for ( var k in key ) { access( elems, k, key[k], exec, fn, value ); } return elems;

很容易看出它其实就是用来支持 object 对象的动态扩展属性。具体的执行流程通过下图来展示：

到这里已经写完了，本文试着从自己的角度上去猜测 jQuery 的开发者是如何设计出 access 函数的，让它去支持动态扩展对象，并且说明了 access 的执行流程。其实对于我的这种猜测不一定正确，不过不妨碍我对于 jQuery 的研究。

学习 jQuery 必须知道的几种常用方法
jQuery 事件处理 ready(fn) 代码：
$(document).ready(function(){ // Your code here... })；

作用：它可以极大地提高 web 应用程序的响应速度。通过使用这个方法，可以在 DOM

载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的 JavaScript 函数都需要在那一刻执行。 bind(type,[data],fn) 代码：
$("p").bind("click", function(){ alert( $(this).text() ); });

作用：为每一个匹配元素的特定事件（像 click）绑定一个事件处理器函数。起到事件监听的作用。 toggle(fn,fn) 代码：
$("td").toggle( function () { $(this).addClass("selected"); }, function () { $(this).removeClass("selected"); } );

作用：每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。挺有趣的一个函数，在动态实现某些功能的时候可能会用到。(像 click(),focus(),keydown()这样的事件这里就不提了，那些都是开发中比较常用到的。) jQuery 外观效果 addClass(class)和 removeClass(class) 代码：
$(".stripe tr").mouseover(function(){ $(this).addClass("over");}).mouseout(function(){ $(this).removeClass("over");}) });

也可以写成：

$(".stripe tr").mouseover(function() { $(this).addClass("over") }); $(".stripe tr").mouseout(function() { $(this).removeClass("over") });

作用：为指定的元素添加或移除样式，从而实现动态的样式效果，上面的实例中实现鼠标移动双色表格的代码 css(name,value) 代码：
$("p").css("color","red");

作用：很简单，就是在匹配的元素中，设置一个样式属性的值。这个个人感觉和上面的 addClass(class)有点类似。 slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown() 代码：
$("#btnShow").bind("click",function(event){ $("#divMsg").show() }); $("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

作用： jQuery 中提供的比较常用的几个动态效果的函数。还可以添加参数： show(speed,[callback])以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。 animate(params[,duration[,easing[,callback]]]) 作用：制作动画效果用到的函数，功能非常的强大，可以连续使用此函数。查找筛选 map(callback)

HTML 代码:
Values: <INPUT value=John name=name> <INPUT value=password name=password> <INPUT value="< A href=" name=url ? %22 ejohn.org http:> %22/< /A> < FORM>

jQuery 代码:
< /FORM> $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") );

结果:
[ John, password, < A

href="%3C/p">%3C/p< /A> ]

作用：将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是 CSS 样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。 find(expr) HTML 代码:
< SPAN>Hello< /SPAN>, how are you? jQuery 代码: $("p").find("span") 结果: [ < SPAN>Hello< /SPAN> ]

作用：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。文档处理

attr(key,value)

HTML 代码:
< IMG>< IMG>

jQuery 代码:
$("img").attr("src","test.jpg");

作用：取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。在控制 HTML 标记上是必备的工具。 html()/html(val) HTML 代码:
< DIV> Hello < /DIV>

jQuery 代码: $("div").html(); 结果: Hello 作用：取得或设置匹配元素的 html 内容，同类型的方法还有 text()和 val()。前者是取得所有匹配元素的内容。，后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。 wrap(html) HTML 代码:
Test Paragraph. jQuery 代码: $("p").wrap(" < DIV class=wrap>< /DIV>"); 结果:< DIV class=wrap> Test Paragraph.</div>

作用：把所有匹配的元素用其他元素的结构化标记包裹起来。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。可以灵活的修改我们的 DOM。

empty() HTML 代码:
Hello,Person, <A href="?artID=127754#"> and person< /A>

jQuery 代码: $("p").empty(); 结果: 作用：删除匹配的元素集合中所有的子节点。 Ajax 处理 load(url,[data],[callback]) url (String) : 待装入 HTML 网页网址。 data (Map) : (可选) 发送至服务器的 key/value 数据。 callback (Callback) : (可选) 载入成功时回调函数。代码：
$("#feeds").load("feeds.aspx", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });

作用：载入远程 HTML 文件代码并插入至 DOM 中。这也是 Jquery 操作 Ajax 最常用最有效的方法。 serialize() HTML 代码: Results:
< FORM> < SELECT name=single> < OPTION selected>Single< /OPTION>

< OPTION>Single2< /OPTION> < /SELECT> < SELECT multiple name=multiple> < OPTION selected>Multiple<

/OPTION> < OPTION>Multiple2< /OPTION> < /SELECT> < INPUT value=check1 type=checkbox name=check> check1 < INPUT value=check2 type=checkbox name=check checked="checked"/> check2 < INPUT value=radio1 type=radio name=radio checked="checked"/> radio1 < INPUT value=radio2 type=radio name=radio> radio2 < /FORM> < OPTION selected>Multiple3< /OPTION>

jQuery 代码:
$("#results").append( "< TT>" + $("form").serialize() + "< /TT>" );

作用：序列化表格内容为字符串。用于 Ajax 请求。工具 jQuery.each(obj,callback) 代码：
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });//遍历数组 $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n );//遍历对象 });

作用：通用例遍方法，可用于例遍对象和数组。 jQuery.makeArray(obj) HTML 代码:
First < DIV>Second< /DIV>Third< /DIV> < DIV>Fourth< /DIV>

jQuery 代码:

var arr = jQuery.makeArray( document.getElementsByTagName("div"));

结果: Fourth Third Second First 作用：将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。 jQuery.trim(str) 作用：这个大家应该很熟悉，就是去掉字符串起始和结尾的空格。

实用简单的 jQuery 插件教程
1、jQuery 插件教程引言开发 jQuery 插件是一个高级的话题对于 jQuery 初学者。这个月，我一直在加强学习 jQuery。尽管我学习如何把 javascript 代码和 html 文档分开。当我看到我自己的 javascipt 文件时，我并不满意。它太脏乱，所以我决定更近一步－学习如何开发 jQuery 插件来整理 javascript 文件。这个插件是基于我以前的教程－ Navigation List menu + jQuery Animate Effect Tutorial 。上次，我写编写的脚本都把代码放到 document.ready 段落中，就像下面的代码。
1$(document).ready(function() { 3$('ul#menu li:even').addClass('even'); 5$('ul#menu li a').mouseover(function() { 7 $(this).animate( { paddingLeft:"20px" }, { queue:false, duration:500 });

9}).mouseout(function() { 11 $(this).animate( { paddingLeft:"0" }, { queue:true, duration:500 });

13}).click(function() { 15 $(this).animate( { fontSize:"20px" }, { queue:false, duration:500 });

16}); 18});

但是现在我想把代码写成类似如下格式：
1$(document).ready(function() { 3 4 5 7}); }) $(#menu).animateMenu({ padding:20

这样的格式看起来更简练，而且这些脚本可以在另一个工程重用。 2、插件结构 jQuery 官方网站在 Plugins/Authoring 页面提供了非常详细的说明。但是我发现它非常难以理解。不过没关系，为了使编写插件更容易，使用下面的小段用来开发插件将是一个非常好的结构。
1//为了避免冲突，你需要一个匿名函数来包装你的函数 2(function($){ 4 5 7 8 //给 jQuery 附加一个新的方法 $.fn.extend({ //这儿就是你要开发插件的名子 pluginname: function() {

10 //迭代当前匹配元素集合 11 return this.each(function() { 13 //插入自己的代码 15 }); 16 17 } });

19//传递 jQuery 参数到函数中， 20//因此我们能使用任何有效的 javascipt 变量名来替换“$“符号。但是我们将坚持使用 $ (我喜欢美元符号：)

2、带有可选项的插件如果你看了第一步的介绍,"padding"值对于这个插件是用户配置的。他有利于一些设置，所以用户能改变设置根据他们自己的需要。请确定你为每一个变量指定了默认值。现在，如下的代码：

1(function($){

3 5 6 9

$.fn.extend({ //pass the options variable to the function pluginname: function(options) { //Set the default values, use comma to separate the settings, example:

10 var defaults = { 11 padding: 20, 12 mouseOverColor : '#000000', 13 mouseOutColor : '#ffffff' 14 } 16 var options = $.extend(defaults, options); 18 return this.each(function() { 19 var o = options; 21 //code to be inserted here 22 //you can access the value like this 23 alert(o.padding); 25 }); 26 27 } });

29})(jQuery);

3、动态菜单插件现在你学习了插件的结构。紧接着是我基于以前教程的开发的插件。插件它允许4个配置： 1） animatePadding : 给 animate 效果设置”padding“值、 2） defaultPadding : 、给 padding 设置默认的值

3）、evenColor :设置偶数行事件的颜色 4）、oddColor : 设置奇数行事件的颜色
1(function($){ 2 3 4 6 7 $.fn.extend({ //plugin name - animatemenu animateMenu: function(options) { //Settings list and the default values var defaults = {

8 animatePadding: 60, 9 defaultPadding: 10, 10 evenColor: '#ccc',

11 oddColor: '#eee' 12 }; 14 var options = $.extend(defaults, options); 16 return this.each(function() { 17 var o =options; 19 //Assign current element to variable, in this case is UL element 20 var obj = $(this); 22 //Get all LI in the UL 23 var items = $("li", obj); 25 //Change the color according to odd and even rows 26 $("li:even", obj).css('background-color', o.evenColor); 27 $("li:odd", obj).css('background-color', o.oddColor); 29 //Attach mouseover and mouseout event to the LI 30 items.mouseover(function() { 31$(this).animate({paddingLeft: o.animatePadding}, 300); 33 }).mouseout(function() { 34$(this).animate({paddingLeft: o.defaultPadding}, 300); 35 }); 37 }); 38 39 } });

40})(jQuery);

4、完整的源代码你可以保存这个插件再一个单独的文件。（例如： jquery.animatemenu.js） .在这个教程中，我把脚本放到 html 文档中
2""> 3< HTML lang=en xmlns="" xml:lang="en"> 5< HEAD> 7 < SCRIPT type=text/javascript src="

">< /SCRIPT> 8 < SCRIPT>

10(function($){ 11 12 13 $.fn.extend({ //plugin name - animatemenu animateMenu: function(options) {

15 var defaults = { 16 animatePadding: 60,

17 defaultPadding: 10, 18 evenColor: '#ccc', 19 oddColor: '#eee', 20 }; 22 var options = $.extend(defaults, options); 24 return this.each(function() { 25 26 27 29 30 32 var o =options; var obj = $(this); var items = $("li", obj); $("li:even", obj).css('background-color', o.evenColor); $("li:odd", obj).css('background-color', o.oddColor); items.mouseover(function() {

33 $(this).animate({paddingLeft: o.animatePadding}, 300); 35 }).mouseout(function() {

36 $(this).animate({paddingLeft: o.defaultPadding}, 300); 38 });

39 }); 40 41 } });

42})(jQuery); 44 46 47 48 49 50 51 < /SCRIPT> < SCRIPT type=text/javascript> $(document).ready(function() { $('#menu').animateMenu({animatePadding: 30, defaultPadding:10}); }); < /SCRIPT> < STYLE>

52 body {}{font-family:arial;font-style:bold} 53 a {}{color:#666; text-decoration:none} 54 55 56 #menu {}{list-style:none;width:160px;padding-left:10px;} #menu li {}{margin:0;padding:5px;cursor:hand;cursor:pointer} < /STYLE>

< UL id=menu> 61 62 63 64 < LI>Home < LI>Posts < LI>About < LI>Contact

65< /LI>< /UL>

浅析 jQuery 框架与构造对象
文章针对 jQuery 1.3.2版本，面向的读者应具备以下要求： 1.非常熟悉 HTML 2.非常熟悉 javascript 语法知识 3.熟悉 javascript 面向对象方面的知识 4.熟练使用 jQuery 框架 jQuery 对象的初始化是写在匿名函数里的，就像这样：
? (function(){alert("jQuery 框架分析")})();

第一个括号是声明了一个函数，第二个括号是执行这个函数。也就是说，jQuery 框架在页面载入的时候已经做了一些事情（这个个匿名函数已经被执行了）。做的这些事情使我们可以通过$("#yourId")或$(".yourClass")等方式获取页面元素，并把获取到的元素包装成 jQuery 对象。匿名函数是怎么实现这些功能的呢？首先框架定义了两个核心对象
? jQuery = window.jQuery = window.$ = function( selector, context ) {}

一个是 jQuery 一个是$ 这两个对象都指向一个函数这个函数是我们使用 $() 或 jQuery() 方法时的入口，这个方法返回一个 jQuery.fn.init( selector, context );的实例，其实这个实例是一个 jQuery 对象。 jQuery 对象是一个什么样的对象呢？ jQuery 对象其实是一个 javascript 的数组这个数组对象包含125个方法和4个属性 4个属性分别是 jQuery length 当前的 jQuery 框架版本号指示该数组对象的元素个数

context selector

一般情况下都是指向 HtmlDocument 对象传递进来的选择器内容如：#yourId 或.yourClass 等

如果你通过$("#yourId")方法获取 jQuery 对象，并且你的页面中只有一个 id 为 yourId 的元素那么$("#yourId")[0]就是 HtmlElement 元素与 document.getElementById("yourId")获取的元素是一样的 jQuery 对象是怎么构造出来的呢？这个对象就是刚才我们提到的
? jQuery = window.jQuery = window.$ = function( selector, context ) {}

框架不只为此对象定义了一个方法，还定义了它的原型(prototype)
? jQueryjQuery.fn = jQuery.prototype = {//此处为 json 对象}

原型的定义是通过 json 对象定义的如
? ? ? ? ? { init: function( selector, context ) {//方法体}, jQuery: "1.3.2",//属性 size: function() {//方法体}, //......

?? }

前面提到的125个方法4个属性有一部分在这个 json 对象中完成定义的这个 json 对象中第一个方法就是 init 方法也就是入口方法中的 jQuery.fn.init( selector, context );此方法与一个正则表达式对象配合来构造 jQuery 对象这个正则表达式为：
?? quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#([\w-]+)$/

下面我们说一下 init 方法的实现逻辑此方法有两个参数一个是 selector（选择器）一个是 context（上下文） selector 就是我们用$("#yourId")或 jQuery(".yourClass")传递进来的变量这个参数不一定是字符串，也可能是其他形式的变量等会儿我们就会介绍到 context 参数我们在使用 jQuery 的时候很少用到,暂且不表

注意这两个参数都在返回的 jQuery 对象中体现出来了（以两个同名的属性展示）下面看一下这个方法体内部的实现逻辑
?? //如果没有选择器或者选择器为空的话，就把 document 对象赋值给他 ?? selector = selector || document; ?? //如果 selector 参数是 dom 元素，直接返回 jQuery 对象 ?? //也就是说你可以$(document.getElementById("allen"))把你的元素封装成 jQuery 对象 ?? if ( selector.nodeType ) { ?? this[0] = selector; ?? this.length = 1; ?? this.context = selector; ?? return this; ?? } ?? //typeof 取对象的类型，用三个等号效率较高，不需要类型转换，两个等号默认有类型转换 ?? if ( typeof selector === "string" ) { ?? //这里用到了我们前面提到的正则表达式 quickExpr ?? //match 其实是一个数组 ?? //第0个元素是与正则表达式相匹配的文本 ?? //第1个元素是与正则表达式的第1个子表达式相匹配的文本（如果有的话） ?? //第2个元素是第2个子表达式相匹配的文本（如果有的话） ?? //第3个元素是第3个子表达式相匹配的文本（如果有的话）这里就是元素的 ID，不包含# ?? var match = quickExpr.exec( selector ); ?? //正则表达式匹配到了内容装成 jQuery 对象. ?? //context 为空的时候 selector 是页面元素 ID ?? if ( match && (match[1] || !context) ) { ?? //选择器为 html 字符串此情况暂且不表 ?? if ( match[1] ){ ?? selector = jQuery.clean( [ match[1] ], context );} ?? //选择器为 ID ?? else { ?? //得到元素 ?? var elem = document.getElementById( match[3] ); ?? //如果得到了这个元素但是元素的 ID 属性不是 match[3]，跳入分支。分支里面的东西做了什么工作，暂且不表 ?? if ( elem && elem.id != match[3] ){ ?? return jQuery().find( selector );} ?? //把得到的页面元素封装成 jQuery 对象 ?? //如果 elem 为空，就传入一个空数组，框架怎么处理此空数组，暂且不表 ?? //如果不为空就跳入我们前面说的 if ( selector.nodeType )分支，构造出 jQuery 对象来 ?? var ret = jQuery( elem || [] ); 并且 match[1]不为空或者 context 为空 ?? //match[1]不为空的时候 selector 是 HTML 字符串，也就是你可以用$("xland")把对象包

?? ?? ??

//设置 jQuery 对象的 context 属性 //设置 jQuery 对象的 selector 属性 //返回这个对象给调用者

?? ret.context = document; ?? ret.selector = selector; ?? return ret; ?? }

至此
?? var obj = $(“#yourId”);

构造 jQuery 对象的初步工作就做完了

了解 jQuery 技巧来提高你的代码质量
目前 jQuery 的大多数用户更趋向于使用 jQuery 插件来解决面临的难题，这通常是明智的选择。但是当插件相对于你的需求有一定缺陷的时候，你也许更应该想办法自己来解决，下面来看看这些实用的 jQuery 技巧，他们肯定会能够派上用场的！ 51CTO 编辑推荐阅读：学习 jQuery 必须知道的几种常用方法 1.测试并提升你的 jQuery 选择器水平这个 jQuery 选择器实验室非常酷，它能在线免费使用，当然你也能下来到本地离线使用。这个测试页面包含复杂的 HTML 组合字段，然后你能尝试预定义使用各种 jQuery 选择器。如果这还不够你也可以自定义选择器。

2.测试 jQuery 包装集是否包含某些元素如果你想测试一下某个 jQuery 包装集中是否包含某些元素，你首先可以尝试使用验证

首个元素是否存在：
? ? ? if($(selector)[0]){...} // 或者这样 if($(selector).length){...}

来看看这个例子：
? ? ? ? ? ? //例子.如果你的页面有以下 html 代码 <ul id="shopping_cart_items"> <li><input class="in_stock" name="item" type="radio" value="Item-X" <li><input class="unknown" name="item" type="radio" value="Item-Y" <li><input class="in_stock" name="item" type="radio" value="Item-Z" </ul>

/>Item X</li> />Item Y</li> />Item Z</li> ?? <pre escaped="true" lang="javascript">... ?? //这个 if 条件将返回 true，因为我们有两个 ?? // input 域匹配了选择器，所以<statement>代码将会执行 ?? if($('#shopping_cart_items input.in_stock')[0]){<statement>}

3.从 jquery.org 读取 jQuery 最新版本你可以使用这句代码读取 jQuery 的最新版本的代码文件。
?? <script src=""></script>

你可以使用这个方法来调用最近版本的 jQuery 框架，当然，你还可以使用下面这个代码从 ajax.googleapis.com 调用同样的最新版本 jQuery：
?? <script src="" ?? type="text/javascript"></script>

4.存储数据使用 data 方法可以避免在 DOM 中存储数据，有些前端开发 er 喜欢使用 HTML 的属性来存储数据：
?? $('selector').attr('alt', 'data being stored'); ?? //之后可以这样读取数据: ?? $('selector').attr('alt');

使用”alt”属性来作为参数名存储数据其实对于 HTML 来说是不符合语义的，我们可以使用 jQuery 的 data 方法来为页面中的某个元素存储数据：
?? $('selector').data('参数名', '要存储的数据'); ?? //之后这样取得数据:

?? $('selector').data('参数');

这个 data 方法能让你自己明明数据的参数，更语义更灵活，你可以在页面上的任何元素存储数据信息。这个方法的经典应用是给 input 域一个默认值，然后在聚焦的时候清空它:
?? ?? ?? ?? <form id="testform"> <input type="text" class="clear" value="Always cleared" /> <input type="text" class="clear once" value="Cleared only once" /> <input type="text" value="Normal text" />

?? </form>

JavaSript 部分:
?? $(function() { ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? } }); } }).blur(function(){ // 为有 class clear 的域添加 blur 时间来恢复默认值 // 但如果 class 是 once 则忽略 if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) { //Restore saved data $(this).val( $(this).data("txt") ); //取出有 clear 类的 input 域 //(注: "clear once" 是两个 class clear 和 once) $('#testform input.clear').each(function(){ //使用 data 方法存储数据 $(this).data( "txt", $.trim($(this).val()) ); }).focus(function(){ // 获得焦点时判断域内的值是否和默认值相同，如果相同则清空 if ( $.trim($(this).val()) === $(this).data("txt") ) { $(this).val("");

?? });

5.jQuery 手册常备身边大多数人都很难记住所有的编程细节，即使再好的程序员也会有对某个程序语言的疏忽大意，所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。

6.在 FireBug 控制台记录 jQuery FireBug 是我最喜欢用的一个浏览器扩展工具之一，这个工具可以让你快速的在可视化界面中了解当前页面的 HTML+CSS+JavaScript，并在该工具下完成即时开发。作为 jQuery 或 JavaScript 开发人员，FireFox 对于记录你的 JavaScript 代码也得到支持。写入 FireBug 控制台的最简单方式如下:

?

console.log("hello world")

你也可以按照你希望的方式写一些参数：
? console.log(2,4,6,8,"foo",bar)

你也可以编写一个小扩展来记录 jQuery 对象到控制台：

? ?

jQuery.fn.log = function (msg) { console.log("%s: %o", msg, this);

? ? };

return this;

对于这个扩展，你可以直接使用.log()方法来记录当前对象到控制台。
? ? ? $('#some_div').find('li.source > input:checkbox') .log("sources to uncheck") .removeAttr("checked");

7.尽可能使用 ID 选择器在使用 jQuery 之后，你会发现利用 class 属性来选择 DOM 元素变得相当简单。尽管如此，还是推荐大家尽量少用 class 选择器取而代之尽量多使用运行更快的 ID 选择器(IE 浏览器下使用 class 选择器会在遍历整个 DOM 树之后返回相符的 class 包装集)。而 ID 选择器更快是因为 DOM 本身就有”天然的”getElementById 这个方法， class 并没有。而所以如果使用 class 选择器的话，浏览器会遍历整个 DOM，如果你的网页 DOM 结构足够复杂，这些 class 选择器足矣把页面拖得越来越慢。让我们看看这段简单的 HTML 代码:
?? ?? ?? ?? ?? <div id="main"> <h2>Selectors in jQuery</h2> ... ... <input class="button" id="main_button" type="submit" value="Submit" /> ?? <form method="post" action="/">

?? </form> ?? </div> ?? //使用 class 来调用 submit 按钮要比使用绝对的 ID 选择器慢很多 ?? var main_button = $('#main .button'); ?? var main_button = $('#main_button');

8.善于利用 jQuery 链 jQuery 链不但允许以简洁的方式写出强大的操作，而且提高了开发效率，因为它能够把多个命令应用到包装集，而不必重新计算包装集。从而你不用再这样写了：
?? <li>Description: <input type="text" name="description" value="" /></li> ?? $('#shopping_cart_items input.text').css('border', '3px dashed yellow'); ?? $('#shopping_cart_items input.text').css('background-color', 'red'); ?? $('#shopping_cart_items input.text').val("text updated");

取而代之你可以使用 jQuery 链来完成简便的操作：
?? var input_text = $('#shopping_cart_items input.text'); ?? input_text.css('border', '3px dashed yellow'); ?? input_text.css('background-color', 'red'); ?? input_text.val("text updated"); ?? //same with chaining: ?? var input_text = $('#shopping_cart_items input.text');

?? input_text ?? ?? ?? .css('border', '3px dashed yellow') .css('background-color', 'red') .val("text updated");

9.绑定 jQuery 函数到$(window).load 事件大多数 jQuery 实例或教程都告诉我们绑定我们的 jQuery 代码到$(document).ready 事件。虽然$(document).ready 事件在大多数情况下都 OK，但是它的解析顺序是在文档准备就绪，单文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使用$(document).ready 事件并不一定能达到我们预期的效果，比如一些视觉效果和动画、拖拽、预读取隐藏图片等… 通过使用$(window).load 事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。
?? ?? $(window).load(function(){ // 将你希望在页面完全就绪之后运行的代码放在这里

?? });

10.使用 jQuery 链来限定选择器，让你的代码更简洁更优雅由于 JavaScript 支持链结构而且支持断行，所以你的代码可以写成下面这样，这个例子先在元素上移除一个 class 然后在同一个元素上添加另一个 class：
? ? ? $('#shopping_cart_items input.in_stock') .removeClass('in_stock') .addClass('3-5_days');

如果想让它更简单实用，你可以创建一个支持链结构的 jQuery 函数：
? ? ? ? } $('#shopping_cart_items input.in_stock').makeNotInStock().log(); $.fn.makeNotInStock = function() { return $(this).removeClass('in_stock').addClass('3-5_days');

11.使用回调函数同步效果如果你想确保某个事件或动画效果要在另一个事件运行之后再调用，那你就要使用回调函数了。你可以在这些动画效果后面绑定回调函数：
? ? ?? ?? ?? ?? ?? ?? $(document).ready(function(){ slideDown( speed, [回调] ) ie. $(?#sliding?).slideDown(?slow?, function(){… <style> div.button { background:#cfd; margin:3px; width:50px; text-align:center; float:left; cursor:pointer; border:2px outset black; font-weight:bolder; } #sliding { display:none; }

?? </style>

?? // 使用 jQuery 的 click 事件改变视觉效果，并开启滑动效果 ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? }); }); $("div.button").click(function () { //div.button 现在看上去是按下的效果 $(this).css({ borderStyle:"inset", cursor:"wait" }); //#sliding 现在将渐隐并在完成动作之后开启渐显效果 //slideup once it completes $('#sliding').slideDown('slow', function(){ $('#sliding').slideUp('slow', function(){ //渐显效果完成后将会改变按钮的 CSS 属性 $('div.button').css({ borderStyle:"outset", cursor:"auto" }); });

?? });

12.学会使用自定义选择器 jQuery 允许我们在 css 选择器的基础上定义自定义选择器来让我们的代码更简洁:
?? $.expr[':'].mycustomselector= function(element, index, meta, stack){ ?? ?? ?? ?? ?? ?? ?? }; ?? // 自定义选择器的应用: ?? $('.someClasses:test').doSomething(); // element- DOM 元素 // index - 堆栈中当前遍历的索引值 // meta - 关于你的选择器的数据元 // stack - 用于遍历所有元素的堆栈 // 包含当前元素则返回 true // 不包含当前元素则返回 false

下面让我们来看看一个小例子，我们通过使用自定义选择器来锁定含有”rel”属性的元素集：
?? $.expr[':'].withRel = function(element){ ?? ?? ?? var $this = $(element); //仅返回 rel 属性不为空的元素 return ($this.attr('rel') != '');

?? }; ?? $(document).ready(function(){ ?? //自定义选择器的使用很简单，它和其他选择器一样，返回一个元素包装集 ?? //你可以为他使用格式方法，比如下面这样修改它的 css 样式 ?? $('a:withRel').css('background-color', 'green'); ?? }); ?? <ul> ?? ?? <li> <a href="#">without rel</a>

?? ?? ?? ?? ?? ?? ?? ?? ?? ??

</li> <li> <a rel="somerel" href="#">with rel</a> </li> <li> <a rel="" href="#">without rel</a> </li> <li> <a rel="nofollow" href="#">a link with rel</a> </li>

?? </ul>

13.预加载图片通常使用 JavaScript 来预加载图片是个相当不错的方法:
?? //定义预加载图片列表的函数(有参数) ?? jQuery.preloadImages = function(){ ?? ?? ?? ?? ?? } ?? // 你可以这样使用预加载函数 ?? $.preloadImages("images/logo.png", "images/mission.png"); "images/logo-face.png", } //遍历图片 for(var i = 0; i<arguments.length; i++){ jQuery("<img>").attr("src", arguments[i]);

14.将你的代码测试完好 jQuery 有一个名为 QUnit 单元测试框架。编写测试很容易，它能让您可以放心地修改您的代码，并确保它仍然按预期工作。下面是如何工作的：
?? //将测试分成若干模块. ?? module("Module B"); ?? test("some other test", function() { ?? ?? ?? ?? //指定多少个判断语句需要加入测试中. expect(2); equals( true, false, "failing test" ); equals( true, true, "passing test" );

?? });

Web 设计师值得收藏的 10 个 jQuery 特效
jQuery 已经不是什么新鲜的事儿，以前总把它认为是非常难的东西，也就没有认真去了解他了。直到学完 CSS 的大部分内容，才开始接触这种"write less, do more" 的 Javascrīpt 框

架。这篇文章的最重要内容是来自 Web Designer Wall 的一篇教程，一篇包含了10个 jQuery 特效的教程。这里不打算全文翻译，想以自己的语言来表达，或许这样更方便大家理解/自己以后学习，也可能更准确地描述。先试试看？特效实例： View jQuery Demos： jQuery 是如何工作的？首先，你需要下载一个 jQuery 版本，并将它插入到<head>标签内。然后，你将需要写函数来告诉 jQuery 做些什么，下面的这个图表将告诉你 jQuery 是怎样工作的（请点击图片，查看大图）：

如何获取元素（Get the element）? 书写 jQuery 函数是一个非常简单的事。关键是你要学习如何获取你想要实现的效果的确切元素。
? ? ? ? ? ? ("#header") = 获取 id="header" 的元素 ("h3") = 获取所有<h3> ("div#content .photo") = 获取<div id="content">里所有用 class="photo"定义的元素 ("ul li") = 获取所以 <ul> 中 <li> 的元素 ("ul li:first") = 只获取<ul>中第一个<li>

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

当包含 class="btn-slide"的元素被点击，它会下拉/上提<div id="panel">里的元素。然后切换到 CSS 中的 class="active"到<a class="btn-slide">元素。.active 将会以 CSS 的方式打开/ 关闭出面板。
? ? ? ?? ?? $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); });

?? });

view demo： 2. 简单的隐藏效果如图，当右上角的上图标被点击时，内容被隐藏。

当被定义为 <img class="delete"> 的图片被点击，它会手找到父级元素 <div class="pane"> 并激活它的能力，慢慢消失，隐藏起来。
?? $(document).ready(function(){ ?? ?? ?? $(".pane .delete").click(function(){ $(this).parents(".pane").animate({ opacity: "hide" }, "slow"); });

?? });

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

Line 1: 当 <a class="run"> 被点击 Line 2: 激活 <div id="box"> 的不透明度（opacity）=0.1，直到值达到400px，速度达到 1200px/ms Line 3: 当 opacity=0.4, top=160px,height=20,width=20,以"slow"显示 Line 4: 当 opacity=1, left=0, height=100, width=100,也以"slow"显示 Line 5: 当 opacity=1, left=0, height=100, width=100, 也以"slow"显示 Line 6: 当 top=0, 以"fast"显示 Line 7: 然后，以常速上滑 (default speed = "normal") Line 8: 然后以"slow"下滑 Line 9:返回失效会阻止浏览器跳向链接锚点
?? $(document).ready(function(){ ?? ?? ?? ?? ?? ?? ?? ?? ?? $(".run").click(function(){ $("#box").animate({opacity: "0.1", left: "+=400"}, 1200) .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow") .animate({top: "0"}, "fast") .slideUp() .slideDown("slow") return false; });

"slow")

?? });

view demo： 4a. 可折叠的模式 #1 这是第一个可折叠的样式。

第一行将向<div class="accordion"> 内的第一个<H3> 添加一个 CSS class 为"active"的值。第二行刚是隐藏<div class="accordion">内非第一个< p >的内容。当 <h3> 被点击时，当前<p>下拉，而原先下拉的<p> 上提。
?? $(document).ready(function(){ ?? ?? ?? ?? ?? ?? ?? ?? $(".accordion h3:first").addClass("active"); $(".accordion p:not(:first)").hide(); $(".accordion h3").click(function(){ $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); });

?? });

view demo： 4b. 可折叠模式 #2 这个实例与#1非常类似，不过，它会让指定的面板像默认面板一样打开。在 CSS 样式表中，设置.accordion p 为 display:none。现在，如果你像默认打开的样式一样，打开第三个面板，你可以写$(".accordion2 p").eq(2).show(); (eq = equal)来实现它，需要注意的是起始点是"0"，而不是"1"，所以，第三个相应的是"2"，而不是"3"。
?? $(document).ready(function(){ ?? $(".accordion2 h3").eq(2).addClass("active");

?? ?? ?? ?? ?? ??

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

?? });

view demo： 5a. 鼠标经过激活效果 #1 这个将会实现一个非常漂亮的，当鼠标经过时出现渐变出现的效果。当鼠标经过菜单时，它会寻找紧接着的<em>，并在上方激活它的不透明度。

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

?? });

view demo： 5b. 鼠标经过激活 #2

这个实例会显示菜单中链接的 title 属性 attribute，让其以变数方式存在，并添加<em> 标签。第一行会添加一个空的<em>到菜单的<a>元素。当鼠标经过菜单链接时，它会显示 title 的属性，让它以"hoverText（隐藏）"的形式显示，并使<em>中的文字显示隐藏文本的值。

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

?? });

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

如果你想让 class="pane-list"的<ul>内的 <li> 可点击(整块)，你可以向 ".pane-list li"指派一个函数，使它被点击时，函数找到 <a>元素，重定向到它的 href 属性值。
? ? ? ? ? $(document).ready(function(){ $(".pane-list li").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); });

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

First line: 隐藏<div class="message_body">里第一个元素以后的元素

Second line: 隐藏所有第5个<li>后面的元素 Third part: 当<p class="message_head">被点击里，显示/隐藏<div class="message_body"> Fourth part: 当 <a class="collpase_all_message"> 被点击时，上提所有 <div class="message_body">的元素 Fifth part: 当 <a class="show_all_message"> 被点击，隐藏它，并显示 <a class="show_recent_only">，并下拉第5个<li>以后的元素 Sixth part: 当 <a class="show_recent_only"> 被点击时，隐藏它，并显示 <a class="show_all_message">，并上提第5个 <li>以后的元素
? ? ? ? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? $(document).ready(function(){ //hide message_body after the first one $(".message_list .message_body:gt(0)").hide(); //hide message li after the 5th $(".message_list li:gt(4)").hide(); //toggle message_body $(".message_head").click(function(){ $(this).next(".message_body").slideToggle(500) return false; }); //collapse all messages $(".collpase_all_message").click(function(){ $(".message_body").slideUp(500) //show all messages $(".show_all_message").click(function(){ $(this).hide() $(".show_recent_only").show() $(".message_list li:gt(4)").slideDown() return false; }); //show recent messages only $(".show_recent_only").click(function(){ $(this).hide() $(".show_all_message").show() $(".message_list li:gt(4)").slideUp() return false; }); return false; });

?? });

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

First line: 向<div class="pane"> 添加 "alt" class Second part: 当<a class="btn-delete">被点击，激活<div class="pane">的不透明度 Third part: 当<a class="btn-unapprove">被点击，首先让<div class="pane">显示黄色，然后变为白色，并添加类（addClass）"spam" Fourth part: 当<a class="btn-approve">被点击，首先让<div class="pane">显示绿色，然后变为白色，并移除类（removeClass）"spam" Fifth part: 当<a class="btn-spam">被点击，激活背景色为 red 并使其 opacity ="hide"
?? //don't forget to include the Color Animations plugin//<script

type="text/javascript" src="jquery.color.js"></script> ?? $(document).ready(function(){ ?? ?? ?? ?? ?? ?? ?? ?? ?? $(".pane:even").addClass("alt"); $(".pane .btn-delete").click(function(){ alert("This comment will be deleted!"); $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" },

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

"fast") .animate({ backgroundColor: "#ffffff" }, "slow")

?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ??

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

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

"fast") .animate({ opacity: "hide" }, "slow") return false; });

?? });

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

首先，添加一个<em>到 H2标签。当<p class=thumbs>内的元素被点击：

◆ 以可视的形式显示 href 属性的"largePath"路径 ◆ 以可视的形式显示 title 属性的"largeAlt" ◆ 代换<img id="largeImg">的 scr 属性内可视的"largePath"路径，并代换 alt 属性内可视的"largeAlt" ◆ 设置 em 内的内容(h2内) 为可视的 largeAlt
?? $(document).ready(function(){ ?? ?? ?? ?? ?? ?? ?? }); $("h2").append('<em></em>') $(".thumbs a").click(function(){ var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $("#largeImg").attr({ src: largePath, alt: largeAlt }); $("h2 em").html(" (" + largeAlt + ")"); return false; });

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

前三行代码必需是连续的，它只是一个<a>的 href 属性中的一个 CSS class。第二部分将会获取所有 href 中没有"" 和/或没有"#"的< a>元素，并添加 "external" class 和 target= "_blank"。
?? $(document).ready(function(){ ?? ?? ?? ?? ?? $("a[@href$=pdf]").addClass("pdf"); $("a[@href$=zip]").addClass("zip"); $("a[@href$=psd]").addClass("psd"); $("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]") .addClass("external")

??

.attr({ target: "_blank" });

?? });

view demo：

jQuery 的运行机制和设计理念
jQuery 是一个非常优秀的 JavaScript 库，与 Prototype,YUI,Mootools 等众多的 Js 类库相比，它剑走偏锋，从 Web 开发实用的角度出发，抛除了其它 Lib 中一些不实用的东西，为开发者提供了短小精悍的类库。其短小精悍，使用简单方便，性能高效，能极大地提高开发效率，是开发 Web 应用的最佳的辅助工具之一。因此大部分开发者在抛弃 Prototype 而选择 jQuery 来进行 Web 开发。一些开发人员在使用 jQuery 时，由于仅仅只知道 jQuery 文档中的使用方法，不明白 jQuery 的运行原理，时常会碰到许多的问题。这些问题大部分是使用不当而产生，极少数是 jQuery 的 Bug。如果不明白其运行机理和核心源码，我们也很难写出基于 jQuery 类库的高性能的程序出来。在调试基于 jQuery 的程序时，我们大部分时间都要跟踪进入 jQuery 对象分析其运行的状态，但是 jQuery 代码不像 Ext,YUI 那样中规中举，它的代码有点晦涩，难懂。也就说如果想用好 jQuery，一定要清楚其源码。 jQuery 的设计理念使用 jQuery 之前，我们都会问 jQuery 是什么？jQuery 是一个类库， prototype，和 mootools 等类库一样， Web 的 JavaScript 开发提供辅助功能。为那为什么要选用 jQuery 呢？在 jQuery 出现之前，Prototype，YUI 都是很成熟的 Js 的框架，而且是各有各的特点。为什么要抛弃它们，而使用后起之秀的 jQuery，它有什么优秀的特性吸引开发人员呢？回答这个问题，我们得明白 jQuery 的设计理念。回忆或想象一下，我们在 Web 开发中是如何使用 JavaScript？绝大多数时间都是采用 getElementById 在 Dom 文档中找到 DOM 元素，然后取值或设定值，采用 innerHTML 取其内容或设定其内容，或进行事件的监听(如 click)，在控制样式方面，我们会进行 height,width,display 等的改变，达到视觉上的效果，对于 Ajax 方面，也是取到数据在页面的某元素里面去添充内容。综之，我们就是在对 DOM 元素在进行操作。这个元素可能是一个或是多个。这个元素可能是 Document，Window 或 DOM 元素。这样我们的任务就是二大部分，一是找 DOM 元素，二是对 DOM 元素进行操作。对于用得熟练一点，不管是采用如 getElementById 这样的直接查找方式还是采用如 Element.lastChild 这类的间接查找方式不是很难的，对于 DOM 元素，DOM 的操作方面也是很丰富，也不是很难使用？那么要类库做什么用呢？最难的一个问题就是浏览器的兼容的问

题。所有的 JavaScript 框架都要解决这一个问题，同时简化 JavaScript 的本身自带的操作。 Prototype 可以说是开创了 Js 类库的先河，给我们耳目一新的感觉。它解决大部分的浏览器的兼容的问题。同时简化了原始函数名长难于记忆的经常书写出的错的问题（采用$(xx) 代替 getElementById），提供了 Ajax 的访问方式，扩展了 Array,Object,Function，Event 等 JavaScript 原生对象。但是这些还是不能满足开发的需要，比如在 DOM 树中寻找 DOM 元素，仅仅只能是通过元素的 ID，但是我们想要更方便的查找方法，同时还希望能有一个统一的入口，不要太泛，学习曲线过高或难于使用。 jQuery 就是从这里出发，把所有一切都统一在 jQuery 对象中。使用 jQuery 就是使用 jQuery 对象。其实 jQuery 开创性的工作就是如其名一样：query。它强大的查找功能令所有的框架都黯然失色。 jQuery 实质就是一个查询器。在查询器的基础还提供对查找到的元素进行操作的功能。这样说来 jQuery 就是查询和操作的统一。查询是入口，操作是结果。 jQuery 在实现上也可以分成两大部分，一部分是 jQuery 的静态方法，也可以称作实用方法或工具方法，通过 jQuery.xxx()的 jQuery 命名空间直接引用。第二部分是 jQuery 的实例方法，通过 jQuery(xx)或$(xx)来生成 jQuery 实例，然后通过这个实例来引用的方法。这部分的方法大多数是从采用静态方法代理来完成功能。真正的功能性的操作都在 jQuery 的静态方法中实现。这些功能细分起来，可以分成以下几个部分： 1、Selector，查找元素。这个查找不但包含基于 CSS1~CSS3的 CSS Selector 功能，还包含其对直接查找或间接查找而扩展的一些功能。 2、Dom 元素的属性操作。Dom 元素可以看作 html 的标签，对于属性的操作就是对于标签的属性进行操作。这个属性操作包含增加，修改，删除，取值等。 3、Dom 元素的 CSS 样式的操作。CSS 是控制页面的显示的效果。对 CSS 的操作那就得包含高度，宽度，display 等这些常用的 CSS 的功能。 4、Ajax 的操作。Ajax 的功能就是异步从服务器取数据然后进行相关操作。 5、Event 的操作。对 Event 的兼容做了统一的处理。 6、动画(Fx)的操作。可以看作是 CSS 样式上的扩展。 jQuery 对象的构建生成或构建一个 jQuery 对象其实就是构建并运行一个查询器（selector）。既然是查询，肯定会查找的结果（DOM 元素），之后才会有对这些结果进行操作。那么这些查找的结果存放在哪里呢？最好的地方当然是这个 jQuery 对象内面。查找的结果可能是一个元素，也有可以是多个元素如(NodeSet 的集合的形式)。也就是说 jQuery 对象内面有一个集合。这个集合存放查找到 DOM 元素。但是上一小节所提到 jQuery 对象是所有操作的统一入口，那么它的构建就不能只局限

于从 DOM 文档中查找到 DOM 元素，还有可能是从别的集合中转移过来的 Dom 元素，还有可能是从 HTML 的字符串生成的 DOM 元素。在 jQuery 文档中提供了四种方式： jQuery(expression,[context]) ， jQuery(html) ， jQuery(elements)，jQuery(callback)四种构寻 jQuery 对象的方式。其中 jQuery 可以用$代替。这四种是经常用到。其实 jQuery 的参数可以是任何的元素，都能构成 jQuery 对象。举几个例子： 1、$($(“P”))可以看出其参数可以是 jQuery 对象或 ArrayLike 的集合。 2、$()是$(document)的简写。 3、$(3)会把3放到 jQuery 对象中集合中。对于如$(3)这样的其中元素（如 ArrayLike 集合的元素）不是 DOM 元素，最好不要构建 jQuery 对象，jQuery 对象的方法都是针对于 DOM 对象的。不是很清楚其使用的话，很有可能会导致错误。上面讲了这么多，还是很难明白其原理的，现在从源码的角度细细分析：通过 jQuery(xxx)的调用实现没有生成对象，它的 this 是指向 Window 对象的。那么 jQuery 的那些实例方法是怎样继承过来的呢？看一下：
? ? ? var jQuery = window.jQuery = window.$ = function(selector, context) { return new jQuery.fn.init(selector, context); };

这是 jQuery 的总的入口， jQuery 对象实际上不是通过 new jQuery 而继承其 prototype （）的中的方法。jQuery 对象实际是 jQuery.fn.init 函数生成的对象。在里我们可以看出对于 jQuery.prototype 添加一些函数集的对象的意义不大。因为我们 new jQuery()是可以的，但是生成的 jQuery 对象在 return 时会被抛弃。所以最好不要用 new jQuery()来构建 jQuery 对象。 jQuery 对象其实就是 new jQuery.fn.init。那么 jQuery.fn.init.prototype 上就是挂着 jQuery 对象的操作方法。如
? jQueryjQuery.fn.init.prototype = jQuery.fn;

有时间可能会担心在589行就实现了把 jQuery.fn 中的函数放到 jQuery.fn.init.prototype 上去，那么之后的通过 jQuery.fn.extend 的方法怎么办呢？这里实际是对 jQuery.fn 的引用。在扩展 jQuery 的时候，只要把相关的函数 extend 到 jQuery.fn 就可以了。现在我们看一下 jQuery.fn.init 是怎么完成工作的：
? ? ? ? ? init : function(selector, context) { selectorselector = selector || document;// 确定 selector 存在 // 第一种情况 Handle $(DOMElement)单个 Dom 元素，忽略上下文 if (selector.nodeType) { this[0] = selector;

?? this.length = 1; ?? return this;

?? } ?? if (typeof selector == "string") {//selector 为 string ?? var match = quickExpr.exec(selector); ?? if (match && (match[1] || !context)) { ?? if (match[1])// 第二种情况处理$(html) -> $(array) ?? selector = jQuery.clean([match[1]], context); ?? else {// 第三种情况：HANDLE: $("#id")//处理$("#id") ?? var elem = document.getElementById(match[3]); ?? if (elem) { ?? // IE 会返回 name=id 的元素，如果是这样，就 document.find(s) ?? if (elem.id != match[3]) ?? return jQuery().find(selector); ?? // 构建一个新的 jQuery(elem) ?? return jQuery(elem); ?? } ?? selector = []; ?? } ?? } else ?? // 第四种情况：处理$(expr, [context])==$(content).find(expr) ?? return jQuery(context).find(selector); ?? } else if (jQuery.isFunction(selector)) // 第五种情况：处理$(function)七 Shortcut for document ready ?? return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector); ?? // 第六种情况：处理$(elements) ?? return this.setArray(jQuery.makeArray(selector)); ?? }

jQuery 1.4 实用技巧大放送
jQuery 1.4给开发者带来了很多值得兴奋的新特性，同时使用 jQuery 的人也越来越多，为了方便大家对 jQuery 的使用，下面列出了一些 jQuery 使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片等等。具体如下：禁止右键点击
? ? ? ? ? $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); });

隐藏搜索文本框文字
? $(document).ready(function() {

? ? ? ?? ??

$("input.text1").val("Enter your search text here"); textFill($('input.text1')); }); var originalvalue = input.val(); input.focus( function(){

?? function textFill(input){ //input focus text function

?? if( $.trim(input.val()) == originalvalue ){ input.val(''); } ?? }); ?? input.blur( function(){ ?? ?? }); ?? } if( $.trim(input.val()) == '' ){ input.val(originalvalue); }

在新窗口中打开链接
?? $(document).ready(function() { ?? //Example 1: Every link will open in a new window ?? $('a[href^=""]').attr("target", "_blank"); ?? //Example 2: Links with the rel="external" attribute will only open in a new window ?? $('a[@rel$='external']').click(function(){ ?? ?? }); ?? }); ?? // how to use ?? <A href="" rel=external>open link</A> this.target = "_blank";

检测浏览器注: 在版本 jQuery 1.4中，$.support 替换掉了$.browser 变量。
?? $(document).ready(function() { ?? // Target Firefox 2 and above ?? ?? ?? if ($.browser.mozilla && $.browser.version >= "1.8" ){ // do something }

?? // Target Safari ?? if( $.browser.safari ){ ?? // do something ?? } ?? // Target Chrome ?? if( $.browser.chrome){ ?? // do something ?? } ?? // Target Camino ?? if( $.browser.camino){

?? // do something ?? } ?? // Target Opera ?? if( $.browser.opera){ ?? // do something ?? } ?? // Target IE6 and below ?? if ($.browser.msie && $.browser.version <= 6 ){ ?? // do something ?? } ?? // Target anything above IE6 ?? if ($.browser.msie && $.browser.version > 6){ ?? // do something ?? } ?? });

预加载图片
?? $(document).ready(function() { ?? ?? ?? ?? } ?? }; ?? // how to use ?? $.preloadImages("image1.jpg"); ?? }); jQuery.preloadImages = function() { for(var i = 0; i").attr("src", arguments[i]);

页面样式切换
?? $(document).ready(function() { ?? $("a.Styleswitcher").click(function() { ?? ?? //swicth the LINK REL attribute with the value in A REL attribute }); ?? $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); ?? // how to use ?? // place this in your header ?? <LINK href="default.css" type=text/css rel=stylesheet> ?? // the links ?? <A class=Styleswitcher href="#" rel=default.css>Default Theme</A> ?? <A class=Styleswitcher href="#" rel=red.css>Red Theme</A> ?? <A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A> ?? });

列高度相同如果使用了两个 CSS 列，使用此种方式可以是两列的高度相同。

? ? ? ? ? ? ? ? ?

$(document).ready(function() { function equalHeight(group) { tallest = 0; group.each(function() { thisHeight = $(this).height(); if(thisHeight > tallest) { tallest = thisHeight; } });

?? group.height(tallest); ?? } ?? ?? ?? ?? ?? // how to use $(document).ready(function() { equalHeight($(".left")); equalHeight($(".right")); });

?? });

动态控制页面字体大小
?? $(document).ready(function() { ?? ?? ?? ?? ?? ?? // Reset the font size(back to default) var originalFontSize = $('html').css('font-size'); $(".resetFont").click(function(){ $('html').css('font-size', originalFontSize); // Increase the font size(bigger font0 $(".increaseFont").click(function(){

?? });

?? var currentFontSize = $('html').css('font-size'); ?? var currentFontSizeNum = parseFloat(currentFontSize, 10); ?? var newFontSize = currentFontSizeNum*1.2; ?? $('html').css('font-size', newFontSize); ?? return false; ?? }); ?? // Decrease the font size(smaller font) ?? $(".decreaseFont").click(function(){ ?? var currentFontSize = $('html').css('font-size'); ?? var currentFontSizeNum = parseFloat(currentFontSize, 10); ?? var newFontSize = currentFontSizeNum*0.8; ?? $('html').css('font-size', newFontSize); ?? ?? return false; });

?? });

返回页面顶部功能

?? $(document).ready(function() { ?? $('a[href*=#]').click(function() { ?? ?? ?? ?? ?? if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var $target = $(this.hash); || $('[name=' + this.hash.slice(1) +']'); if ($target.length) {

?? $target = $target.length && $target

?? var targetOffset = $target.offset().top; ?? $('html,body') ?? ?? ?? } ?? } ?? }); ?? // how to use ?? // place this where you want to scroll to ?? <A name=top></A> ?? // the link ?? <A href="#top">go to top</A> ?? }); .animate({scrollTop: targetOffset}, 900); return false;

获得鼠标指针 XY 值
?? ?? ?? ?? ?? }); ?? // how to use ?? <DIV id=XY></DIV> ?? }); $(document).ready(function() { $().mousemove(function(e){ //display the x and y axis values inside the div with the id XY $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);

验证元素是否为空
?? ?? ?? ?? } ?? }); $(document).ready(function() { if ($('#id').html()) { // do something

替换元素
?? $(document).ready(function() { ?? $('#id').replaceWith(' ?? <DIV>I have been replaced</DIV>

??

);

?? });

jQuery 延时加载功能
? ? ? ? ? }); $(document).ready(function() { window.setTimeout(function() { // do something }, 1000);

移除单词功能
? ? ? ? $(document).ready(function() { var el = $('#id'); el.html(el.html().replace(/word/ig, "")); });

验证元素是否存在于 jQuery 对象集合中
?? $(document).ready(function() { ?? ?? ?? } ?? }); if ($('#id').length) { // do something

使整个 DIV 可点击
?? $(document).ready(function() { ?? ?? ?? ?? }); ?? // how to use ?? <DIV><A href="index.html">home</A></DIV> ?? }); ?? ID 与 Class 之间转换当改变 Window 大小时，在 ID 与 Class 之间切换 ?? $(document).ready(function() { ?? ?? ?? ?? ?? ?? ?? ?? } ?? $(window).resize(checkWindowSize); } else { $('body').removeClass('large'); } function checkWindowSize() { if ( $(window).width() > 1200 ) { $('body').addClass('large'); $("div").click(function(){ //get the url from href attribute and launch the url window.location=$(this).find("a").attr("href"); return false;

?? });

克隆对象
?? $(document).ready(function() { ?? ?? var cloned = $('#id').clone(); // how to use

?? <DIV idid=id></DIV> ?? });

使元素居屏幕中间位置
?? $(document).ready(function() { ?? ?? ?? ?? ?? ?? } ?? $("#id").center(); ?? }); jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", this.css("left", return this; ( ( $(window).height() $(window).width() this.height() this.width() ) ) / /

2+$(window).scrollTop() + "px"); 2+$(window).scrollLeft() + "px");

写自己的选择器
?? $(document).ready(function() { ?? ?? ?? ?? } $.extend($.expr[':'], { moreThen1000px: function(a) { return $(a).width() > 1000;

?? }); ?? $('.box:moreThen1000px').click(function() { ?? ?? ?? ?? }); // creating a simple js alert box alert('The element that you have clicked is over 1000 pixels wide'); });

统计元素个数
?? $(document).ready(function() { ?? $("p").size(); ?? });

使用自己的 Bullets
?? $(document).ready(function() { ?? ?? $("ul").addClass("Replaced"); $("ul > li").prepend("? ");

?? ??

// how to use ul.Replaced { list-style : none; }

?? });

引用 Google 主机上的 jQuery 类库
?? //Example 1 ?? <SCRIPT src=""></SCRIPT> ?? <SCRIPT type=text/javascript> ?? ?? google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() {

?? // do something ?? }); ?? </SCRIPT><SCRIPT src="" type=text/javascript></SCRIPT> ?? // Example 2:(the best and fastest way) ?? <SCRIPT src="" type=text/javascript></SCRIPT>

禁用 jQuery（动画）效果
?? $(document).ready(function() { ?? jQuery.fx.off = true; ?? });

与其他 JavaScript 类库冲突解决方案
?? $(document).ready(function() { ?? ?? var $jq = jQuery.noConflict(); $jq('#id').show();

?? });