總結幾個關於 jQuery 用法

有關 jquery 用法

目錄：

• $.trim()
• $.inArray()
• $.getJSON()
• 事件委託 on
• 遍歷closest()
• ajaxSubmit()
• 拖拽排序 dragsort()

進入正文 ing...

1. jQuery.trim（str）

解釋：從字符串的開頭和結尾刪除空格。

var str='   hello hi    '; 
var new_str=$.trim(str);
console.log(str.length)        // 12
console.log(new_str.length)    // 8

好比 提交表單時，要獲取用戶的val()值，防止用戶輸入的空格對後續操做形成影響，這裏就能夠用 trim ()

var username=$.trim($('#username').val());

2.jQuery.inArray( value, array [, fromIndex ] )

它的方法相似於JavaScript的原生.indexOf()方法，沒有找到匹配元素時它返回-1。若是數組第一個元素匹配value（參數） ，那麼$.inArray()返回0。

var fruits=['apple','banner','orange','pear'];
var mine='orange';
var res=$.inArray(mine,fruits);
if(res==-1){ // 不存在
	console.log('sorry,沒有你喜歡的!')
}else{
	console.log('有你的！')
}

順便來回憶下原生js 對於字符串 indexOf 的用法

語法：stringObject.indexOf(searchvalue,fromindex)

注意:

(1) indexOf() 方法對大小寫敏感

(2) 若是要檢索的字符串值沒有出現，則該方法返回 -1。檢測到返回 0。

var str='hello hi see';
var searchvalue=str.indexOf('a');
if(searchvalue==-1){
	console.log('該字符串不存在！') // 該字符串不存在
}else{
	console.log(searchvalue)
}

3.jQuery.getJSON()

簡單來講 就是經過ajax請求來獲取 json數據。

具體來講 就是用於經過HTTP GET形式的AJAX請求獲取遠程JSON編碼的數據。

擴展幾點：

(1) JSON是一種數據格式，JS原生支持JSON格式，經過jQuery.getJSON()從服務器得到的JSON數據，jQuery會先嚐試將其轉爲對應的JS對象。
(2) 若是請求的URL中包括"callback=?"等相似的部分，jQuery會自動將其視做JSONP，並執行對應的回調函數來獲取JSON數據。
(3) 服務器返回的JSON數據必須符合嚴格的JSON語法，例如：全部屬性名稱必須加雙引號，全部字符串值也必須加雙引號(而不是單引號)。
(4) 該函數是經過異步方式加載數據的。
(5) 該函數屬於全局jQuery 對象。

下面來看它的語法：

// 請求目標url 類型字符串  
// 發送請求傳遞的數據 可選 
// 請求成功執行的回調函數
jQuery.getJSON( url [, data ] [, success ] )

好比：要獲取"/action.php?m=list&page=2&size=10"的JSON數據，獲取成功時彈出對話框

$.getJSON( "/action.php?m=list", { page: 2, size: 10  }, function(data, textStatus, jqXHR){
    // 若是服務器返回的JSON格式的數據是 [ {"id":11, "title":"文章11"}, {"id":12, "title":"文章12"}, {"id":13, "title":"文章13"} ]
    // jQuery將獲取的JSON格式數據轉換爲JS數組
    for(var i in data){
        var obj = data[i];
        alert( obj.title );
    }

} );

上面代碼：回調函數有三個參數能夠將它們console.log() 出來，附一張截圖

4.綁定事件 on

這裏首先要了解：事件委託

事件委託：
通俗地來說，就是把一個元素響應事件（click、keydown......）的函數委託到另外一個元素；

舉個例子：
好比一個宿舍的同窗同時快遞到了，一種方法就是他們都一個個去領取，還有一種方法就是把這件事情委託給宿舍長，讓一我的出去拿回來全部快遞，而後再根據收件人一一分發給每一個宿舍同窗；

在這裏，取快遞就是一個事件，每一個同窗指的是須要響應事件的 DOM 元素，而出去統一領取快遞的宿舍長就是代理的元素，因此真正綁定事件的是這個元素，按照收件人分發快遞的過程就是在事件執行中，須要判斷當前響應的事件應該匹配到被代理元素中的哪個或者哪幾個。

