淺談jquery 注意事項與常用語法

1、關於選擇器中含有特殊符號

選擇器中含有"."，"#"，"("，"]"等特殊字元，根據W3C的規定，屬性值中是不能含有這些特殊字元的，例如：

複製程式碼 程式碼如下:

bb

如果按照普通的方式來獲取，例如：

複製程式碼 程式碼如下:

$("#id#b");

$("#id[1]");

以上程式碼不能正確獲取到元素，正確的寫法如下：

複製程式碼 程式碼如下:

$("#id#b");

$("#id[1]");

2、關於選擇器中含有空格的

看下面這個例子，它的HTML程式碼如下：

複製程式碼 程式碼如下:

aa

bb

cc

dd

ee

ff

使用jquery選擇器分別獲取它們：

複製程式碼 程式碼如下:

alert($(" :hidden")th);//輸出4

alert($(":hidden")th);//輸出3

之所以會出現不同的結果，是因為後代選擇器與過濾選擇器的不同。

複製程式碼 程式碼如下:

$(" :hidden")th;//帶空格的

以上程式碼是選取class為"test"的元素裡面的隱藏元素。

複製程式碼 程式碼如下:

$(":hidden")th;//不帶空格的

而上面的程式碼則是選取隱藏的class為"test"的元素。

3、關於val()方法

在jquery中，val()方法是從最後一個選項往前讀取，如果選項的value或者text中任意一項符合就會被選中，例如：

複製程式碼 程式碼如下:

2號

1號

無論使用val("1號")還是val("2號")，都會選中後面的那個option

4、關於css()方法

如果引數值是數字，將會被自動轉換為畫素值；如果屬性中帶有"-"符號，例如font-size、background-color等屬性，如果在設定這些屬性的值的時候不帶引號，那麼就要用駝峰式寫法，例如：

複製程式碼 程式碼如下:

$("p")({fontSize:"30px", backgroundColor:"#888888"});

如果帶上了引號，既可以寫成"font-size"，也可以寫成"fontSize"，建議大家加上引號，養成良好的習慣。

5、關於height()方法

(1)、在jQuery1.2版本以後的height()方法可以用來獲取window和document的高度。

(2)、用css()方法獲取高度值與height()方法的區別是： css()方法獲取的高度值與樣式的設定有關，可能會得到"auto"，也可能得到"10px"之類的字串；而height()方法獲取的高度值則是元素在頁面中的實際高度，與樣式的設定無關，並且不帶單位。

6、關於事件物件(event)的屬性

jQuery對事件物件的常用屬性進行了封裝，使得事件處理在各大瀏覽器下都可以正常執行而不需要進行瀏覽器型別判斷。

(1)、()方法

