1. 程式人生 > 實用技巧 >筆記2:JQuery

筆記2:JQuery

一、基礎

1--jquery-xxx.js 與 jquery-xxx.min.js區別:
	1、jquery-xxx.js		開發版本。給程式設計師看的,有良好的縮排和註釋。體積大一些
	2、jquery-xxx.min.js	生產版本。程式中使用,沒有縮排。體積小一些。程式載入更快


2--jq物件和js物件轉換
	1、jq -- > js		jq物件[索引] 或者 jq物件.get(索引)
   	2、js -- > jq 		$(js物件)

3--入口函式
	 $(function () {
       
	 });
	 

4--選擇器  作用:獲取元素物件  用法:$(選擇器型別)
	1、基本選擇器
		1. 標籤選擇器(元素選擇器) 語法: $("html標籤名") 獲得所有匹配標籤名稱的元素
		2. id選擇器   				語法: $("#id的屬性值") 獲得與指定id屬性值匹配的元素
		3. 類選擇器					語法: $(".class的屬性值") 獲得與指定的class屬性值匹配的元素
		4. 並集選擇器:				語法: $("選擇器1,選擇器2....") 獲取多個選擇器選中的所有元素
	2、 層級選擇器
		1. 後代選擇器				語法: $("A B ") 選擇A元素內部的所有B元素		
		2. 子選擇器					語法: $("A > B") 選擇A元素內部的所有B子元素
	3、屬性選擇器
		1. 屬性名稱選擇器  			語法: $("A[屬性名]") 包含指定屬性的選擇器
		2. 屬性選擇器				語法: $("A[屬性名='值']") 包含指定屬性等於指定值的選擇器
		3. 複合屬性選擇器                        語法: $("A[屬性名='值'][]...") 包含多個屬性條件的選擇器
	4、.過濾選擇器
		1. 首元素選擇器 			        語法: $(標籤名:first)   獲得選擇的元素中的第一個元素
		2. 尾元素選擇器 			        語法: :last 獲得選擇的元素中的最後一個元素
		3. 非元素選擇器				語法: :not(selector) 不包括指定內容的元素
		4. 偶數選擇器				語法: :even 偶數,從 0 開始計數
		5. 奇數選擇器				語法: :odd 奇數,從 0 開始計數
		6. 等於索引選擇器                        語法: :eq(index) 指定索引元素
		7. 大於索引選擇器 			語法: :gt(index) 大於指定索引元素
		8. 小於索引選擇器 			語法: :lt(index) 小於指定索引元素
		9. 標題選擇器				語法: :header 獲得標題(h1~h6)元素,固定寫法
	5. 表單過濾選擇器
		1. 可用元素選擇器 			語法: :enabled 獲得可用元素
		2. 不可用元素選擇器 		        語法: :disabled 獲得不可用元素
		3. 選中選擇器 				語法: :checked 獲得單選/複選框選中的元素
		4. 選中選擇器 				語法: :selected 獲得下拉框選中的元素
			

5--DOM操作
	---內容操作
		1. jq物件.html() 		        獲取/設定元素的標籤體內容   <a><font>內容</font></a>  --> <font>內容</font>
		2. text() 				獲取/設定元素的標籤體純文字內容   <a><font>內容</font></a> --> 內容
		3. val() 				獲取/設定元素的value屬性值
		
	---屬性操作
		----通用屬性操作
			jq物件.attr("屬性","值")     獲取/設定元素的屬性
			jq物件.removeAttr("屬性")    刪除屬性
			prop()                      獲取/設定元素的屬性
			removeProp()                刪除屬性
			說明:attr和prop區別?
				1. 如果操作的是元素的固有屬性,則建議使用prop
				2. 如果操作的是元素自定義的屬性,則建議使用attr
		----對class屬性操作
			jq物件.addClass("值")        新增class屬性值
			jq物件.removeClass("值")     刪除class屬性值
			jq物件.toggleClass("one")    如果元素物件上存在class="one",則將屬性值one刪除掉。  如果元素物件上不存在class="one",則新增
			jq物件.css("屬性","值")      修改物件的css樣式
			jq物件.css("屬性")           獲取css屬性值
	
	---CRUD操作: 		用法:jq物件1.方法(jq物件2)
		1--插入物件到物件內(父子)外(兄弟):
			jq物件2到jq物件1中
				------父子關係
				jq物件1.append(jq物件2)
				prepend()
				------兄弟關係
				after()
				before()
			jq物件1到jq物件2中
				------父子關係
				appendTo():
				prependTo():
				------兄弟關係
				insertAfter()
				insertBefore()

		2--其他方法
			物件.remove()	移除元素				
			物件.empty()	清空元素的所有後代元素
			物件.clone()	克隆元素並保留原來的

