初學jQuery,為了更好的系統學習好jQuery,今天特意把自己學習心得歸納一下,貼上來與初學者共進退,今天我主要總結的是jQuery的基本選擇器。
jQuery的基本選擇器是jQuery中最常用的選擇器,也是最簡單的選擇器,它主要是透過元素的ID,CLASS,元素的標籤ELEMENT等來找出HTML中的DOM元素。在網頁中,每一個id名稱只能使用一次,class允許重複使用。在jQury應用程式中,可以使用這些基本選擇器來完成絕大多數的工作,以下我們主要來看看其特定的實作過程。為了更好的學習,我們先在這裡列出一個HTML標籤代碼:
<div id="mydiv"> <div class="mini">我是一个名为mini的div标签</div> <div class="mini">我是一个名为mini的div标签</div> <div class="mini">我是一个名为mini的div标签</div> <p>我是一个段落p标签</p> <span>我是一个行内span标签</span> <div>
接著我們分別來看看這幾個基本選擇器的應用
##一、ID選擇器
選擇器:#id
#描述:根據給定的id匹配一個元素
#回傳:單一元素
範例:
<script type="text/javascript"> $(document).ready(function(){ //id选择器 $("#mydiv").css("background","#f96"); });</script>
功能:改變id為mydiv的元素的背景色
二、class選擇器
#選擇器:.class
##說明:傳回給定的類別名稱匹配的元素
傳回:集合元素
範例:##
<script type="text/javascript"> $(document).ready(function(){ //class选择器 $(".mini").css("background","#f96"); });</script>功能:改變class為mini的所有元素的背景色
三、標籤element
選擇器:
element描述:
根據給定的元素名稱匹配元素返回:
集合元素範例:
<script type="text/javascript"> $(document).ready(function(){ //element选择器 $("div").css("background","#f96"); });</script>功能:改變元素名稱是<div>的所有元素的背景色
四、所有元素*
選擇器:
*描述:
改變符合的所有html標籤元素傳回值:
集合元素範例:
<script type="text/javascript"> $(document).ready(function(){ //*选择器 $("*").css("background","#f96"); });</script>功能:改變所有html元素標籤的背景色
五、selector1、 selector2、....selectorN
選擇器:
selector,selector2,...selectorN##描述:將每一個選擇器匹配到的元素合併後一起返回
返回:集合元素
範例:
<script type="text/javascript"> $(document).ready(function(){ //selector1,selector2,...selectorN选择器 $(".mini,p").css("background","#f96"); });</script>
功能:改變class名為mini和段落p元素的背景色