JQuery是另外一個非常流行的JavaScript框架，相對于Dojo來說JQuery更加的輕便，JQuery代碼文件的大小為20kb，但是絲毫沒有影響到JQuery的強(qiáng)大功能，也許在了解JQuery之后你會有更深刻的體會。并且JQuery使用了插件的體系結(jié)構(gòu)，開發(fā)人員可以在JQuery的基礎(chǔ)上利用插件的機(jī)制擴(kuò)展JQuery的功能。

 

和JQuery詳細(xì)的JavaScript框架有Prototype，雖然Prototype和script.aculo.us也可以制作出強(qiáng)大的功能的頁面。但是我更喜歡JQuery的簡介方式和強(qiáng)大的插件群。

 

JQuery官方網(wǎng)站: http://www.jquery.com

Prototype官方網(wǎng)站: http://www.prototypejs.org

script.aculo.us官方網(wǎng)站: http://script.aculo.us

 

JQuery核心只有一個文件jquery-x.x.x.x.js，其中x.x.x.x表示了文件的版本，現(xiàn)在最新的版本為1.1.3.1。并且為了提高jquery的下載效率，官方網(wǎng)站提供了一個壓縮版本的文件，這個文件只有20kb。

 

安裝jqueyr只需要將jquery-x.x.x.x.js拷貝到對應(yīng)web項(xiàng)目的javascript腳本目錄即可。

<script type="text/javascript" src="path/to/jquery.js"></script>

 

JQuery 核心

Onload 使用

我們有些時候需要在頁面初始化完成的時候調(diào)用一些JavaScript預(yù)處理操作，例如設(shè)置某些Button不可用等，這個時候我們通常有兩種選擇。

第一：<body onload=”someFunction();”>

第二：window.onload = someFunction;

上述代碼意義相同，都會在頁面初始化完成之后執(zhí)行someFunction這個預(yù)先定義的JavaScript函數(shù)。但是，頁面初始化完成到底是什么含義呢？頁面初始化完成意味著頁面全部被瀏覽器顯示，也就是說所有的image都加載完成。有些時候這個過程非常的常，有些時候我們可以看到有些網(wǎng)站的button先是可用，后來等所有頁面顯示之后又不可用了就是這個原因。

 

那么我們到底在什么時候執(zhí)行someFunction是比較合適的呢？我們傾向于頁面的全部document內(nèi)容被加載，而不是所有內(nèi)容正確顯示之后別調(diào)用。

 

以img為例說明上述的區(qū)別，例如

<img src=”http://hostname:port/webapp/xxx.jpg” />

當(dāng)上述字面內(nèi)容被瀏覽器下載完成時，我們可以說img被加載了，當(dāng)http://hostname:port/webapp/xxx.jpg指向的內(nèi)容被下載并且被正確顯示之后，可以說img被正確顯示了。

 

如何使用JQuery來達(dá)到頁面內(nèi)容別加載就執(zhí)行someFunction？

$(document).ready(someFunction);

 

$()是什么？

$()是JQuery的核心方法，$()方法有幾種不同的調(diào)用方式，但是這幾種方式都有一個共通的特點(diǎn)，就是通過$()方法，可以將一個普通的HTML DOM對象（p, div, body, doucment等）封裝成為一個特殊的，增強(qiáng)了JQuery功能的JQuery對象。

說道這里大家可能會知道了JQuery其實(shí)相當(dāng)于一個對象，一個封裝了不同HTMLDOM對象的對象。

 

$(string)

         憑空創(chuàng)建一個JQuery包裝起來的HTML DOM對象，例如：

         $("<div><p>Hello</p></div>").appendTo("body")

上述代碼建立了一個Hello段，Hello段在一個div內(nèi)部，之后將這個div追加到了doby內(nèi)部。

 

$( elems )

         講一個已經(jīng)存在的HTML DOM對象包裝為JQuery對象，例如：

         $(document.body).css( "background", "black" );

         上述代碼把body的background設(shè)置為black

         $( myForm.elements ).hide()

         隱藏myForm中所有的對象

 

$( function)

$(document).ready(function)的簡寫，總共有三種方法讓一個function在dom初始化完成之后被調(diào)用：

         $(document).ready(function)

         $( function)

         JQuery(function)

 

$( expr, context )

在上下文（）中查找表達(dá)式（）所只是的對象，context不存在的情況下在document上下文中查找，例如：

DOM對象：   <p>one</p> <div><p>two</p></div> <p>three</p>

調(diào)用：              $("div > p")

結(jié)果：              <p>two</p>

 

$("input:radio", document.forms[0])

查找第一個form中的所有redio類型的輸入框。

$("div", xml.responseXML)

查找xml.responseXML指示的XML文件內(nèi)容中所有的div項(xiàng)。

 

