從上一節我們知道，jQuery選擇器的功能就是把元素選中，然後我們才能對選中的元素進行各種操作。其中，jQuery選擇器的格式如下：
$("選擇器")
這一節，我們先來介紹jQuery最基本的幾個選擇器。所謂的基本選擇器，指的是在jQuery中使用最頻繁的選擇器。在jQuery中，基本選擇器共有5種：
元素選擇器，就是“選中”相同的元素，然後對相同的元素進行操作。
語法：
$("元素名")
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("div").css("color","red");
})
</script>
</head>
<body>
<div> 學習網</div>
<p> 學習網</p>
<span> 學習網</span>
<div> 學習網</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$(function () {
//這裡是你的jQuery代碼
}
這句代碼功能類似於JavaScript中的window.onload = function(){}，也就是在文檔加載完成之後執行的代碼。以後我們寫jQuery代碼都在$(function(){})裡面寫。在“jQuery頁面載入事件”這一節我們會詳細介紹。不過在這裡建議大家先去看看這一節的內容，然後再回到這一節學習。
在這個例子中，$("div")表示選中所有的div元素，css("color","red")表示將選中的元素的color屬性設置為紅色。css()方法是jQuery操作CSS樣式的方法，這個知識我們會在“CSS屬性操作”這一節會詳細講解到。由於css()是“對象的一個方法”，因此我們使用點運算符來調用，如$(“div”).css()。
在這一節的學習中，我們會發現jQuery選擇器是跟CSS選擇器完全一樣的！我們只需要把CSS選擇器的寫法套進$("")中，就變成了jQuery選擇器，非常簡單！
沒錯，這麼簡單一步，jQuery選擇器就誕生了！對於其他jQuery選擇器也可以這樣得到。
id選擇器，就是選中某個id的元素，然後對該元素進行各種操作。有一定要注意的就是：同一頁面不允許出現相同id的元素。
語法：
$("#id名")
說明：
id名前面必須要加上前綴“#”，否則該選擇器無法生效。id名前面加上“#”，表明這是一個id選擇器。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#lvye").css("color","red");
})
</script>
</head>
<body>
<div> 學習網</div>
<div id="lvye"> 學習網</div>
<div> 學習網</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("#lvye").css("color","red")表示選中id為lvye的元素，然後設置該元素的color屬性值為red。
把CSS的id選擇器插入$("")中就變成了jQuery中的id選擇器，很簡單。
class選擇器，就是我們常說的“類選擇器”。我們可以對“相同的元素”或者“不同的元素”設置一個class（類名），然後針對這個class的元素進行各種操作。
語法：
$(".類名")
說明：
class名前面必須要加上前綴“.”（英文點號），否則該選擇器無法生效。類名前面加上“.”，表明這是一個class選擇器。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".lv").css("color","red");
})
</script>
</head>
<body>
<div> 學習網</div>
<p class="lv"> 學習網</p>
<span class="lv"> 學習網</span>
<div> 學習網</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$(".lv").css("color","red")表示選中class為lv的所有元素，然後設置這些元素設置color屬性值為red。
p元素和span元素是兩個不同的元素，但是我們可以為這兩個不同的元素設置相同的class，這樣就可以同時為這兩個不同的元素進行相同的操作了。
群組選擇器，就是同時對幾個選擇器進行相同的操作。
語法：
$("選擇器1 , 選擇器2 ,……,選擇器n")
說明：
對於群組選擇器，兩個選擇器之間必須用“,”（英文逗號）隔開，不然群組選擇器無法生效。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("h3,div,p,span").css("color","red");
})
</script>
</head>
<body>
<h3> 學習網</h3>
<div> 學習網</div>
<p> 學習網</p>
<span> 學習網</span>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("h3,div,p,span").css("color","red")表示選中所有的h3元素、div元素、p元素和span元素，然後設置這些元素的字體顏色為red。
$(function () {
$("h3,div,p,span").css("color","red");
})
上面這句代碼等價於：
$(function () {
$("h3").css("color","red");
$("div").css("color","red");
$("p").css("color","red");
$("span").css("color","red");
})
綜上所述，我們可以知道，當我們為多個選擇器定義相同的操作（樣式定義、DOM操作等）時，使用群組選擇器來得更加方便高效。
*選擇器，也成為“全選選擇器”，用於選擇所有的元素。在CSS中，我們常常用*選擇器來去除所有元素默認的padding和margin。
*{padding:0;margin:0;}
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#list *").css("color","red");
})
</script>
</head>
<body>
<h3>前端核心技術</h3>
<div id="list">
<div>（1）HTML</div>
<p>（2）CSS</p>
<span>（3）JavaScript</span>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
$("#list *")表示選擇id為list的元素下面的所有元素。
這一節跟我們之前學過的CSS選擇器在內容上是一致的。如果是 的老熟人，相信看這一節都不用5分鐘。之所以我還那麼仔細地講解一遍，這是為了照顧那些沒有看過我們CSS入門教程的新人。