jQuery選擇器之基本選擇器用法實(shí)例分析
本文實(shí)例講述了jQuery選擇器之基本選擇器用法。分享給大家供大家參考，具體如下：
初學(xué)jQuery，為了能系統(tǒng)地學(xué)習(xí)好jQuery，今天特意把自己的學(xué)習(xí)心得歸納一下，貼上來與初學(xué)者共享，今天我主要總結(jié)的是jquery的基本選擇器。
基本選擇器是jQuery中最常用的選擇器，也是最簡單的選擇器，它主要是通過元素的id、class、標(biāo)簽等來查找HTML中的DOM元素。在網(wǎng)頁中每個(gè)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匹配一個(gè)元素。
返回：單個(gè)元素
示例：
<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
描述：將每一個(gè)選擇器匹配到的元素合并后一起返回。
返回：元素集合
示例：
<script type="text/javascript">
$(document).ready(function(){
$("span,p,#one").css("background","#ffbbaa");
});
</script>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。這篇文章主要介紹了Bootstrap的核心——柵格系統(tǒng)的使用,需要的朋友可以參考下2017-10-10
使用jquery插件實(shí)現(xiàn)等寬輸出文字，具體的調(diào)用及實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡單滾動動畫效果的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
jQuery 翻頁組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路
翻頁插件有很多種，做出來的效果都非常棒，這篇文章主要介紹了jQuery 翻頁組件yunm.pager.js實(shí)現(xiàn)div局部刷新的思路，非常不錯(cuò),需要的朋友可以參考下2016-08-08
這篇文章介紹了jquery事件綁定的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
一款jquery特效編寫的大度寬屏焦點(diǎn)圖切換特效的實(shí)例代碼
焦點(diǎn)圖顯示區(qū)域有固定的寬度,當(dāng)前顯示寬度之外是一個(gè)半透明層顯示的其它的焦點(diǎn)圖片，最好的是，此特效兼容ie6以及其它瀏覽器。2013-08-08
jquery使用正則表達(dá)式驗(yàn)證email地址的方法
這篇文章主要介紹了jquery使用正則表達(dá)式驗(yàn)證email地址的方法,以實(shí)例形式分析了正則表達(dá)式的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery獲取樣式中顏色值的方法,可實(shí)現(xiàn)針對IE與Chrome、Firefox等不同瀏覽器都可獲取css樣式中background-color值的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01
利用jQuery實(shí)現(xiàn)可輸入搜索文字的下拉框
jQuery實(shí)現(xiàn)點(diǎn)擊下拉框輸入框時(shí)，自動顯示下面的下拉列表，而且是根據(jù)輸入框中輸入的搜索添加，自動在后臺查找，然后傳到前臺，展現(xiàn)頁面2013-10-10
EasyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實(shí)現(xiàn)代碼
今天做項(xiàng)目的時(shí)候，想在easyui的datagrid每一列數(shù)據(jù)后邊都加上一個(gè)操作按鈕，怎么實(shí)現(xiàn)此功能呢？下面小編給大家?guī)砹薊asyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實(shí)現(xiàn)代碼，需要的朋友參考下吧2017-08-08