擴(kuò)展JQuery的功能

可以使用$.fn.extend( prop )來擴(kuò)展JQuery提供的功能，例如，JQuery并沒有提供check和uncheck方法，但是我們可以通過如下的代碼擴(kuò)展JQquery，使JQuery增加check和uncheck功能：

jQuery.fn.extend({

   check: function() {

     return this.each(function() { this.checked = true; });

   },

   uncheck: function() {

     return this.each(function() { this.checked = false; });

   }

 });

 

之后我們可以選擇一個對象來使用擴(kuò)展的check和uncheck方法，例如：

 

 $("input[@type=checkbox]").check();

 $("input[@type=radio]").uncheck();

 

解決和其他框架的沖突

$在JQuery中有著特殊的含義，但是有些時候我們的項(xiàng)目已經(jīng)集成了其他的框架）（例如Prototype），在其他框架中$已經(jīng)被使用了，那么我們怎么消除JQuery對$指定的特殊含義呢？

我們可以使用jQuery.noConflict()方法，在調(diào)用這個方法之后，$已經(jīng)不在具有我們前面說的JQuery賦予的功能，所以所有的后續(xù)代碼必須使用JQuery調(diào)用，例如：

 

jQuery.noConflict();

        // 調(diào)用JQuery的方法

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

        // 調(diào)用其他框架的$()方法

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

 

我們也可以指定自己喜歡的名字來替換$，例如：

var j = jQuery.noConflict();

// 調(diào)用jQuery的方法

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

// 調(diào)用其他框架的 $( ) 方法

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

 

其他常用方法

each( fn )

         這對數(shù)組中的每一個對象調(diào)用fn方法。例如：

         HTML DOM代碼：<img/><img/>

         調(diào)用方法：              $("img").each(function(i){

                                                     this.src = "test" + i + ".jpg";

});

         結(jié)果：                       <img src="test0.jpg"/><img src="test1.jpg"/>

 

eq( pos )

         定位具體的HTML DOM對象

         HTML DOM代碼：<p>This is just a test.</p><p>So is this</p>

         調(diào)用方法：              $("p").eq(1)

         結(jié)果：                        <p>So is this</p>

 

get( pos )

         定位具體的HTML DOM對象（脫掉了JQuery的包裝，原始的DOM對象）

         HTML DOM代碼：<img src="test1.jpg"/> <img src="test2.jpg"/>

         調(diào)用方法：              $("img").get( num )

         結(jié)果：                        <img src="test1.jpg"/>

 

get()

         針對所有的對象，脫掉了JQuery的包裝，獲取原始的DOM對象

         HTML DOM代碼：<img src="test1.jpg"/> <img src="test2.jpg"/>

         調(diào)用方法：              $("img").get()

         結(jié)果：                        <img src="test1.jpg"/><img src="test2.jpg"/>

 

gt( pos )

         取出pos之后的所有對象

         HTML DOM代碼：<img src="test1.jpg"/> <img src="test2.jpg"/>

         調(diào)用方法：              $("img").gt(0)

         結(jié)果：                        <img src="test1.jpg"/>

 

index( subject )

         找到subject在數(shù)組中對應(yīng)的index，不存在時返回-1

         HTML DOM代碼：<div id="foobar"><b></b><span id="foo"></span></div>

         調(diào)用方法：              $("*").index( $('#foobar')[0] )

         結(jié)果：                        0

 

Length

         返回對象數(shù)組的長度。

         HTML DOM代碼：<img src="test1.jpg"/> <img src="test2.jpg"/>

         調(diào)用方法：              $("img").length

         結(jié)果：                        2

 

lt( pos )

         與gt相反

         HTML DOM代碼：<p>This is just a test.</p><p>So is this</p>

         調(diào)用方法：              $("p").lt(1)

         結(jié)果：                        <p>This is just a test.</p>

 

size()

         與length相同

 

 

JQuery HTML DOM遍歷和選擇器

JQuery的功能很強(qiáng)大，可以包裝任何一個HTML DOM元素添加強(qiáng)大的功能，那么如何找到需要的元素呢？這就需要JQuery Selector來幫慢，原理上講，JQuery Selector可以超找到HTML DOM里的任何元素

 

JQuery Selector主要包含三個方面的實(shí)現(xiàn)：CSS方式，XPath方式，和JQuery自定義的方式。

為了逐個講解這些Selector，首先給大家一些基本的例子：

 

隱藏所有包含鏈接（a）的段（p）：

$("p[a]").hide();

 

顯示一個頁面的第一個段（p）：

$("p:eq(0)").show();

 

將所有顯示（visible=true）的div隱藏：

$("div:visible").hide();

 

