jQuery選擇器之基本選擇器用法實例分析
本文實例講述了jQuery選擇器之基本選擇器用法。分享給大家供大家參考，具體如下：
初學(xué)jQuery，為了能系統(tǒng)地學(xué)習(xí)好jQuery，今天特意把自己的學(xué)習(xí)心得歸納一下，貼上來與初學(xué)者共享，今天我主要總結(jié)的是jquery的基本選擇器。
基本選擇器是jQuery中最常用的選擇器，也是最簡單的選擇器，它主要是通過元素的id、class、標簽等來查找HTML中的DOM元素。在網(wǎng)頁中每個id只能使用一次，class允許重復(fù)使用。在jQuery應(yīng)用中，可以使用這些基本選擇器來完成絕大多數(shù)工作，下面我們主要來看其具體的使用過程。為了更好的學(xué)習(xí)，我們先列出一段HTML代碼：
<div> <div id="one" class="mini">id=one，class=aaa的div</div> <div id="two" class="mini">id=two，class=aaa的div</div> <p>這是p元素</p> <span>這是span元素</span> </div>
一、所有元素*
選擇器：*
描述：匹配所有元素
返回：元素集合
示例：
<script type="text/javascript">
$(document).ready(function(){
$("*").css("background","#ffbbaa");
});
</script>
二、id選擇器
選擇器：#id
描述：根據(jù)給定的ID匹配一個元素。
返回：單個元素
示例：
<script type="text/javascript">
$(document).ready(function(){
$("#one").css("background","#ffbbaa");
});
</script>
三、class選擇器
選擇器：.class
描述：根據(jù)給定的class匹配所有元素。
返回：元素集合
示例：
<script type="text/javascript">
$(document).ready(function(){
$(".mini").css("background","#ffbbaa");
});
</script>
四、element選擇器
選擇器：element
描述：根據(jù)給定的元素名稱匹配所有元素。
返回：元素集合
示例：
<script type="text/javascript">
$(document).ready(function(){
$("span").css("color","#ffbbaa");
});
</script>
五、selector1,selector2,…,selectorN
選擇器：selector1,selector2,…selectorN
描述：將每一個選擇器匹配到的元素合并后一起返回。
返回：元素集合
示例：
<script type="text/javascript">
$(document).ready(function(){
$("span,p,#one").css("background","#ffbbaa");
});
</script>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
Jquery顯示和隱藏元素或設(shè)為只讀(含Ligerui的控件禁用,實例說明介紹)
本篇文章是對Jquery中顯示和隱藏元素或設(shè)為只讀以及Ligerui的控件禁用實現(xiàn)代碼進行了分析介紹，需要的朋友可以參考下2013-07-07
本篇文章小編將為大家介紹，使用PHP+JQuery+Ajax分頁的實現(xiàn)。需要的朋友參考下2013-04-04
jQuery中(function(){})()執(zhí)行順序的理解
function的順序是這樣的：先計算第一個小括號，發(fā)現(xiàn)里面的表達式是一個函數(shù)，返會該匿名函數(shù)的引用（指針），最后一個括號則是建立匿名函數(shù)的實參和并執(zhí)行，感興趣的你可以參考下本文2013-03-03
jquery插件方式實現(xiàn)table查詢功能的簡單實例
下面小編就為大家?guī)硪黄猨query插件方式實現(xiàn)table查詢功能的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要簡單介紹了jquery事件處理，十分的實用，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要為大家分享了jQuery插件的學(xué)習(xí)筆記，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)彈幕APP的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery實現(xiàn)仿QQ空間裝扮預(yù)覽圖片的鼠標提示效果代碼
這篇文章主要介紹了jQuery實現(xiàn)仿QQ空間裝扮預(yù)覽圖片的鼠標提示效果代碼,基于jQuery鼠標事件動態(tài)操作頁面元素樣式的動態(tài)變換實現(xiàn)該功能,需要的朋友可以參考下2015-10-10
juqery 學(xué)習(xí)之四 篩選過濾函數(shù)說明，學(xué)習(xí)jquery的朋友可以參考下。2010-11-11
ASP.NET jQuery 實例5 (顯示CheckBoxList成員選中的內(nèi)容)
這章我們主要看下如何通過jQuery來獲取CheckBoxList成員內(nèi)容2012-01-01