淺談jquery 注意事項(xiàng)與常用語法

時(shí)間：2024-07-10 04:43:18 jQuery Mobile 我要投稿

相關(guān)推薦

　　1、關(guān)于選擇器中含有特殊符號(hào)

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

　　復(fù)制代碼代碼如下:

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

　　復(fù)制代碼代碼如下:

　　$("#id#b");

　　$("#id[1]");

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

　　復(fù)制代碼代碼如下:

　　$("#id#b");

　　$("#id[1]");

　　2、關(guān)于選擇器中含有空格的

　　看下面這個(gè)例子，它的HTML代碼如下：

　　復(fù)制代碼代碼如下:

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

　　復(fù)制代碼代碼如下:

　　alert($(".test :hidden").length);//輸出4

　　alert($(".test:hidden").length);//輸出3

　　之所以會(huì)出現(xiàn)不同的結(jié)果，是因?yàn)楹蟠x擇器與過濾選擇器的不同。

　　復(fù)制代碼代碼如下:

　　$(".test :hidden").length;//帶空格的

　　以上代碼是選取class為"test"的元素里面的隱藏元素。

　　復(fù)制代碼代碼如下:

　　$(".test:hidden").length;//不帶空格的

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

　　3、關(guān)于val()方法

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

　　復(fù)制代碼代碼如下:

　　2號(hào)

　　1號(hào)

　　無論使用val("1號(hào)")還是val("2號(hào)")，都會(huì)選中后面的那個(gè)option

　　4、關(guān)于css()方法

　　如果參數(shù)值是數(shù)字，將會(huì)被自動(dòng)轉(zhuǎn)換為像素值；如果屬性中帶有"-"符號(hào)，例如font-size、background-color等屬性，如果在設(shè)置這些屬性的值的時(shí)候不帶引號(hào)，那么就要用駝峰式寫法，例如：

　　復(fù)制代碼代碼如下:

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

　　如果帶上了引號(hào)，既可以寫成"font-size"，也可以寫成"fontSize"，建議大家加上引號(hào)，養(yǎng)成良好的習(xí)慣。

　　5、關(guān)于height()方法

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

　　(2)、用css()方法獲取高度值與height()方法的區(qū)別是： css()方法獲取的高度值與樣式的設(shè)置有關(guān)，可能會(huì)得到"auto"，也可能得到"10px"之類的字符串；而height()方法獲取的高度值則是元素在頁面中的實(shí)際高度，與樣式的設(shè)置無關(guān)，并且不帶單位。

　　6、關(guān)于事件對(duì)象(event)的屬性

　　jQuery對(duì)事件對(duì)象的常用屬性進(jìn)行了封裝，使得事件處理在各大瀏覽器下都可以正常運(yùn)行而不需要進(jìn)行瀏覽器類型判斷。

　　(1)、event.type()方法

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

　　復(fù)制代碼代碼如下:

　　$("a").click(function(event) {

　　alert(event.type);//獲取事件類型

　　return false;//阻止鏈接跳轉(zhuǎn)

　　});

　　以上代碼運(yùn)行后會(huì)返回"click"。

　　(2)、event.preventDefault()方法

　　該方法的作用是阻止默認(rèn)的事件行為。javascript中符合W3C規(guī)范的preventDefault()方法在IE瀏覽器中無效，jQuery對(duì)其進(jìn)行了封裝，使其能兼容各種瀏覽器。

　　(3)、event.stopPropagation()方法

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

　　(4)、event.target()方法

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

　　復(fù)制代碼代碼如下:

　　$("a[href=http://baidu.com]").click(function(event) {

　　alert(event.target.href);//獲取觸發(fā)事件的元素的href屬性值

　　return false;

　　});

　　以上代碼運(yùn)行后返回"http://baidu.com"。

　　(5)、event.relatedTarget()方法

　　在標(biāo)準(zhǔn)DOM中，mouseover和mouseout所發(fā)生的元素可以通過event.target()方法來訪問，相關(guān)元素是通過event.relatedTarget()方法來訪問的。event.relatedTarget()方法在mouseover中相當(dāng)于IE瀏覽器的event.fromElement()方法，在mouseout中相當(dāng)于IE瀏覽器的event.toElement()方法，jQuery對(duì)其進(jìn)行了封裝，使之能兼容各種瀏覽器。

　　(6)、event.pageX()方法 / event.pageY()方法

　　該方法的作用是獲取到光標(biāo)相對(duì)于頁面的x坐標(biāo)和y坐標(biāo)。如果沒有使用jquery時(shí)，那么IE瀏覽器中是用event.x()/event.y()方法，在firefox瀏覽器中是用event.pageX()/event.pageY()方法。如果頁面上有滾動(dòng)條，則還要加上滾動(dòng)條的高度和寬度。在IE瀏覽器中還應(yīng)該減去默認(rèn)的2px的邊框。

　　復(fù)制代碼代碼如下:

