jQuery學(xué)習(xí)筆記之jQuery中的$
在jQuery中,最常用的莫過于使用美元符號$,它提供了各種各樣的豐富功能。包括選擇頁面中一個或者一類元素、作為功能函數(shù)的前綴、windows.onload的完善,創(chuàng)建DOM節(jié)點(diǎn)等。本文介紹jQuery的用法。作為基礎(chǔ)
1.選擇器
在css中,選擇器的作用是選擇頁面的某一類(類別選擇器)元素或者某個(id選擇器)。而jQuery中的“$”作為選擇器,同樣是選擇某類或者某個元素,只不過jQuery提供了更全面的選擇方式。而且為用戶處理了瀏覽器兼容問題。
例如在在css<h2>下的<a>元素,css:
h2 a{
/* 添加css屬性 */}
在jQuery中,通過以下代碼選擇h2下的a元素,作為一個對象數(shù)組,供javascript使用。
$("H2 a")
例子:
<body>
<script type="text/javascript">
window.onload = function() {
var oElements = $("h2 a"); //選擇匹配元素
for (var i = 0; i < oElements.length; i++)
oElements[i].innerHTML = i.toString();
}
</script>
<h2><a href="#">正文</a>內(nèi)容</h2>
<h2>正文<a href="#">內(nèi)容</a></h2>
<h2>正文<a href="#">內(nèi)容</a></h2>
<h2>正文<a href="#">內(nèi)容</a></h2>
<h2>正文<a href="#">內(nèi)容</a></h2>
</body>
如上,文檔中有5個<H2>標(biāo)記,分別包含了<a>元素,使用$選擇器,如下,可以看到j(luò)Query輕松的實(shí)現(xiàn)了元素的選擇,如果使用DOM,類似這樣的節(jié)點(diǎn)將要使用大量的javascript代碼。
jQuery中選擇器的通用語法如下
$(selector)
或者
jQuery(selector)
其中,selector符合css標(biāo)準(zhǔn),甚至css3的標(biāo)準(zhǔn)
例如:
$("#showDiv")
id選擇器,這相當(dāng)于javascript中,document.getElementById("shouDiv"),可以看到j(luò)Query的變色方法簡潔很多。
$(".newClass")
類別選擇器,選擇css類別為"newClass"元素的節(jié)點(diǎn),在javascript要實(shí)現(xiàn)相同的選擇,需要用for循環(huán)遍歷整個DOM
$("p:odd")
選擇所有奇數(shù)行的p元素,幾乎所有的標(biāo)記都可以使用 ":odd"和":even"選擇奇偶的選擇。
$("td:nth-child(1)")
選擇所有表格行的第一個單元格,就是第一列。這在修改表格的某一列是非常有用的,不再需要一行行的遍歷表格。
$("li>a")
子選擇器,返回<li>下標(biāo)記的<a>元素,不包括孫元素標(biāo)記
$("a[herf$=pdf]")
屬性選擇器,選擇所有超鏈接,并且這些鏈接是以pdf結(jié)尾的。有了屬性選擇器,可以很好的選擇頁面中各種特性的元素
總結(jié):
$就是jQuery的別稱
而jQuery就是jQuery庫提供的一個函數(shù).(好像也不僅僅只是函數(shù), 因?yàn)檫€有 $.ajax(options) 這樣的使用,等同 jQuery.ajax(options))
這個函數(shù)的作用是根據(jù) () 里的參數(shù)進(jìn)行查找和選擇html文檔中的元素, 函數(shù)作用之一就是GetElementByID的代替,但()內(nèi)不僅可以是ID,還可以是各類選擇器
- jquery $(document).ready() 與window.onload的區(qū)別
- jQuery的三種$()
- (function($){...})(jQuery)的意思
- jQuery下通過$.browser來判斷瀏覽器.
- 基于jquery的$.ajax async使用
- jQuery $.data()方法使用注意細(xì)節(jié)
- jQuery ReferenceError: $ is not defined 錯誤的處理辦法
- jQuery中$.fn的用法示例介紹
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
- Jquery中"$(document).ready(function(){ })"函數(shù)的使用詳解
- jquery $.trim()方法使用介紹
- jQuery 1.9使用$.support替代$.browser的使用方法
- jQuery $.extend()用法總結(jié)
- 詳解jquery中$.ajax方法提交表單
- jQuery $命名沖突解決方案匯總
相關(guān)文章
jQuery中與toggleClass等價的程序段 以及未來學(xué)習(xí)的方向
昨天開始學(xué)jQuery,js是我前端設(shè)計技術(shù)的一塊心病,一直沒有找到很好的學(xué)習(xí)辦法。最近突然開悟,可以學(xué)jQuery呀,這個東西比較好學(xué)。2010-03-03jquery全選checkBox功能實(shí)現(xiàn)代碼(取消全選功能)
這篇文章主要介紹了jquery實(shí)現(xiàn)checkBox全選功能、取消全選功能,代碼簡單,大家可以直接參考使用2013-12-12jQuery調(diào)用WebMethod(PageMethod) NET2.0的方法
這篇文章主要介紹了jQuery調(diào)用WebMethod(PageMethod) NET2.0的方法,結(jié)合實(shí)例形式分析了jQuery基于ajax調(diào)用.NET方法的相關(guān)技巧,需要的朋友可以參考下2016-04-04從零開始學(xué)習(xí)jQuery (七) jQuery動畫實(shí)現(xiàn) 讓頁面動起來
開發(fā)人員一直痛疼做動畫. 但是有了jQuery你會瞬間成為別人(那些不知道jQuery的人)眼里的動畫高手! 本文將介紹jQuery的動畫相關(guān)函數(shù).原來做動畫如此簡單!2011-02-02jquery 單擊li防止重復(fù)加載的實(shí)現(xiàn)代碼
li在單擊后調(diào)用ajax加載內(nèi)容然后展開,li不像button在響應(yīng)了單擊事件后可以設(shè)置為disabled。2010-12-12基于jquery實(shí)現(xiàn)動態(tài)豎向柱狀條特效
很多數(shù)據(jù)統(tǒng)計效果中,柱狀條方式的算是比較常見的一種,形象直觀,下面就是一段能夠?qū)崿F(xiàn)此功能的代碼實(shí)例,并且具有一定的動態(tài)效果,感興趣的朋友可以參考一下2016-02-02jQuery+CSS3實(shí)現(xiàn)四種應(yīng)用廣泛的導(dǎo)航條制作實(shí)例詳解
這篇文章主要介紹了jQuery+CSS3實(shí)現(xiàn)多種類型的導(dǎo)航條制作實(shí)例詳解的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09基于MVC3方式實(shí)現(xiàn)下拉列表聯(lián)動(JQuery)
點(diǎn)擊一個下拉框,則另一個下拉框的值發(fā)生對應(yīng)變化。如:選擇中國,則另個一下拉框里顯示中國各個省份,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-09-09