由于看的是鋒利的jQuery(第二版)部分內(nèi)容可能沒更新, 推薦看jquery API中文文檔

第一個(gè)jquery程序

// 網(wǎng)頁中所有DOM結(jié)構(gòu)繪制完成后就執(zhí)行, 可能DOM元素關(guān)聯(lián)的東西并沒有加載完

// 能同時(shí)編寫多個(gè)
$(document).ready(function(){

})
$(document).ready(function(){

})

// 可以簡寫 ==>
$(function(){

})

jquery對象和DOM對象

• jquery對象就是通過 jquery 包裝 DOM 對象后產(chǎn)生的對象
• jquery對象是jquery獨(dú)有的. 如果一個(gè)對象是jquery獨(dú)有的, 就可以使用jquery方法

$('#foo').html()
==>
document.getElementByid('foo').innerHTML

• jquery對象無法使用DOM對象的任何方法

// jquery對象和DOM對象的相互轉(zhuǎn)換
// 先約定好定義變量的風(fēng)格. 獲取的對象是jquery對象,變量前面加上$

var $variable = jquery對象
var variable = DOM對象

1. jquery對象轉(zhuǎn)DOM對象

- jquery提供兩種方法將一個(gè)jquery對象轉(zhuǎn)換為DOM對象   [index] 和 get (index)

(1) jquery對象是一個(gè)類似數(shù)組的方法,可以通過[index]轉(zhuǎn)換
var $cr = $('#cr')    // jquery對象
var cr = $cr[0]    // DOM對象

(2) 通過get(index)來轉(zhuǎn)換
var $cr = $('#cr')    // jquery對象
var cr = $cr.get(0)    // DOM對象

2. DOM轉(zhuǎn)換為jquery對象

- 對于一個(gè)DOM對象, 只需要$() 把DOM對象包起來可以獲得jquery對象

var cr = document.getElementById('cr')    // DOM對象
var $cr = $(cr)    // jquery對象

解決jquery與其他庫的沖突

• 默認(rèn)情況下, jquery 用$作為自身的快捷方式
• 在jquery庫和其他庫都被加載完畢后,可以再任何時(shí)候調(diào)用 jquery.noConflict() 函數(shù)將 $ 控制權(quán)移交給其他庫

jquery.noConflict()    // 移交$控制權(quán)
jquery(function(){    // 使用jquery

})

var $j = jquery.noConflict()    // 自定義快捷方式

jquery.noConflict()    // 移交$控制權(quán)
jquery(function($){    // 加參數(shù)
  $('.p').click()
})

• jquery庫在其他庫之前調(diào)用, 直接使用 jquery 來工作, 無需調(diào)用 jquery.noConflict()

jquery選擇器

// 基本選擇器
$('#id')   // 通過給定的id選取單個(gè)元素
$('.class')    // 通過給定的類名匹配元素 (返回集合元素)
$('element')    // 給定的元素名匹配元素 (返回集合元素)
$('*')    // 匹配所有元素 (返回集合元素)
$('selector1, selector2... , selectorN')    // 每一個(gè)選擇器匹配到的元素合并后一起返回 (返回集合元素)


// 層次選擇器
$('ancestor descentant')    // 選取ancestor元素里所有des(后代)元素  例: $('div span')
$('parent > child')    // 選取parent下的child(子)元素  例: $('div > span')  選取div元素下元素名是span的子元素
$('prev + next')    // 選擇緊接在prev后面的next元素 例: $('.one + div') 選取class為one的下一個(gè)div同輩元素
==> 使用 next() 代替    例: $('.one').next('div')

$('prev ~ sblings')    // 選取prev元素之后的所有sblings元素  例: $('#two ~ div') 選取id為two的元素后面所有的div同輩元素
==> 使用 nextAll()代替  例: $('#two').nextAll('div')


// 過濾選擇器
1.1 基本過濾選擇器

:first  $('div:first')    // 獲取第一個(gè)元素    選取所有div元素中第一個(gè)div元素
:last  $('div:last')    // 和上面相反
:not(selector)  $('input:not(.myClass)')    // 選取class不是myClass的input元素
:even  $('input:even')    // 選取索引是偶數(shù)的元素
:odd  $('input:odd')    // 選取索引是奇數(shù)的元素
:eq(index)  $('input:eq(1)')    // 選取索引等于index的元素
:gt(index)    // 選取索引大于index的元素
:lt(index)    // 選取索引小于index的元素
:header  $(':header')    // 選取所有的標(biāo)題元素,例 h1 h2
:animated  $('div:animated')  // 選取當(dāng)前正在執(zhí)行動(dòng)畫的所有元素
:focus  $(':focus')    // 選取當(dāng)前獲取焦點(diǎn)的元素


