溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

jQuery中美元符號$的作用是什么

發(fā)布時間：2021-01-20 09:44:24 來源：億速云 閱讀：609 作者：小新 欄目：web開發(fā)

小編給大家分享一下jQuery中美元符號$的作用是什么，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

jQuery中的美元符號“$”的作用：1、作為jQuery包裝器，利用選擇器來選擇DOM元素；2、作為幾個通用的實用工具函數(shù)的命名空間的前綴；3、創(chuàng)建DOM元素；4、擴展jQuery；5、解決“window.onload”函數(shù)的沖突。

1、選擇器

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

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

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

（1）CSS可以通過如下代碼來選擇<h3>標記下包含的所有子標記<a>，然后添加相應的樣式風格
h3 a{
/添加CSS屬性/
}

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

$("h3 a")
（2）jquery中選擇器的通用語法如下：
$(selector)

或者

jQuery(selector)

其中selector符合CSS3標準

（3）id選擇器，相當于javascript中的document.getElementById("#showp“")

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

$("#showp“)
（3）類別選擇器，選擇CSS類別作為”SomeClass“的所有節(jié)點元素， 在javascript中要實現(xiàn)相同的選擇，

需要用for循環(huán)遍歷整個DOM

$(".SomeClass")
（4）選擇所有位于奇數(shù)行的<p>標記， 幾乎所有的標記都可以使用": odd" 或者 ": even" 來實現(xiàn)奇偶的選擇
$("p : odd")
（5）所有表格行的第一個單元格，就是第一列。這在修改表格的某一列的屬性時是非常有用的。不再需要一行行遍歷表格
$("td:nth-child(1)")
（6）子選擇器，返回<li>標記的所有子元素<a>,不包括孫標記
$("li > a")
（7）選擇所有超鏈接，并且這些超鏈接的href屬性是以"pdf"結(jié)尾的。有了屬性選擇器，可以很好的選擇頁面中的各種特性元素

("a[href=pdf]")

注意：

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

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

2、功能函數(shù)前綴

在javascript中，開發(fā)者經(jīng)常要便攜一些小函數(shù)來處理各種操作細節(jié)，例如在用戶提交表單時，

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

jQuery后，便可以直接使用trim()函數(shù)，例如

$.trim(sString);

以上代碼相當于：

jQuery.trim(sString);

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

3、解決window.onload函數(shù)的沖突

由于頁面的HMTL框架需要在頁面完全加載之后才能使用，因此在DOM編程時window.onload函數(shù)

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

沖突問題十分棘手

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

并且同一個頁面中可以使用多個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、創(chuàng)建DOM元素

利用DOM方法創(chuàng)建元素節(jié)點，通常需要將document.createElement()、document.create TextNode()、

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

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

以上代碼等同于javascript中的如下代碼：

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

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

oNewP.appendChild(oText);

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

$(function(){           // ready函數(shù)

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

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

});

<body>

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

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

</body>

5.自定義添加"$"

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

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

$.fn.disable = function(){

return this.each(function(){

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

});

}

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

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

6、解決"$"的沖突

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

jQuery.noConflict();

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

例如$("p p") 必須寫成jQuery("p p").

看完了這篇文章，相信你對“jQuery中美元符號$的作用是什么”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手