jQuery

jQuery

python中稱爲模塊，其餘語言稱爲類庫，DOM/BOM\JavaScript的集合

對於jQuery，不少大公司在使用時，不徹底用到，須要封裝一部分想要的功能以節省流量
或者用dom，由於效果出來前要加載好jQuery文件，這涉及到流量。

概要：
查找元素（DOM不能查找自定義屬性，全部標籤）
選擇器
篩選
操做元素

	引入：<script src=''></script>
		  <<script>
			jQuery.     #引用封裝的方法
			$.          #等於jQuery
		  </script>

　　

1、選擇器

		$('')                    #獲取的
		document.getElementById
		轉換：
			$('')[0] = DOM對象   
			$(DOM對象) = $('')  

　　

		1. id：
			$('#')
		2. class：
			$('.')
		3. 標籤：
			$('')
		4. 全部
			*
		5.組合
			$('a,.c1,#i2')
		6.層級
			$('a .c1 #i2')  #查找全部子孫，不單限於直系
			$('a>.c1')      #只找兒子
		7.基本篩選
			:first
			:last
			:eq(index)  #等於，取第i個值
		8.屬性
			$('[alex]')
			$('[alex="xxx"]')
		9.表單
			<input type="text" />
			$(':text')   還有submit
			等同於$('input[type="text"]')
			還有$(':checkbox')等

示例：全選反選

			function checkAll() {
				$('#tb :checkbox').prop('checked',true);     #多個結果，jQuery自動循環進行prop
			}
			function cancelAll() {
				$('#tb :checkbox').prop('checked',false);    #prop取checkbox的checked屬性
			}
			function reverseAll() {
				$('#tb :checkbox').each(function () {        #each循環每個，function傳參時傳下標
					if(this.checked){
						this.checked = false                 #this代指DOM對象，故此爲DOM方法
					}else{
						this.checked = true
					}
				})
			}
				方法二：jQuery獲取
				if($(this).prop('checked')){
                    $(this).prop('checked',false);
                }else {
                    $(this).prop('checked',true);
                }
				方法三：三元運算  條件？真值：假值
					var v = $(this).prop('checked')?false:true;
					$(this).prop('checked',v)

　　

示例：左側菜單
功能：找到標籤，添加移除class

			$('.header').click(function () {            #爲每個對象綁定事件
				$(this).next().removeClass('hide');
				$(this).parent().siblings().find('.content').addClass('hide');
			})

　　

兩句能縮爲一句，鏈式編程，即removeClass後.xxxx，這是由於removeClass返回一個jQuery對象


2、篩選器
形式：選擇器.xxx() 括號內能夠加選擇器，能夠嵌套篩選

		$(this).next()      #下一個 .nextAll() .nextUntil('#i1')
		$(this).prev()      #上一個 .prevAll() .prevUntil('#i1')
		$(this).parent()    #父標籤 .parents() .parentsUntil()
		$(this).children()  #全部子標籤
		$(this).siblings()  #全部兄弟標籤，不包含本身
	
		$(this).find()  	#查找
		
		.first() .last() .hasClass()

　　

3、操做

文本操做

			$().text()     	  #獲取文本內容
			$().text('')   	  #賦值
			
			$().html()   	  #獲取標籤代碼
			$().html(‘xxx’)   #賦值標籤代碼
			
			$().val()         #對比DOM的value，獲取表單文本，input、select、textarea
			$().val(‘’)
			
			示例：模態對話框 添加編輯	
				
			$('.edit').click(function () {
				$('.model,.shadow').removeClass('hide'); 
				var tds = $(this).parent().prevAll();      #找到全部的父標籤的前面標籤
				var port = $(tds[0]).text();               #注意tds爲jQuery對象，[0]變爲DOM，要再轉
				var host = $(tds[1]).text();
				$('.model input[name="hostname"]').val(host);  #找到輸入框並賦值
				$('.model input[name="port"]').val(port);
			})

　　

樣式操做：

			.addClass('')
			.removeClass('')
			.toggleClass('')  #沒有則添加，有則移除

　　

