DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery常見問題 >> jQuery美元符號$用法大全
jQuery美元符號$用法大全
編輯:JQuery常見問題     

jQuery中的“$”

在jQuery中,最頻繁使用的符號“$”。$提供了各種各樣豐富的功能,

包括選擇頁面中的一個或是一類元素,作為功能函數的前綴,window.onload的

完善,創建頁面的DOM節點等。。。



1、選擇器

在CSS中選擇器的作用是選擇頁面中某一類(類別選擇器)元素或者某一個元素(ID選擇器)

,而jQuery中的"$"作為選擇器,同樣是選擇某一類或某一類元素,只不過jQuery提供了

更多更全面的選擇方式。並且為用戶處理了浏覽器的兼容問題

CSS可以通過如下代碼來選擇<h2>標記下包含的所有子標記<a>,然後添加相應的樣式風格

h2 a{

/*添加CSS屬性*/

}

而在jquery中則可以通過如下代碼來選中<h2>標記下包含的所有子標記<a>,作為一個對象數組,供javascript使用

$("h2 a")



jquery中選擇器的通用語法如下:

$(selector)

或者

jQuery(selector)



其中selector符合CSS3標准



------------------------------

$("#showDiv“)

id選擇器,相當於javascript中的document.getElementById("#showDiv“")

可以看到jQuery的表示方法簡潔很多



$(".SomeClass")

類別選擇器,選擇CSS類別作為”SomeClass“的所有節點元素, 在javascript中要實現相同的選擇,

需要用for循環遍歷整個DOM



$("p : odd")

選擇所有位於奇數行的<p>標記, 幾乎所有的標記都可以使用": odd" 或者 ": even" 來實現奇偶的選擇



$("td:nth-child(1)")

所有表格行的第一個單元格,就是第一列。這在修改表格的某一列的屬性時是非常有用的。不再需要一行行遍歷表格



$("li > a")

子選擇器,返回<li>標記的所有子元素<a>,不包括孫標記



$("a[href$=pdf]")

選擇所有超鏈接,並且這些超鏈接的href屬性是以"pdf"結尾的。有了屬性選擇器,可以很好的選擇頁面中的各種特性元素



注意:

在jQuery中美元符號"$"其實就等同於"jQuery",從jQuery的源碼中可以看出

為了編寫代碼的方便,通常都采用"$"來代替"jQuery"



2、功能函數前綴

在javascript中,開發者經常要便攜一些小函數來處理各種操作細節,例如在用戶提交表單時,

需要將文本框中的最前端和最末端的空格清理掉,javascript沒有提供類似trim()的功能,而引入

jQuery後,便可以直接使用trim()函數,例如

$.trim(sString);

以上代碼相當於:

jQuery.trim(sString);

即trim()函數時jQuery對象的一個方法。



3、解決window.onload函數的沖突

由於頁面的HMTL框架需要在頁面完全加載之後才能使用,因此在DOM編程時window,onload函數

頻繁被使用。倘若頁面中有多處都需要使用該函數,或者其他.js文件中也包含window.onload函數,

沖突問題十分棘手

jQuery中的ready()方法很好的解決了上述問題,它能夠自動將其中的函數在頁面加載完成後運行,

並且同一個頁面中可以使用多個ready()方法,而且不互相沖突。例如

$(document).ready(function(){

$("table.datalist tr:nth-child(odd)").addClass("altrow");

});

對於上述代碼jQuery還提供了簡寫,可以省略其中的"(document).ready"部分,代碼如下:

$(function(){

$("table.datalist tr:nth-child(odd)").addClass("altrow");

});



4、創建DOM元素

利用DOM方法創建元素節點,通常需要將document.createElement()、document.create TextNode()、

appendChild()配合使用,十分麻煩,而jQuery中使用"$"符號可以直接創建DOM元素。例如

var oNewP = $("<p>這是一個好故事</>")

以上代碼等同於javascript中的如下代碼:

var oNewP = document.createElement("p");// 新建節點

var oText = document.createTextNode("這是一個好故事");

oNewP.appendChild(oText);



另外,jQuery還提供了DOM元素的insertAfter()方法,偽代碼如下:

$(function(){// ready函數

var oNewP = $("<p>這是一個好故事</>");// 創建DOM元素

oNewP.insertAfter("#myTarget");// insertAfter()方法

});

<body>

<p id="myTarget">插入到這行文字之後</p>

<p>也就是插入到這行文字之前,但這行沒有id,也可能不存在</p>

</body>



自定義添加"$"

jQuery不能滿足所有用戶的所有需求,且有一些特殊的需求十分小眾,也不適合放到整個jQuery框架中,

用戶可以自定義該方法。代碼如下:

$.fn.disable = function(){

return this.each(function(){

if(typeof this.disabled != "undefined") this.disabled = true;

});

}

以上代碼首先設置"$.fn.disable",表明為"$"添加一個方法“disable()”,其中“$.fn”是擴展jQuery時所必須的

然後利用匿名函數定義這個方法,即用each()將調用這個方法的每個元素的disabled屬性均設置為true(如果該屬性存在)



6、解決"$"的沖突

如果其他框架也是用了“$",會引起沖突,jQuery同樣提供了noConflict()方法來解決"$"沖突問題

jQuery.noConflict();

以上代碼可以使"$"按照其他javascript框架的方式運算,這時再jQuery中便不能在使用“$”,而必須使用jQuery,

例如$("div p") 必須寫成jQuery("div p").
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved