一、jQuery基礎
1、jQuery是什麼?
jQuery是一個js框架，其主要思想是，通過
選擇器查找到對應的節點，然後對這個節點進行
封裝(封裝成一個jQuery對象)。通過調用jQuery
對象的屬性或者方法來實現對節點的操作。這樣做的
好處是：第一，將不同的瀏覽器之間的差異屏蔽起來了。
第二，代碼更加簡潔，維護方便。

	2、jQuery編程的步驟
		step1: 使用選擇器查找節點
		step2: 調用jQuery對象的方法或者屬性
	選擇器：jQuery模仿css選擇器語法，創建的一套
	用於查找節點的規則。
	3、jQuery對象與dom節點
		1)dom節點如何轉換成jQuery對象
			調用$()函數，比如
			$(obj);
		2)jQuery對象如何轉換成dom節點
			方式一:  $obj.get(0)
			方式二: $obj.get()[0]
		3) jQuery與其它js框架如何共存?
			使用conflict()函數。
二、選擇器
	1、選擇器是什麼?
		jQuery模仿css選擇器語法，創建的一套
	用於查找節點的規則。
	2、基本選擇器
		#id
		.class
		element
		selector1,select2..selectn
		*
	3、層次選擇器
		select1 select2
		select1>select2
		select1+select2
		select1~select2

	4、過濾選擇器
		(1)基本過濾選擇器
		:first
		:last
		:not(selector)
		:even
	  dd
		:eq(index)
		:gt(index)
		:lt(index)

		(2)內容過濾選擇器
			:contains(text) 匹配包含給定文本的元素
			:empty 匹配所有不包含子元素或者文本的空元素
			:has(selector) 匹配含有選擇器所匹配的元素
			的元素
			:parent 匹配含有子元素或者文本的元素

		(3)可見性過濾選擇器
			:hidden 匹配所有不可見元素，
			或者type為hidden的元素
			:visible 匹配所有的可見元素

		(4)屬性過濾選擇器
			[attribute]
			[attribute=value]
			[attribute!=value]
		(5)子元素過濾選擇器
			:nth-child(index/even/odd)
		(6)表單對象屬性過濾選擇器
			:enabled
			:disabled
			:checked
			:selected
	5、表單選擇器
		:input
		:text
		:pasword
		:radio
		:checkbox
		:submit
		:image
		:reset
		:button
		:file
		:hidden
三、dom操作
	1、dom查找
		通過選擇器找到節點後，可以調用
		a, html() : 輸出或者修改節點之間的html內容
		b,text()：輸出或者修改節點之間文本
		c,val()：輸出或者修改節點的value屬性
	2、創建節點:
		 $(html)
	3、添加節點:
		 append():向每個匹配的元素內部追加內容
		 prepend():向每個匹配的元素內部前置內容
		 after():在每個匹配的元素之後插入內容
		 before():在每個匹配的元素之前插入內容
	4、刪除節點
		remove()
		remove(selector)
		empty():清空節點
	5、複製節點
		clone()
		clone(true):使複製的節點也具有行為(將事件
		處理代碼一塊複製)

	6、屬性操作
		讀取：attr('');
		設置：	attr('','') 或者一次
		設置多個 attr({"":"","":""});
		刪除：removeAttr('')

	7、樣式操作
		獲取和設置: attr("class","")
		追加:addClass('')
		移除:removeClass('')
		或者removeClass('s1 s2')
		或者removeClass()//會刪除所有樣式
		切換樣式：toggleClass,有該樣式，就刪除，沒有，
		就添加。
		是否有某個樣式 hasClass('')
		讀取css('')
		設置css('','')或者
		css({'':'','':''})//設置多個樣式
jQuery validate使用。
step1 導入相應的庫
	jquery.js
	jquery-validate.js
