JQuery

 

一、简介

1.1、概述

随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、 jQuery、mootools、Bindows以及国内的JSVM框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。

jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript™ 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

它具有如下一些特点：

1. 代码简练、语义易懂、学习快速、文档丰富。
2. jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
3. jQuery支持CSS1-CSS3,以及基本的xPath。
4. jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5. 可以很容易的为jQuery扩展其他功能。
6. 能将JS代码和HTML代码完全分离，便于代码和维护和修改。
7. 插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。

jQuery的设计会改变你写JavaScript代码的方式，降低你学习使用JS操作网页的复杂度，提高网页JS开发效率，无论对于js初学者还是资深专家，jQuery都将是您的首选。

jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不同的Web应用程序中。

官方站点：http://jquery.com/  中文站点：http://jquery.org.cn/

 

四、语法总结和注意事项

1、关于页面元素的引用

通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。

普通的dom对象一般可以通过$()转换成jquery对象。

如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下几种写法都是正确的：

$("#msg").html();

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项

对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而 get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：

$("div").eq(2).html();              //调用jquery对象的方法

$("div").get(2).innerHTML;       //调用dom的方法属性

4、同一函数实现set和get

Jquery中的很多方法都是如此，主要包括如下几个：

$("#msg").html();              //返回id为msg的元素节点的html内容。

$("#msg").html("<b>new content</b>");      

//将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text();              //返回id为msg的元素节点的文本内容。

$("#msg").text("<b>new content</b>");      

//将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>

$("#msg").height();              //返回id为msg的元素的高度

$("#msg").height("300");       //将id为msg的元素的高度设为300

$("#msg").width();              //返回id为msg的元素的宽度

$("#msg").width("300");       //将id为msg的元素的宽度设为300

$("input").val(");       //返回表单输入框的value值

$("input").val("test");       //将表单输入框的value值设为test

$("#msg").click();       //触发id为msg的元素的单击事件

$("#msg").click(fn);       //为id为msg的元素单击事件添加函数

同样blur,focus,select,submit事件都可以有这两种调用方法

 

5、集合处理功能

对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。

包括两种形式：

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})      

//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})      

//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})             

//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能

$.extend({

       min: function(a, b){return a < b?a:b; },

       max: function(a, b){return a > b?a:b; }

});       //为jquery扩展了min,max两个方法

使用扩展的方法（通过“$.方法名”调用）：

alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的连写

所谓连写，即可以对一个jquery对象连续调用各种不同的方法。

例如：

$("p").click(function(){alert($(this).html())})

.mouseover(function(){alert('mouse over event')})

.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

8、操作元素的样式

主要包括以下几种方式：

$("#msg").css("background");              //返回元素的背景颜色

$("#msg").css("background","#ccc")       //设定元素背景为灰色

$("#msg").height(300); $("#msg").width("200");       //设定宽高

$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式

$("#msg").addClass("select");       //为元素增加名称为select的class

$("#msg").removeClass("select");       //删除元素名称为select的class

$("#msg").toggleClass("select");       //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能

Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。

如：

$("#msg").click(function(){alert("good")})    //为元素添加了单击事件

$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})   //为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件：

（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

//当鼠标放在表格的某行上时将class置为over，离开时置为out。

$("tr").hover(function(){

$(this).addClass("over");

},

       function(){

       $(this).addClass("out");

});

（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){alert("Load Success")})

//页面加载完毕提示“Load Success”,不同于onload事件，onload需要页面内容加载完毕（图片等），而ready只要页面html代码下载完毕即触发。与$(fn)等价

（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

       //每次点击时轮换添加和删除名为selected的class。

       $("p").toggle(function(){

              $(this).addClass("selected");  

       },function(){

              $(this).removeClass("selected");

       });

（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。

例如：

       $("p").trigger("click");       //触发所有p元素的click事件

（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定

从每一个匹配的元素中（添加）删除绑定的事件。

例如：

$("p").bind("click", function(){alert($(this).text());}); 

//为每个p元素添加单击事件

$("p").unbind();       //删除所有p元素上的所有事件

$("p").unbind("click")       //删除所有p元素上的单击事件

 

10、几个实用特效功能

其中toggle()和slidetoggle()方法提供了状态切换功能。

如toggle()方法包括了hide()和show()方法。

slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法

$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。

$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。

如

$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });

等价于：

var tempArr=[0,1,2];

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

       alert("Item #"+i+": "+tempArr[i]);

}

也可以处理json数据，如

$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });

结果为：

Name:name, Value:John

Name:lang, Value:JS

$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。

如：

$.extend(settings, options);      

//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。

var settings = $.extend({}, defaults, options);

//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。

可以有多个参数（合并多项并返回）

$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。

如：

var tempArr=$.map( [0,1,2], function(i){ return i + 4; });

tempArr内容为：[4,5,6]

var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });

tempArr内容为：[2,3]

$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。

如：

$.merge( [0,1,2], [2,3,4] )       //返回[0,1,2,3,4]

$.trim(str)：删除字符串两端的空白字符。

如：

$.trim("  hello, how are you?   ");    //返回"hello,how are you? "

12、解决自定义方法或其他类库与jQuery的冲突

很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。

使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。

如：

jQuery.noConflict();

// 开始使用jQuery

jQuery("div   p").hide();

// 使用其他库的 $()

$("content").style.display = 'none';

 

 

jQuery 是一套 JavaScript 的 Library，因此，你必須稍具 JavaScript 的基礎，至少寫過一些 JavaScript 才比較容易上手，並且看得懂後續的教學。jQuery 的核心程式並非包山包海、什麼都可以幫你做，相反地，jQuery 主要是用在 DOM 文件的操作，包含「快速選取元素(Element)」並且「做一些事情」，快速選取元素可以讓你一次選取單一或多個的元素，然後你可以將這些被選取的元素做一些改變，例如隱藏、顯示等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能，讓你更容易操作遠端文件及事件。

 

以上看得出來 jQuery 是針對 JavaScript 內在不足的地方加以增進，你仍然需要自己寫一些程式來完成你需要的各種功能，不同的是，正確地使用了 jQuery 可以讓你的程式碼更精簡、更優雅的表達出來，這在後續的範例中可以看到，更重要的是，應該也會讓你更快速的開發出你要的功能。

 

或許你會想說，在這個 Web 2.0 的時代，我需要多點漂亮、絢麗的 Widgets 來裝飾我的網站，就像 Yahoo UI 或 ExtJS 提供的那些功能一樣，jQuery 有嗎？其實 jQuery 的設計上有考慮到這類擴展性的問題，目前 jQuery 的 plugin 已經有上百個了，你也不一定要完全自己動手寫，上 jQuery 官方網站找找看，或許你需要的功能別人已經幫你做好了。以 UI 來講， jQuery 跟 UI 相關的 plugins 已經做過了一些整合，目前獨立發佈為 jQuery UI (http://ui.jquery.com/)，如果你之前沒聽過 jQuery UI，建議你上去網站上看一下展示的範例，嗯，雖然可能還有一些 bug 存在，但是整體來說已經有相當的水準了，或許你會對 jQuery 更有興趣了。

 

以下的教學內容，主要是擷取了 jQuery 作者 John Resig 的一篇簡報 "Building Interactive

Prototypes with jQuery" 的內容加以調整並註解，希望能以比較忠實的方式來呈現 jQuery 的設計含意。

 

jQuery 怎麼用來「快速選取元素」並且「做一些事情」呢？請看看程式碼：

1. $("div").addClass("special");  

錢記號 $ 是 jQuery 的物件，使用 $("div") 就是用 jQuery 來選取元素，這個範例可以選取文件內所有的 <div> 元素。後面接著的 .addClass("special") 就是用來做一些事情，這個範例是將先前所選取到的所有元素都加上一個名為 "special" 的 class。也就是透過 $("div").addClass("special") 的語法，可以讓你一次幫文件上有的 <div> 元素都加入 special 的 class。

 

請注意喔，剛剛的例子可以針對已選取的多個元素做批次的操作，也就是說如果文件上有三個 <div>，那就會一次找出三個 <div> 並且全部套用後續的動作。這和你原本自己使用 JavaScript 來寫程式有很大的差異，原本自己寫可能會需要用到迴圈之類的語法，而 jQuery 的函數大多具有批次處理的功能，光是這點就可以讓你的程式更簡潔了。

 

關於錢記號 $ 將會是你學習及使用 jQuery 的過程中最重要的物件（或者你要把 $ 當成一個函數也可以，事實上也是這樣)，使用方式就像剛剛你看到的，用來找元素用的，把參數帶入即可。或許你不習慣錢記號也可以當成函數名稱，那麼你也可 以用 jQuery 這個名字，錢記號其實是被當成 jQuery 的縮寫，讓你的函數看起來更簡潔一些，如果你要自己設定另外一個縮寫，例如 $j，也是可以的，這部份後續再解釋，先看看已下的範例，結果將會和上面的範例是一模一樣的：

