JQuery快速入門

Write less, do more, I like jQuery.

jQuery是最常用的js庫(kù)，整體來(lái)說(shuō)非常輕量并易于擴(kuò)展，對(duì)于移動(dòng)應(yīng)用可以使用其更輕量的孿生兄弟Zepto代替。其是由John Resig于2006創(chuàng)建的開(kāi)源項(xiàng)目，極大的簡(jiǎn)化了javascript開(kāi)發(fā)人員遍歷HTML文檔、操作DOM、處理事件、開(kāi)發(fā)Ajax等操作，最有特色的形式是$(document).ready(function() {});其省略形式為：$(function() {});。

在使用jQuery時(shí)，需要注意jQuery對(duì)象和DOM對(duì)象的區(qū)別，通常對(duì)于jQuery對(duì)象，會(huì)在變量前加$，如var $variable=jQuery對(duì)象;?？梢酝ㄟ^(guò)如下方式對(duì)兩者進(jìn)行轉(zhuǎn)化。

jQuery對(duì)象轉(zhuǎn)化為DOM對(duì)象: var $cr = $('#cr');var cr = $cr[0];

DOM對(duì)象轉(zhuǎn)化為jQuery對(duì)象: var cr = document.getElementById('cr');var $cr = $(cr);

此外，在使用多個(gè)不同的javascript庫(kù)時(shí)，有可能會(huì)出現(xiàn)庫(kù)之間的沖突，可以通過(guò)如下方式解決。

jQuery.noConflict();
jQuery(function() {
jQuery('p').click(function() {
alert(jQuery(this).text());});});//推薦下面的方式var $j = jQuery.noConflict();
$j(function() {});

在介紹jQuery選擇器之前，首先引入CSS選擇器，如下表所示。

那么相應(yīng)的jQuery也會(huì)提供對(duì)應(yīng)的選擇器，并增加部分自定義的選擇器用于方便操作，主要包括基本選擇器、層次選擇器、過(guò)濾選擇器、表單選擇器等4類選擇器。

Tip：html元素的id包含#，（，]等特殊字符時(shí)，需要通過(guò)//進(jìn)行轉(zhuǎn)義，例如：<div id='id[1]'></div>， $('#id\\[1\\]') //轉(zhuǎn)義特殊字符

DOM(Document Object Modal)文檔對(duì)象模型是一種與瀏覽器、平臺(tái)、語(yǔ)言無(wú)關(guān)的接口，通過(guò)該接口可以輕松的訪問(wèn)瀏覽器中所有標(biāo)準(zhǔn)組件。一般來(lái)說(shuō)，DOM操作可以分為3類：DOM Core，包含getElementById(),getAttribute()等方法；HTML_DOM，例如document.forms,element.src;CSS_DOM,例如element.style.color，對(duì)于jQuery來(lái)說(shuō)，將會(huì)用更簡(jiǎn)潔的方式實(shí)現(xiàn)這部分功能，如下表所示。

在jQuery中，對(duì)Ajax方法進(jìn)行了封裝，如下表所示。

 具體示例如下所示，這兒示例是form提交，而不是json提交，需要注意（通常調(diào)用接口，使用json提交；而頁(yè)面的ajax請(qǐng)求，推薦使用form提交，會(huì)比較簡(jiǎn)單）。

 View Code

fiddler截圖如下，比如對(duì)于java spring-mvc，該form報(bào)文可以直接序列化為對(duì)象，無(wú)需添加@RequestBody注解。 

之前就介紹的$(document).ready()相信大家都不會(huì)陌生，其與window.onload實(shí)際上有一些區(qū)別的，前者是當(dāng)DOM加載完成后觸發(fā)，而后者則是頁(yè)面中的所有元素(包括所有關(guān)聯(lián)元素)加載完成后執(zhí)行。在jQuery中，通常事件綁定是通過(guò)bind(type[,data],fn)方法實(shí)現(xiàn)的，其第一個(gè)參數(shù)為事件類型，非常豐富，包括blur,focus,load,resize,unload,click,dblclick,mousedown/up/move/over/out/enter/leave,change,select,submit,keypress/down/up等。

還可以通過(guò).unbind解綁事件，.trigger(eventType)來(lái)模擬觸發(fā)事件（包含默認(rèn)行為），.triggerHandler()觸發(fā)事件且不執(zhí)行默認(rèn)行為。此外，jQuery提供了合成事件，比如.hover(enter,leave),toggle(fn1,fn2)。

對(duì)于jQuery中的事件來(lái)說(shuō)，其均使用事件冒泡機(jī)制，而不支持時(shí)間捕獲機(jī)制(可以用原生js)。事件冒泡就是當(dāng)頁(yè)面上有個(gè)元素時(shí)，其中一個(gè)嵌套在另一個(gè)中，如果均綁定了click事件，那么觸發(fā)內(nèi)層元素的click事件時(shí)，會(huì)同時(shí)觸發(fā)外部的click事件。這樣的機(jī)制在有時(shí)是需要的，但有時(shí)卻不是期望的，那么就緒要通過(guò)event.stopPropagation()方法來(lái)禁止事件的冒泡了，

此外，在jQuery中，可以通過(guò)event.preventDefault()方法來(lái)阻止元素的默認(rèn)行為，常用與a鏈接元素和submit表單提交行為。需要注意的，jQuery實(shí)際上對(duì)event進(jìn)行了封裝，以屏蔽不同瀏覽器的差異，event.target用于獲取觸發(fā)事件的元素，.relatedTarget獲取相關(guān)元素(mouseover,mouseout)，.pageX/pageY獲取頁(yè)面坐標(biāo)，.which獲取鼠標(biāo)左中右鍵(值為1,2,3),.metaKey獲取Ctrl鍵，.originalEvent獲取原始事件對(duì)象。

接下來(lái)，將介紹jQuery庫(kù)非常吸引人的動(dòng)畫(huà)操作，如下表所示。

jQuery插件非常多，但最常用的要數(shù)驗(yàn)證插件了，最后通過(guò)一個(gè)示例來(lái)了解validation插件。

$('#commentForm').validate({
rules: {
username: { required: true, minlength: 2 },
email: { require: true, email: true },
url: 'url',
comment: 'required'};});