jQuery選擇器——基本選擇器
初學jQuery,為了能系統地學習好jQuery,今天特意把自己的學習心得歸納一下,貼上來與初學者共享,今天我主要總結的是jquery的基本選擇器。
基本選擇器是jQuery中最常用的選擇器,也是最簡單的選擇器,它主要是通過元素的id、class、標籤等來查詢HTML中的DOM元素。在網頁中每個id只能使用一次,class允許重複使用。在jQuery應用中,可以使用這些基本選擇器來完成絕大多數工作,下面我們主要來看其具體的使用過程。為了更好的學習,我們先列出一段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
描述:根據給定的ID匹配一個元素。
返回:單個元素
示例:
<script type="text/javascript">
$(document).ready(function(){
$("#one").css("background","#ffbbaa");
});
</script>
三、class選擇器
選擇器:.class
描述:根據給定的class匹配所有元素。
返回:元素集合
示例:
<script type="text/javascript">
$(document).ready(function(){
$(".mini").css("background","#ffbbaa");
});
</script>
四、element選擇器
選擇器:element
描述:根據給定的元素名稱匹配所有元素。
返回:元素集合
示例:
<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>
相關文章
- jQuery選擇器介紹:基本選擇器、層次選擇器、過濾選擇器、表單選擇器jQuery
- jQuery選擇器之層次選擇器jQuery
- jQuery選擇器jQuery
- jQuery 選擇器jQuery
- jQuery 選擇器效率jQuery
- jQuery選擇器(下)jQuery
- Jquery的選擇器jQuery
- jQuery 選擇器彙總-思維導圖-選擇器jQuery
- jquery九大選擇器jQuery
- jquery中的選擇器jQuery
- 002---選擇器(標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器)字元
- jQuery入門-DOM/$/選擇器jQuery
- 關於jQuery中的選擇器jQuery
- jQuery原始碼剖析 (二) - 選擇器jQuery原始碼
- jQuery第二章選擇器jQuery
- 初學jQuery(表單選擇器)jQuery
- jQuery的基礎操作——選擇器jQuery
- CSS3新增選擇器(屬性選擇器、結構偽類選擇器、偽元素選擇器)CSSS3
- jQuery基本篩選選擇器使用指南jQuery
- 選擇器
- JQuery知識總結之選擇器jQuery
- css中:not()選擇器和jQuery中.not()方法CSSjQuery
- jQuery 原始碼學習 (六) 選擇器jQuery原始碼
- Jquery基礎筆記二(選擇器)jQuery筆記
- JQuery基礎28_選擇器2jQuery
- jQuery基礎——樣式篇 (選擇器)jQuery
- CSS選擇器CSS
- jQuery 對基本選擇符的運用jQuery
- jquery九大選擇器的用法舉例jQuery
- HTML DOM querySelectorAll() 代替 jquery的 $('') CSS選擇器HTMLjQueryCSS
- 淺談邏輯選擇器 -- 父選擇器它來了!
- 相鄰兄弟選擇器、後代選擇器和子選擇器三者有什麼區別?
- CSS 元素選擇器CSS
- CSS :valid 選擇器CSS
- CSS :required 選擇器CSSUI
- CSS :optional 選擇器CSS
- CSS id選擇器CSS
- iOS選擇器元件iOS元件
- Java NIO:選擇器Java