jquery 學習三
參考資料：李炎恢老師的視頻
jQuery 最核心的組成部分就是：選擇器引擎。它繼承了 CSS 的語法，可以對 DOM 元素的標籤名、屬性名、狀態等進行快速準確的選擇，並且不必擔心瀏覽器的兼容性。jQuery選擇器實現了 CSS1~CSS3 的大部分規則之外，還實現了一些自定義的選擇器，用於各種特殊狀態的選擇。
這裏注意，它繼承了css的語法，所以也可以說，在學習jquery的同時，我們也是在學些一些基礎的CSS
在開始前，先把2文件夾中的除了base.js和tool.js都複製到新建的3的文件夾中；
我們來做一些簡單的修改；dom.js頁面清空，index.html頁面如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<title>jquery 常規選擇器</title>
<script type="text/javascript" src="jquery-1.12.2.js"></script>
<script type="text/javascript" src="dom.js"></script>
</head>
<body>
<div id = "box">常規選擇器</div>
</body>
</html>
在做練習的時候我們先運行一下.css規則對比一下，然後運行jquery規則這樣通過比較的方式來學習
1、簡單選擇器
首先建一個style.css的文件，然後在頁面中加入以下代碼引入style.css樣式文件
注意：引入文件的時候一定要寫到<head></head>頭之間
<<link rel="stylesheet" href="style.css" type="text/css"> #box{
color;red; //添加樣式
}$(function(){
$('#box').css('color','bule'); //添加一個行爲，這個行爲是添加樣式
}) 
ID 選擇器只能獲取一個DOM對象而其它兩個則可以獲取多個DOM對象，我們接下來像來看一下元素跟class選擇器
先在index.html中多複製兩行代碼
<div > 常規選擇器 </div>
<div > 常規選擇器 </div>
<div >常規選擇器</div>回到style.css文件中輸入以下代碼（注意我們在輸入新的代碼的時候都把舊的代碼先註釋掉，以便我們能更好的看到我們所想要的效果） 查看頁面效果可以看到所有文件都變成棕色；
#div{
color:maroon;
}$(function(){
$('div').css('color','red');
})在看class標籤，回到style.css中，輸入以下代碼，查看效果(由於index.html頁面中沒有 class標籤,所以我們先給div前兩個增加class標籤,代碼如下)
index.html
<div class='pox'> 常規選擇器 </div>
<div class='pox'> 常規選擇器 </div>
<div >常規選擇器</div>.pox{
color:yellow;
}回來dom.js中我們在來模擬它
$(function(){
$('.pox').css('color','blue');
})通過上面三種選擇器的學習我們可以知道 (該資料來源 w3cschool,摘錄+總結 ，鋒利的jquery)
1、“#” 代表ID 也就是ID選擇器： 可以通過 "#+ID" 的方式來定位到具體的某個對象的屬性；
2、div 也就是div 也就是元素名選擇器(標籤選擇器)：以文檔元素作爲選擇符；
3、‘.’也就是類屬性選擇器：只有適當地標記文檔後，才能使用這些選擇器；所以在使用類選擇這前，需要增加具體的文檔標記 ，以便類選擇器正常工作,爲了將類選擇器的樣式與元素關聯，必須將 class 指定爲一個適當的值
注意在此我們說一個問題：如果頁面上ID有多個，在js頁面中給其增加了樣式，最終效果只有一個有樣式；這是因爲ID 在上本來就是一個唯一標識，而在頁面上還寫了三個，這就肯定是頁面上出錯了；大家可以寫代碼看一下效果：html代碼如下
<div id = 'box'> 常規選擇器</div>
<div id = 'box'> 常規選擇器</div>
<div id = 'box'> 常規選擇器</div>
$(function(){
$('#box').css('color','red');
});但是如果是在CSS 樣式中這樣做會是怎麼樣呢？
style.css代碼如下
#box{
color:red; //添加樣式
}答案是否定的，這也就是我們剛纔說的問題，由於開發者同一個頁面引用了多個ID造成的；所以ID，唯一標識一定要注意這一點；
爲了證明 ID 返回的是單個元素，而元素標籤名和類(class)返回的是多個，我們可以採用 jQuery 核心自帶的一個屬性 length 或 size()方法來查看返回的元素個數。
在dom.js中輸入以下代碼來查看 （註釋前面代碼)
alert($('#box').size());
alert($('div').size());
alert($('.pox').size()); //注意在寫上這段代碼時注意html頁面中增加class 屬性我們也可以根據get獲取具體的對應屬性值；得到原生值
$('div').eq(1).css('color','red');html代碼修改
<div id='box'>
<p> 常規選擇器 </p>
<p> 常規選擇器 </p>
<p> 常規選擇器 </p>
<div>
<p> 常規選擇器 </p>
<p> 常規選擇器 </p>
<p> 常規選擇器 </p>
</div>
</div>
#box > p { // 只給子節點增加樣式
color:red;
}在ie6,ie7.ie8.ie9 測試發現，在IE6中是不出來的，低版本顯示有問題
在來看一下jQuery寫法
dom.js
$(function{
$('#box > p ').css('color','red')
})jQuery 選擇器支持 CSS1、CSS2 的全部規則，支持 CSS3 部分實用的規則，同時它還有少量獨有的規則。所以，對於已經掌握 CSS 的開發人員，學習 jQuery 選擇器幾乎是零成本。而 jQuery 選擇器在獲取節點對象的時候不但簡單， 還內置了容錯功能， 這樣避免像 JavaScript那樣每次對節點的獲取需要進行有效的判斷；
html頁面修改成如下
<div id = "box">常規選擇器</div>$(function{
$('#pox ').css('color','red')
})利用原生javascript寫法來看
$(function(){
document.getElementById('pox').style.color='red';
}); //很多情況下有動態生成DOM的問題，會導致執行不存在的ID選擇器
//$('#pox ').css('color','red') 這就是jquery的容錯功能
//如果必須要驗證時我們可以採用下面的方法來驗證；
if($('#pox ').size>0){
$('#pox ').css('color','red')
}
if($('#pox ').get(0)){
……
}
if($('#pox ')[0]){
……
}