jQuery學(xué)習(xí)筆記之jQuery中的$
在jQuery中,最常用的莫過于使用美元符號(hào)$,它提供了各種各樣的豐富功能。包括選擇頁面中一個(gè)或者一類元素、作為功能函數(shù)的前綴、windows.onload的完善,創(chuàng)建DOM節(jié)點(diǎn)等。本文介紹jQuery的用法。作為基礎(chǔ)
1.選擇器
在css中,選擇器的作用是選擇頁面的某一類(類別選擇器)元素或者某個(gè)(id選擇器)。而jQuery中的“$”作為選擇器,同樣是選擇某類或者某個(gè)元素,只不過jQuery提供了更全面的選擇方式。而且為用戶處理了瀏覽器兼容問題。
例如在在css<h2>下的<a>元素,css:
h2 a{
/* 添加css屬性 */}
在jQuery中,通過以下代碼選擇h2下的a元素,作為一個(gè)對(duì)象數(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個(gè)<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的變色方法簡(jiǎn)潔很多。
$(".newClass")
類別選擇器,選擇css類別為"newClass"元素的節(jié)點(diǎn),在javascript要實(shí)現(xiàn)相同的選擇,需要用for循環(huán)遍歷整個(gè)DOM
$("p:odd")
選擇所有奇數(shù)行的p元素,幾乎所有的標(biāo)記都可以使用 ":odd"和":even"選擇奇偶的選擇。
$("td:nth-child(1)")
選擇所有表格行的第一個(gè)單元格,就是第一列。這在修改表格的某一列是非常有用的,不再需要一行行的遍歷表格。
$("li>a")
子選擇器,返回<li>下標(biāo)記的<a>元素,不包括孫元素標(biāo)記
$("a[herf$=pdf]")
屬性選擇器,選擇所有超鏈接,并且這些鏈接是以pdf結(jié)尾的。有了屬性選擇器,可以很好的選擇頁面中各種特性的元素
總結(jié):
$就是jQuery的別稱
而jQuery就是jQuery庫提供的一個(gè)函數(shù).(好像也不僅僅只是函數(shù), 因?yàn)檫€有 $.ajax(options) 這樣的使用,等同 jQuery.ajax(options))
這個(gè)函數(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 錯(cuò)誤的處理辦法
- 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 ajax請(qǐng)求實(shí)例深入解析
jquery中封裝了一些ajax請(qǐng)求的方法,很實(shí)用,本文將以此引入一個(gè)實(shí)例,對(duì)jquery中ajax請(qǐng)求的方法進(jìn)行詳細(xì)介紹,需要了解更多的朋友可以參考下2012-11-11jQuery中與toggleClass等價(jià)的程序段 以及未來學(xué)習(xí)的方向
昨天開始學(xué)jQuery,js是我前端設(shè)計(jì)技術(shù)的一塊心病,一直沒有找到很好的學(xué)習(xí)辦法。最近突然開悟,可以學(xué)jQuery呀,這個(gè)東西比較好學(xué)。2010-03-03jquery全選checkBox功能實(shí)現(xiàn)代碼(取消全選功能)
這篇文章主要介紹了jquery實(shí)現(xiàn)checkBox全選功能、取消全選功能,代碼簡(jiǎn)單,大家可以直接參考使用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動(dòng)畫實(shí)現(xiàn) 讓頁面動(dòng)起來
開發(fā)人員一直痛疼做動(dòng)畫. 但是有了jQuery你會(huì)瞬間成為別人(那些不知道jQuery的人)眼里的動(dòng)畫高手! 本文將介紹jQuery的動(dòng)畫相關(guān)函數(shù).原來做動(dòng)畫如此簡(jiǎn)單!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)動(dòng)態(tài)豎向柱狀條特效
很多數(shù)據(jù)統(tǒng)計(jì)效果中,柱狀條方式的算是比較常見的一種,形象直觀,下面就是一段能夠?qū)崿F(xiàn)此功能的代碼實(shí)例,并且具有一定的動(dòng)態(tài)效果,感興趣的朋友可以參考一下2016-02-02jQuery+CSS3實(shí)現(xiàn)四種應(yīng)用廣泛的導(dǎo)航條制作實(shí)例詳解
這篇文章主要介紹了jQuery+CSS3實(shí)現(xiàn)多種類型的導(dǎo)航條制作實(shí)例詳解的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09基于MVC3方式實(shí)現(xiàn)下拉列表聯(lián)動(dòng)(JQuery)
點(diǎn)擊一個(gè)下拉框,則另一個(gè)下拉框的值發(fā)生對(duì)應(yīng)變化。如:選擇中國(guó),則另個(gè)一下拉框里顯示中國(guó)各個(gè)省份,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-09-09