　　$("a").click(function(event) {

　　alert("Current mouse position: "+event.pageX+", "+event.pageY);//獲取鼠標(biāo)當(dāng)前相對(duì)于頁面的坐標(biāo)

　　return false;

　　});

　　(7)、event.which()方法

　　該方法的作用是在鼠標(biāo)單擊事件中獲取到鼠標(biāo)的左、中、右鍵；在鍵盤事件中獲取鍵盤的按鍵。

　　復(fù)制代碼代碼如下:

　　$(function() {

　　$("body").mousedown(function(e) {

　　alert(e.which);//1=鼠標(biāo)左鍵 left; 2=鼠標(biāo)中鍵; 3=鼠標(biāo)右鍵

　　});

　　(8)、event.metaKey()方法

　　針對(duì)不同瀏覽器對(duì)鍵盤中的按鍵解釋不同，jquery也進(jìn)行了封裝，并規(guī)定event.metaKey()方法為鍵盤事件中獲取按鍵。

　　(9)、event.originalEvent()方法

　　該方法的作用是指向原始的事件對(duì)象。

　　7、關(guān)于bind()方法

　　(1)、綁定多個(gè)事件類型

　　復(fù)制代碼代碼如下:

　　$(function() {

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

　　$(this).toggleClass("over");

　　});

　　(2)、添加事件命名空間

　　復(fù)制代碼代碼如下:

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

　　});

　　在所綁定的事件類型后面添加命名空間，這樣在刪除事件時(shí)只需要指定命名空間即可。單擊元素后，"plugin"的命名空間被刪除，而不在"plugin"的命名空間的"dblclick"事件依然存在。

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

　　復(fù)制代碼代碼如下:

　　$(function() {

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

　　$("body").append("

　　click

　　");

　　});

　　$("div").bind("click.plugin", function() {

　　$("body").append("

　　click.plugin

　　");

　　});

　　$("button").click(function() {

　　$("div").trigger("click!");//注意click后面的感嘆號(hào)

　　});

　　當(dāng)單擊

　　元素后，會(huì)同時(shí)觸發(fā)click事件和click.plugin事件。如果只是單擊元素，則只觸發(fā)click事件，而不觸發(fā)click.plugin事件。注意，trigger("click!")后面的感嘆號(hào)的作用是匹配所有不包含在命名空間中的click方法。如果需要兩者都觸發(fā)，只需要去掉感嘆號(hào)即可。

　　8、關(guān)于jQuery中的動(dòng)畫

　　(1)、用jQuery做動(dòng)畫效果要求要在標(biāo)準(zhǔn)模式下，否則可能會(huì)引起動(dòng)畫抖動(dòng)。標(biāo)準(zhǔn)模式即要求文件頭部包含如下的DTD定義：

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

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

　　9、關(guān)于load()方法

　　此方法通常用來從web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件。

　　(1)、用load()篩選載入的HTML文檔內(nèi)容

　　這時(shí)load()方法的URL參數(shù)的語法結(jié)構(gòu)為："url selector"，注意url和selector之間有一個(gè)空格。例如只需要加載test.html頁面中class為"para"的內(nèi)容，可以用$("#xxx").load("test.html .para");

　　(2)、load()方法的回調(diào)函數(shù)的參數(shù)

　　load()方法提供的回調(diào)函數(shù)有3個(gè)參數(shù)，分別代表請(qǐng)求返回的內(nèi)容、請(qǐng)求狀態(tài)和XMLHttpRequest對(duì)象，代碼如下：

　　復(fù)制代碼代碼如下:

　　#("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest) {

　　//responseText : 請(qǐng)求返回的內(nèi)容

　　//textStatus : 請(qǐng)求狀態(tài): success、error、notmodified、timeout 4種

　　//XMLHttpRequest ： XMLHttpRequest對(duì)象

　　});

　　注意，在load()方法中，無論Ajax請(qǐng)求是否成功，只要當(dāng)請(qǐng)求完成后(complete)后，回調(diào)函數(shù)(callback)就被觸發(fā)。此對(duì)應(yīng)$.ajax()方法中的complete回調(diào)函數(shù)。

　　10、關(guān)于$.get()方法

　　(1)、只有當(dāng)response的返回狀態(tài)是success時(shí)才調(diào)用此方法的回調(diào)函數(shù)。

　　(2)、此方法的回調(diào)函數(shù)有兩個(gè)參數(shù)，分別是data即返回的內(nèi)容(可以是XML文檔、JSON文件、HTML片段等等)、textStatus即請(qǐng)求狀態(tài)(success、error、notmodified、timeout這4種)

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

　　11、關(guān)于內(nèi)容選擇器

　　內(nèi)容選擇器:contains()選擇符區(qū)分大小寫。

　　12、關(guān)于插件的通常寫法

　　復(fù)制代碼代碼如下:

　　(function ($) {

　　$.fn.extend({

　　"resize" : function (userOptions) {

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