step2 填寫驗證規則
	$('#form').validate({
		rules:{
			username:{
				required:true,
				minlength:5
			},
			email:{
				required:true,
				email:true
			},
			comment:"required",
			valcode:{
				formula:"2+3"
			},
			phone:"formula2"
		},
		messages:{
			username:{
				required:"請輸入用戶名",
				minlength:"請至少輸入五個字符"
			},
			comment:"請輸入評論"
		},
		errorElement:"span", //用來創建錯誤提示信息的標籤,可以是其它的標籤。
		success:function(label){
			label.text("")			//清空錯誤提示信息
				.addClass("success");	//加上自定義的success樣式。
		}
	});

	也可以創建自已的驗證規則：
		step1 定義驗證方法
			比如創建一個驗證碼
			$.validator.addMethod(
				"formula", //驗證方法名稱
				function(value, element, param) {//驗證規則
					//value:文本輸入框的值
					//element:文本輸入框本身
				},
					'請正確輸入計算後的結果'//驗證提示信息
				);
			又比如創建一個驗證電話號碼的驗證規則
			$.validator.addMethod(
				"formula2", //驗證方法名稱
				function(value, element, param) {//驗證規則
					var reg = /^d{4}$/;
					return reg.test(value);
				},
				'請正確輸入你的電話號碼'
			);

		step2 使用 跟其它規則的使用方式一樣。

	其它：
		span.error {
			  background:url("../images/unchecked.gif") no-repeat 0px 0px;
			  padding-left: 16px;
			}
		span.success {
  			background:url("../images/checked.gif") no-repeat 0px 0px;
  			padding-left: 16px;
		}

1、遍歷節點
		children():只考慮子元素，不考慮其它後代元素。
		next()/next(selector)
		prev()/prev(selector)
		siblings()/siblings(selector)
		find(selector)/
		parent()

2、事件處理機制
	1)事件綁訂的方式
		bind(type,fn)
	2)、綁訂方式的簡寫形式
		click(function(){
		});
	3)、合成事件
		hover(enter,leave) : 模擬光標懸停事件
		toggle(fn1,fn2...)：模擬鼠標連續單擊事件
	4)、事件冒泡
		a、獲得事件對象
		//event不再是原始的事件對象，而
		//是封裝之後的對象。
		click(function(event){
		});
		b、停止冒泡
			event.stopPropagation()
		c、停止默認行為
			event.preventDefault()
	5)、事件對象的屬性
			event.type
			event.target:返回事件源（是dom對象!!!）
			event.pageX/pageY: 點擊的坐標

	6)、模擬操作
		trigger('click')

3、動畫
	1)、show("slow"/"normal"/"fast"/100)  hide()
		另外，還可以添加一個回調函數，比如:
			show('slow',function(){
				//這兒的代碼會在動畫執行完成之後
				//才執行。
			});
	2)、fadeIn() fadeOut(): 淡入、淡出
	改變不透明度。
			fadeIn,fadeOut可以添加
			"slow"/"normal"/"fast"/100參數，也可以
			添加一個回調函數。
	3)、slideUp() slideDown() : 改變元素的高度
			用法跟前面一樣。
	4)、自定義動畫 animate(params,speed,callback):
		params: 是一個形如  {"height":"300px","width","200px"}
		speed: 單位是毫秒，表示動畫執行的速度。
		callback:回調函數，動畫執行完成之後，執行
		該函數。
4、操作類數組的方法：
	說明：jquery操作數組的方法，
	$()操作返回的如果是一個數組，可以使用如下方法來操作
	each(fn(i)):循環遍歷每一個元素,this代表被迭代的dom對象，$(this)代表被迭代的jquery對象。
	eq(index)：返回index+1位置處的jquery對象
	index(obj)：返回下標，其中obj可以是
	dom對象或者jquery對象。
	length：個數
	get()：返回dom對象組成的數組
	get(index)：返回index+1個dom對象。

jQuery.tar.gz
课堂内容
Day01
Day02
Day03