您好,登錄后才能下訂單哦!
小編給大家分享一下jQuery中美元符號$的作用是什么,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
jQuery中的美元符號“$”的作用:1、作為jQuery包裝器,利用選擇器來選擇DOM元素;2、作為幾個通用的實用工具函數的命名空間的前綴;3、創建DOM元素;4、擴展jQuery;5、解決“window.onload”函數的沖突。
1、選擇器
在CSS中選擇器的作用是選擇頁面中某一類(類別選擇器)元素或者某一個元素(ID選擇器)
,而jQuery中的"$"作為選擇器,同樣是選擇某一類或某一類元素,只不過jQuery提供了
更多更全面的選擇方式。并且為用戶處理了瀏覽器的兼容問題
h3 a{ /添加CSS屬性/ }
而在jquery中則可以通過如下代碼來選中<h3>標記下包含的所有子標記<a>,作為一個對象數組,供javascript使用
$("h3 a")
$(selector)
或者
jQuery(selector)
其中selector符合CSS3標準
可以看到jQuery的表示方法簡潔很多
$("#showp“)
需要用for循環遍歷整個DOM
$(".SomeClass")
$("p : odd")
$("td:nth-child(1)")
$("li > a")
("a[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>
5.自定義添加"$"
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,
例如$("p p") 必須寫成jQuery("p p").
看完了這篇文章,相信你對“jQuery中美元符號$的作用是什么”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。