1.2 內(nèi)容過濾選擇器

:contains(text)  $('div:contains('我')')    // 選取含有內(nèi)容文本為 'text' 的元素
:empty  $('div:empty')    // 選取不包含子元素或者文本的空元素
:has(selector)  $('div:has(p)')    // 選取含有選擇器所匹配元素的元素
:parent  $('div:parent')    // 選取含有子元素或者文本的元素    集合元素


1.3 可見性過濾選擇器

:hidden    // 選取所有不可見的元素 display:none  input type=hidden   visivility:hidden等
$('input:hidden')    // 只選取input元素

:visible    // 選取所有可見的元素
$('div:visible')    // 選取所有可見的div元素

未完...

jquery中的DOM 操作

1. 查找節(jié)點(diǎn)

• 1.1 查找元素節(jié)點(diǎn)

var $li = $('ul li:eq(1)')
var li_text = $li.text()
console.log(li_text)

• 1.2 查找屬性節(jié)點(diǎn)

var $para = $('p')
var p_text = $para.attr(''title'')
alert(p_text)

2. 創(chuàng)建節(jié)點(diǎn)

• 2.1 創(chuàng)建元素節(jié)點(diǎn)

// $(html)方法會根據(jù)傳入的HTML標(biāo)記字符串, 創(chuàng)建一個(gè)DOM對象, 并將這個(gè)DOM對象包裝成一個(gè)jQuery對象返回

var $li_1 = $('<li></li>')
var $li_2 = $('<li></li>')

$('ul').append($li_1)

• 2.2 創(chuàng)建文本節(jié)點(diǎn)

var $li_1 = $('<li>香蕉</li>')
var $li_2 = $('<li>蘋果</li>')

$('ul').append($li_1)

• 2.3 創(chuàng)建屬性節(jié)點(diǎn)

var $li_1 = $('<li title="香蕉">香蕉</li>')

$('ul').append($li_1)

3. 插入節(jié)點(diǎn)

4. 刪除節(jié)點(diǎn)
如果文檔中某一個(gè)元素多余, 應(yīng)將其刪除

• 4.1 remove()方法

// 從DOM中刪除所有匹配的元素
$('ul li:eq(1)').remove()

$('ul li').remove('li[title != 蘋果]')    // title 不等于 蘋果的 li 元素刪除

• 4.2 detach()方法

// 和remove()一樣, 也是從DOM中刪除元素. 但需要注意: 這個(gè)方法不會把匹配的元素從jquery對象中刪除
// 因而可以將來在使用這些匹配的元素, 與remove() 不同的是, 所有綁定的事件, 附加數(shù)據(jù)會保留下來
// 當(dāng)需要移走一個(gè)元素屯援，不久又將該元素插入DOM時(shí)猛们，這種方法很有用念脯。

$('ul li:eq(1)').detach()

• 4.3 empty()方法

// 嚴(yán)格來說: empty()并不是刪除節(jié)點(diǎn), 而是清空節(jié)點(diǎn), 它能清空元素中的所有后代節(jié)點(diǎn)

$('ul li:eq(1)').empty()    // 清楚的是li元素里的文本

5. 復(fù)制節(jié)點(diǎn)

// 如果單擊<li>元素后需要在復(fù)制一個(gè)<li>元素, 可以使用clone() 方法來完成

$('ul li').click(function(){
  $(this).clone().append('ul')
})

 $(this).clone(true).appendTo('body')    // 在clone中加個(gè)true, 含義是復(fù)制元素的同時(shí)復(fù)制元素中所綁定的事件,因此該元素的副本也同樣具有復(fù)制功能 

6. 替換節(jié)點(diǎn)

replaceWith()  replaceAll()

replaceWith()  是將所有匹配的元素都替換成指定的HTML 或者 DOM 元素
replaceAll()    和replaceWith() 顛倒

$('p').replaceWith('<strong>你最不喜歡的水果是?</strong>')

7. 包裹節(jié)點(diǎn)

// wrap()  所有的元素單獨(dú)包裹
$('strong').wrap("<b></b>")  // 用 b 把 strong 包裹起來

// wrapAll()  所有匹配的元素用一個(gè)元素來包裹
$('strong').wrapAll("<b></b>")

// wrapInner()  每一個(gè)匹配元素的子內(nèi)容用其他結(jié)構(gòu)化的標(biāo)記包裹起來
$('strong').wrapInner("<b></b>")    // <strong><b>你最喜歡的水果</b><strong>