1. jQuery("div").addClass("special");  

 

前面的例子使用 $("div") 來選取元素，帶入的參數 div 是表示你要找的元素，這是 CSS 選擇器(CSS Selector) 的語法，就如同 CSS 在做排版和外觀所使用的選擇器語法一樣。jQuery 所支援的 CSS Selector 包含了 CSS 1、CSS2 以及仍未正式發佈的 CSS3，此外透過 plugin 還可支援常用的 XPath 語法，善用這些 CSS、XPath 語法就可以很容易地找到你要處理的網頁元素，底下來看看更多的範例。

 

這是一段原始的 HTML：

1. <div id="body">  
2.   <h2>Some Header</h2>  
3.   <div class="contents">  
4.     <p>...</p>  
5.     <p>...</p>  
6.   </div>  
7. </div>  

以下用一連串的範例，以藍色字體展示一些基本的語法並且以深色字顯示文件中會被選取的元素。

 

$("div")

<div id="body">

  <h2>Some Header</h2>

  <div class="contents">

    <p>...</p>

    <p>...</p>

  </div>

</div>

解釋：選取所有 <div>

 

 

$("#body")

<div id="body">

  <h2>Some Header</h2>

  <div class="contents">

    <p>...</p>

    <p>...</p>

  </div>

</div>

解釋：選取 id 為 body 的元素

 

 

$("div#body")

<div id="body">

  <h2>Some Header</h2>

  <div class="contents">

    <p>...</p>

    <p>...</p>

  </div>

</div>

解釋：選取 id 為 body 的 <div>

 

 

$("div.contents p")

<div id="body">

  <h2>Some Header</h2>

  <div class="contents">

    <p>...</p>

    <p>...</p>

  </div>

</div>

解釋：選取 class 為 contents 的 <div> 所包住的所有下層的 <p>

 

 

$("div > div")

<div id="body">

  <h2>Some Header</h2>

  <div class="contents">

    <p>...</p>

    <p>...</p>

  </div>

</div>

解釋：選取被 <div> 包住的下一層 <div>

 

 

$("div:has(div)")

<div id="body">

  <h2>Some Header</h2>

  <div class="contents">

    <p>...</p>

    <p>...</p>

  </div>

</div>

解釋：和前一個範例相反，這邊是選取至少有包住一個 <div> 的 <div>

 

前一段的教學中介紹了如何使用 jQuery 來選取元素，其中大部份的語法都是可以讓你快速地一次選取多個元素，接下來當然就是要來對這些選取到的元素做些改變囉。透過 jQuery 內建的函數，你可以：

• 對 DOM 進行操作，例如對文件節點的新增或修改
• 添加事件處理
• 做一些基本的視覺效果，例如隱藏、顯示、下拉顯示、淡出淡入等等
• 使用 AJAX 傳送表單內容或取得遠端文件

 

[範例1] 選取所有有 target 屬性的 <a>，並且在其節點下加入一段文字。

1. $("a[target]").append(" (Opens in New Window)");  

這是一段原始的 HTML :

1. <a href="http://jsgears.com">jsGears</a>  
2. <a href="http://google.com" target="_blank">Google</a>  
3. <a href="http://amazon.com" target="_blank">Amazon</a>  

選取有 target 屬性並加入文字後的結果：

1. <a href="http://jsgears.com">jsGears</a>  
2. <a href="http://google.com" target="_blank">Google (Opens in New Window)</a>  
3. <a href="http://amazon.com" target="_blank">Amazon (Opens in New Window)</a>  

[範例2] 選取 id 為 body 的元素，並且修改兩個 css 屬性。

1. $("#body").css({  
2.   border: "1px solid green",  
3.   height: "40px"  
4. });  

