1.什麼是jQuery ?

jQuery是一個JavaScripe框架 , 它提供了強大的選擇器.
 
它的核心理念: write less , do more (寫得更少,做得更多)
 
使用前提: 需要匯入js類庫, 我們才可以使用.
           例: jquery-1.4.2.js          非壓縮版.方便閱讀.
                jquery-1.4.2.min.js     壓縮版 , 記憶體小.

2.獲取jQuery物件.

匯入專案下之後 , 需要在html中引入: 
  <script src="../js/jquery-1.11.0.js" type="text/javascript"></script> 

基本語法: $("選擇器")
獲取: 
     input標籤: <input id="aaa"> 
     獲取jquery:var $a = $("#aaa"); 
     注: jQuery物件變數名建議以$開頭. 

3.jQuey頁面載入事件.

js中:
       window.onload = function(){ alert() }
       注: js只能賦一個值 , 再次寫將會被覆蓋.
jQuery中:
       $(document).ready(function(){ alert() })
       簡略寫法: $(function(){ alert() })

       注: 可以使用多次 , 多個頁面載入依次執行.
其他事件的使用:
       格式: $(“選擇器”).事件名(function(){
                  // 注:事件名不寫 on.
       })
 
      blur: 失去焦點.             focus: 獲取焦點.
      keydown: 鍵盤按下      keyup: 鍵盤彈起.
      mouseover:滑鼠移上   mouseout: 滑鼠移除.
      click : 單擊

.                   dblclick: 雙擊.

4.常見效果:

顯示與隱藏:(重點)
       show(毫秒值) //顯示
       hide(毫秒值) //隱藏
       toggle(毫秒值);//自動切換
 
滑入滑出:
       slideUp(毫秒值)//滑出
       slideDown(毫秒值)//滑入
       slideToggle(毫秒值)//自動切換
 
淡入淡出:
       fadeIn(毫秒值)//淡入
       fadeOut(毫秒值)//淡出
       fadeToggle(毫秒值)//自動切換
       fadeTo(透明度,毫秒值) 透明度的取值 0-1

5.jQuery的選擇器:

1.基礎選擇器:

• id選擇器: $( “#id值” )
• 標籤選擇器: $( “標籤名” )
• 類選擇器: $( “.class類名” )
• 所有選擇器: *
• 分組選擇器: #xxx , #yyy

2.層次選擇器:

• A    B : 獲取A元素內部的所有的B元素.
• A > B : 獲取A元素下面的所有B子元素.
• A + B : 獲取A元素同級下一個B元素
• A ~ B : 獲取A元素同級所有B元素.

3.基本過濾選擇器: (:打頭)

• : first 第一個.
• : last 最後一個.
• : even 偶數(從0開始計數) 頁面顯示奇數.
• : odd 奇數
• : eq(index) 指定第幾個 =
• : gt(index) 大於第幾個 >
• : lt(index) 小於n個. <

4.屬性選擇器:

• [屬性名] : 獲取有屬性名的元素.
• [屬性名=值] : 獲取屬性名=值的元素.
• […][…][…] : 複合屬性選擇器 , 多個屬性同時過濾.
   
• [屬性名^=值] : 以值開頭.
• [屬性名$=值] : 以值結尾.
• [屬性名*=值] : 包含值.

5.表單屬性選擇器:

• :enabled 可用.
• :disabled 不可用
• :checked 選中.
• :selected 選擇.

6.class操作.

css(“css屬性名”,“css屬性值”): 設定屬性.
css(“css屬性名”) 獲取屬性.
 
addClass(): 給指定的class屬性新增樣式.
removeClass():刪除樣式.

7.屬性操作:

attr(“元素屬性名”,“元素屬性值”) //設定屬性(所有都起作用)
attr(“元素屬性名”) / /獲取屬性(只獲取第一個)
 
attr({ // 設定多個.
       元素屬性名:元素屬性值,
       元素屬性名:元素屬性值,
       …最後一個不要逗號
})
 
prop(): 操作checked屬性.
 
注: prop和attr容易混 , 建議先使用prop()若沒有效果,再使用attr();

01.隔行換色案例:

<style type="text/css">
		.odd{
			background-color: #BCD68D;
		}
		
		.even{
			background-color: #FFFFCC;
		}
</style>
<script src="../js/jquery-1.11.0.min.js"></script>
<script>
		// 頁面載入事件. 
		$(function(){
			// 奇數和偶數 , 換色 .
			// $("tr:gt(0):odd").css("background-color","#BCD68D")
			// $("tr:gt(0):even").css("background-color","aqua")
			
			// 使用屬性進行操作. 
			$("tr:gt(0):odd").addClass("odd")
			$("tr:gt(0):even").attr("class","even")
		})
</script>

02.全選/全不選案例:

總按鈕上設定id: <input type="checkbox" id="selectAll"></th>
其餘按鈕上設定一樣的class: <input type="checkbox" class="itemSelect">

<script type="text/javascript">
 		// 頁面載入事件. 
 		$(function(){
 			// 設定全選複選框的點選事件.  
 			$("#selectAll").click(function(){
 				// 被點選時 , 獲取複選框的狀態. 
 				var status = $("#selectAll").prop("checked");
 				// 設定其他複選框的狀態和總複選框的狀態一樣. 
 				$(".itemSelect").prop("checked",status); 
 			})
 		})		
	</script>