屬性操做：

			$().attr('')     #獲取指定屬性值
			$().attr('','')  #設置自定義屬性值
			$().removeAttr('')
			
			專門用於checkbox，radio這種選中的操做，用attr一開始能夠選中，取消後再也選不中
			$().prop('checked')      #選中則返回true，不然爲false
			$().prop('checked',true)

　　

			示例：編輯模態框獲取值
				var tds = $(this).parent().prevAll();
				tds.each(function () {                         		#循環
					var n = $(this).attr('target');                 #獲取屬性值
					var text = $(this).text();
					$('.model input[name="'+ n + '"]').val(text);   #須要注意的是n爲變量，選擇器中要加
																	 字符串，進行並接便可
				})
				
			示例：Tab菜單切換
				$('.menu-item').click(function () {
					var n = $(this).attr('a');
					$(this).addClass('active').siblings().removeClass('active');     #添加、移除class
					$('.content [b="'+ n +'"]').removeClass('hide').siblings().addClass('hide');
				})
			
			示例：Tab菜單切換改進-經過index獲取索引
			
				$(this).addClass('active').siblings().removeClass('active');
				var v = $(this).index();
				$('.content').children().eq(v).removeClass('hide').siblings().addClass('hide');

　　

標籤處理：

			添加：
				$().append()	 #括號內能夠是字符串並接或者標籤元素document.createElement
				$().prepend()	 #標籤內
				$().before()     #同級標籤
				$().after()
		
			刪除：
				$().eq(index).remove()  刪除第幾個標籤
				$().eq(index).empty()   清空文本內容
				
			複製：
				$().clone()        複製標籤
				
			示例：
				$('#b1').click(function () {
					var v = $('#t1').val();
					var temp = "<li>" + v + "</li>";       #字符串並接,還有document.createElement方法
																							建立標籤
					$('#u1').append(temp);
				})
				$('#b2').click(function () {
					var index = $('#t1').val();
					$('#u1 li').eq(index).remove();
				})
				$('#b3').click(function () {
					var index = $('#t1').val();
					var v = $('#u1 li').eq(index).clone();
					$('#u1').append(v);
				})	

　　

CSS處理：

			$().css('color','red')   個別樣式設置
			
			點贊例子：
				知識點：- $().append()
						- $().remove()
						- setInterval clearInterval
						- opacity 1 -> 0
						- position top right absolute
				代碼：		
					var tag=document.createElement('span');      #這種方法建立標籤能用於jQuery設置樣式
					$(tag).text('+1');
					$(tag).css('color','green');
					$(tag).css('fontSize',fontSize + "px");      #以px爲單位
					$(tag).css('position','absolute');
					$(tag).css('top',top + "px");
					$(tag).css('right',right + "px");
					$(tag).css('opacity',opacity);
					$(self).append(tag);                         #添加標籤
				
					var obj = setInterval(function () {
					
						fontSize = fontSize + 10;                #變化
						top = top - 10;
						right = right - 10;
						opacity = opacity -0.1;
						
						$(tag).css('fontSize',fontSize + "px");   #從新賦值
						$(tag).css('top',top + "px");
						$(tag).css('right',right + "px");
						$(tag).css('opacity',opacity);

						if(opacity<0){
							clearInterval(obj);         #關閉定時器
							$(tag).remove();            #清除標籤
						}
					},100);

　　

位置

				$().scrollTop()     #獲取,括號內加選擇器便可，window表示的是窗口$(window).
				$().scrollTop(0)	#設置
				
				$().scrollLeft()
				
				$().offset()        #指定標籤在html中的座標
				$().offset().left   #用於獲取左上角座標
				$().offset().top
	
				$().position()      #標籤相對於父標籤(relative)的座標，中間隔着其餘標籤無礙 

　　

尺寸：

				$().height()         #設定CSS中 'height' 的值
				$().innerHeight()    #內部區域高度（包括補白padding、不包括邊框border）
				$().outerHeight()    #外部高度（默認包括補白padding和邊框border），默認false
				$().outerHeight(true)#設置爲 true 時，計算邊距margin在內

　　

4、事件
事件綁定：
DOM：三種綁定方式 ——標籤內onclick

								document.getElementById().onclick
								document.getElementById().addEventListener

　

