|
Jasonye 2011-06-12
綜述：jQuery是JavaScript類庫，它提供一些功能，讓程序員更加簡潔地編寫 JavaScript程序�？梢酝ㄟ^一行簡單的標(biāo)記被添加到網(wǎng)頁中。
jQuery 庫包含以下特性： HTML 元素選取（選擇器） JavaScript 特效和動畫 HTML 事件函數(shù) HTML 元素操作、CSS 操作（文檔操作） HTML DOM 遍歷和修改 AJAX Utilities
0：添加jQuery庫 方法一、本地方法 <head> <script type="text/javascript" src="jquery.js"> </script> </head>
方法二、Google的CDN <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head>
文檔就緒函數(shù)： $(document).ready(function(){ ---jQuery functions go here.--- }); 這是為了防止文檔沒有完全加載前運(yùn)行函數(shù)，而產(chǎn)生操作失敗。 比如試圖：訪問一個不存在的元素、獲得未加載的圖像的大小等
由于 jQuery 是為處理 HTML 事件而特別設(shè)計(jì)的，那么當(dāng)您遵循以下原則時，您的代碼會更恰當(dāng)且更易維護(hù)： 把所有 jQuery 代碼置于事件處理函數(shù)中 把所有事件處理函數(shù)置于文檔就緒事件處理器中 把 jQuery 代碼置于單獨(dú)的 .js 文件中 如果存在名稱沖突，則重命名 jQuery 庫，解決名稱沖突： var jq = jQuery.noConflict() 使用自己的名稱比如jq來代替$符號
1、元素選取 jQuery定義了各種元素選擇器，讓我們更加方便、簡潔地選取各種元素。 jQuery選擇器分為元素選擇器和屬性選擇器， 用來選擇需要操作的HTML元素。 選擇器運(yùn)行對DOM元素組或者單個DOM節(jié)點(diǎn)進(jìn)行操作。 基本語法是：$(selector).action() 示例： $(this).hide() 隱藏當(dāng)前元素 $("p").hide() 隱藏所有段落 $(.test).hide() 隱藏class=test的元素 $("#test").hide() 隱藏id=test的元素。
元素選擇器：使用CSS選擇器來選取HTML元素 $("p") 選取<p>元素 $("p.intro") 選取所有class="intro"的<p>元素 $("p#demo") 選取id="demo"的第一個<p>元素
屬性選擇器：使用XPath表達(dá)式來選擇帶給定屬性的元素 $("[href]") 選取所有帶href屬性的元素 $("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。 $("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素。
2、jQuery事件 為特定事件編寫相應(yīng)的處理函數(shù)。 事件方法會觸發(fā)匹配元素的事件，或?qū)⒑瘮?shù)綁定到所有匹配元素的某個事件。
常見的事件： ready click dblclick focus mouseover 鼠標(biāo)懸停 bind() 附加一個或者多個事件處理器 delegate() 向匹配元素的當(dāng)前或者未來的子元素附加一個或者多個事件處理器 更多事件見參考庫。
3、效果 jQuery可以創(chuàng)建隱藏、顯示、切換、滑動以及自定義的動畫效果，讓我們更加簡單地編寫各種動畫效果， 常用來制作菜單欄等效果。 hide(),show() 隱藏與顯示函數(shù)，這兩個函數(shù)可以設(shè)置參數(shù)speed和callback。 slideToggle() 滑動面板 fadeTo() 淡入淡出 animate() 動畫
隱藏與顯示： $(selector).hide(speed,callback) $(selector).show(speed,callback) speed 參數(shù)規(guī)定顯示或隱藏的速度。可以設(shè)置這些值："slow", "fast", "normal" 或毫秒。 callback 參數(shù)是在 hide 或 show 函數(shù)完成之后被執(zhí)行的函數(shù)名稱。
切換函數(shù)： $(selector).toggle(speed, callback) 用來實(shí)現(xiàn)元素的切換（隱藏的顯示，顯示的隱藏）。
滑動函數(shù)： $(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
Fade函數(shù)： $(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback) fadeTo() 函數(shù)中的 opacity 參數(shù)規(guī)定減弱到給定的不透明度。
動畫： $(selector).animate({params},[duration],[easing],[callback]) params：定義產(chǎn)生動畫的 CSS 屬性。可以同時設(shè)置多個此類屬性：例如： animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"}); duration：定義用來應(yīng)用到動畫的時間。它設(shè)置的值是："slow", "fast", "normal" 或毫秒。 Callback函數(shù)在當(dāng)前動畫100%完成后執(zhí)行。
注意：HTML 元素默認(rèn)是靜態(tài)定位，且無法移動。如需使元素可以移動，請把 CSS 的 position 設(shè)置為 relative 或 absolute。
4、jQuery文檔操作函數(shù) 文檔操作函數(shù)用來改變文檔的DOM數(shù)。 HTML 操作函數(shù) 描述 $(selector).html(content) 改變被選元素的（內(nèi)部）HTML $(selector).append(content) 向被選元素的（內(nèi)部）HTML 追加內(nèi)容 $(selector).prepend(content)向被選元素的（內(nèi)部）HTML “預(yù)置”（Prepend）內(nèi)容 $(selector).after(content) 在被選元素之后添加 HTML $(selector).before(content) 在被選元素之前添加 HTML
CSS 操作函數(shù) jQuery擁有三種用于CSS操作的重要函數(shù)： $(selector).css(name,value) 為所有匹配元素的給定 CSS 屬性設(shè)置值： $(selector).css({properties}) 為所有匹配元素的一系列 CSS 屬性設(shè)置值： $(selector).css(name) 返回指定的 CSS 屬性的值： $(selector).height(value) $(selector).width(value) 函數(shù) width(value) 設(shè)置所有匹配元素的寬度：
例子：$("p").css({"background-color":"red","font-size":"200%"});
5、Ajax操作函數(shù) jQuery為長遠(yuǎn)用的AJAX請求封裝了各種函數(shù)。讓我們更方便地進(jìn)行AJAX請求。 jQuery 的 load 函數(shù)是一種簡單的（但很強(qiáng)大的）AJAX 函數(shù)。它的語法如下： $(selector).load(url,data,callback) 請使用 selector 來定義要改變的 HTML 元素， 使用 url 參數(shù)來指定數(shù)據(jù)的 web 地址。 只有當(dāng)您希望向服務(wù)器發(fā)送數(shù)據(jù)時，才需要使用 data 參數(shù)。
還有更低級的：Low Level AJAX ，。 $.ajax(options) 是低層級 AJAX 函數(shù)的語法。 option 參數(shù)設(shè)置的是 name|value 對，定義 url 數(shù)據(jù)、密碼、數(shù)據(jù)類型、過濾器、字符集、超時以及錯誤函數(shù)。 $.ajax 提供了比高層級函數(shù)更多的功能，但是同時也更難使用 jQuery AJAX請求 $(selector).load(url,data,callback) 把遠(yuǎn)程數(shù)據(jù)加載到被選的元素中 $.ajax(options) 把遠(yuǎn)程數(shù)據(jù)加載到 XMLHttpRequest 對象中 $.get(url,data,callback,type) 使用 HTTP GET 來加載遠(yuǎn)程數(shù)據(jù) $.post(url,data,callback,type) 使用 HTTP POST 來加載遠(yuǎn)程數(shù)據(jù) $.getJSON(url,data,callback) 使用 HTTP GET 來加載遠(yuǎn)程 JSON 數(shù)據(jù) $.getScript(url,callback) 加載并執(zhí)行遠(yuǎn)程的 JavaScript 文件
(data) 發(fā)送到服務(wù)器的數(shù)據(jù)的鍵/值對象 (type) 被返回的數(shù)據(jù)的類型 (html,xml,json,jasonp,script,text) (options) 完整 AJAX 請求的所有鍵/值對選項(xiàng)
jQuery參考手冊 一、選擇器 二、事件 三、效果 四、文檔操作：對XML、HTML文檔進(jìn)行相關(guān)的操作，除了:html() 五、CSS操作 ：CSS相關(guān)操作函數(shù)，css()、height()等 六、AJAX操作 七、遍歷函數(shù) ：用于篩選、查找和串聯(lián)元素的方法 八、數(shù)據(jù)存儲 九、隊(duì)列控制 十、核心 | 
免費(fèi)注冊
發(fā)表于 2011-12-21 08:44