亚洲天堂男人影院,亚洲高清视频在线,国产成人精品亚洲精品

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

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

JQuery官方網站: http://www.jquery.com

Prototype官方網站: http://www.prototypejs.org

script.aculo.us官方網站: http://script.aculo.us

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

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

JQuery 核心

Onload 使用

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

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

第二：window.onload = someFunction;

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

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

以img為例說明上述的區別，例如

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

如何使用JQuery來達到頁面內容別加載就執行someFunction？

$(document).ready(someFunction);

$()是什么？

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

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

$(string)

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

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

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

$( elems )

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

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

上述代碼把body的background設置為black

$( myForm.elements ).hide()

隱藏myForm中所有的對象

$( function)

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

$(document).ready(function)

$( function)

JQuery(function)

$( expr, context )

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

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

調用： $("div > p")

結果： <p>two</p>

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

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

$("div", xml.responseXML)

查找xml.responseXML指示的XML文件內容中所有的div項。

擴展JQuery的功能

可以使用$.fn.extend( prop )來擴展JQuery提供的功能，例如，JQuery并沒有提供check和uncheck方法，但是我們可以通過如下的代碼擴展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; });

}

});

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

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

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

解決和其他框架的沖突

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

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

jQuery.noConflict();

// 調用JQuery的方法

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

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

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

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

var j = jQuery.noConflict();

// 調用jQuery的方法

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

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

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

其他常用方法

each( fn )

這對數組中的每一個對象調用fn方法。例如：

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

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

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

});

結果： <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>

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

結果： <p>So is this</p>

get( pos )

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

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

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

結果： <img src="test1.jpg"/>

get()

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

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

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

結果： <img src="test1.jpg"/><img src="test2.jpg"/>

gt( pos )

取出pos之后的所有對象

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

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

結果： <img src="test1.jpg"/>

index( subject )

找到subject在數組中對應的index，不存在時返回-1

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

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

結果： 0

Length

返回對象數組的長度。

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

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

結果： 2

lt( pos )

與gt相反

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

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

結果： <p>This is just a test.</p>

size()

與length相同

JQuery HTML DOM遍歷和選擇器

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

JQuery Selector主要包含三個方面的實現：CSS方式，XPath方式，和JQuery自定義的方式。

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

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

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

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

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

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

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

所有無須列表（ul）的項目（li）：

$("ul/li")

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

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

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

獲得所有字符內容包含Register的項目（li）

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

得到name=bar的輸入項目的值：

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

獲得所有被選中的button：

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

CSS方式

JQuery的CSS方式的Selector支持CSS1-CSS3標準。

與CSS中的實現完全一致的：

任何的元素

任何類型為E的元素

E:nth-child(n)

E元素的第n個子元素

E:first-child

E的第一個子元素

E:last-child

E的最后一個元素

E:only-child

E的唯一的子元素

E:empty

E沒有子元素，也不能包含text內容

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之內）

E + F

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

E ~ F

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

E,F,G

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

與CSS中實現稍有不同的：

E[@foo]

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

E[@foo=bar]

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

E[@foo^=bar]

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

E[@foo$=bar]

包含屬性foo，并且foo的值以bar結尾的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")

在當前上下文中查找：

$("p/*", this)

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

坐標位置

子孫節點有一個子孫節點：

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

子孫節點有一個子節點：

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

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

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

預言

$("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

偶數節點選擇

:odd

奇數節點選擇

:eq(n) and :nth(n)

第n個元素

:gt(N)

排序比N大的元素

:lt(N)

排序比N小的元素

:first

與:eq(0)相同

:last

最后一個元素

:parent

包含子元素（文本內容也算）的節點

:contains('test')

包含test文本內容的節點

:visible

所有顯示的元素

:hidden

所有隱藏的內容

例如：

$("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教程

發表于 2008-11-01 10:19 淘聲依舊閱讀(266) 評論(0) 編輯收藏所屬分類: 100.Struts2

第十五章 AJAX JQuery

公告

實用連接

積分與排名

最新評論

雜家學習復習
\| 首頁 \| 發新隨筆 \| 發新文章 \| 聯系 \| 聚合 \| 管理