8. 屬性操作

• 8.1 獲取屬性和設(shè)置屬性

.attr()

var p_txt = $('p').attr('title')  // 獲取p的屬性title
$('p').attr('title', 'your title')  // 設(shè)置title屬性

• 8.2 刪除屬性

.removeAttr()    // $('p').removeAttr('title')

9. 樣式操作

• 9.1 獲取樣式和設(shè)置樣式

$('p').attr('class')
$('p').attr('class', 'high')

• 9.2 追加樣式

.addClass()

$('p').addClass('another')

• 9.3 移除樣式

.removeClass()

• 9.4 切換樣式

// toggle()  控制行為的重復(fù)切換
// toggleClass()  控制樣式上重復(fù)切換

$('p').toggleClass('another')  // 重復(fù)切換類名 another

• 9.5 判斷是否含有class

.hasClass()   Boolean
$('p').hasClass('another')

10. 設(shè)置和獲取HTML 文本 和值

.html()   ==>  innerHTML
.text()  ==>  innerText 
.val()  ==> value

11. 遍歷節(jié)點(diǎn)

• 11.1 children()方法
  
  children

// 用于匹配元素的子元素集合

var $body = $('body').children()    // 2個(gè)子元素
var $p = $('p').children()          // 0個(gè)子元素
var $ul = $('ul').children()        // 3個(gè)子元素

• 11.2 next()方法

// 該方法用于匹配元素后面緊鄰的同輩元素
var $pl = $('p').next()   // <ul><li></li></ul>

• 11.3 prev()方法

// 該方法用于匹配元素前面緊鄰的同輩元素
var $ul = $('ul').prev()   // <p></p>

• 11.4 siblings()方法

// 獲取匹配元素的兄弟節(jié)點(diǎn)

var $p2 = $('p').siblings()

• 11.5 closest()方法
  
  父元素選取

// 從元素本身開始狞洋，在DOM 樹上逐級向上級元素匹配，并返回最先匹配的祖先元素绿店。

12. css-dom操作

css-dom

// 直接利用.css() 方法獲取元素的樣式屬性
$('p').css('color')    // 獲取p元素的樣式顏色

// 設(shè)置樣式
$('p').css('color', 'red')    // 設(shè)置p元素的樣式為紅色

// 設(shè)置半透明
$('p').css('opacity', '.5')

// 獲取某個(gè)元素的height值
$('p').css('height')   ==>  $('p').height()

$('p').height(100)  // 數(shù)字默認(rèn)px
$('p').height('100em')  // 其他單位傳一個(gè)字符串

// 元素定位的幾個(gè)方法

1. offset()方法  // 獲取元素在當(dāng)前視窗的相對位移, 返回對象有兩個(gè)屬性 top left, 只對可見元素有效

var offset = $('p').offset()
var left = offset.left
var top = offset.top


2. position()方法  // 獲取元素相對于最近的一個(gè)position樣式屬性設(shè)置為relative或者absolute的祖父節(jié)點(diǎn)的相對偏移
也包括兩個(gè)對象 top left

var position= $('p').position()  // 獲取p元素的position()
var left = position.left
var top = position.top


3. scrollTop() 和 scrollLeft()    // 獲取元素的滾動(dòng)條距頂端的距離和距左側(cè)的距離

var $p = $('p')
var scrollTop = $p.scrollTop()  // 元素滾動(dòng)條距頂端的距離
var scrollLeft = $scrollLeft()  // 元素滾動(dòng)條距左側(cè)的距離

jquery事件和動(dòng)畫

• 事件綁定
  在文檔裝載完成后, 如果打算為元素綁定事件來完成某些操作, 可以使用 bind()方法來對匹配元素進(jìn)行特定事件的綁定

bind[type [,data], fn]

第1個(gè)參數(shù)是事件類型 blur focus load resize scroll click dbclick mousedown ...等
第2個(gè)參數(shù)為可選參數(shù) 作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象
第3個(gè)參數(shù)用來綁定的處理函數(shù)

1. 基本效果

$(function(){
  $('#head').bind('click', function(){
    $(this).next().show()
  })
})

2. 加強(qiáng)效果

$(function(){
  $('#head').bind('click', function(){
    var $content = $(this).next()
    if($content.is(':visible')){
      $content.show()
    }else {
      $content.hide()
    }
  })
})

3. 改變綁定事件的類型

$(function(){
  $('#head').bind('mouseover', function(){
     $(this).next().show()
  }).bind('mouseout', function(){
     $(this).next().hide()
  })
})

4. 簡寫綁定事件

