jQuery的一些簡單基礎知識

官網網站http://jquery.com/

下載地址:https://code.jquery.com/

> * 1.x: 兼容ie678,但相對其它版本文件較大
> * 2.x: 不兼容ie678,比1.x的文件小
> * 3.x: 不兼容ie678,比1.x的文件小
> * 因爲兼容性的問題,國內大部分網站依舊選擇1.x的版本,因此建議使用1.x

> * 壓縮版,將源代碼進行了壓縮,文件體積更小,項目上線時爲了提升頁面的加載速度使用
> * 源碼版,沒有壓縮,文件體積相對大,開發學習時爲了理解jQuery的源碼使用

<script src="js/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
```百度CDN資源
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
```谷歌CDN資源
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 

線上引用兼容
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
</script>

$(function(){
//jq代碼1...
});
$(function(){
//jq代碼2...
});

### $衝突解決
當其餘框架也使用了$時就會和jQuery的$發生衝突,解決方法有

* 方法一:在使用jQuery前釋放jQuery的$使用權,用jQuery來代替$
jQuery.noConflict();

jQuery(function(){

});

* 方法二:在使用jQuery前釋放jQuery的$使用權的同時自定義本身的符號,用自定義符號來代替$

var kz = jQuery.noConflict();

kz(function(){

});

jQuery對象是一個僞數組

$(DOM對象)會獲得包含了DOM元素的jQuery對象

jQuery對象的靜態方法
* $.each(數組,回調) 遍歷數組或者僞數組,返回被遍歷的數組
```
$.each(arr,function(index,value){

})

* $.map(數組,回調) 映射數組或者僞數組,返回映射後的數組
用return後 用變量接收到的是一個真數組
```
$.map(arr,function(value,index){

})
* $.trim(str) 去除字符串兩邊的空格並返回
* $.isWindow(arg) 判斷參數對象是否是window對象
* $.isArray(arg) 判斷參數對象是否是真數組
* $.isFunction(arg) 判斷參數對象是否是函數
* $.holdReady(布爾值) 參考爲true時暫停jQuery入口函數的執行,參數爲false時恢復jQuery入口函數的執行

JQ對象轉dom節點
$('div')[0]
$('div').get(0)

> $(':eq(index)') 選擇索引對應的DOM元素
>> 能夠用jQuery對象的index()方法獲取當前jQuery對象的索引

> $('選擇器:empty') 選擇的元素中沒有文本內容和子元素的
> $('選擇器:parent') 選擇的元素中有文本內容或者子元素的
> $('選擇器:contains(文本內容)') 選擇的元素中包含有指定內容的
> $('選擇器:has(選擇器)') 選擇的元素中有指定的選擇器的

> jQuery對象.eq(index) 選擇索引對應的DOM元素
> jQuery對象.siblings() jQuery對象中包含元素以外的兄弟元素

查找標籤

$('div:eq(0)').find('標籤') 在該對象的下面查找選擇的標籤
$('div:eq(0)').child('標籤') 在該對象的子元素下查找選擇的標籤
$('div:eq(0)').parent('標籤') 在該對象的父元素查找選擇的標籤
$('div:eq(0)').parents('標籤') 在該對象的上級元素集合查找選擇的標籤

以上方法都返回jQuery對象

* 獲取屬性節點的值

> DOM對象.getAttribute("屬性節點名稱")
> DOM對象.屬性節點名稱,注意class用className
> DOM對象.["屬性節點名稱"]
> 注意:後面兩種方法只適合DOM對象原有的屬性

* 設置屬性節點的值

> DOM對象.setAttribute("屬性節點名稱", "值");
> DOM對象.屬性節點名稱 = 值
> DOM對象.["屬性節點名稱"] = 值
> 注意:後面兩種方法只適合DOM對象原有的屬性

* 刪除屬性

> DOM對象.removeAttribute("屬性節點名稱")

### jQuery對象方法操做屬性

* 獲取
$('div').attr('class')

> jQuery對象.attr("屬性節點名稱") 或者 jQuery對象.prop("屬性節點名稱")
> 注意:只能獲取第一個元素的值

* 設置
$('div').attr('id','aaa')
> jQuery對象.attr("屬性節點名稱","值1 值2...") 或者 jQuery對象.prop("屬性節點名稱","值1 值2")

* 刪除