該方法的作用是可以獲取到事件的`型別。

複製程式碼 程式碼如下:

$("a")k(function(event) {

alert();//獲取事件型別

return false;//阻止連結跳轉

});

以上程式碼執行後會返回"click"。

(2)、entDefault()方法

該方法的作用是阻止預設的事件行為。javascript中符合W3C規範的preventDefault()方法在IE瀏覽器中無效，jQuery對其進行了封裝，使其能相容各種瀏覽器。

(3)、Propagation()方法

該方法的作用是阻止事件冒泡。javascript中符合W3C規範的stopPropagation()方法在IE瀏覽器中無效，jQuery對其進行了封裝，使其能相容各種瀏覽器。

(4)、et()方法

該方法的作用是獲取到觸發事件的元素。jQuery對其封裝後，避免了不同瀏覽器的差異。

複製程式碼 程式碼如下:

$("a[href=]")k(function(event) {

alert();//獲取觸發事件的元素的href屬性值

return false;

});

以上程式碼執行後返回""。

(5)、tedTarget()方法

在標準DOM中，mouseover和mouseout所發生的元素可以通過et()方法來訪問，相關元素是通過tedTarget()方法來訪問的。tedTarget()方法在mouseover中相當於IE瀏覽器的Element()方法，在mouseout中相當於IE瀏覽器的ement()方法，jQuery對其進行了封裝，使之能相容各種瀏覽器。

(6)、X()方法 / Y()方法

該方法的作用是獲取到游標相對於頁面的x座標和y座標。如果沒有使用jquery時，那麼IE瀏覽器中是用event.x()/event.y()方法，在firefox瀏覽器中是用X()/Y()方法。如果頁面上有滾動條，則還要加上滾動條的高度和寬度。在IE瀏覽器中還應該減去預設的2px的邊框。

複製程式碼 程式碼如下:

$("a")k(function(event) {

alert("Current mouse position: "+X+", "+Y);//獲取滑鼠當前相對於頁面的座標

return false;

});

(7)、h()方法

該方法的作用是在滑鼠單擊事件中獲取到滑鼠的左、中、右鍵；在鍵盤事件中獲取鍵盤的按鍵。

複製程式碼 程式碼如下:

$(function() {

$("body")edown(function(e) {

alert(h);//1=滑鼠左鍵 left; 2=滑鼠中鍵; 3=滑鼠右鍵

});

});

(8)、Key()方法

針對不同瀏覽器對鍵盤中的按鍵解釋不同，jquery也進行了封裝，並規定Key()方法為鍵盤事件中獲取按鍵。

(9)、inalEvent()方法

該方法的作用是指向原始的事件物件。

7、關於bind()方法

(1)、繫結多個事件型別

複製程式碼 程式碼如下:

$(function() {

$("div")("mouseover mouseout", function() {

$(this)leClass("over");

});

});

(2)、新增事件名稱空間

複製程式碼 程式碼如下:

$(function() {

$("div")("in", function() {

$("body")nd("

click

");

});

$("div")("in", function() {

$("body")nd("

mouseover

");

});

$("div")("dblclick", function() {

$("body")nd("

dblclick

");

});

$("button")k(function() {

$("div")nd("in");

});

});

在所繫結的事件型別後面新增名稱空間，這樣在刪除事件時只需要指定名稱空間即可。單擊元素後，"plugin"的名稱空間被刪除，而不在"plugin"的名稱空間的"dblclick"事件依然存在。

(3)、相同事件名稱、不同名稱空間執行方法

複製程式碼 程式碼如下:

$(function() {

$("div")("click", function() {

$("body")nd("

click

");

});

$("div")("in", function() {

$("body")nd("

in

");

});

$("button")k(function() {

$("div")ger("click!");//注意click後面的感嘆號

});

});

當單擊

元素後，會同時觸發click事件和in事件。如果只是單擊元素，則只觸發click事件，而不觸發in事件。注意，trigger("click!")後面的感嘆號的作用是匹配所有不包含在名稱空間中的click方法。如果需要兩者都觸發，只需要去掉感嘆號即可。

8、關於jQuery中的動畫

(1)、用jQuery做動畫效果要求要在標準模式下，否則可能會引起動畫抖動。標準模式即要求檔案頭部包含如下的DTD定義：

(2)、jQuery中的任何動畫效果，都可以指定3種速度引數，即"slow"、"normal"、"fast"(時間長度分別是0.6秒、0.4秒和0.2秒)。當使用速度關鍵字時要加引號，例如show("slow")，如果用數字作為時間引數時就不需要加引號，例如show(1000)。

(3)、在使用animate()方法使元素動起來之前，為了能影響該元素的"top"、"left"、"buttom"、"right"樣式屬性，必須先把元素的position樣式設定為"relative"或者"absolute"。

9、關於load()方法

此方法通常用來從web伺服器上獲取靜態的資料檔案。

(1)、用load()篩選載入的HTML文件內容

這時load()方法的URL引數的語法結構為："url selector"，注意url和selector之間有一個空格。例如只需要載入頁面中class為"para"的內容，可以用$("#xxx")(" ");

(2)、load()方法的回撥函式的引數

load()方法提供的回撥函式有3個引數，分別代表請求返回的內容、請求狀態和XMLHttpRequest物件，程式碼如下：

複製程式碼 程式碼如下:

#("#resText")("", function(responseText, textStatus, XMLHttpRequest) {

//responseText : 請求返回的內容

//textStatus : 請求狀態: success、error、notmodified、timeout 4種

//XMLHttpRequest ： XMLHttpRequest物件

});

注意，在load()方法中，無論Ajax請求是否成功，只要當請求完成後(complete)後，回撥函式(callback)就被觸發。此對應$()方法中的complete回撥函式。

10、關於$()方法

(1)、只有當response的返回狀態是success時才呼叫此方法的回撥函式。

(2)、此方法的回撥函式有兩個引數，分別是data即返回的內容(可以是XML文件、JSON檔案、HTML片段等等)、textStatus即請求狀態(success、error、notmodified、timeout這4種)

注意，$()方法與$()方法基本相同。

11、關於內容選擇器

內容選擇器:contains()選擇符區分大小寫。

12、關於外掛的通常寫法

複製程式碼 程式碼如下:

(function ($) {

$nd({

"resize" : function (userOptions) {

var defaultOptions = {height:100, width:100};

var mergeOptions = $nd({}, defaultOptions, userOptions);

return (function () {

$(this)ate(mergeOptions, "slow", function () {

$(this)To("slow", ".70")

});

});

}

});

})(jQuery);

注意：

1、外掛函式中的this一般只的是jQuery物件，例如第六行的this。但中的this指的是DOM物件。