關於事件委託詳解，你們能夠在這裏深刻了解下。

繼續...

一般咱們見過 綁定事件 on 的用法有一下倆種

.on(events, callback) 只能綁定頁面已有元素的事件。
.on(events, selector, callback) 則是在 已有的元素 上綁定 代理的 事件處理器 (addEventListener 實際上在該已有元素上調用)，但只有事件的實際 source 是其子代元素而且符合 selector 時， callback 纔會以該實際 source 爲 this 指向的對象被調用。

第一種其實就和直接綁定click 用法同樣

$(selector).click(function (){})
$(selector).on('click ,function (){})

第二種就是事件委託了

它有倆個意思：

一是現有的dom節點是有事件的。

二是新添加的dom節點也是有事件的。

那麼爲何要用委託事件

通常來講，dom須要有事件處理程序，咱們都會直接給它設事件處理程序就行了，那若是是不少的dom須要添加事件處理呢？好比咱們有100個li，每一個li都有相同的click點擊事件，可能咱們會用for循環的方法，來遍歷全部的li，而後給它們添加事件，那這麼作會存在什麼影響呢？

在JavaScript中，添加到頁面上的事件處理程序數量將直接關係到頁面的總體運行性能，由於須要不斷的與dom節點進行交互，訪問dom的次數越多，引發瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間，這就是爲何性能優化的主要思想之一就是減小DOM操做的緣由；

若是要用事件委託，就會將全部的操做放到js程序裏面，與dom的操做就只須要交互一次，這樣就能大大的減小與dom的交互次數，提升性能；

事件委託的原理：

事件委託是利用事件的冒泡原理來實現的。

何爲事件冒泡呢？

就是事件從最深的節點開始，而後逐步向上傳播事。

繼續看：

頁面上有這麼一個節點樹，div>ul>li>a;好比給最裏面的a加一個click點擊事件，那麼這個事件就會一層一層的往外執行，執行順序a>li>ul>div，有這樣一個機制，那麼咱們給最外面的div加點擊事件，那麼裏面的ul，li，a作點擊事件的時候，都會冒泡到最外層的div上，因此都會觸發，這就是事件委託，委託它們父級代爲執行事件。

再次總結下委託的優勢

(1) 減小內存消耗

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>
// ...... 表明中間還有未知數個 li

$('ul').on('click','li',function(){
	...
})

(2) 動態綁定事件

在實際項目，咱們常常須要經過 AJAX 或者用戶操做動態的增長或者去除列表項元素，那麼在每一次改變的時候都須要從新給新增的元素綁定事件，給即將刪去的元素解綁事件；

若是用了事件委託就沒有這種麻煩了，由於事件是綁定在父層的，和目標元素的增減是沒有關係的，執行到目標元素是在真正響應執行事件函數的過程當中去匹配的；

因此使用事件在動態綁定事件的狀況下是能夠減小不少重複工做的。

//操做Partner帳號列表
    //增:
    $(document).on("click",'.add_to_list',function(){
     	...
     });
     //刪:
    $(document).on("click",'.del_to_list',function(){
     	...
     })

小結：適合用事件委託的事件：click，mousedown，mouseup，keydown，keyup，keypress。

注意：mouseover和mouseout雖然也有事件冒泡，可是處理它們的時候須要特別的注意，由於須要常常計算它們的位置，處理起來不太容易，另外如focus，blur之類的，自己就沒用冒泡的特性，天然就不能用事件委託了。

5.遍歷 closest()

其用法是完成事件委託。

closest() 方法得到匹配選擇器的第一個祖先元素，從當前元素開始沿 DOM 樹向上

通俗點講就是 讓它的父元素或者祖先元素去作事情

<div class="box">
    <div class="content">
    	<h3>我是content</h3>
    	<form action="####" id="formtosub">
    		姓名：<input type="text" name="" id="" value="" /><br />
    		年齡：<input type="text" name="" id="" value="" /><br />
    		<button id="btn"> 提交</button>
    	</form>
    </div>
</div>

點擊提交按鈕讓它的浮現蘇表單背景色變紅

$(function(){
	$("#btn").click(function(){
		$(this).closest('#formtosub').css("background","red");
		var form=$(this).closest('#formtosub');
		console.log(form);
	})
})

附圖：

6.ajaxSubmit() 提交表單

通常狀況下，在提交表單時經過form直接提交，可是有時咱們並不但願直接跳轉頁面，那麼就可使用ajaxSubmit(obj)函數來提交數據

ajaxForm和ajaxSubmit均可以接收0或1個參數，該參數能夠是一個變量、一個對象或回調函數，這個對象主要有如下參數：

var object= {
      url:url,　　　　　　//form提交數據的地址
　　　type:type,　　　  //form提交的方式(method:post/get)
　　　target:target,　　//服務器返回的響應數據顯示的元素(Id)號
      beforeSerialize:function(){} //序列化提交數據以前的回調函數
    　beforeSubmit:function(){},　　//提交前執行的回調函數
    　success:function(){},　　　　   //提交成功後執行的回調函數
      error:function(){},             //提交失敗執行的函數
　　　dataType:null,　　　　　　　//服務器返回數據類型
　　　clearForm:true,　　　　　　    //提交成功後是否清空表單中的字段值
　　　restForm:true,　　　　　　  //提交成功後是否重置表單中的字段值，即恢復到頁面加載時的狀態
　　　timeout:6000 　　　　　 　 //設置請求時間，超過該時間後，自動退出請求，單位(毫秒)。　　

}

ajaxForm

$(function(){
     $("form").ajaxForm(object)；
 })

ajaxSubmit

$(function(){
    $('#submitbtn').click(function(){
         $("form").ajaxSubmit(object)；
    })
})

這兩種方法主要的卻別是ajaxForm不能主動提交form，函數只是爲提交表單作準備須要以submit來觸發提交。而ajaxSubmit會主動提交表單，同時能夠在點擊其餘按鈕時也能夠觸發提交，不必定是submit按鈕。

7.dragsort() 拖拽排序

(1)引入js 文件

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="jquery-list-dragsort.js"></script>

(2)css

<style type="text/css">
/* dragsort */
*{margin:0;padding:0;}
ul,li{display: block;list-style: none;}
.dragsort-box li{
	width:50%;
	height:30px;
	line-height:30px; 	
	margin:5px auto; 
	padding:0 5px;
	border:1px solid #DDD; 
	border-radius: 10px;
}
</style>

(3)body

<body>
	<section class="wrap" style="width:80%; padding:5% 10% 5%;">	
		<h1>jQuery列表拖動排列</h1>					
		<ul class="dragsort-box">			
			<li  data-cursor="pointer" >蔬菜</li>
			<li  data-cursor="pointer" >肉</li>
			<li  data-cursor="pointer" >麪包</li>
			<li  data-cursor="pointer" >牛奶</li>
			<li  data-cursor="pointer" >奶油</li>
			<li  data-cursor="pointer" >冰淇淋</li>
		</ul>
	</section>
    <script type="text/javascript">
		$(".dragsort-box").dragsort({
			dragSelector:"li", // 拖拽元素
			dragEnd:function (){ // 拖動結束後的回調函數
			console.log(1)
		}});
		
//			$(".dragsort-box").dragsort("destroy"); // 中止拖拽
		
	</script>
</body>

(4)效果圖

(5)參數詳解

dragSelector

CSS選擇器內的元素的列表項的拖動手柄。默認值是「li」。

dragSelectorExclude

CSS選擇器的元素內的dragSelector不會觸發dragsort的。默認值是」input, textarea, a[href]」。

dragEnd

拖動結束後將被調用的回調函數.

dragBetween

設置爲「true」，若是你要啓用多組列表之間拖動選定的列表。 默認值是false。

placeHolderTemplate

拖動列表的HTML部分。默認值是 li 標籤。

scrollContainer

CSS選擇器的元素，做爲滾動容器，例如溢出的div設置爲自動。默認值是「窗口「

scrollSpeed

一個數字，它表明了速度，頁面拖動某一項時，將滾動容器外，較高使用價值的是速度和較低的值是較慢的。 若是設置爲」0″以禁用滾動。默認值是」5″.