> jQuery對象.removeAttr("屬性節點名稱") 或者 jQuery對象.removeProp("屬性節點名稱")
> 注意:刪除全部元素的值

* attr和prop的區別

> * 屬性節點的值具備true和false時用prop,如checked,selected,disabled,其它的屬性節點用attr
> * 屬性節點的值具備true和false時,沒有添加該屬性時attr會返回undefined,prop返回true

### 操做class

> jQuery對象.addClass("class1 class2...")

> jQuery對象.removeClass("class1 class2...")

> jQuery對象.toggleClass("class1 class2...")

### 操做代碼/文本/值
* jQuery對象.html([val])

> 設置或者獲取元素中的HTML,至關於innerHTML

* jQuery對象.text([val])

> 設置或者獲取元素中的HTML,至關於innerText 能做用於全部元素

* innerHTML和innerText的區別

> * 獲取HTML內容包括HTML標籤和文本，而獲取文本內容只有標籤裏面的文本
> * 設置帶有標籤的HTML內容,標籤會起做用，而設置帶有標籤的文本內容，標籤會被當作文原本顯示

* jQuery對象.val([val])

> 設置或獲取元素value屬性的值

### 操做css
* 獲取 jQuery對象.css("樣式名稱"）

* 設置

> * jQuery對象.css("樣式名稱", "值");
> * jQuery對象.css("樣式名稱", "值").css("樣式名稱", "值");
> * jQuery對象.css({"樣式名稱1":"值1","樣式名稱2":"值2"});

### 操做尺寸

* jQuery對象.width([val]) jQuery對象.height([val])

> 設置或獲取元素的寬高

* jQuery對象.innerWidth([val]) jQuery對象.innerHeight([val])

> 設置或獲取元素的寬高,包含內邊距

* jQuery對象.outerWidth([val]) jQuery對象.outerHeight([val])

> 設置或獲取元素的寬高,包含邊框和內邊距

### 操做位置

* jQuery對象.offset([對象])

> * 設置或獲取元素相對於body的偏移位
> * offset不傳參時返回一個包含偏移值對象
> * offset傳值須要傳一個包含偏移值的對象

* jQuery對象.position()

> * 獲取元素相對於父級定位元素的偏移位,返回一個包含偏移值對象 不能設置

* jQuery對象.scrollTop([val])

> 設置或獲取元素垂直滾動距離

* jQuery對象.scrollLeft([val])

> 設置或獲取元素水平滾動距離
### 事件的綁定
* 方法一: jQuery對象.事件名(function(){})

$('.btn').click(function(){})

* 方法二: jQuery對象.on('事件名',function(){})

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

* 注意點:

> * 方法一部分事件jQuery沒有實現,方法二中能夠寫js中全部的事件
> * 不管是方法一仍是方法二,綁定的事件都不會覆蓋

### 事件的移除
* jQuery對象.off() 移除全部的事件
* jQuery對象.off('事件名') 移除全部事件名對應的事件
* jQuery對象.off('事件名',函數名) 移除事件名對應的函數名的相關事件

### 阻止事件冒泡
* 方法一 return false
* 方法二 event.stopPropagation()

### 阻止默認行爲
* 方法一 return false
* 方法二 event.preventDefault()

### 事件自動觸發
* jQuery對象.trigger('事件名',) 不阻止事件冒泡和默認行爲的事件觸發

> 注意a標籤用trigger不阻止事件冒泡,可是會阻止默認行爲,若是須要發生默認行爲須要觸發a標籤的子元素

* jQuery對象.triggerHandler('事件名') 阻止事件冒泡和默認行爲的事件觸發

### 自定義事件
* 自定義事件的方法

> * 用jQuery對象.on('自定義事件名',function(e,參數){})綁定一個自定義事件
> * 用jQuery對象.trigger('自定義事件名'，參數)來觸發自定義的事件
參數多個時 用[參1,參2]

### 事件命名空間
* 事件命名空間的使用

> * 用jQuery對象.on('事件名.名稱空間',function(){})綁定一個自定義事件
> * 用jQuery對象.trigger('事件名.名稱空間')來觸發自定義的事件
> * 注意點:
>> * 用trigger觸發子元素有命名空間的事件時,父元素相同相同命名空間的相同事件會觸發,沒有命名 空間的事件不會觸發
>> * 用trigger觸發子元素沒有命名空間的事件時,子元素全部相同類型的事件和父元素全部相同類型的事件都會被觸發

### 事件的委託

* 事件委託的方式:
1：$('父元素選擇器').delegate('子元素選擇器','事件名', 回調函數)
2：$('父元素選擇器').on('事件名','子元素選擇器', 回調函數)

> 注意點：
>> * 回調函數中的this是觸發事件的元素,及具體的某個子元素
>> * 頁面中動態增長的元素須要經過事件委託的方式來添加事件

### 移入移出事件
* mouseover/mouseout 移入移出子元素會觸發
* mouseenter/mouseleave 移入移出子元素不會觸發
* 用jQuery對象.hover(回調1,回調2)

> * 移入執行回調1,移出執行回調2
> * 若是隻傳一個回調函數,移入移出都執行該回調
> * 移入移出子元素不會觸發

### 顯示和隱藏
* jQuery對象.show(時長,回調)

* jQuery對象.hide(時長,回調)

* jQuery對象.toggle(時長,回調)

### 捲入卷出
* jQuery對象.slideDown(時長,回調)

* jQuery對象.slideUp(時長,回調)

* jQuery對象.slideToggle(時長,回調)

### 淡入淡出
* jQuery對象.fadeIn(時長,回調)

* jQuery對象.fadeOut(時長,回調)

* jQuery對象.fadeToggle(時長,回調)

* jQuery對象.fadeTo(時長,淡入到值,回調)

### 自定義動畫
* jQuery對象.animate(須要動畫的屬性對象,時長,回調)
$('#box1').animate({width:'200px',height:'200px'/width:"-=100",height:"-=100"},1000)
$('#box1').animate({width:'200px'},1000,function(){$('#box1').animate({height:'200px'},1000)})
> * 須要動畫的屬性對象可使用累加累減動畫
> * 多個屬性寫在一塊兒能夠執行同步動畫

### 列隊動畫
* 多個動畫鏈式調用,後面的動畫會等待前面的動畫執行完畢

* 在動畫方法的回調中再執行動畫,回調中的動畫會等待前面的動畫執行完畢

* 多個動畫按調用的順序執行

### 動畫方法
* 中止動畫 jQuery對象.stop(是否清空未執行完的列隊動畫,是否跳到正在執行動畫的最後狀態);
$('#box1').stop() 至關於stop(false,false)默認狀態
中止當前正在執行的動畫,而後執行後續存在於隊列的動畫

$('#box1').stop(true,false)
清空隊列的動畫 ，保持在當前動畫的狀態

$('#box1').stop(false,true)
跳到當前正在執行的動畫的最後狀態，而後執行後續的隊列動畫

$('#box1').stop(true,true)
清空隊列的動畫，跳到當前正在執行的動畫的最後狀態並保持

> * 第一個參數默認是false,表示不清空,若是是true,後續動畫不執行
> * 第二個參數默認是false,表示中止在當前狀態,若是是ture,則跳到正在執行動畫的最後狀態

* 延遲動畫 jQuery對象.delay(時長);
$('#box1').delay(2000);
延遲該命令之下的動畫 延遲的是動畫show hide不在延遲之下
> 延遲動畫只對後面的動畫起做用

### 動畫的速度
$('button:eq(4)').click(function(){$('#box1')
.animate({width:'200px'},1000)
.animate({height:'200px'},1000,'linear')})

以上動畫在回調前面能夠指定速度,默認是'swing'慢快慢 ,可用參數"linear"勻速
### 添加節點
* 內部插入

> * 將子節點插入到父節點內部後面
>> * 父節點jQuery對象.append(子節點jQuery對象)
>> * 子節點jQuery對象.appendTo(父節點jQuery對象)

> * 將子節點插入到父節點內部前面
>> * 父節點jQuery對象.prepend(子節點jQuery對象)
>> * 子節點jQuery對象.prependTo(父節點jQuery對象)

* 外部插入

> * jQuery對象1.after(jQuery對象2) jQuery對象1中的節點後面插入jQuery對象2中的節點
> * jQuery對象1.before(jQuery對象2) jQuery對象1中的節點前面插入jQuery對象2中的節點

### 刪除節點
* jQuery對象.remove() 刪除jQuery對象中的節點同時刪除事件，()能夠加便籤表示刪除某一個
* jQuery對象.detach() 刪除jQuery對象中的節點但保留事件
* jQuery對象.empty() 清空jQuery對象總節點的全部內容

### 替換節點
* jQuery對象1.replaceWith(jQuery對象2/HTML代碼) 用jQuery對象2中的節點替換jQuery對象1中的節點
* jQuery對象1.replaceAll('選擇器') 用jQuery對象1中節點替換掉全部選中的節點

### 複製節點
jQuery對象.clone(false|true) 複製一個節點,默認是false不會複製事件,true會複製事件

### ajax接口
```javascript
$.ajax({
url:'./data.json', //請求的地址
type:'GET',//指定請求的方法,默認是GET
data:{name:'Tom',age:18},//發送到服務器的數據，字符串鍵值對或者對象
dataType:'json',//返回數據的類型,能夠是xml json script text html,默認是text
success:function(返回數據,狀態信息,jqXHR對象){},//請求成功後的回調函數
error:function(jqXHR對象,狀態信息){},//請求失敗後的回調函數
complete:function(jqXHR對象,狀態信息){},//請求完成後的回調函數
timeout:3000, //設置請求超時的時間,單位爲毫秒
statusCode:{304:function(){},503:function(){}.....}//設置不一樣狀態碼的回調函數
headers:{test:'test'}//設置請求頭
})
```

### 接口封裝
* $.get(url[,參數][,回調函數][,返回數據類型])//發送GET請求
* $.post(url[,參數][,回調函數][,返回數據類型]) //發送POST請求
* $.getScript(url[,回調函數]) //獲取JS代碼
* $.getJSON(url[,回調函數]) //獲取JSON數據
* jQuery對象.load(url[,參數][,回調函數]) //將服務器返回的數據加載到jQuery對象的DOM元素中

> 全部的回調函數接收的參數依次爲 返回數據,返回狀態信息(成功爲success 失敗爲error),jqXHR對象

### 全局配置
* $.ajaxSetup(對象參數) //給全部的ajax請求設置默認的初始化參數

### 全局回調
* $(document).ajaxStart(回調函數),請求開始,未完成其它請求時執行回調函數
* $(document).ajaxSend(回調函數),當有請求發送請求時執行回調函數
* $(document).ajaxSuccess(回調函數),當有請求成功時執行回調函數
* $(document).ajaxError(回調函數),當有請求失敗時執行回調函數
* $(document).ajaxComplete(回調函數),當有請求完成時執行回調函數
* $(document).ajaxStop(回調函數),請求結束,全部請求結束時執行回調函數

 

> 全局回調通常寫在ajax請求前面,若是某個ajax不想觸發全局事件,能夠設置 global:false來取消

### jqXHR對象
* jqXHR對象是瀏覽器原生XHR對象的一個超集
* 能夠經過調用jqXHR對象上的方法來實現連綴調用,常見的方法有:

> * .done(回調函數) 請求成功時執行,回調函數的參數依次爲 返回數據,狀態信息,jqXHR對象
> * .fail(回調函數) 請求失敗時執行,回調函數的參數依次爲 jqXHR對象,狀態信息
> * .always(回調函數) 不管成功仍是失敗都執行,若是成功,回調函數的參數和done的同樣,若是失敗，回調函數的參數和fail的同樣

###擴展本身的插件

* 類級別的

```javascript
$.myFunc = function(){

}
var obj = {
myFunc:function(){

}
};
$.tom = obj;

* 類級別的,本質就是在jQuery對象的constructor構造函數上增長方法 用jq自己調用
$.extend({
myFunc:function(){

}
})
* 對象級別的,本質就是在jQuery對象的原型對象上增長方法 用jq對象調用
$.fn.extend({
colorToRed:function(){
this.css({
color:'red'
});
return this;
}
})
````

```javascript
;(function($){
$.fn.tab = function(options){
//默認的配置屬性
var defaults = {

}
//將默認屬性和傳入的屬性合併
var options = $.extend(defaults,options);

this.each(function(){
//具體的邏輯實現

})
}
})(jQuery)
````

###使用已有的插件

* 電子書插件 turnjs(http://www.turnjs.com/)

* 表單驗證插件 jQuery validation(https://jqueryvalidation.org/)

* 全屏加載插件 FullPage (https://alvarotrigo.com/fullPage/)