$(function(){
  $('#head').mouseover,(function(){
     $(this).next().show()
  }).mouseout(function(){
     $(this).next().hide()
  })
})

4.1 合成事件
jQuery有兩個(gè)合成事件--- hover()方法和toggle() 方法, 屬于jQuery 自定義的方法

4.1.1 hover()方法

hover(enter, leave)  // 模擬鼠標(biāo)懸停事件

光標(biāo)移到元素上, 觸發(fā)第一個(gè)函數(shù)(enter), 移出元素, 觸發(fā)第二個(gè)函數(shù)(leave) 

$(function(){
  $('#head').hover(function(){
     $(this).next().show()
  }), function(){
     $(this).next().hide()
  })
})

4.1.2 toggle()方法

toggle(fn1, fn2, fn3...fnN)  // 模擬鼠標(biāo)連續(xù)點(diǎn)擊事件

第一次單擊,出發(fā)第一個(gè)函數(shù), 再次單擊同一元素時(shí), 觸發(fā)第二個(gè)函數(shù), 如果有第二個(gè)函數(shù), 依次觸發(fā)

$(function(){
  $('#head').toggle(function(){
     $(this).next().show()
  }), function(){
     $(this).next().hide()
  })
})

// 切換元素的可見狀態(tài)
$(function(){
  $('#head').toggle(function(){
     $(this).next().toggle()
  }), function(){
     $(this).next().toggle()
  })
})

• 事件冒泡

1. 什么是冒泡?
   在頁面上可以有多個(gè)事件, 也可以多個(gè)元素響應(yīng)一個(gè)事件. 假設(shè)網(wǎng)頁有兩個(gè)元素, 其中一個(gè)元素嵌套在另一個(gè)元素中, 并且都被綁定了click事件,同時(shí)<body>也綁定了click事件

// html
<body>
  <div id="content">
    外層div元素
    <span>內(nèi)層span元素</span>
    外層div元素
  </div>
  
  <div id="msg"></div>
</body>

// js
$(function(){
  // span元素綁定click事件
  $('span').bind('click', function(){         // 點(diǎn)擊span會輸出3條記錄
    var txt = $('#msg').html() + '<p>內(nèi)層span元素被單擊</p>'
    $('#msg').html(txt)
  })
  
  // div綁定事件
  $('#content').bind('click',function(){        // 輸出兩條記錄
    var txt = $('#msg').html() + '<p>外層div元素被單擊</p>'
    $('#msg').html(txt)
  })
  
  // body綁定事件
    $('body').bind('click',function(){         // 輸出一條記錄
    var txt = $('#msg').html() + '<p>body元素被單擊</p>'
    $('#msg').html(txt)
  })
})

1.1 事件冒泡引發(fā)的問題

jquery對表單和表格的操作

1.1 表單應(yīng)用
一個(gè)表單有三個(gè)基本組成部分:

• 表單標(biāo)簽: 包含處理表單數(shù)據(jù)所用的服務(wù)端程序URL, 以及數(shù)據(jù)提交到服務(wù)器的方法
• 表單域: 包含文本框 密碼框 隱藏域 多行文本框等
• 表單按鈕: 提交按鈕 復(fù)位按鈕和一般按鈕等, 用于將數(shù)據(jù)傳送到服務(wù)器上或者取消傳送

1.1.1 單行文本框的應(yīng)用

• 獲取焦點(diǎn)和失去焦點(diǎn)改變樣式

$(function(){
  $(':input').focus(function(){
    $(this).addClass('focus')
  }).blur(function(){
    $(this).removeClass('focus')
  })
})

• 復(fù)選框全選 全不選 反選

// 全選
$('#checkAll').click(function(){
    $('[name=item]:checkbox').attr('checked', true)
})

// 全不選
$('#checkNo').click(function(){
    $('[name=item]:checkbox').attr('checked', false)
})

// 反選 需要循環(huán)每一個(gè)值,取反值
$('#checkRev').click(function(){
    $('[name-item]:checkbox').each(function(){
        $(this).attr('checked', !$(this).attr('checked'))    // ==> 原生: this.checked = !this.checked 
    })
})

點(diǎn)擊全選全不選控制checkbox

// 設(shè)置變量 flag
$('[name-item]:checkbox').click(function(){
    var flag = true
    $('[name-item]:checkbox').each(function(){
        if(!this.checked){
           flag = false
        }
    })
    $('#checkAll').attr('checked', flag)
})

// 判斷點(diǎn)擊數(shù)量
$('[name=item]:checkbox').click(function(){
    // 定義一個(gè)臨時(shí)變量,提高效率
    var $tmp = $('[name=item]:checkbox')
    // filter() 篩選選出的復(fù)選框
    $('#checkAll').attr('checked', $tmp.length == $tmp.filter(':checked').length)
})