這是一段原始的 HTML :

1. <div id="body">  
2.   ...  
3. </div>  

選取 id 為 body 的元素並修改 css 後的結果(示意)：

1. <div id="body" style="border: 1px solid green; height: 40px">  
2.   ...  
3. </div>  

[範例3] 在網頁上的表單送出時加入一個判斷，如果 username 這個欄位是空值的話，就顯示 help 這個區塊內的文字。

1. $("form").submit(function() {  
2.   if ($("input#username").val() == "")  
3.     $("span.help").show();  
4. });  

可作用在類似以下的 HTML，一開始 span.help 是隱藏的，如果沒有輸入 username，才會顯示：

1. <style type="text/css">  
2.   .help {display: none}  
3. </style>  
4. <form>  
5.   <label for="username">請輸入大名</label>  
6.   <input type="text" id="username" name="username" />  
7.   <span class="help">這個欄位必填喔</span>  
8. </form>  

[範例4] 當 user 點選 id 為 open 的連結時，顯示 id 為 menu 的區塊，並回傳 false 避免瀏覽器真的換頁。

1. $("a#open").click(function() {  
2.   $("#menu").show();  
3.   return false;  
4. });  

可作用在類似以下的 HTML：

1. <style type="text/css">  
2.   #menu {display: none}  
3. </style>  
4. <a id="open" href="#">控制面板</a>  
5. <ul id="menu">  
6.   <li><a href="#1">控制面板首頁</a></li>  
7.   <li><a href="#2">編輯個人資料</a></li>  
8.   <li><a href="#3">個人空間管理</a></li>  
9. </ul>  

[範例5] 將 id 為 menu 的區塊以下拉布幕的動態效果快速顯示：

1. $("#menu").slideDown("fast");  

可作用在類似以下的 HTML，原本隱藏的選單會以動態下拉的方式顯示出來：

1. <style type="text/css">  
2.   #menu {display: none}  
3. </style>  
4. <ul id="menu">  
5.   <li><a href="#1">控制面板首頁</a></li>  
6.   <li><a href="#2">編輯個人資料</a></li>  
7.   <li><a href="#3">個人空間管理</a></li>  
8. </ul>  

[範例6] 將所有的 <div> 漸變為寬 300px、文字與邊界寬 20px

1. $("div").animate({  
2.     width: '300px',  
3.     padding: '20px'  
4.   }, 'slow');  

可作用在類似以下的 HTML：

1. <div style="width: 100px; border: solid 1px red;">  
2.   Hello world!  
3. </div>  

PS. jQuery 核心程式的 animate 函數能改變的元素屬性並不多，但是可以透過其他 plugin 提供更多的動態效果。

 

[範例7] 動態效果的 callback 的範例，將所有的 <div> 以 0.5 秒的動態效果隱藏後，再以 0.5 秒的動態效果顯示。hide() 的第二個參數就是一個 callback 函數，其中 $(this) 是原本程式所處理的各個元素。

1. $("div").hide(500, function(){  
2.   // $(this) 是每一個各別的 <div>  
3.   $(this).show(500);  
4. });  

可作用在類似以下的 HTML：

1. <div style="width: 100px; border: solid 1px red;">  
2.   Hello world!  
3. </div>  
4. <div style="width: 100px; border: solid 1px red;">  
5.   jsGears.com!  
6. </div>  

[範例8] 取得 sample.html 並將找出文件內所有 <div> 下一層的 <h1> 填入原本文件 id 為 body 的元素內

1. $("#body").load("sample.html div > h1");  

這是一段原始的 HTML :

1. <div id="body"></div>  

sample.html 的片段：

1. <div>  
2.   <h1>Hello world!</h1>  
3.   <h2>This is H2</h2>  
4.   <h1>jsGears.com!</h1>  
5. </div>  

執行程式碼之後的結果：

1. <div id="body">  
2.   <h1>Hello world!</h1>  
3.   <h1>jsGears.com!</h1>  
4. </div>  

[範例9] 透過 getJSON() 取得 JSON 格式的資料，並透過 callback 函數處理資料

1. $.getJSON("test.json", function(data){  
2.   for (var idx in data)  
3.     $("#menu").append("<li>" + data[idx] + "</li>");  
4. });  