所有無須列表（ul）的項(xiàng)目（li）：

$("ul/li")

或者 $("ul > li") */

獲得所有class類型為foo，并且包含鏈接（a）的段：

$("p.foo[a]");

 

獲得所有字符內(nèi)容包含Register的項(xiàng)目（li）

$("li[a:contains('Register')]");

 

得到name=bar的輸入項(xiàng)目的值：

$("input[@name=bar]").val();

 

獲得所有被選中的button：

$("input[@type=radio][@checked]")

 

CSS方式

JQuery的CSS方式的Selector支持CSS1-CSS3標(biāo)準(zhǔn)。

 

與CSS中的實(shí)現(xiàn)完全一致的：

*

         任何的元素

E

         任何類型為E的元素

E:nth-child(n)

         E元素的第n個子元素

E:first-child

         E的第一個子元素

E:last-child

         E的最后一個元素

E:only-child

         E的唯一的子元素

E:empty

         E沒有子元素，也不能包含text內(nèi)容

E:enabled

         E類型的UI元素，并且不是disabled的

E:disabled

         E類型的UI元素，并且是disabled的

E:checked

         E類型的UI元素（radio或者checkbox），并且是checked的

E:selected

         E類型的UI元素（option），并且是選中的（雖然CSS中沒有支持，JQuery支持）

E.warning

         Class = warning的元素（dot（.） 表示class）

E#myid

         Id=myid的元素，最多有一個元素被選中。

E:not(s)

         E類型的元素，但是與簡單selector  s 不匹配

E F

         E類型的F類型的后代元素

E > F

         E類型的F類型的子元素（F在E之內(nèi)）

E + F

         F類型緊跟著E類型（F在E之后，并且緊挨著）

E ~ F

         F類型前面連著E類型（F在E之后，不一定緊挨著）

E,F,G

         E，F，G所有類型的元素

 

與CSS中實(shí)現(xiàn)稍有不同的：

E[@foo]

         包含屬性foo的E類型的元素

E[@foo=bar]

         包含屬性foo，并且屬性foo的值為bar的E類型的元素

E[@foo^=bar]

         包含屬性foo，并且foo的值以bar開始的E類型的元素

E[@foo$=bar]

         包含屬性foo，并且foo的值以bar結(jié)尾的E類型的元素

E[@foo*=bar]

         包含屬性foo，并且foo的值包含bar的E類型的元素

E[@foo=bar][@baz=bop]

         屬性foo值為bar，屬性baz值為bop的E類型的元素。

 

XPath方式

 

位置路徑

    在HTML DOM中查找：

                 $("/html/body//p")

                 $("body//p")

                 $("p/../div")

         在當(dāng)前上下文中查找：

 $("p/*", this)

                 $("/p//a", this)

 

坐標(biāo)位置

         子孫節(jié)點(diǎn)有一個子孫節(jié)點(diǎn)：

 $("http://div//p")

         子孫節(jié)點(diǎn)有一個子節(jié)點(diǎn)：

 $("http://div/p")

 

        $("http://div ~ form")

$("http://div/../p")

 

預(yù)言

$("http://input[@checked]")

$("http://a[@ref='nofollow']")

$("http://div[p]")

        $("http://div[p/a]")

 

[last()] or [position()=last()] becomes :last

 

        $("p:last")

 

    [0] or [position()=0] becomes :eq(0) or :first

 

$("p:first")

$("p:eq(0)")

 

    [position() < 5] becomes :lt(5)

$("p:lt(5)")

[position() > 2] becomes :gt(2)

$("p:gt(2)")

 

JQuery自定義的Selector

:even

         偶數(shù)節(jié)點(diǎn)選擇

:odd

         奇數(shù)節(jié)點(diǎn)選擇

:eq(n) and :nth(n)

         第n個元素

:gt(N)

         排序比N大的元素

:lt(N)

         排序比N小的元素

:first

與:eq(0)相同

:last

         最后一個元素

:parent

         包含子元素（文本內(nèi)容也算）的節(jié)點(diǎn)

:contains('test')

         包含test文本內(nèi)容的節(jié)點(diǎn)

:visible

         所有顯示的元素

:hidden

         所有隱藏的內(nèi)容

 

例如：

$("p:first").css("fontWeight","bold");

$("div:hidden").show();

$("/div:contains('test')", this).hide();

        

JQueyy 操作HTML屬性和CSS

        

JQUery 事件

JQuery 動畫效果

JQuery Ajax

JQuery 插件

         JQuery Thickbox plugin

         JQuery Form Plugin

         JQuery Tab Plugin

         JQuery Context Menu Plugin

         JQuery Short Key Plugin

         JQuery Inplace Plugin

ExtJS教程- Hibernate教程-Struts2 教程-Lucene教程