• 下拉框應(yīng)用

下拉框應(yīng)用

// 左邊選項(xiàng)添加到右邊
$('#add').click(function(){
    var $options = $('#select1 option:selected')    // 獲取選中的項(xiàng)
    var $remove = $options.remove()    // 刪除下拉列表中選中的選項(xiàng)
    $remove.appendTo('#select2')    // 追加給對方
})

// 全部選項(xiàng)添加給對方
$('#add_all').click(function(){
    var $options = $('#select1 option')    // 獲取全部選項(xiàng)
    $options.appendTo('#select2')
})

// 雙擊選項(xiàng)添加給對方
$('#select1').dbclick(function(){
    var $options = $('option:selected'.this)    // 獲取選中的項(xiàng)
    $options.appendTo('#select2')
})

• 表單驗(yàn)證

// required 必填字段, 失去焦點(diǎn)行為
$('form input').each(function(){
  var $required = $("<strong class='high'>*</strong>")  // 創(chuàng)建元素
  $(this).parent().append($required)
})

$('form input').blur(function(){
  var $parent = $(this).parent()
  // 驗(yàn)證用戶名
  if($(this).is('#userName')){
    if(this.value = '' || this.value.length < 6) {
      var errorMsg = "請輸入正確的6位的用戶名"
      $parent.append('<span class="onError">'+errorMsg+'</span>')
    }else {
      alert('輸入正確')
    }
  }
})

// 輸入時(shí)就可以提醒
keyup事件   focus事件

1.2 表格應(yīng)用

• 隔行變色

$(function(){
    $('tr:odd').addClass('odd')    // 給奇數(shù)行添加樣式
    $('tr:even').addClass('even')    // 給偶數(shù)行添加樣式
    $('tr:contains("王五")').addClass('selected')    // 給某行添加高亮
})

• 單選框控制表格行高亮

$('tbody > tr').click(function(){
  $(this).addClass('selected')
         .siblings().removeClass('selected')
         .end()        // 重新回到 $(this)對象
         .find(':radio').attr('checked', true)
})

• 復(fù)選框控制表格行高亮

// 復(fù)選框沒有限制個(gè)數(shù), 當(dāng)點(diǎn)擊某行, 如果已經(jīng)高亮,則移除高亮并去掉當(dāng)前選中框的狀態(tài)
// 判斷是否高亮, 可以使用 hasClass()

$('tbody > tr').click(function(){
  if($(this).hasClass('selected')){
     $(this).removeClass('selected')
         .find(':checkbox').attr('checked', false)
  }else {
     $(this).addClass('selected')
         .find(':checkbox').attr('checked', true)
  }
})

• 表格展開關(guān)閉

  
  
  表格展開關(guān)閉

$(function(){
  $('tr.parent').click(function(){    // 獲取所謂的父行
    $(this)
      .toggleClass('selected')    // 添加刪除高亮
      .siblings('.child_' + this.id).toggle()    // 隱藏/顯示所謂的子行
  })
})

jquery與AJAX

1.1 AJAX優(yōu)勢

• 不需要插件支持
• 優(yōu)秀的用戶體驗(yàn) // 不刷新整個(gè)頁面更新數(shù)據(jù)
• 提高web程序的性能
• 減輕服務(wù)器和帶寬的壓力

1.2 Ajax 的 XMLHttpRequest 對象

• Ajax的核心是 XMLHttpRequest對象,它是Ajax實(shí)現(xiàn)的關(guān)鍵--異步請求

1.3 第一個(gè)Ajax實(shí)例

function ajax(){
  var xmlHttpReq = null
  if(window.ActiveXObject){    // IE5 IE6
    xmlHttpReq = new Active XObject("Microsoft XMLHTTP")
  } else if(window.XMLHttpRequest){
    xmlHttpReq = new XMLHttpRequest()
  }
  xmlHttpReq.open('GET', 'test.php', true)    // 調(diào)用open并采用異步

  ....
}

2 jquery中的Ajax

jquery對ajax進(jìn)行了封裝, 在jquery 中 $.ajax() 方法屬于最底層的方法, 第二層是 load() $.get() $.post(), 第三層是 $.getScript() 和 $.getJSON()

2.1 load()

• 2.1.1 載入HTML文檔
  load() 方法是jquery中最簡單和常用的Ajax方法, 能載入遠(yuǎn)程HTML代碼并插入DOM中

