锋利的jquery 知识点总结
生活随笔
收集整理的這篇文章主要介紹了
锋利的jquery 知识点总结
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
由于看的是鋒利的jQuery(第二版)部分內容可能沒更新, 推薦看jquery API中文文檔
第一個jquery程序
?
// 網頁中所有DOM結構繪制完成后就執行, 可能DOM元素關聯的東西并沒有加載完// 能同時編寫多個 $(document).ready(function(){}) $(document).ready(function(){})// 可以簡寫 ==> $(function(){})jquery對象和DOM對象
- jquery對象就是通過 jquery 包裝 DOM 對象后產生的對象
- jquery對象是jquery獨有的. 如果一個對象是jquery獨有的, 就可以使用jquery方法
?
$('#foo').html() ==> document.getElementByid('foo').innerHTML- jquery對象無法使用DOM對象的任何方法
?
// jquery對象和DOM對象的相互轉換 // 先約定好定義變量的風格. 獲取的對象是jquery對象,變量前面加上$var $variable = jquery對象 var variable = DOM對象1. jquery對象轉DOM對象- jquery提供兩種方法將一個jquery對象轉換為DOM對象 [index] 和 get (index)(1) jquery對象是一個類似數組的方法,可以通過[index]轉換 var $cr = $('#cr') // jquery對象 var cr = $cr[0] // DOM對象(2) 通過get(index)來轉換 var $cr = $('#cr') // jquery對象 var cr = $cr.get(0) // DOM對象2. DOM轉換為jquery對象- 對于一個DOM對象, 只需要$() 把DOM對象包起來可以獲得jquery對象var cr = document.getElementById('cr') // DOM對象 var $cr = $(cr) // jquery對象解決jquery與其他庫的沖突
- 默認情況下, jquery 用$作為自身的快捷方式
- 在jquery庫和其他庫都被加載完畢后,可以再任何時候調用 jquery.noConflict() 函數將 $ 控制權移交給其他庫
?
jquery.noConflict() // 移交$控制權 jquery(function(){ // 使用jquery})var $j = jquery.noConflict() // 自定義快捷方式jquery.noConflict() // 移交$控制權 jquery(function($){ // 加參數$('.p').click() })- jquery庫在其他庫之前調用, 直接使用 jquery 來工作, 無需調用 jquery.noConflict()
jquery選擇器
?
// 基本選擇器 $('#id') // 通過給定的id選取單個元素 $('.class') // 通過給定的類名匹配元素 (返回集合元素) $('element') // 給定的元素名匹配元素 (返回集合元素) $('*') // 匹配所有元素 (返回集合元素) $('selector1, selector2... , selectorN') // 每一個選擇器匹配到的元素合并后一起返回 (返回集合元素)// 層次選擇器 $('ancestor descentant') // 選取ancestor元素里所有des(后代)元素 例: $('div span') $('parent > child') // 選取parent下的child(子)元素 例: $('div > span') 選取div元素下元素名是span的子元素 $('prev + next') // 選擇緊接在prev后面的next元素 例: $('.one + div') 選取class為one的下一個div同輩元素 ==> 使用 next() 代替 例: $('.one').next('div')$('prev ~ sblings') // 選取prev元素之后的所有sblings元素 例: $('#two ~ div') 選取id為two的元素后面所有的div同輩元素 ==> 使用 nextAll()代替 例: $('#two').nextAll('div')// 過濾選擇器 1.1 基本過濾選擇器:first $('div:first') // 獲取第一個元素 選取所有div元素中第一個div元素 :last $('div:last') // 和上面相反 :not(selector) $('input:not(.myClass)') // 選取class不是myClass的input元素 :even $('input:even') // 選取索引是偶數的元素 :odd $('input:odd') // 選取索引是奇數的元素 :eq(index) $('input:eq(1)') // 選取索引等于index的元素 :gt(index) // 選取索引大于index的元素 :lt(index) // 選取索引小于index的元素 :header $(':header') // 選取所有的標題元素,例 h1 h2 :animated $('div:animated') // 選取當前正在執行動畫的所有元素 :focus $(':focus') // 選取當前獲取焦點的元素1.2 內容過濾選擇器:contains(text) $('div:contains('我')') // 選取含有內容文本為 '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. 查找節點
- 1.1 查找元素節點
?
var $li = $('ul li:eq(1)') var li_text = $li.text() console.log(li_text)- 1.2 查找屬性節點
?
var $para = $('p') var p_text = $para.attr(''title'') alert(p_text)2. 創建節點
- 2.1 創建元素節點
?
// $(html)方法會根據傳入的HTML標記字符串, 創建一個DOM對象, 并將這個DOM對象包裝成一個jQuery對象返回var $li_1 = $('<li></li>') var $li_2 = $('<li></li>')$('ul').append($li_1)- 2.2 創建文本節點
?
var $li_1 = $('<li>香蕉</li>') var $li_2 = $('<li>蘋果</li>')$('ul').append($li_1)- 2.3 創建屬性節點
?
var $li_1 = $('<li title="香蕉">香蕉</li>')$('ul').append($li_1)3. 插入節點
| append() | 向每個匹配的元素內追加內容 |
| appendTo() | 將所有匹配的元素追加到制定的元素中 |
| prepend() | 向每個匹配的元素內部前置內容 |
| prependTo() | 將所有匹配的元素前置到指定的元素中 |
| after() | 在每個匹配的元素之后插入內容 |
| insertAfter() | 將所有匹配的元素插入到指定元素的后面 |
| before() | 在每個匹配的元素之前插入內容 |
| insertbefore() | 將所有匹配的元素插入到指定元素的前面 |
4. 刪除節點
如果文檔中某一個元素多余, 應將其刪除
- 4.1 remove()方法
?
// 從DOM中刪除所有匹配的元素 $('ul li:eq(1)').remove()$('ul li').remove('li[title != 蘋果]') // title 不等于 蘋果的 li 元素刪除- 4.2 detach()方法
?
// 和remove()一樣, 也是從DOM中刪除元素. 但需要注意: 這個方法不會把匹配的元素從jquery對象中刪除 // 因而可以將來在使用這些匹配的元素, 與remove() 不同的是, 所有綁定的事件, 附加數據會保留下來 // 當需要移走一個元素，不久又將該元素插入DOM時，這種方法很有用。$('ul li:eq(1)').detach()- 4.3 empty()方法
?
// 嚴格來說: empty()并不是刪除節點, 而是清空節點, 它能清空元素中的所有后代節點$('ul li:eq(1)').empty() // 清楚的是li元素里的文本5. 復制節點
?
// 如果單擊<li>元素后需要在復制一個<li>元素, 可以使用clone() 方法來完成$('ul li').click(function(){$(this).clone().append('ul') })$(this).clone(true).appendTo('body') // 在clone中加個true, 含義是復制元素的同時復制元素中所綁定的事件,因此該元素的副本也同樣具有復制功能6. 替換節點
?
replaceWith() replaceAll()replaceWith() 是將所有匹配的元素都替換成指定的HTML 或者 DOM 元素 replaceAll() 和replaceWith() 顛倒$('p').replaceWith('<strong>你最不喜歡的水果是?</strong>')7. 包裹節點
?
// wrap() 所有的元素單獨包裹 $('strong').wrap("<b></b>") // 用 b 把 strong 包裹起來// wrapAll() 所有匹配的元素用一個元素來包裹 $('strong').wrapAll("<b></b>")// wrapInner() 每一個匹配元素的子內容用其他結構化的標記包裹起來 $('strong').wrapInner("<b></b>") // <strong><b>你最喜歡的水果</b><strong>8. 屬性操作
- 8.1 獲取屬性和設置屬性
?
.attr()var p_txt = $('p').attr('title') // 獲取p的屬性title $('p').attr('title', 'your title') // 設置title屬性- 8.2 刪除屬性
?
.removeAttr() // $('p').removeAttr('title')9. 樣式操作
- 9.1 獲取樣式和設置樣式
?
$('p').attr('class') $('p').attr('class', 'high')- 9.2 追加樣式
?
.addClass()$('p').addClass('another')- 9.3 移除樣式
?
.removeClass()- 9.4 切換樣式
?
// toggle() 控制行為的重復切換 // toggleClass() 控制樣式上重復切換$('p').toggleClass('another') // 重復切換類名 another- 9.5 判斷是否含有class
?
.hasClass() Boolean $('p').hasClass('another')10. 設置和獲取HTML 文本 和值
?
.html() ==> innerHTML .text() ==> innerText .val() ==> value11. 遍歷節點
- 11.1 children()方法
children
?
// 用于匹配元素的子元素集合var $body = $('body').children() // 2個子元素 var $p = $('p').children() // 0個子元素 var $ul = $('ul').children() // 3個子元素- 11.2 next()方法
?
// 該方法用于匹配元素后面緊鄰的同輩元素 var $pl = $('p').next() // <ul><li></li></ul>- 11.3 prev()方法
?
// 該方法用于匹配元素前面緊鄰的同輩元素 var $ul = $('ul').prev() // <p></p>- 11.4 siblings()方法
?
// 獲取匹配元素的兄弟節點var $p2 = $('p').siblings()- 11.5 closest()方法
父元素選取
?
// 從元素本身開始，在DOM 樹上逐級向上級元素匹配，并返回最先匹配的祖先元素。12. css-dom操作
css-dom
?
?
// 直接利用.css() 方法獲取元素的樣式屬性 $('p').css('color') // 獲取p元素的樣式顏色// 設置樣式 $('p').css('color', 'red') // 設置p元素的樣式為紅色// 設置半透明 $('p').css('opacity', '.5')// 獲取某個元素的height值 $('p').css('height') ==> $('p').height()$('p').height(100) // 數字默認px $('p').height('100em') // 其他單位傳一個字符串?
// 元素定位的幾個方法1. offset()方法 // 獲取元素在當前視窗的相對位移, 返回對象有兩個屬性 top left, 只對可見元素有效var offset = $('p').offset() var left = offset.left var top = offset.top2. position()方法 // 獲取元素相對于最近的一個position樣式屬性設置為relative或者absolute的祖父節點的相對偏移 也包括兩個對象 top leftvar position= $('p').position() // 獲取p元素的position() var left = position.left var top = position.top3. scrollTop() 和 scrollLeft() // 獲取元素的滾動條距頂端的距離和距左側的距離var $p = $('p') var scrollTop = $p.scrollTop() // 元素滾動條距頂端的距離 var scrollLeft = $scrollLeft() // 元素滾動條距左側的距離jquery事件和動畫
- 事件綁定
在文檔裝載完成后, 如果打算為元素綁定事件來完成某些操作, 可以使用 bind()方法來對匹配元素進行特定事件的綁定
?
bind[type [,data], fn]第1個參數是事件類型 blur focus load resize scroll click dbclick mousedown ...等 第2個參數為可選參數 作為event.data屬性值傳遞給事件對象的額外數據對象 第3個參數用來綁定的處理函數?
$(function(){$('#head').bind('click', function(){$(this).next().show()}) })?
$(function(){$('#head').bind('click', function(){var $content = $(this).next()if($content.is(':visible')){$content.show()}else {$content.hide()}}) })?
$(function(){$('#head').bind('mouseover', function(){$(this).next().show()}).bind('mouseout', function(){$(this).next().hide()}) })?
$(function(){$('#head').mouseover,(function(){$(this).next().show()}).mouseout(function(){$(this).next().hide()}) })4.1 合成事件
jQuery有兩個合成事件--- hover()方法和toggle() 方法, 屬于jQuery 自定義的方法
4.1.1 hover()方法
?
hover(enter, leave) // 模擬鼠標懸停事件光標移到元素上, 觸發第一個函數(enter), 移出元素, 觸發第二個函數(leave) $(function(){$('#head').hover(function(){$(this).next().show()}), function(){$(this).next().hide()}) })4.1.2 toggle()方法
?
toggle(fn1, fn2, fn3...fnN) // 模擬鼠標連續點擊事件第一次單擊,出發第一個函數, 再次單擊同一元素時, 觸發第二個函數, 如果有第二個函數, 依次觸發$(function(){$('#head').toggle(function(){$(this).next().show()}), function(){$(this).next().hide()}) })// 切換元素的可見狀態 $(function(){$('#head').toggle(function(){$(this).next().toggle()}), function(){$(this).next().toggle()}) })- 事件冒泡
在頁面上可以有多個事件, 也可以多個元素響應一個事件. 假設網頁有兩個元素, 其中一個元素嵌套在另一個元素中, 并且都被綁定了click事件,同時<body>也綁定了click事件
?
// html <body><div id="content">外層div元素<span>內層span元素</span>外層div元素</div><div id="msg"></div> </body>// js $(function(){// span元素綁定click事件$('span').bind('click', function(){ // 點擊span會輸出3條記錄var txt = $('#msg').html() + '<p>內層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 事件冒泡引發的問題
jquery對表單和表格的操作
1.1 表單應用
一個表單有三個基本組成部分:
- 表單標簽: 包含處理表單數據所用的服務端程序URL, 以及數據提交到服務器的方法
- 表單域: 包含文本框 密碼框 隱藏域 多行文本框等
- 表單按鈕: 提交按鈕 復位按鈕和一般按鈕等, 用于將數據傳送到服務器上或者取消傳送
1.1.1 單行文本框的應用
- 獲取焦點和失去焦點改變樣式
?
$(function(){$(':input').focus(function(){$(this).addClass('focus')}).blur(function(){$(this).removeClass('focus')}) })- 復選框全選 全不選 反選
?
// 全選 $('#checkAll').click(function(){$('[name=item]:checkbox').attr('checked', true) })// 全不選 $('#checkNo').click(function(){$('[name=item]:checkbox').attr('checked', false) })// 反選 需要循環每一個值,取反值 $('#checkRev').click(function(){$('[name-item]:checkbox').each(function(){$(this).attr('checked', !$(this).attr('checked')) // ==> 原生: this.checked = !this.checked }) })點擊全選全不選控制checkbox
?
// 設置變量 flag $('[name-item]:checkbox').click(function(){var flag = true$('[name-item]:checkbox').each(function(){if(!this.checked){flag = false}})$('#checkAll').attr('checked', flag) })// 判斷點擊數量 $('[name=item]:checkbox').click(function(){// 定義一個臨時變量,提高效率var $tmp = $('[name=item]:checkbox')// filter() 篩選選出的復選框$('#checkAll').attr('checked', $tmp.length == $tmp.filter(':checked').length) })- 下拉框應用
下拉框應用
?
// 左邊選項添加到右邊 $('#add').click(function(){var $options = $('#select1 option:selected') // 獲取選中的項var $remove = $options.remove() // 刪除下拉列表中選中的選項$remove.appendTo('#select2') // 追加給對方 })// 全部選項添加給對方 $('#add_all').click(function(){var $options = $('#select1 option') // 獲取全部選項$options.appendTo('#select2') })// 雙擊選項添加給對方 $('#select1').dbclick(function(){var $options = $('option:selected'.this) // 獲取選中的項$options.appendTo('#select2') })- 表單驗證
?
// required 必填字段, 失去焦點行為 $('form input').each(function(){var $required = $("<strong class='high'>*</strong>") // 創建元素$(this).parent().append($required) })$('form input').blur(function(){var $parent = $(this).parent()// 驗證用戶名if($(this).is('#userName')){if(this.value = '' || this.value.length < 6) {var errorMsg = "請輸入正確的6位的用戶名"$parent.append('<span class="onError">'+errorMsg+'</span>')}else {alert('輸入正確')}} })// 輸入時就可以提醒 keyup事件 focus事件1.2 表格應用
- 隔行變色
?
$(function(){$('tr:odd').addClass('odd') // 給奇數行添加樣式$('tr:even').addClass('even') // 給偶數行添加樣式$('tr:contains("王五")').addClass('selected') // 給某行添加高亮 })- 單選框控制表格行高亮
?
$('tbody > tr').click(function(){$(this).addClass('selected').siblings().removeClass('selected').end() // 重新回到 $(this)對象.find(':radio').attr('checked', true) })- 復選框控制表格行高亮
?
// 復選框沒有限制個數, 當點擊某行, 如果已經高亮,則移除高亮并去掉當前選中框的狀態 // 判斷是否高亮, 可以使用 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)} })-
表格展開關閉
?表格展開關閉
?
$(function(){$('tr.parent').click(function(){ // 獲取所謂的父行$(this).toggleClass('selected') // 添加刪除高亮.siblings('.child_' + this.id).toggle() // 隱藏/顯示所謂的子行}) })jquery與AJAX
1.1 AJAX優勢
- 不需要插件支持
- 優秀的用戶體驗 // 不刷新整個頁面更新數據
- 提高web程序的性能
- 減輕服務器和帶寬的壓力
1.2 Ajax 的 XMLHttpRequest 對象
- Ajax的核心是 XMLHttpRequest對象,它是Ajax實現的關鍵--異步請求
1.3 第一個Ajax實例
?
function ajax(){var xmlHttpReq = nullif(window.ActiveXObject){ // IE5 IE6xmlHttpReq = new Active XObject("Microsoft XMLHTTP")} else if(window.XMLHttpRequest){xmlHttpReq = new XMLHttpRequest()}xmlHttpReq.open('GET', 'test.php', true) // 調用open并采用異步.... }2 jquery中的Ajax
jquery對ajax進行了封裝, 在jquery 中 $.ajax() 方法屬于最底層的方法, 第二層是 load() $.get() $.post(), 第三層是 $.getScript() 和 $.getJSON()
2.1 load()
- 2.1.1 載入HTML文檔
load() 方法是jquery中最簡單和常用的Ajax方法, 能載入遠程HTML代碼并插入DOM中
?
// .load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] ) load(url [,data] [,callback]) url: String 請求HTML的URL地址 data(可選) : Object 發送至服務器的 key/value 數據 callback(可選): Function 請求完成時的回調函數load
?
$('#send').click(function(){$('#resText').load('test.html') })- 2.1.2 篩選載入的HTML文檔
- 如果只需加載HTML的部分元素, 使用URL參數來達到目的, URL參數結構"url selector"
?
$('#resText').load('test.html .para')- 2.1.3 傳遞方式
load()方法的傳遞方式是根據參數data來制定, 如果沒有參數傳遞,采用GET方式傳遞;反之, 則自動用post方式
?
// 無參數傳遞, 則是GET方式 $('#test').load('test.php', function(){// ... })// 有參數傳遞, 則是POST方式 $('#test').load('test.php', {name: "rain", age: "22"}, function(){// ... })- 2.1.4 回調參數
對于必須在加載完成后才能繼續的操作, load()方法提供了回調函數
?
$('#test').load('test.html', function(responseText, textStatus, XMLHttpRequest)){responseText: // 請求返回的內容textStatus: // 請求狀態: success error notmodified timeout 4種XMLHttpRequest: // XMLHttpRequest對象 }2.2 $.get() 和 $.post()
load()方法通常用來從web服務器上獲取靜態的數據文件, 然而這并不能體現 Ajax的全部價值, 在項目中,如果需要傳遞一些參數給服務器中的頁面, 可以使用另外兩種方法
- 2.2.1 $.get()
$.get()方法使用 GET 方式進行異步請求
?
// 語法為 $.get(url [,data] [,callback] [,type]) url : // 請求地址 String data: // 發送到服務器的數據 可選 Object callback: // 載入成功時回調函數 可選 Function type: // 服務端返回內容的格式xml html json text sctipt等 可選 String$.get(), 在一個單獨的請求中關聯到 .done(), .fail(), 和 .always() 回調函數，甚至允許你在請求已經結束后，指派回調函數。如果該請求已經完成，則回調函數會被立刻調用。// Assign handlers immediately after making the request,// and remember the jqxhr object for this requestvar 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 abovejqxhr.complete(function(){ alert("second complete"); });$.get
?
$(function(){$('#send').click(function(){$.get('get1.php', { // getuserName: $('#userName').val(),content: $('#content').val()}, function(data, textStatus){$('#resText').html(data) // 返回的數據添加到頁面})}) })- 2.2.2 $.post()
它與 $.get()方法的結構和使用方式都相同, 不過仍有一些區別
- GET請求會將參數跟在 URL 后傳遞參數, 而POST請求則是作為 HTTP消息的實體內容發送給web服務器
- GET方式對傳輸的數據大小有限制, 而POST則大的多, 理論上不受限制
- GET方式請求的數據會被瀏覽器緩存起來, 在某種情況下, GET會帶來安全問題, 而POST相對來說可以避免這些問題
- GET方式和POST方式傳遞的數據在服務器端獲取不相同
?
$(function(){$('#send').click(function(){$.post('get1.php', { // post方法userName: $('#userName').val(),content: $('#content').val()}, function(data, textStatus){$('#resText').html(data) // 返回的數據添加到頁面})}) })2.3 $.getScript() 和 $.getJson()
- 2.3.1 $.getScript()
有時候,在頁面初次加載時就取得全部的js是沒有必要的,雖然可以動態創建<script>標簽,但并不理想
?
$(document.createElement('script')).attr('src', 'test.js').appendTo('head') $('<script src="test.js"/>').appendTo('head')?
$('#send').click(function(){$.getScript('test.js') })// $.getScript()也有自己的回調函數 $.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: 返回的數據$('#resText').empty()...}) })2.4 $.ajax
$.ajax()是jQuery最底層的Ajax實現
?
jQuery.ajax( url [, settings ] )url: String 一個用來包含發送請求的URL字符串。type: String 請求方式 ("POST" 或 "GET")， 默認為 "GET"data: Object String 發送到服務器的數據。將自動轉換為請求字符串格式。dataType: String 預期服務器返回的數據類型。 # xml: 返回 XML 文檔，可用 jQuery 處理 # html: 返回純文本 HTML 信息；包含的script標簽會在插入dom時執行 # script: 把響應的結果當作 JavaScript 執行。并將其當作純文本返回 # json: 把響應的結果當作 JSON 執行，并返回一個JavaScript對象 # jsonp: 以 JSONP的方式載入 JSON 數據塊。會自動在所請求的URL最后添加 "?callback=?" # text: 返回純文本字符串complete: Function 請求完成后回調函數 (請求success 和 error之后均調用)。這個回調函數得到2個參數： jqXHR (在 jQuery 1.4.x中是 XMLHTTPRequest) 對象和一個描述請求狀態的字符串("success", "notmodified", "error", "timeout", "abort", 或者 "parsererror") 。cache: Boolean (默認: true, dataType為"script"和"jsonp"時默認為false) 如果設置為 false ，瀏覽器將不緩存此頁面async: (默認: true) Boolean 默認設置下，所有請求均為異步請求（也就是說這是默認設置為 true ）。如果需要發送同步請求，請將此選項設置為 false 。跨域請求和 dataType: "jsonp" 請求不支持同步操作。注意，同步請求將鎖住瀏覽器，用戶其它操作必須等待請求完成才可以執行。contentType: (默認: 'application/x-www-form-urlencoded; charset=UTF-8') 發送信息至服務器時內容編碼類型。success: Function 請求成功后的回調函數。這個函數傳遞3個參數：從服務器返回的數據，并根據dataType參數進行處理后的數據，一個描述狀態的字符串;還有 jqXHR（在jQuery 1.4.x前為XMLHttpRequest） 對象 error: Function 請求失敗時調用此函數global: Boolean 無論怎么樣這個請求將觸發全局AJAX事件處理程序。默認是true beforeSend: Function 請求發送前的回調函數，用來修改請求發送前jqXHR（在jQuery 1.4.x的中，XMLHttpRequest）對象，此功能用來設置自定義 HTTP 頭信息，等等。timeout: Number 設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup() 里的全局設置。 超時周期開始于$.ajax訪問成功的那個時間點；如果幾個其他請求都在進步并且瀏覽器有沒有可用的連接，它有可能在被發送前就超時了xhrFields: 一對“文件名-文件值”組成的映射，用于設定原生的 XHR對象。例如，如果需要的話，在進行跨域請求時，你可以用它來設置withCredentials為true。 $.ajax({url: a_cross_domain_url,xhrFields: {withCredentials: true} });推薦使用的注意事項: jqXHR.success(), jqXHR.error(), 和 jqXHR.complete()回調從 jQuery 1.8開始 被棄用。他們將最終被取消您的代碼應做好準備，使用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請求設置默認的值用于設置`$.ajaxSetup()`的詳細參數, 參見 $.ajax()]注意： 此處指定的設置會影響所有 $.ajax或基于AJAX的衍生方法，如$.get()的調用。 這可能會導致不良的行為因為其他調用（例如，插件）可能希望正常的默認設置。 出于這個原因，我們強烈建議您不要使用此API。 相反我們建議，在調用時明確設置選項或定義一個簡單的插件。舉個例子,我們可以事先設置服務器重復響應的默認URL參數： $.ajaxSetup({url: 'ping.php' });現在每次Ajax請求將自動使用這個"ping.php" URL： $.ajax({// url not set here; uses ping.phpdata: {'name': 'Dan'} });`注意`: 全局回調函數應使用他們各自的全局Ajax事件處理方法`[.ajaxStart()], [.ajaxStop()], [.ajaxComplete()], [.ajaxError()], [.ajaxSuccess()], [.ajaxSend()]`， 而不是為 `$.ajaxSetup()` 設置 `options` 對象。2.5 Ajax全局事件
這些方法用于注冊事件處理器，用來處理頁面上的任何 Ajax 請求，當某些事件觸發后，這些事件處理器被調用。如何 jQuery.ajaxSetup() 中的 global 屬性被設置為 true （這也是默認設置），那么，每個 Ajax 請求都會觸發全局事件。
?
.ajaxComplete() 當Ajax請求完成后注冊一個回調函數。這是一個 AjaxEvent。.ajaxError() Ajax請求出錯時注冊一個回調處理函數，這是一個 Ajax Event。.ajaxSend() 在Ajax請求發送之前綁定一個要執行的函數，這是一個 Ajax Event..ajaxStart() 在AJAX 請求剛開始時執行一個處理函數。 這是一個 Ajax Event..ajaxStop() 在AJAX 請求完成時執行一個處理函數。 這是一個 Ajax Event。.ajaxSuccess() 綁定一個函數當 Ajax 請求成功完成時執行。 這是一個Ajax Event.
作者：YM雨蒙
鏈接：https://www.jianshu.com/p/559414742fe0
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
總結
以上是生活随笔為你收集整理的锋利的jquery 知识点总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery最佳实践
- 下一篇： jQuery笔记总结篇