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使用hide方法隱藏指定元素class樣式用法實(shí)例
這篇文章主要介紹了jQuery使用hide方法隱藏指定元素class樣式,實(shí)例分析了jQuery中hide隱藏class樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JQuery中基礎(chǔ)過濾選擇器用法實(shí)例分析
這篇文章主要介紹了JQuery中基礎(chǔ)過濾選擇器用法,涉及jQuery屬性選擇及樣式操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
jQuery打字效果實(shí)現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了jQuery打字效果實(shí)現(xiàn)方法,詳細(xì)分析了jQuery實(shí)現(xiàn)打字效果所涉及的jticker_split.js插件機(jī)具體調(diào)用技巧,并附帶完整的demo源碼供讀者下載參考,需要的朋友可以參考下2015-12-12
jQuery Easyui Datagrid實(shí)現(xiàn)單行的上移下移及保存移動的結(jié)果
這篇文章主要介紹了jQuery Easyui Datagrid實(shí)現(xiàn)單行的上移下移及保存移動的結(jié)果,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08
jQuery實(shí)現(xiàn)購物車的總價(jià)計(jì)算和總價(jià)傳值功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)購物車的總價(jià)計(jì)算和總價(jià)傳值功能 ,代碼簡單易懂,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
給artDialog 5.02 增加ajax get功能詳細(xì)介紹
本文將詳細(xì)介紹給artDialog 5.02 增加ajax get功能的方法,按興趣的朋友可以參考2012-11-11
easyui 中的datagrid跨頁勾選問題的實(shí)現(xiàn)方法
很多朋友都遇到這樣的需求,easyui的datagrid分頁顯示數(shù)據(jù),如果有需求要求勾選多條數(shù)據(jù)且不再同一頁中,easyui會保存在其他頁選中的數(shù)據(jù)嗎?小編結(jié)合資料自己整理了一篇文章,需要的的朋友參考下吧2017-01-01

