jQuery基礎之jQuery選取器

 一，CSS選取器
 標籤選取器：(以文件項目作為選取器)
 E{
//css規則
 }
 demo：
 td{
font-size:15px;
width:142px;
 }
ID選取器：(以文件項目的唯一識別碼ID作為選擇符)
#ID{
//css選取器
}
demo：
#note{
font-size:15px;
}
類別選取器：(以文件項目的class作為選擇符)
E.className{
//css規則
}
demo：
div.note{
font-size:18px;
}
群組選取器：(多個選擇符應用同樣的樣式規則)
 E1,E2,E3{
//css規則
 }
 demo：
 td,p,div{
font-size:15px;
 }
 後代選取器：（元素E的任意後代元素F）
 E,F{
//css規則
 }
 demo:
 #links a{
color:red;
 }
 通配選取器：（以文檔的所有元素作為選擇符）
 *{
//css規則
 }
 demo:
 *{
font-size:4px;
 }
 
 二，jQuery選取器：
 jQuery中的選取器完全繼承了CSS的風格。利用jQuery選取器可以非常便捷和快速地找出特定的DOM元素，然後為它們添加相應的行為。
 demo1：
 <p class="demo">jQuery Demo</p>
 <script type="text/javascript">
$(".demo").click(function(){
alert("jQuery demo!");
})
 </script>
 
 demo2:
 <p>test1</p>
 <p>test2</p>
 要求：1，擷取所有<p>元素
 2，對<p>元素進行迴圈
 3，給每個<p>元素添加行為
 js代碼如下：
不使用jQuery：
 var items = document.getElementsByTagName("p");
 for(var i = 0;i < items.length;i++){
items[i].onclick = function(){
alert("success");
}
 }
 使用jQuery：
$("p").click(function(){ //擷取頁面中的所有<p>元素，給每一個<p>元素添加onclick事件   
alert("success");
. })  

 
 demo3:(使一個表格隔行變色)
<table id="tb">  
    <tbody>  
<tr><td>第一行</td><td>第一行</td></tr>  
<tr><td>第二行</td><td>第二行</td></tr>  
<tr><td>第三行</td><td>第三行</td></tr>  
<tr><td>第四行</td><td>第四行</td></tr>  
<tr><td>第五行</td><td>第五行</td></tr> 
<tr><td>第六行</td><td>第六行</td></tr> 
    </tbody>  
</table>
js代碼如下：
不使用jQuery：
var item = document.getElementById("tb");
var tbody = item.getElementsByTagName("tbody")[0];
var trs = tbody.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="red"
}
}
使用jQuery :$('#tb tbody tr:even').css("backgroundColor","red");