這是一段原始的 HTML：

1. <ul id="menu">  
2.   <li>項目1</li>  
3. </ul>  

test.json 的內容：

1. [  
2.   "Hello world!",   
3.   "jsGears.com!"  
4. ]  

執行程式碼之後的結果：

1. <ul id="menu">  
2.   <li>項目1</li>  
3.   <li>Hello world!</li>  
4.   <li>jsGears.com!</li>  
5. </ul>  

 

jQuery 很重要的一個特性是可以連續地使用函數(Chaining)，當你選取了一個或一組的元素後，可以連續對這些元素進行多個處理。以下範例會將所有的 <div> 隱藏，修改文字顏色為藍色，再將 <div> 以下拉布幕的效果顯示出來：

1. $("div").hide();  
2. $("div").css("color", "blue");  
3. $("div").slideDown();  

這樣的三行程式碼可以用以下一行的程式碼取代，結果會是完全相同的：

1. $("div").hide().css("color", "blue").slideDown();  

是 否感到很神奇呢？在 jQuery 的架構設計上，大部分的函數都會在處理完該做的事情後，再將原本傳入的元素給回傳回去，因此函數都可以連續這樣一個接著一個的使用。還記得一開始所說的 jQuery 可以讓你的程式碼更精簡嗎？看了上面的一些範例後，現在應該有點感覺了吧。

 

講到 jQuery 的函數連續使用，有兩個很重要的函數必須在此介紹一下。第一個是 end()，這個函數執行後，會回傳「前一組找到的元素」。另一個是 find()，這個函數的用法如同使用 $() 找文件內的元素一樣是帶入 CSS 選擇器，執行後回傳找到的元素，不同的是 $() 是找整個文件，而 find() 是根據先前找到的元素再找其底下的元素，像是一個再過濾的功能。

1. $("ul.open")                // [ ul, ul, ul ]  
2.   .children("li")           // [ li, li, li ]  
3.   .addClass("open")         // [ li, li, li]  
4.   .end()                    // [ ul, ul, ul ]  
5.   .find("a")                // [ a, a, a ]  
6.   .click(function(){  
7.     $(this).next().toggle();  
8.     return false;  
9.   })                        // [ a, a, a ]  
10.   .end();                   // [ ul, ul, ul ]  

上面這一段程式碼連續使用多個函數，且透過 end() 和 find() 來分別對不同的元素進行操作，詳細的步驟解釋如下：

• 找出文件內所有 class 為 open 的 <ul>
• 過濾出下一層的所有 <li>
• 對這些 <li> 新增一個 class
• 回前一次搜尋的結果，也就是所有的 <ul>
• 再找出底下所有的 <a>
• 對 <a> 新增事件處理
• 回前一次搜尋的結果

 

有些時候，我們必須在網頁下載完成之後立即執行一些程式，可能是想要把游標放在預設的輸入框，或是馬上顯示一些歡迎訊息等等。過去你可能用過 window.onload 來處理，或是直接在 <body> 標籤上加入 onload 的事件處理函數，但是 jQuery 提供了另一種選擇，請參考下面的範例：

1. $(document).ready(function() {  
2.   alert('您好，歡迎來到 jsGears.com ～');  
3. });  

先透過 $() 取得 document 物件，接著使用 ready() 帶入一個函數，就可以在網頁下載完成後立即執行。jQuery 的 document ready 事件是模擬 W3C DOM 標準的 DOMContentLoaded 事件，DOMContentLoaded 和 window.onlad 的差異在於前者是在 DOM 文件下載完成後觸發，而後者是文件和所有文件內的元件，包含圖檔等等全部下載完成後才會觸發，因此通常 window.onload 的發生時間要比 DOMContentLoaded 晚一點(如果你的網頁內確實有用到一些圖檔)，有時候你所需要執行的程式並不需要等所有圖檔都下載完成，因此，放到 DOMContentLoaded 事件內處理是比較合適的。但是，IE 目前的版本 6 和 7 並不支援 DOMContentLoaded 事件，所以 jQuery 用了一些技巧來達到模擬 DOMContentLoaded 的事件，而成果就是上面看到的這個例子的用法。

 

DOMContentLoaded 和 window.onlad 的另一個差異在於 window.onload 並沒有辦法多次指定不同的函數來執行，最後指定的那個函數會複寫掉先前的，例如以下範例：