jQuery:
與DOM對比，開頭沒有on

$().click()

				$().click()	
				
				$().bind('click',function(){})				經過該方式綁定的只能該方式解綁		
				$().unbind('click',function(){})				
								
				$().delegate('a','click',function(){})		委託，一開始沒綁定，點擊的時候才綁定a且執行			
				$().undelegate('a','click',function(){})	其餘三種都是一開始綁定好了，添加標籤a後沒綁定					
								
				$().on('click',function(){})				上面三種方式原理都是調用的on
				$().off('click',function(){})				這個也能委託，$('上級標籤').on('click','a',function(){})	
															點擊上級標籤時，給全部的a標籤綁定事件
				事件委託delegate和on實現效果同樣，只是參數位置不一樣，版本一、2中有delegate

　　

阻止事件發生：
默認a標籤點擊跳轉，綁定onclick後，先執行onclick
分兩種：默認先執行 checkbox
綁定先執行 a submit

DOM綁定時：

				<a onclick="return clickOn();" href="http://www.baidu.com">zou ni</a> #要return
				<script>
					function clickOn() {
						alert(123);
						return false;       #true時跳轉
					}
				</script>	

　　

jQuery綁定時：
函數內return false便可

示例：表單驗證

				$(':submit').click(function () {
					$('.error').remove();         #提交前先清空上次驗證的錯誤信息
					var flag = true;              #只要爲空，flag爲false不跳轉
					$('#f1').find('input[type="text"],input[type="password"]').each(function () {
						var v = $(this).val();
						if (v.length <= 0){
							var tag = document.createElement('span');
							tag.innerHTML = '必填';
							tag.className = 'error';
							$(this).after(tag);
							flag = false;
							//return false;      #這裏的return是跳出循環，不能返回給函數，至關於break
						}
					});
					return flag;                 #返回flag，決定能不能跳轉
				});

　　

事件自動執行

			$(function(){ })    		#頁面框架加載完自動執行，能夠避免加載圖片慢致使事件綁定慢的問題
			
			$().click(function(){})  	#頁面全部內容加載完才執行

　　

5、jQuery擴展

			方式一：
			$.extend({
				'wangsen':function () {return 'gg';}
			})
			$.wangsen();
			
			方式二：
			$.fn.extend({
            'hangyang':function () {return 'db';}
			});
			$('#i1').hangyang();
		
			能夠寫好js文件，而後引入便可使用。也可在網上找。自定義的擴展可能會重複名字，沒辦法避免
		
			全局變量也可能重複，寫一個自執行函數便可解決。
			(function(arg){
				var status = 1;             #包裹在函數內，再也不是全局變量，只能本身用
				arg.extend({'':function(){}})
			})(jQuery)
			一引入後自動執行，即自動編譯好以被引用。

　　

6、組件 =============全能========================== 後臺管理的功能須要組合才能造成一個好的前端，能夠網上搜組合好的模板，本身開發修改細節。 ①BootStrap -CSS樣式 -JS 學習BootStrap規則 1.響應式 指針對屏幕大小切換，html樣式隨之變化 <style> @meida(min-width:700px){ .c2{ background-color:red; } } </style> 2.圖標、字體 原理：內部是表格，表格的不一樣位置畫好圖標，位置由unicode代碼表示，使用時 複製圖標對應的代碼<span class="glyphicon-class">glyphicon glyphicon-euro</span> @font-face 3.基本使用 對於css文件，link引入 <link href=".../css/bootstrap.min.css" rel="stylesheet"> 對於js文件，script的src引入 <script src="...jquery/1.11.1/jquery.min.js"></script> 複製插件代碼 若是要修改插件效果，先後css樣式混淆，在樣式內{}加上!important ============偏後臺管理======================== ②jQueryUI 推薦指數*，功能不美，需修改不少 -CSS -JS 學習jQueryUI規則 ③EasyUI（代碼先後端不徹底一致，功能齊全） -CSS -JS 學習EasyUI規則：下載好JS文件，在文件中引入src，而後將demo中的html相應代碼複製便可 ========Ajax操做======== 輪播插件：網上如bxslider 下載後引入css、js，複製script語句和引用script的標籤代碼