// .load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )
load(url [,data] [,callback])
url: String  請求HTML的URL地址
data(可選) : Object  發(fā)送至服務(wù)器的 key/value 數(shù)據(jù)
callback(可選):   Function  請求完成時(shí)的回調(diào)函數(shù)

load

$('#send').click(function(){
    $('#resText').load('test.html')
})

• 2.1.2 篩選載入的HTML文檔
  • 如果只需加載HTML的部分元素, 使用URL參數(shù)來達(dá)到目的, URL參數(shù)結(jié)構(gòu)"url selector"

$('#resText').load('test.html .para')

• 2.1.3 傳遞方式
  load()方法的傳遞方式是根據(jù)參數(shù)data來制定, 如果沒有參數(shù)傳遞,采用GET方式傳遞;反之, 則自動(dòng)用post方式

// 無參數(shù)傳遞, 則是GET方式
$('#test').load('test.php', function(){
  // ...
})

// 有參數(shù)傳遞, 則是POST方式
$('#test').load('test.php', {name: "rain", age: "22"}, function(){
  // ...
})

• 2.1.4 回調(diào)參數(shù)
  對于必須在加載完成后才能繼續(xù)的操作, load()方法提供了回調(diào)函數(shù)

$('#test').load('test.html', function(responseText, textStatus, XMLHttpRequest)){
  responseText:    // 請求返回的內(nèi)容
  textStatus:         // 請求狀態(tài): success error notmodified timeout 4種
  XMLHttpRequest:    // XMLHttpRequest對象
}

2.2 $.get() 和 $.post()

load()方法通常用來從web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件, 然而這并不能體現(xiàn) Ajax的全部價(jià)值, 在項(xiàng)目中,如果需要傳遞一些參數(shù)給服務(wù)器中的頁面, 可以使用另外兩種方法

• 2.2.1 $.get()
  $.get()方法使用 GET 方式進(jìn)行異步請求

// 語法為
$.get(url [,data] [,callback] [,type])
url :    // 請求地址  String
data:    // 發(fā)送到服務(wù)器的數(shù)據(jù)  可選  Object
callback:    //   載入成功時(shí)回調(diào)函數(shù)  可選  Function
type:    // 服務(wù)端返回內(nèi)容的格式xml html json text sctipt等  可選  String

$.get(), 在一個(gè)單獨(dú)的請求中關(guān)聯(lián)到 .done(), .fail(), 和 .always() 回調(diào)函數(shù)吉懊，
 甚至允許你在請求已經(jīng)結(jié)束后，指派回調(diào)函數(shù)假勿。如果該請求已經(jīng)完成借嗽，則回調(diào)函數(shù)會被立刻調(diào)用。

// Assign handlers immediately after making the request,
  // and remember the jqxhr object for this request
  var jqxhr = $.get("example.php", function() {
    alert("success");
  })
  .success(function() { alert("second success"); })
  .error(function() { alert("error"); })
  .complete(function() { alert("complete"); });
 
  // perform other work here ...
 
  // Set another completion function for the request above
  jqxhr.complete(function(){ alert("second complete"); });

$.get

$(function(){
  $('#send').click(function(){
    $.get('get1.php', {    // get
      userName: $('#userName').val(),
      content: $('#content').val()
    }, function(data, textStatus){
      $('#resText').html(data)  // 返回的數(shù)據(jù)添加到頁面
    })
  })
})

• 2.2.2 $.post()

它與 $.get()方法的結(jié)構(gòu)和使用方式都相同, 不過仍有一些區(qū)別

• GET請求會將參數(shù)跟在 URL 后傳遞參數(shù), 而POST請求則是作為 HTTP消息的實(shí)體內(nèi)容發(fā)送給web服務(wù)器
• GET方式對傳輸?shù)臄?shù)據(jù)大小有限制, 而POST則大的多, 理論上不受限制
• GET方式請求的數(shù)據(jù)會被瀏覽器緩存起來, 在某種情況下, GET會帶來安全問題, 而POST相對來說可以避免這些問題
• GET方式和POST方式傳遞的數(shù)據(jù)在服務(wù)器端獲取不相同

$(function(){
  $('#send').click(function(){
    $.post('get1.php', {    // post方法
      userName: $('#userName').val(),
      content: $('#content').val()
    }, function(data, textStatus){
      $('#resText').html(data)  // 返回的數(shù)據(jù)添加到頁面
    })
  })
})

2.3 $.getScript() 和 $.getJson()

• 2.3.1 $.getScript()
  有時(shí)候,在頁面初次加載時(shí)就取得全部的js是沒有必要的,雖然可以動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽,但并不理想