1. window.onload = function() {  
2.   alert('Hello world!');  
3. };  
4. window.onload = function() {  
5.   alert('您好，歡迎來到 jsGears.com ～');  
6. };  

上面的例子在同一個頁面上用了兩次 window.onload，結果將會是後面的函數會被執行到，前面的函數將消失無影蹤，當然，只要你稍具 JavaScript 處理 Event 的技巧，真要連續指定兩個函數來執行也不是太困難，不過用 jQuery 會更容易，看看以下相同的範例：

1. $(document).ready(function() {  
2.   alert('Hello world!');  
3. });  
4. $(document).ready(function() {  
5.   alert('您好，歡迎來到 jsGears.com ～');  
6. });  

相同的例子使用 jQuery 的 document ready 函數，則帶入的兩個函數都會被執行到，很簡單吧，完全不需用到什麼技巧。再提供一個精簡的語法， document ready 函數也可以這樣用：

1. $(function() {  
2.   alert('您好，歡迎來到 jsGears.com ～');  
3. });  

直接把函數放到 $() 裡面就可以了，是不是超精簡啊。

 

前面用到了很多 $()，包含剛介紹的 document ready 及先前的選取功能，都是透過這個簡短的錢記號來達成，其實這個錢記號是 「jQuery」這個物件的縮寫，也就是剛剛所有你看到用 $() 的地方，都可以改寫成用 jQuery()，例如：

1. jQuery(document).ready(function() {  
2.   jQuery("div").addClass("special");  
3. });  

沒事應該不會有人想用比較長的名稱來寫程式，簡短的 $ 不是挺好的。但是，某些情況可能你無法使用 $()，例如你進行中的專案已經使用了其他的 JavaScript Library，而 $ 這個名稱已經被使用了，例如另一套知名的 prototype，也使用了 $() 這樣的函數名稱，這時如果你需要再搭配使用 jQuery 的話，jQuery 本身有提供一個方式來避免 $() 的衝突：

1. jQuery.noConflict();  
2. jQuery(document).ready(function() {  
3.   jQuery("div").addClass("special");  
4. });  

使用 jQuery 前，先下達 jQuery.noConflict() 這樣就可以避免掉 $() 衝突的問題，接著再用 jQuery 物件來進行操作即可。此外，你也可以自行幫 jQuery 這個物件設定另一個別名，例如：

1. var $j = jQuery.noConflict();  
2. $j(document).ready(function() {  
3.   $j("div").addClass("special");  
4. });  

使用一個變數來接 jQuery.noConflict() 的回傳值，這個變數就可以做為 jQuery 的一個別名，透過這個別名不但避免了和其他 Library 錢記號的衝突，也可以將函數名稱縮短，算是 jQuery 一個蠻貼心的設計。

 

 

禁止右键点击

 

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

隐藏搜索文本框文字

 

1. $(document).ready(function() {     
2. $("input.text1").val("Enter your search text here");     
3.    textFill($('input.text1'));     
4. });     
5. function textFill(input){ //input focus text function     
6.    var originalvalue = input.val();     
7.    input.focus( function(){     
8.  
9. if( $.trim(input.val()) == originalvalue ){ input.val(''); }     
10. });     
11.  
12. input.blur( function(){     
13.     if( $.trim(input.val()) == '' ){ input.val(originalvalue); }     
14. });     
15. }    

在新窗口中打开链接

 

1. $(document).ready(function() {     
2. //Example 1: Every link will open in a new window     
3. $('a[href^="http://"]').attr("target", "_blank");     
4. //Example 2: Links with the rel="external" attribute will only open in a new window     
5. $('a[@rel$='external']').click(function(){     
6.      this.target = "_blank";     
7. });     
8.  
9. });     
10. // how to use     
11. <A href="http://www.opensourcehunter.com" rel=external>open link</A> 

检测浏览器

注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量。

 