二、高階

1--動畫
	引數:
		1----speed:動畫的速度。三個預定義的值或毫秒數
			slow
			normal
			fast
			或表示動畫時長的毫秒數值(如:1000)
		2----easing:用來指定切換效果,預設是"swing",可用引數"linear"
			swing	動畫執行時效果是 先慢,中間快,最後又慢
			linear	動畫執行時速度是勻速的
		3----fn:在動 畫完成時執行的函式
	---預設方式
		----jq物件.show([speed,[easing],[fn]])		顯示
		----jq物件.hide([speed,[easing],[fn]])		隱藏
		----jq物件.toggle([speed],[easing],[fn])        切換
	---滑動方式
		----slideDown([speed],[easing],[fn])
		----slideUp([speed,[easing],[fn]])
		----slideToggle([speed],[easing],[fn])
	---淡入淡出方式
		----fadeIn([speed],[easing],[fn])
		----fadeOut([speed],[easing],[fn])
		----fadeToggle([speed,[easing],[fn]])


2--遍歷
	---js的遍歷方式
		* for(初始化值;迴圈結束條件;步長)
	---jq的遍歷方式
		回撥函式返回值:
			true:如果當前function返回為false,則結束迴圈(break)。
			false:如果當前function返回為true,則結束本次迴圈,繼續下次迴圈(continue)
		----jq物件.each(callback)
				jquery物件.each(function(index,element){});
					* index			就是元素在集合中的索引
					* element		就是集合中的每一個元素物件
					* this			集合中的每一個元素物件
		----$.each(object, [callback])
		----for..of: jquery 3.0 版本之後提供的方式		用法:for(元素物件 of 容器物件)


3--事件繫結
	---jq物件.方法名(回撥函式);
		註釋:如果呼叫事件方法,不傳遞迴調函式,則會觸發瀏覽器預設行為。
		例子: 表單物件.submit();//讓表單提交
		----click()			單擊事件
		----mouseover()		滑鼠事件
		----mouseout()		滑鼠事件
		----focus()			獲取焦點
		----submit()		表單提交
		鏈式程式設計:jq物件.方法1(回撥函式).方法2(回撥函式)		例子:$("#lizi").mouseover(function(){alert("滑鼠來了")}).mouseover(function(){alert("滑鼠走了")});
	
	---on繫結事件/off解除繫結
		jq物件.on("事件名稱",回撥函式)		例子:$("#lizi").on("click",function(){alert("on方法執行了")});
		jq物件.off("事件名稱")
			* 如果off方法不傳遞任何引數,則將元件上的所有事件全部解綁
	
	---jq物件.toggle(fn1,fn2...):當單擊jq物件對應的元件後,會執行fn1.第二次點選會執行fn2..... 最後一個fn執行完後再點選會返回到第一個fn
		說明:1.9版本 .toggle() 方法刪除,jQuery Migrate(遷移)外掛可以恢復此功能。
			<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script> <!--引入外掛-->


4--外掛:增強JQuery的功能
	1. $.fn.extend(object)  增強通過Jquery獲取的物件的功能 	增強$("#id")這個物件功能
		<script type="text/javascript">
			//定義jquery物件外掛
			$.fn.extend({
				//定義的方法,所有的jq物件都可以呼叫該方法
				check:function(){
					//讓複選框選中
					//this 呼叫該方法的jq物件
					this.prop("checked",true);
				},
				uncheck:function(){
					//讓複選框不選中
					this.prop("checked",false);
				}
				
			});
			$(function(){
				//獲取按鈕
				$("#btn-check").click(function(){
					//獲取複選框物件
					$("input[type='checkbox']").check();
				});
				$("#btn-uncheck").click(function(){
					//獲取複選框物件
					$("input[type='checkbox']").uncheck();
				});
			});
		</script>
	
	2. $.extend(object) 	增強JQeury物件自身的功能  		增強$/jQuery這個自身物件功能
		$.extend({
			max:function (a,b) {
				//返回兩數中的較大值
				return a >= b ? a:b;
			},
			min:function (a,b) {
				//返回兩數中的較小值
				return a <= b ? a:b;
			}
		});
		//呼叫全域性方法
		var max = $.max(4,3);
		//alert(max);
		var min = $.min(1,2);
		alert(min);