$(document.createElement('script')).attr('src', 'test.js').appendTo('head')
$('<script src="test.js"/>').appendTo('head')

$('#send').click(function(){
  $.getScript('test.js')
})

// $.getScript()也有自己的回調(diào)函數(shù)
$.getScript('jquery.color.js', function(){
  $('#go').click(function(){
    $('.block').animate({backgroundColor: 'pink'}, 1000)
  })
})

• 2.3.2 $.getJSON()
  $.getJSON()用于加載 JSON 文件, 與 $.getScript()用法相同

$('#send').click(function(){
  $.getJSON('test.json', function(data){
    // data: 返回的數(shù)據(jù)
    $('#resText').empty()
    ...
  })
})

2.4 $.ajax

$.ajax()是jQuery最底層的Ajax實(shí)現(xiàn)

jQuery.ajax( url [, settings ] )

url:  String  一個(gè)用來包含發(fā)送請求的URL字符串转培。

type:  String   請求方式 ("POST" 或 "GET")恶导， 默認(rèn)為 "GET"

data: Object String  發(fā)送到服務(wù)器的數(shù)據(jù)。將自動(dòng)轉(zhuǎn)換為請求字符串格式浸须。

dataType:  String  預(yù)期服務(wù)器返回的數(shù)據(jù)類型惨寿。
# xml: 返回 XML 文檔，可用 jQuery 處理
# html: 返回純文本 HTML 信息删窒；包含的script標(biāo)簽會在插入dom時(shí)執(zhí)行
# script: 把響應(yīng)的結(jié)果當(dāng)作 JavaScript 執(zhí)行裂垦。并將其當(dāng)作純文本返回
# json: 把響應(yīng)的結(jié)果當(dāng)作 JSON 執(zhí)行，并返回一個(gè)JavaScript對象
# jsonp: 以 JSONP的方式載入 JSON 數(shù)據(jù)塊肌索。會自動(dòng)在所請求的URL最后添加 "?callback=?"
# text: 返回純文本字符串

complete:  Function  請求完成后回調(diào)函數(shù) (請求success 和 error之后均調(diào)用)蕉拢。這個(gè)回調(diào)函數(shù)得到2個(gè)參數(shù)： jqXHR (在 jQuery 1.4.x中是 XMLHTTPRequest) 對象和一個(gè)描述請求狀態(tài)的字符串("success", "notmodified", "error", "timeout", "abort", 或者 "parsererror") 。

cache:  Boolean (默認(rèn): true, dataType為"script"和"jsonp"時(shí)默認(rèn)為false)  如果設(shè)置為 false ，瀏覽器將不緩存此頁面

async:  (默認(rèn): true) Boolean  默認(rèn)設(shè)置下晕换，所有請求均為異步請求（也就是說這是默認(rèn)設(shè)置為 true ）午乓。如果需要發(fā)送同步請求，請將此選項(xiàng)設(shè)置為 false 闸准」枨疲跨域請求和 dataType: "jsonp" 請求不支持同步操作。注意恕汇，同步請求將鎖住瀏覽器腕唧，用戶其它操作必須等待請求完成才可以執(zhí)行。

contentType:  (默認(rèn): 'application/x-www-form-urlencoded; charset=UTF-8')  發(fā)送信息至服務(wù)器時(shí)內(nèi)容編碼類型瘾英。

success:  Function 請求成功后的回調(diào)函數(shù)枣接。這個(gè)函數(shù)傳遞3個(gè)參數(shù)：從服務(wù)器返回的數(shù)據(jù)，并根據(jù)dataType參數(shù)進(jìn)行處理后的數(shù)據(jù)缺谴，一個(gè)描述狀態(tài)的字符串;還有 jqXHR（在jQuery 1.4.x前為XMLHttpRequest） 對象 

error: Function  請求失敗時(shí)調(diào)用此函數(shù)

global: Boolean  無論怎么樣這個(gè)請求將觸發(fā)全局AJAX事件處理程序但惶。默認(rèn)是true 

beforeSend:  Function  請求發(fā)送前的回調(diào)函數(shù)，用來修改請求發(fā)送前jqXHR（在jQuery 1.4.x的中湿蛔，XMLHttpRequest）對象膀曾，此功能用來設(shè)置自定義 HTTP 頭信息，等等阳啥。

timeout: Number  設(shè)置請求超時(shí)時(shí)間（毫秒）添谊。此設(shè)置將覆蓋$.ajaxSetup() 里的全局設(shè)置。 超時(shí)周期開始于$.ajax訪問成功的那個(gè)時(shí)間點(diǎn)察迟；如果幾個(gè)其他請求都在進(jìn)步并且瀏覽器有沒有可用的連接斩狱，它有可能在被發(fā)送前就超時(shí)了