1. $(document).ready(function() {     
2. // Target Firefox 2 and above     
3.    if ($.browser.mozilla && $.browser.version >= "1.8" ){     
4.     // do something     
5.  
6.    }     
7. // Target Safari     
8. if( $.browser.safari ){     
9. // do something     
10. }     
11. // Target Chrome     
12. if( $.browser.chrome){     
13. // do something     
14.  
15. }     
16. // Target Camino     
17. if( $.browser.camino){     
18. // do something     
19.  
20. }     
21. // Target Opera     
22. if( $.browser.opera){     
23. // do something     
24.  
25. }     
26. // Target IE6 and below     
27. if ($.browser.msie && $.browser.version <= 6 ){     
28. // do something     
29.  
30. }     
31. // Target anything above IE6     
32. if ($.browser.msie && $.browser.version > 6){     
33. // do something     
34. }     
35. });   

预加载图片

 

1. $(document).ready(function() {     
2.  
3.   jQuery.preloadImages = function()     
4.   {     
5.      for(var i = 0; i").attr("src", arguments[i]);    
6.  
7.   }    
8. };    
9. // how to use    
10. $.preloadImages("image1.jpg");     
11. });   

页面样式切换

 

1. $(document).ready(function() {     
2.  
3. $("a.Styleswitcher").click(function() {     
4.  //swicth the LINK REL attribute with the value in A REL attribute     
5. $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));     
6.  
7.   });     
8.  
9. // how to use     
10. // place this in your header     
11.  
12. <LINK href="default.css" type=text/css rel=stylesheet>     
13. // the links     
14. <A class=Styleswitcher href="#" rel=default.css>Default Theme</A>     
15. <A class=Styleswitcher href="#" rel=red.css>Red Theme</A>     
16. <A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>     
17. });   

 

列高度相同

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

 

1. $(document).ready(function() {     
2.   function equalHeight(group) {     
3.   tallest = 0;     
4.   group.each(function() {     
5.  
6.   thisHeight = $(this).height();     
7.  
8.   if(thisHeight > tallest) {     
9.  
10.      tallest = thisHeight;     
11.  
12.   }     
13.  
14. });     
15.  
16. group.height(tallest);     
17. }     
18.  // how to use     
19.  $(document).ready(function() {     
20.  
21.    equalHeight($(".left"));     
22.  
23.    equalHeight($(".right"));     
24.  
25.   });     
26.  
27. });   

动态控制页面字体大小

 

1. $(document).ready(function() {     
2.  
3.   // Reset the font size(back to default)     
4.   var originalFontSize = $('html').css('font-size');     
5.  
6.   $(".resetFont").click(function(){     
7.   $('html').css('font-size', originalFontSize);     
8.  
9. });     
10.  
11.   // Increase the font size(bigger font0     
12.   $(".increaseFont").click(function(){     
13.  
14. var currentFontSize = $('html').css('font-size');     
15. var currentFontSizeNum = parseFloat(currentFontSize, 10);     
16. var newFontSize = currentFontSizeNum*1.2;     
17.  
18. $('html').css('font-size', newFontSize);     
19.  
20.    return false;     
21.  
22. });     
23.  
24. // Decrease the font size(smaller font)     
25. $(".decreaseFont").click(function(){     
26.  
27. var currentFontSize = $('html').css('font-size');     
28. var currentFontSizeNum = parseFloat(currentFontSize, 10);     
29. var newFontSize = currentFontSizeNum*0.8;     
30.  
31. $('html').css('font-size', newFontSize);     
32.   return false;     
33.   });     
34. });   

返回页面顶部功能

 

1. $(document).ready(function() {     
2. $('a[href*=#]').click(function() {     
3.    if (location.pathname.replace(/^///,'') == this.pathname.replace(/^///,'')     
4.    && location.hostname == this.hostname) {     
5.    var $target = $(this.hash);     
6. $target = $target.length && $target     
7.   || $('[name=' + this.hash.slice(1) +']');     
8.   if ($target.length) {     
9.  
10. var targetOffset = $target.offset().top;     
11.  
12. $('html,body')     
13.   .animate({scrollTop: targetOffset}, 900);     
14.   return false;     
15. }     
16.  
17. }     
18. });     
19.  
20. // how to use     
21. // place this where you want to scroll to     
22.  
23. <A name=top></A>   
24.     
25. // the link     
26. <A href="#top">go to top</A>     
27. });   

获得鼠标指针XY值

 

1.    $(document).ready(function() {     
2.    $().mousemove(function(e){     
3.      //display the x and y axis values inside the div with the id XY     
4.    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);     
5.  
6. });     
7.  
8. // how to use     
9.  
10. <DIV id=XY></DIV>     
11. });   

