jquery的介紹

jQuery 是一個 JavaScript的類庫，包含了大量的，有助於項目開發的屬性和方法，jQuery 極大地簡化了 JavaScript 編程。
jQuery的版本
- 第一代版本1.xx.xx，例如1.11.3，特色兼容全部瀏覽器(包含IE6~IE8)，沒有vue/react/angular等框架以前（數據驅動），項目都是基於DOM操做完成的。基本上項目都是jQuery。
- 第二代版本2.xx.xx，放棄了低版本瀏覽器的兼容處理，迎合了一些移動端的開發處理（同時誕生一個比JQ更懂移動端的類庫Zepto，因此二代版本是個雞肋）
- 第三代版本3.xx.xx，沒有處理低版本瀏覽器的兼容，可是此時項目進入到框架開發時代，傳統操做DOM的思想逐步被摒棄，因此JQ已經沒落下了。

jQuery 庫包含如下特性：

HTML 元素選取css
HTML 元素操做html
CSS 操做vue
HTML 事件函數node
JavaScript 特效和動畫react
HTML DOM 遍歷和修改jquery
AJAXweb
Utilitiesajax

經常使用的jQuery的選擇器

獲取須要操做的DOM元素，獲得的結果是（JQ對象=>類數組集合），只有JQ對象才能夠調取JQ提供的一操做DOM的方法。

操做DOM的方法

篩選、遍歷方法 `children/find/filter/eq(get)/prevAll/next/nextAll/siblings/index...`

獲取DOM元素

eq(index)返回被選元素的指定索引的元素，返回值是一個JQ對象（init(1)），依然能夠繼續調用JQ方法編程
```
let $div = $('div')
$div.eq(0).css('color','red') //給第一個div設置字體顏色爲紅色
複製代碼
```
get(index)返回被選對象的指定索引的元素，返回值是一個原生的DOM對象，可使用原生瀏覽器提供的屬性和方法。json
```
$("div").click(function() {
   x = $("div").get(0);
   $("div").text(x.nodeName + ": " + x.innerHTML);
});
複製代碼
```
children(select)方法返回返回被選元素的全部直接子元素,selcet通常是字符串值，包含匹配元素的選擇器表達式。
```
$("ul").children()//返回ul下全部的子元素，返回值是JQ對象
複製代碼
```

find(select) //返回全部被選中的select元素，返回值也是JQ對象

$("p").find("span").css('color','red');//返回p標籤中全部span標籤，並將字體顏色設置成紅色
複製代碼

遍歷方法

prevAll('select')，返回select同級的全部元素，可是必須是同一個父級下的。

prev('select')，返滬select同級的上一個元素，必須是同一個父級下的。

<ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li>
    <li class="item-iii">III</li>
    </ul>

    console.log($('.item-3').prevAll());// li.item-1 li.item-2
    console.log($('.item-3').prev());// li.item-2
複製代碼

next('select'),返回同級的下一個元素，必須是同一個父級元素下。

nextAll('select'),返回同級下的全部元素，必須是同一個父級元素下。

console.log($('.item-1').next())//返回與類型爲item-1同級元素的下一個元素，必須是同一個父級哦
console.log($('.item-1').nextAll())// li.item-2 li.item-3
複製代碼

siblings('select')獲取選中元素同一父級元素下的全部同級元素。
```
console.log($('.item-2').siblings())// li.item-1 li.item-3
複製代碼
```
index('select')獲取選中元素在同級元素的index索引位置，必須是同一個父級元素下
```
console.log($('.item-3').index()) // 2
複製代碼
```

操做樣式 `css/addClass/removeClass/toggleClass/hasClass/innerWidth...`

css()用於返回所選樣式的值或者設置單個以及多個樣式

$('item-2').css('color') // 返回類名爲item-2元素的color樣式

$('item-2').css(background: 'red')// 設置類名爲item-2元素的background顏色爲紅色

// 設置多個樣式的語法
$('item-2').css({color:'red',background:'black'})
複製代碼

addClass('select')給所選元素添加類名

removeClass('select')給所選元素移出類名

$('item-2').addClass('lis')

$('item-2').removeClass('lis')
複製代碼

toggleClass(class,switch),給所選元素添加類名或者刪除類名，class必須，switch可選，switch可規定是添加或者刪除值是true或者false，通常不用寫，由於若是沒有類型就會自動添加，若是類名存在就會進行刪除操做。
```
$('item-2').toggleClass('lis') //添加或者刪除類名 看所選元素是否存在lis類名
複製代碼
```
hasClass('select'),返回所選元素是否存在這個select類名，返回true或者false
```
console.log($('li').hasClass('lis')) // true
複製代碼
```
innerWidth()返回所選元素的內部寬度，包含padding，不包含border和margin。
outerWidth()返回所選元素的外部寬度，包含padding和border，若是須要margin則用outerWidth(true)

操做內容 `html/text/val/append/appendTo/insertAfter/attr...`

html()返回或者設置所選元素的內容。若是該方法未寫任何參數就是返回內容，若是寫了內容（html(content)）就是設置參數。content包含html標籤。
text()設置或返回被選元素的文本內容。
val()返回或者設置被選元素的值，通常用於input表單。
append(content)在所選元素的內部的最後面插入內容，能夠是HTML標籤。
appendTo(),在所選元素內部的最後面插入內容，做用和append同樣，可是寫法不一樣。

insertAfter()，在所選元素外部的後面插入內容。

$('content').appendTo('selector')// content是要添加的內容，selector是所選的元素的選擇器。
$('content').insertAfter('selector') // 語法如上
複製代碼

attr()設置或返回被選元素的屬性值。

