jQuery選擇器之基本選擇器用法實例分析
本文實例講述了jQuery選擇器之基本選擇器用法。分享給大家供大家參考，具體如下：
初學jQuery，為了能系統(tǒng)地學習好jQuery，今天特意把自己的學習心得歸納一下，貼上來與初學者共享，今天我主要總結(jié)的是jquery的基本選擇器。
基本選擇器是jQuery中最常用的選擇器，也是最簡單的選擇器，它主要是通過元素的id、class、標簽等來查找HTML中的DOM元素。在網(wǎng)頁中每個id只能使用一次，class允許重復使用。在jQuery應用中，可以使用這些基本選擇器來完成絕大多數(shù)工作，下面我們主要來看其具體的使用過程。為了更好的學習，我們先列出一段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程序設計有所幫助。
相關(guān)文章
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。這篇文章主要介紹了Bootstrap的核心——柵格系統(tǒng)的使用,需要的朋友可以參考下2017-10-10
使用jquery插件實現(xiàn)等寬輸出文字，具體的調(diào)用及實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單滾動動畫效果的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
jQuery 翻頁組件yunm.pager.js實現(xiàn)div局部刷新的思路
翻頁插件有很多種，做出來的效果都非常棒，這篇文章主要介紹了jQuery 翻頁組件yunm.pager.js實現(xiàn)div局部刷新的思路，非常不錯,需要的朋友可以參考下2016-08-08
這篇文章介紹了jquery事件綁定的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
焦點圖顯示區(qū)域有固定的寬度,當前顯示寬度之外是一個半透明層顯示的其它的焦點圖片，最好的是，此特效兼容ie6以及其它瀏覽器。2013-08-08
這篇文章主要介紹了jquery使用正則表達式驗證email地址的方法,以實例形式分析了正則表達式的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery獲取樣式中顏色值的方法,可實現(xiàn)針對IE與Chrome、Firefox等不同瀏覽器都可獲取css樣式中background-color值的功能,非常具有實用價值,需要的朋友可以參考下2015-01-01
jQuery實現(xiàn)點擊下拉框輸入框時，自動顯示下面的下拉列表，而且是根據(jù)輸入框中輸入的搜索添加，自動在后臺查找，然后傳到前臺，展現(xiàn)頁面2013-10-10
EasyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實現(xiàn)代碼
今天做項目的時候，想在easyui的datagrid每一列數(shù)據(jù)后邊都加上一個操作按鈕，怎么實現(xiàn)此功能呢？下面小編給大家?guī)砹薊asyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實現(xiàn)代碼，需要的朋友參考下吧2017-08-08