验证元素是否为空

 

1.   $(document).ready(function() {     
2.     if ($('#id').html()) {     
3.     // do something     
4.   }     
5. });   

替换元素

 

1. $(document).ready(function() {     
2. $('#id').replaceWith('    
3.   <DIV>I have been replaced</DIV>    
4.   );     
5. });   

 

jQuery延时加载功能

 

1. $(document).ready(function() {     
2.  
3.     window.setTimeout(function() {     
4.  
5.     // do something     
6.  
7.      }, 1000);     
8.  
9. });   

移除单词功能

 

1. $(document).ready(function() {     
2.  
3.    var el = $('#id');     
4.  
5.    el.html(el.html().replace(/word/ig, ""));     
6.  
7. });   

验证元素是否存在于jQuery对象集合中

 

1. $(document).ready(function() {     
2.  
3.    if ($('#id').length) {     
4.  
5.    // do something     
6.  
7. }     
8. });   

使整个DIV可点击

 

1. $(document).ready(function() {     
2.  
3.   $("div").click(function(){     
4.  
5.   //get the url from href attribute and launch the url     
6.  
7.      window.location=$(this).find("a").attr("href"); return false;     
8.  
9. });     
10.  
11. // how to use     
12.  
13. <DIV><A href="index.html">home</A></DIV>     
14. });    
15.  
16. ID与Class之间转换当改变Window大小时，在ID与Class之间切换  
17.  
18. $(document).ready(function() {     
19.  
20.    function checkWindowSize() {     
21.    if ( $(window).width() > 1200 ) {     
22.  
23.      $('body').addClass('large');     
24.  
25.    }     
26.    else {     
27.  
28.       $('body').removeClass('large');     
29.  
30.         }     
31.  
32. }     
33. $(window).resize(checkWindowSize);     
34. });   

克隆对象

 

1. $(document).ready(function() {     
2.  
3.   var cloned = $('#id').clone();     
4.  
5.   // how to use     
6.  
7. <DIV idid=id></DIV>     
8. });   

使元素居屏幕中间位置

 

1. $(document).ready(function() {     
2.  
3.   jQuery.fn.center = function () {     
4.  
5.   this.css("position","absolute");     
6.  
7.   this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");     
8.  
9.   this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");     
10.  
11.      return this;     
12.  
13. }     
14.  
15. $("#id").center();     
16.  
17. });   

写自己的选择器

 

1. $(document).ready(function() {     
2.  
3.    $.extend($.expr[':'], {     
4.  
5.      moreThen1000px: function(a) {     
6.  
7.    return $(a).width() > 1000;     
8.  
9.   }     
10.  
11. });     
12. $('.box:moreThen1000px').click(function() {     
13.  
14.   // creating a simple js alert box     
15.  
16.     alert('The element that you have clicked is over 1000 pixels wide');     
17.  
18.   });     
19.  
20. });   

统计元素个数

 

1. $(document).ready(function() {     
2. $("p").size();     
3. });   

使用自己的Bullets

 

1. $(document).ready(function() {     
2.   $("ul").addClass("Replaced");     
3.   $("ul > li").prepend("‒ ");     
4.   // how to use     
5.   ul.Replaced { list-style : none; }     
6.  
7. });   

引用Google主机上的jQuery类库

 

1. //Example 1     
2. <SCRIPT src="http://www.google.com/jsapi"></SCRIPT>     
3. <SCRIPT type=text/javascript>    
4.    google.load("jquery", "1.2.6");    
5.    google.setOnLoadCallback(function() {    
6. // do something    
7. });    
8. </SCRIPT><SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>     
9.  
10. // Example 2:(the best and fastest way)     
11. <SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>  

禁用jQuery（动画）效果

 

1. $(document).ready(function() {     
2.  
3.    jQuery.fx.off = true;     
4.  
5. });   

与其他JavaScript类库冲突解决方案

 

1. $(document).ready(function() {     
2.  
3.   var $jq = jQuery.noConflict();     
4.  
5.   $jq('#id').show();     
6.  
7. });  

 

源文档 <http://developer.51cto.com/art/201011/232413_2.htm>