- 相關推薦
淺談jquery 注意事項與常用語法
1、關于選擇器中含有特殊符號
選擇器中含有"."，"#"，"("，"]"等特殊字符，根據W3C的規定，屬性值中是不能含有這些特殊字符的，例如：
復制代碼 代碼如下:
bb
如果按照普通的方式來獲取，例如：
復制代碼 代碼如下:
$("#id#b");
$("#id[1]");
以上代碼不能正確獲取到元素，正確的寫法如下：
復制代碼 代碼如下:
$("#id#b");
$("#id[1]");
2、關于選擇器中含有空格的
看下面這個例子，它的HTML代碼如下：
復制代碼 代碼如下:
aa
bb
cc
dd
ee
ff
使用jquery選擇器分別獲取它們：
復制代碼 代碼如下:
alert($(".test :hidden").length);//輸出4
alert($(".test:hidden").length);//輸出3
之所以會出現不同的結果，是因為后代選擇器與過濾選擇器的不同。
復制代碼 代碼如下:
$(".test :hidden").length;//帶空格的
以上代碼是選取class為"test"的元素里面的隱藏元素。
復制代碼 代碼如下:
$(".test:hidden").length;//不帶空格的
而上面的代碼則是選取隱藏的class為"test"的元素。
3、關于val()方法
在jquery中，val()方法是從最后一個選項往前讀取，如果選項的value或者text中任意一項符合就會被選中，例如：
復制代碼 代碼如下:
2號
1號
無論使用val("1號")還是val("2號")，都會選中后面的那個option
4、關于css()方法
如果參數值是數字，將會被自動轉換為像素值；如果屬性中帶有"-"符號，例如font-size、background-color等屬性，如果在設置這些屬性的值的時候不帶引號，那么就要用駝峰式寫法，例如：
復制代碼 代碼如下:
$("p").css({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)、event.type()方法
該方法的作用是可以獲取到事件的類型。
復制代碼 代碼如下:
$("a").click(function(event) {
alert(event.type);//獲取事件類型
return false;//阻止鏈接跳轉
});
以上代碼運行后會返回"click"。
(2)、event.preventDefault()方法
該方法的作用是阻止默認的事件行為。javascript中符合W3C規范的preventDefault()方法在IE瀏覽器中無效，jQuery對其進行了封裝，使其能兼容各種瀏覽器。
(3)、event.stopPropagation()方法
該方法的作用是阻止事件冒泡。javascript中符合W3C規范的stopPropagation()方法在IE瀏覽器中無效，jQuery對其進行了封裝，使其能兼容各種瀏覽器。
(4)、event.target()方法
該方法的作用是獲取到觸發事件的元素。jQuery對其封裝后，避免了不同瀏覽器的差異。
復制代碼 代碼如下:
$("a[href=http://baidu.com]").click(function(event) {
alert(event.target.href);//獲取觸發事件的元素的href屬性值
return false;
});
以上代碼運行后返回"http://baidu.com"。
(5)、event.relatedTarget()方法
在標準DOM中，mouseover和mouseout所發生的元素可以通過event.target()方法來訪問，相關元素是通過event.relatedTarget()方法來訪問的。event.relatedTarget()方法在mouseover中相當于IE瀏覽器的event.fromElement()方法，在mouseout中相當于IE瀏覽器的event.toElement()方法，jQuery對其進行了封裝，使之能兼容各種瀏覽器。
(6)、event.pageX()方法 / event.pageY()方法
該方法的作用是獲取到光標相對于頁面的x坐標和y坐標。如果沒有使用jquery時，那么IE瀏覽器中是用event.x()/event.y()方法，在firefox瀏覽器中是用event.pageX()/event.pageY()方法。如果頁面上有滾動條，則還要加上滾動條的高度和寬度。在IE瀏覽器中還應該減去默認的2px的邊框。
復制代碼 代碼如下:
$("a").click(function(event) {
alert("Current mouse position: "+event.pageX+", "+event.pageY);//獲取鼠標當前相對于頁面的坐標
return false;
});
(7)、event.which()方法
該方法的作用是在鼠標單擊事件中獲取到鼠標的左、中、右鍵；在鍵盤事件中獲取鍵盤的按鍵。
復制代碼 代碼如下:
$(function() {
$("body").mousedown(function(e) {
alert(e.which);//1=鼠標左鍵 left; 2=鼠標中鍵; 3=鼠標右鍵
});
});
(8)、event.metaKey()方法
針對不同瀏覽器對鍵盤中的按鍵解釋不同，jquery也進行了封裝，并規定event.metaKey()方法為鍵盤事件中獲取按鍵。
(9)、event.originalEvent()方法
該方法的作用是指向原始的事件對象。
7、關于bind()方法
(1)、綁定多個事件類型
復制代碼 代碼如下:
$(function() {
$("div").bind("mouseover mouseout", function() {
$(this).toggleClass("over");
});
});
(2)、添加事件命名空間
復制代碼 代碼如下:
$(function() {
$("div").bind("click.plugin", function() {
$("body").append("
click
");
});
$("div").bind("mouseover.plugin", function() {
$("body").append("
mouseover
");
});
$("div").bind("dblclick", function() {
$("body").append("
dblclick
");
});
$("button").click(function() {
$("div").unbind(".plugin");
});
});
在所綁定的事件類型后面添加命名空間，這樣在刪除事件時只需要指定命名空間即可。單擊元素后，"plugin"的命名空間被刪除，而不在"plugin"的命名空間的"dblclick"事件依然存在。
(3)、相同事件名稱、不同命名空間執行方法
復制代碼 代碼如下:
$(function() {
$("div").bind("click", function() {
$("body").append("
click
");
});
$("div").bind("click.plugin", function() {
$("body").append("
click.plugin
");
});
$("button").click(function() {
$("div").trigger("click!");//注意click后面的感嘆號
});
});
當單擊
元素后，會同時觸發click事件和click.plugin事件。如果只是單擊元素，則只觸發click事件，而不觸發click.plugin事件。注意，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之間有一個空格。例如只需要加載test.html頁面中class為"para"的內容，可以用$("#xxx").load("test.html .para");
(2)、load()方法的回調函數的參數
load()方法提供的回調函數有3個參數，分別代表請求返回的內容、請求狀態和XMLHttpRequest對象，代碼如下：
復制代碼 代碼如下:
#("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest) {
//responseText : 請求返回的內容
//textStatus : 請求狀態: success、error、notmodified、timeout 4種
//XMLHttpRequest ： XMLHttpRequest對象
});
注意，在load()方法中，無論Ajax請求是否成功，只要當請求完成后(complete)后，回調函數(callback)就被觸發。此對應$.ajax()方法中的complete回調函數。
10、關于$.get()方法
(1)、只有當response的返回狀態是success時才調用此方法的回調函數。
(2)、此方法的回調函數有兩個參數，分別是data即返回的內容(可以是XML文檔、JSON文件、HTML片段等等)、textStatus即請求狀態(success、error、notmodified、timeout這4種)
注意，$.post()方法與$.get()方法基本相同。
11、關于內容選擇器
內容選擇器:contains()選擇符區分大小寫。
12、關于插件的通常寫法
復制代碼 代碼如下:
(function ($) {
$.fn.extend({
"resize" : function (userOptions) {
var defaultOptions = {height:100, width:100};
var mergeOptions = $.extend({}, defaultOptions, userOptions);
return this.each(function () {
$(this).animate(mergeOptions, "slow", function () {
$(this).fadeTo("slow", ".70")
});
});
}
});
})(jQuery);
注意：
1、插件函數中的this一般只的是jQuery對象，例如第六行的this。但this.each中的this指的是DOM對象。
【淺談jquery 注意事項與常用語法】相關文章：
韓語等級考試常用的語法08-31
jQuery程序設計08-05
jquery提交按鈕的代碼07-28
韓語常用基礎語法分析08-19
jQuery中prev()方法用法07-16
如何理解jquery事件冒泡09-15
jQuery的DOM操作筆記07-29
jQuery 源碼分析和Ready函數06-28