xhrFields:    一對“文件名-文件值”組成的映射，用于設(shè)定原生的 XHR對象扎瓶。例如所踊，如果需要的話，在進(jìn)行跨域請求時(shí)，你可以用它來設(shè)置withCredentials為true。
$.ajax({
   url: a_cross_domain_url,
   xhrFields: {
      withCredentials: true
   }
});




推薦使用的注意事項(xiàng):  
jqXHR.success(), jqXHR.error(), 和 jqXHR.complete()回調(diào)從 jQuery 1.8開始 被棄用渗磅。他們將最終被取消

您的代碼應(yīng)做好準(zhǔn)備削彬，使用jqXHR.done(), jqXHR.fail(), 和 jqXHR.always() 代替。

var jqxhr = $.ajax( "example.php" )
    .done(function() { alert("success"); })
    .fail(function() { alert("error"); })
    .always(function() { alert("complete"); });

// Example
$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
}).done(function( msg ) {
  alert( "Data Saved: " + msg );
});

var menuId = $("ul.nav").first().attr("id");
var request = $.ajax({
  url: "script.php",
  type: "POST",
  data: {id : menuId},
  dataType: "html"
});
request.done(function(msg) {
  $("#log").html( msg );
});
request.fail(function(jqXHR, textStatus) {
  alert( "Request failed: " + textStatus );
});

$.ajaxSetup()

jQuery.ajaxSetup( options )

描述: 為以后要用到的Ajax請求設(shè)置默認(rèn)的值

用于設(shè)置`$.ajaxSetup()`的詳細(xì)參數(shù), 參見 $.ajax()]

注意： 此處指定的設(shè)置會影響所有 $.ajax或基于AJAX的衍生方法，如$.get()的調(diào)用。
這可能會導(dǎo)致不良的行為因?yàn)槠渌{(diào)用（例如，插件）可能希望正常的默認(rèn)設(shè)置惋增。
出于這個(gè)原因，我們強(qiáng)烈建議您不要使用此API改鲫。
相反我們建議诈皿，在調(diào)用時(shí)明確設(shè)置選項(xiàng)或定義一個(gè)簡單的插件林束。

舉個(gè)例子,我們可以事先設(shè)置服務(wù)器重復(fù)響應(yīng)的默認(rèn)URL參數(shù)：
$.ajaxSetup({
  url: 'ping.php'
});

現(xiàn)在每次Ajax請求將自動(dòng)使用這個(gè)"ping.php" URL：
$.ajax({
  // url not set here; uses ping.php
  data: {'name': 'Dan'}
});

`注意`: 全局回調(diào)函數(shù)應(yīng)使用他們各自的全局Ajax事件處理方法`[.ajaxStart()], [.ajaxStop()], [.ajaxComplete()], [.ajaxError()], [.ajaxSuccess()], [.ajaxSend()]`，
而不是為 `$.ajaxSetup()` 設(shè)置 `options` 對象稽亏。

2.5 Ajax全局事件

這些方法用于注冊事件處理器壶冒，用來處理頁面上的任何 Ajax 請求，當(dāng)某些事件觸發(fā)后截歉，這些事件處理器被調(diào)用胖腾。如何 jQuery.ajaxSetup() 中的 global 屬性被設(shè)置為 true （這也是默認(rèn)設(shè)置），那么瘪松，每個(gè) Ajax 請求都會觸發(fā)全局事件咸作。

.ajaxComplete()    當(dāng)Ajax請求完成后注冊一個(gè)回調(diào)函數(shù)。這是一個(gè) AjaxEvent宵睦。

.ajaxError()    Ajax請求出錯(cuò)時(shí)注冊一個(gè)回調(diào)處理函數(shù)记罚，這是一個(gè) Ajax Event。

.ajaxSend()    在Ajax請求發(fā)送之前綁定一個(gè)要執(zhí)行的函數(shù)壳嚎，這是一個(gè) Ajax Event.

.ajaxStart()    在AJAX 請求剛開始時(shí)執(zhí)行一個(gè)處理函數(shù)桐智。 這是一個(gè) Ajax Event.

.ajaxStop()    在AJAX 請求完成時(shí)執(zhí)行一個(gè)處理函數(shù)。 這是一個(gè) Ajax Event烟馅。

.ajaxSuccess()    綁定一個(gè)函數(shù)當(dāng) Ajax 請求成功完成時(shí)執(zhí)行说庭。 這是一個(gè)Ajax Event.

global: false

持續(xù)更新中...