控制動畫 `animate/finish/fadeIn/fadeOut/hidde/show/slideDown/slideUp...`

animate()用於建立動畫,只有數字值可建立動畫（好比 "margin:30px"）。字符串值沒法建立動畫（好比 "background-color:red"）。

$(selector).animate({params},speed,callback)
// params必需，參數是造成動畫的css屬性，speed可選，參數規定動畫時長，能夠取slow、fast或者毫秒，callback可選，是動畫執行後所執行的函數。
$('div').animate({
    width:'100px',
    height:'+=120px'
})
複製代碼

finish()方法中止當前運行的動畫，移除全部排隊的動畫，併爲被選元素完成全部動畫。
fadeIn()使用淡入效果來顯示被選元素，假如該元素是隱藏的。
fadeOut()使用淡出效果來隱藏被選元素。
$(selector).hide(speed,callback),隱藏所選元素，speed和callback都是可選。
slideDown()被選元素被隱藏的前提下，則如下拉的動畫顯示被選元素。
slideUp()以上拉的形式隱藏被選元素

操做事件綁定 `on/off/bind/unbind/delgate/one`

off()一般用於移除經過 on() 方法添加的事件處理程序。
one()事件觸發一次後就移除。
bind()被選元素添加一個或多個事件處理程序，並規定事件發生時運行的函數。
unbind()移除被選元素的事件處理程序。
delegate()方法爲指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。

工具類方法 `each/ajax...`

$(selector).each(function(index,element)),循環每一個li並執行函數

ajax

Ajax用於瀏覽器與服務器通訊而無需刷新整個頁面，服務器將再也不返回整個頁面，而是返回少許數據，經過JavaScript DOM更新一部分節點。期間數據傳輸可採用xml，json等格式，Ajax最先用於谷歌的搜索提示。其實不刷新整個頁面即可與服務器通訊的方法有不少，好比Flash，Java applet，iframe等，但Ajax是目前最爲常見的一種。
瀏覽器與服務器之間傳輸數據所採用的格式，比較常見的有xml，html，text，json，jsonp等，目前json因爲佔用更小存儲，且是JavaScript原生格式，所以很受歡迎。
常見的語法$.ajax({name: val, name: val...}),其中name的可選字段以下
- url：連接地址字符串形式
- data:須要發送到服務器的參數格式爲鍵值對形式
- type:請求數據的形式，有get和post
- timeout：請求超時時間，時間單位爲毫秒
- cache：是否緩存請求結果，val用boolean表示
- contentType：內容格式，默認爲"application/x-www/form-urlencoded"
- dataType:服務器響應的數據類型，val是字符串格式，有json、jsonp等等
- success:請求成功後服務器回調的函數。
- error：請求失敗後，服務器的回調函數
- complete：請求完成後調用的函數，不管請求成功或者失敗都會執行，該函數在sucess和error以後執行
- async：是否異步處理，val是boolean類型，默認爲true，若是是false，js會等待請求函數執行完畢後纔會執行後面的代碼。
- username：訪問認證請求中攜帶的用戶名，val字符串格式
- password：返回認證請求中攜帶的密碼，val字符串格式
```
//最原始的調用方法
$.ajax({
    url: '/greet',
    data: {name: 'hello'},
    type: 'POST',
    dataType: 'json',
    success: function(data){
        data: jQuery.parseJSON(data) //dataType指明瞭返回數據爲json類型，故不須要再反序列化
    }
})

// 簡化寫法
$.post(
    '/greet',
    {naeme: 'hello'},
    function(data){
        ....
    },
    'json'
)

$.get(
      '/greet',
    {naeme: 'hello'},
    function(data){
        ....
    },
    'json'
)

/** $getJSON,該方法使用get執行ajax請求，從服務器加載json數據，形式：$.getJSON(url, data, func)。 $.load()，該方法將服務器加載的數據直接插入到指定DOM中，其中data若是存在則使用POST方式發送請求，不存在則使用GET方式發送請求。 **/
<div id="ret"></div>
    $('#ret').load(
    "/greet",
    {name: 'Brad'}
)
複製代碼
```

ajax的基礎操做

ajax四步

let xhr = new XMLHttpRequest() //建立xmlHttpRequest對象也叫建立ajax實例。
    xhr.open('GET',url?xxx=xxx,false)//打開URL（配置發送請求信息),第三個參數是是否異步，默認是true,問號傳參
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            let result = xhr.responseText
             }
        }//監聽AJAX狀態，在狀態碼爲某個時候（有0,1，2，3，4），獲取服務器響應內容
   xhr.send()  //發送請求，send中放的是請求主體內容,設置請求體能夠實現將信息傳遞給服務器。（傳參）
複製代碼

經過設置請求頭能夠把信息傳遞給服務端xhr.setRequestHeader()（傳參）
ajax的五種狀態碼

狀態碼	描述
0（未初始化）	尚未調用send()方法
1（載入）	已調用send()，正在發送請求
2（載入完成）	send()執行完畢，已接收所有的響應內容
3（交互）	正在解析響應內容
4（完成）	響應內容解析完成，可讓客戶端調用

XML

XMML是可擴展的標記語言，被設計用來傳輸或者存儲數據的。

經常使用的JQ事件

Event函數	綁定函數至
`$(document).ready(function===$(function(){})`	當文檔加載完畢後執行函數
`$(select).click(function)===$(select).on('click',function(){})`	當所選元素被點擊時出發函數
`$(select).dbclick(function)`	當所選元素被雙擊時觸發函數
`$(selectselect).focus(function)`	當所選元素的得到焦點時觸發函數
`$(select).mouseover(function(){})`	當鼠標通過所選元素時，觸發函數

jQuery基礎知識點