jQuery總結

一、jQuery初步認知

jQuery概述

• JQuery概念
  • javascript概念
    • 基于Js語言的API和語法組織邏輯，通過內置window和document物件，來操作記憶體中的DOM元素
  • JQuery概念
    • 基于javascript的，同上，提高了代碼的效率
• jQuery是什么:
  • 是一個javascript代碼倉庫，我們稱之為javascript框架，
  • 是一個快速的簡潔的javascript框架，可以簡化查詢DOM物件、處理事件、制作影片、處理Ajax互動程序，
  • 它可以幫我們做什么(有什么優勢)
    • 輕量級、體積小，使用靈巧(只需引入一個js檔案)
    • 強大的選擇器
    • 出色的DOM操作的封裝
    • 出色的瀏覽器兼容性
    • 可靠的事件處理機制
    • 完善的Ajax
    • 鏈式操作、隱式迭代
    • 方便的選擇頁面元素(模仿CSS選擇器更精確、靈活)
    • 動態更改頁面樣式/頁面內容(操作DOM，動態添加、移除樣式)
    • 控制回應事件(動態添加回應事件)
    • 提供基本網頁特效(提供已封裝的網頁特效方法)
    • 快速實作通信(ajax)
    • 易擴展、插件豐富
• 如何引入JQuery包
  • 引入本地的JQuery
  • 引入Google在線提供的庫檔案（穩定可靠高速）
  • 使用Google提供的API匯入
  • 寫第一個JQUery案例
    • 解釋:在JQuery庫中，$是JQuery的別名，$()等效于就jQuery()

<script type=“text/javascript” src=https://www.cnblogs.com/MessiXiaoMo3334/p/“”></script>
<script type=“text/javascript”>
   $(function(){
       alert(“jQuery 你好!”);
   });
</script>

• 講解$(function(){});
  • $是jQuery別名，如$()也可jQuery()這樣寫,相當于頁面初始化函式，當頁面加載完畢，會執行jQuery()，
  • 希望在做所有事情之前，JQuery操作DOM檔案，必須確保在DOM載入完畢后開始執行，應該用ready事件做處理HTML檔案的開始
  • $(document).ready(function(){});
    • 類似于js的window.onload事件函式，但是ready事件要先于onload事件執行
    • window.onload = function(){};
  • 為方便開發，jQuery簡化這樣的方法，直接用$()表示
  • JQuery的ready事件不等于Js的load：
    • 執行時機不同：load需要等外部圖片和視頻等全部加載才執行，ready是DOM繪制完畢后執行，先與外部檔案
    • 用法不同：load只可寫一次，ready可以多次
• window.onload與$(document).ready()對比

• jQuery有哪些功能(API)
  • 選擇器
  • 過濾器
  • 事件
  • 效果
  • ajax
• 簡單的JQuery選擇器
  • JQuery基本選擇器（ID選擇器，標簽選擇器，類選擇器，通配選擇器和組選擇器5種）
  • ID選擇器：document.getElementById(id)與$("#id")對比(改變文字大小)---id唯一，回傳單個元素
  • 標簽選擇器：document.getElementsByTagName(tagName)與$("tagname")對比---多個標簽，回傳陣列
  • 類選擇器:$(".className")--多個classname（改變背景圖片）
  • 通配選擇器：document.getElementsByTagName("")與$("")對比---指范圍內的所有標簽元素
  • 組選擇器：$("seletor1,seletor2,seletor3")----無數量限制，用逗號分割

初步了解JQuery

• JQuery是什么
  • javascript用來干什么的：
    • 操作DOM物件
    • 動態操作樣式css
    • 資料訪問
    • 控制回應事件等
  • jQuery作用一樣，只是更加快速簡潔
• 如何參考JQuery

<script type="text/javascript"></script>
寫第一個JQUery案例
<script type=“text/javascript” src=https://www.cnblogs.com/MessiXiaoMo3334/p/“”></script>
<script type=“text/javascript”>
    $(function(){
        alert(“jQuery 你好!”);
    });
</script>

• $()講解
  • $在JQuery庫中，$是JQuery的別名，$()等效于就jQuery().
  • $()是JQuery方法,贊可看作是JQuery的選擇器，與css選擇器相似（可做對比）
  • var jQuery==$ =function(){} $()本質就是一個函式也就是 jQuery的核心函式
  • 只要是jQuery的物件都這樣變數加上一個符號$ 方便識別：var $div = $("#")

function　$(id){
	return document.getElementById(id);
}

• $()和document是相等的嗎

<div id="a" ></div>
<div id="b" ></div>
<div id="c" ></div>
alert(document.getElementById("id") == $("#aa"));//回傳結果為false
alert(document.getElementById("id") == $("#aa").get(0));//回傳true

• 代理物件$()
  • jQuery中回傳的是代理物件本身
  • jQuery的核心原理是通過選擇器找到對應的代理物件
  • jQuery全都是通過方法操作
  • 樣式選擇器$(".className")
    • $(".aa").css("color","green");
  • id選擇器("")
    • $("#a").css("background-color","#ff0066");
  • 標簽選擇器
    • $("p").css("color","#cc3366");
  • 組選擇器
    • $("#b ul li").size();
• 物件轉換($(element))
  • 原生dom物件和jquery代理物件的相互轉換

$(傳入的原生物件);
//原生物件轉化成jQuery物件
var nav = document.getElementById("nav");
var $nav = $(nav);
alert($nav.get(0) == nav);//true

• 檢索范圍的限制（$('字串',element)）
  • 總結：三種寫法對比：
    • 方式一：不推薦 搜索速度最慢
      • $("#nav").css();
      • $("#nav li").css();
    • 方式二：搜索速度最快 鏈式操作
      • $("#nav").css().children().css();
    • 方式三：也常用 速度第二快
      • var $nav = $("#nav").css();
      • $("li",$nav).css(); $nav 限制了搜索范圍 速度快
• 總結： $() jquery核心方法的作用和使用場景
  • 如果是一個字串引數并且沒有標簽對（選擇器） $(ul.nav")
  • 如果是一個字串引數并且有標簽對（創建html標簽）$("") --最終加到DOM樹中 $xx.append("");
  • 如果是傳入一個element dom物件，直接包裝為proxy物件回傳 $(DOM物件)
  • 如果第一個引數是字串，第二個是element dom物件的話，那么就是在element這個dom物件里面尋找選擇器對應的元素并且代理 $("li",$DOM物件)
• 代理模式以及代理記憶體結構

二、選擇器

• 來回顧一下CSS常用的選擇器

• 選擇器引擎規則($('字串'))
  • css選擇器的規則
    • 標簽選擇器
    • id選擇器
    • 類選擇器
    • 混合選擇器
  • css3的選擇器規則
  • 狀態和偽類（:even :odd :first :last :eq(index)）
  • 屬性（[attr=value]）
• 層級選擇器:通過DOM的嵌套關系匹配元素
  • jQuery層級選擇器----包含選擇器、子選擇器、相鄰選擇器、兄弟選擇器4種
  • a.包含選擇器：$("a b")在給定的祖先元素下匹配所有后代元素，(不受層級限制)
  • b.子選擇器：$("parent > child") 在給定的父元素下匹配所有子元素，
  • c.相鄰選擇器：$("prev + next") 匹配所有緊接在prev元素后的next元素，
  • d.兄弟選擇器：$("prev ~ siblings") 匹配prev元素之后的所有sibling元素，

過濾選擇器

• 基本過濾選擇

• 內容過濾選擇器

• 可見過濾選擇器

• 屬性過濾選擇器

• 子元素過濾選擇器

• :nth-child()選擇器是很常用的子元素過濾選擇器，如下
  • :nth-child(even)選擇每個父元素下的索引值是偶數的元素
  • :nth-child(odd)選擇每個父元素下的索引值是奇數的元素
  • :nth-child(2)選擇每個父元素下的索引值是2的元素
  • :nth-child(3n)選擇每個父元素下的索引值是3的倍數的元素 (n從1開始)
• 表單物件屬性過濾選擇器

• 表單選擇器

• 特定位置選擇器
  • :first
  • :last
  • :eq(index)
• 指定范圍選擇器
  • :even
  • :odd
  • :gt(index)
  • :lt(index)
• 排除選擇器
  • :not 非

三、選擇器優化

• 使用合適的選擇器運算式可以提高性能、增強語意并簡化邏輯，常用的選擇器中，ID選擇器速度最快，其次是型別選擇器，

  • 多用ID選擇器
  • 少直接使用class選擇器
  • 多用父子關系，少用嵌套關系
  • 快取jQuery物件

• 使用過濾器

  • jQuery提供了2種選擇檔案元素的方式：選擇器和過濾器

  • 類過慮器：根據元素的類屬性來進行過濾操作，

  • • hasClass(className)：判斷當前jQuery物件中的某個元素是否包含指定類名，包含回傳true，不包含回傳false

  • 下標過濾器：精確選出指定下標元素

  • • eq(index)：獲取第N個元素，index是整數值，下標從0開始

  • 運算式過濾器

  • • filter(expr)/(fn)：篩選出與指定運算式/函式匹配的元素集合，
    • 功能最強大的運算式過濾器，可接收函式引數，也可以是簡單的選擇器運算式

  • 映射 map(callback)：將一組元素轉換成其他陣列

  • 清洗 not(expr)：洗掉與指定運算式匹配的元素

  • 截取 slice(start,end)：選取一個匹配的子集

• 查找

  • 向下查找后代元素
    • children():取得所有元素的所有子元素集合（子元素）
    • find():搜索所有與指定運算式匹配的元素(所有后代元素中查找)
  • 查找兄弟元素 siblings()查找當前元素的兄弟

四、代理物件屬性和樣式操作

• 代理物件屬性和樣式操作
  • attr
  • prop(一般屬性值是boolean的值或者不用設定屬性值，一般使用)
  • css(最好不用，一般我用來做測驗)
  • addClass / removeClass
• 操作原生DOM的時候用的方式：一次只能操作一個
  • 操作屬性：setAttribute / getAttribute
  • 操作樣式：style.xx = value
  • 操作類樣式：className=''
  • 獲取DOM的子元素children屬性
  • DOM里面添加一個子元素appendChild()
• 操作jQuery代理物件的時候：批量操作DOM物件(全都是通過方法操作)
• 操作屬性：attr()、prop()
  • attr和prop區別：如果屬性的值是布爾型別的值 用prop操作 反之attr
• 操作樣式：css()
• 操作類樣式：addClass() removeClass()
• 操作DOM子元素：children()
• 添加子元素：append()

五、jQuery中DOM操作

• DOM是一種與瀏覽器、平臺|語言無關的介面，使用該介面可以輕松的訪問 頁面中的所有的標準組件

• DOM操作的分類

  • DOM Core

    • DOM core并不專屬于JavaScript，任何支持DOM的程式都可以使用
    • JavaScript 中的getElementByID() getElementsByTagName() getAttribute() setAttribute()等方法都是DOM Core的組成部分

  • HTML-DOM

  • • HTML -DOM的出現比DOM-Core還要早，它提供一些更簡明的標志來描述HTML元素的屬性
  • • 比如：使用HTML-DOM來獲取某元素的src屬性的方法
      • element.src

• CSS-DOM

  • 針對CSS的操作，在JavaScript中，主要用于獲取和設定style物件的各種屬性，通過改變style物件的屬性，使網頁呈現不同的效果

• 查找節點

  • 查找屬性節點 attr() 可以獲取各屬性的值

• 創建節點

  • $(html)：根據傳遞的標記字串，創建DOM物件

• 插入節點

• 洗掉節點

• • jQuery提供了三種洗掉節點的方法 remove() detach() empty()
  • remove()方法
    • 當某個節點用此方法洗掉后，該節點所包含的所有后代節點將同時被洗掉，用remove()方法洗掉后，還是可以繼續使用洗掉后的參考
• • detach()
    • 和remove()方法一樣，也是從DOM中去掉所有匹配的元素，與remove()不同的是，所有系結的事件、附加的資料等，都會被保留下來
  • empty()
    • empty()方法并不是洗掉節點，而是清空節點，它能清空元素中所有后代節點

• 復制節點

  • 使用clone()方法來完成
  • 在clone()方法中傳遞一個引數true，同時復制元素中所系結的事件

• 替換節點

  • jQuery提供相應的方法 replaceWidth()

• 樣式操作

  • 獲取樣式和設定樣式 attr()
  • 追加樣式 addClass()
  • 移除樣式 removeClass()
  • 切換樣式
    • toggle()方法只要是控制行為上的重復切換（如果元素是顯示的，則隱藏；如果元素原來是隱藏的，則顯示）
    • toggleClass()方法控制樣式上的重復切換（如何類名存在，則洗掉它，如果類名不存在，則添加它）
  • 判斷是否含有某個樣式
    • hasClass()可以用來判斷元素是否含有某個class,如有回傳true 該方法等價于is()

• 設定和獲取HTML、文本和值

• • html()

    • 此方法類似JavaScript中innerHTML屬性，可以用來讀取和設定某個元素中的HTML內容

  • text()

    方法

    • 此方法型別JavaScript中innerHTML，用來讀取和設定某個元素中的文本內容

• • val()

    方法

    • 此方法類似JavaScript中的value屬性，用來設定獲取元素的值，無論是文本框、下拉串列還是單選框，都可以回傳元素的值，如果元素多選，回傳一個包含所有選擇的值的陣列

• 遍歷節點

• • children()

    方法

    • 該方法用來取得匹配元素的子元素集合
    • childre()方法只考慮子元素而不考慮其他后代元素

• • next()

    方法

    • 該方法用于取得匹配元素后面緊鄰的同輩元素

  • prev()

    方法

    • 用于匹配元素前面緊鄰的同輩元素

  • siblings()

    方法

    • 用于匹配元素前后所有的同輩元素

  • parent()

    方法

    • 獲得集合中每個 元素的父級元素

  • parents()

    方法

    • 獲得集合中每個元素的祖先元素

CSS DOM操作

• CSS DOM技術簡單的來說就是讀取和設定style物件的各種屬性

• 用css()方法獲取元素的樣式屬性，可以同時設定多個樣式屬性

• CSS DOM中關于元素定位有幾個常用的方法

• • offset()

    方法

    • 它的作用是獲取元素在當前視窗的相對偏移其中回傳的物件包含兩個屬性，即top和left，他只對可見元素有效

• • position()

    方法

    • 獲取相對于最近的一個position()樣式屬性設定為relative或者absolute的祖父節點的相對偏移，與offset()一樣，他回傳的物件也包括兩個屬性，即top和left

  • scrollTop()方法和scrollLeft方法

  • • 這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側的距離
  • • 一張圖總結以上的位置關系(專案中很常用-必須要弄清楚)

六、jQuery影片

回顧上節

• 操作DOM
  • a.什么是DOM：Document Object Model縮寫，檔案物件模型
  • b.理解頁面的樹形結構
  • c.什么是節點：是DOM結構中最小單元，包括元素、屬性、文本、檔案等，

一、創建節點

• 1.創建元素
  • 語法：document.createElement(name);

var div = document.createElement("div");
document.body.appendChild(div);

• $(html)：根據傳遞的標記字串，創建DOM物件
• 2.創建文本

var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);

var $div = = $("<div>DOM</div>");
$(body).append($div);

• 3.設定屬性
  • 語法：e.setAttrbute(name,value)

var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
div.setAttribute("title","盒子");

var $div = = $("<div title='盒子'>DOM</div>");
$(body).append($div);

二、插入內容

• 內部插入
  • 向元素最后面插入節點：
    • append():向每個匹配的元素內部追加內容
    • appendTo():把所有匹配的元素追加到指定元素集合中，$("A").append("B") 等效 $("B").appendTo("A")
  • 向元素最前面插入節點：
    • prepend（）：把每個匹配的元素內部前置內容
    • prependTo（）：把所有匹配的元素前置到另一個指定的元素集合中,$("A").prepend("B") 等效 $("B").prependTo("A")
• 外部插入
  • after():在每個匹配的元素之后插入內容
  • before()：在每個匹配想元素之前插入內容
  • insertAfter()：將所有匹配的元素插入到另一個指定的元素集合后面，$A.insert($B) 等效 $B.insertAfter($A);
  • insertBefore()：將所有匹配的元素插入到另一個指定的元素集合前面 $A.before($B) 等效 $B.insertBefore($A);

三、洗掉內容

• 移除
  • remove():從DOM中洗掉所有匹配元素
• 清空
  • empty():洗掉匹配的元素集合中所有子節點內容

四、克隆內容：創建指定節點副本

• clone()
  • 注意：若clone（true）則是包括克隆元素的屬性，事件等

五、替換內容

• • replaceWith():將所有匹配的元素替換成指定的元素
  • replaceAll():用匹配的元素替換掉指定元素
• 注意：兩者效果一致，只是語法不同 $A.replaceAll($B) 等效于 $B.replaceWhith($A);

本節新知識

• JavaScript語言本身不支持影片設計，必須通過改變CSS來實作影片效果

顯隱影片

• show():顯示 hide():隱藏
  • 原理：hide()通過改變元素的高度寬度和不透明度，直到這三個屬性值到0
  • show()從上到下增加元素的高度，從左到右增加元素寬度，從0到1增加透明度，直至內容完全可見
  • 引數：
    • show(speed,callback)
      • speed: 字串或數字，表示影片將運行多久（slow=0.6/normal=0.4/fast=0.2）
      • callback: 影片完成時執行的方法
• 顯示和隱藏式一對密不可分的影片形式
• 顯隱切換
  • toggle():切換元素的可見狀態
    • 原理：匹配元素的寬度、高度以及不透明度，同時進行影片，隱藏影片后將display設定為none
    • 引數：
      • toggle(speed)
      • toggle(speed,callback)
      • toggle(boolean)
        • speed: 字串或數字，表示影片將運行多久（slow=0.6/normal=0.4/fast=0.2）
        • easing： 使用哪個緩沖函式來過渡的字串(linear/swing)
        • callback： 影片完成時執行的方法
        • boolean:true為顯示 false為隱藏

滑動

• 顯隱滑動效果
  • slideDown():滑動隱藏
  • slidUp():滑動顯示
  • 引數:
    • slideDown(speed,callback)
    • slidUp(speed,callback)
• 顯隱切換滑動
  • slideToggle():顯隱滑動切換
  • 引數:
    • slidUp(speed,callback)

漸變：通過改變不透明度

• 淡入淡出
  • fadeIn()
  • fadeOut()
  • 引數：
    • fadeIn(speed,callback)
    • fadeOut(speed,callback)
• 設定淡出透明效果
  • fadeTo()?：以漸進的方式調整到指定透明度
  • 引數：
    • fadeTo(speed,opacity,callback)
• 漸變切換:結合fadeIn和fadeOut
  • fadeToggle()
  • 引數:
    • fadeOut(speed,callback)
• 自定義影片：animate()
  • 注意：在使用animate方法之前，為了影響該元素的top left bottom right樣式屬性，必須先把元素的position樣式設定為relative或者absolute
  • 停止元素的影片
    • 很多時候需要停止匹配正在進行的影片，需要使用stop()
    • stop()語法結構：stop([clearQueue],[gotoEnd]);
      • 都是可選引數，為布林值
      • 如果直接使用stop()方法，會立即停止當前正在進行的影片
  • 判斷元素是否處于影片狀態
    • 如果不處于影片狀態，則為元素添加新的影片，否則不添加
      if(!$(element).is(":animated")){ //判斷元素是否處于影片狀態}
    • 這個方法在animate影片中經常被用到，需要注意
  • 延遲影片
    • 在影片執行程序中，如果你想對影片進行延遲操作，那么使用delay()
• 用animate模擬show():
  • show: 表示由透明到不透明
  • toggle: 切換
  • hide:表示由顯示到隱藏
• 影片方法總結

七、jQuery中的事件

• 事件物件的屬性

  • event.type：獲取事件的型別
  • event.target:獲取到觸發事件的元素
  • event.preventDefault方法 阻止默認事件行為
  • event.stopPropagation()阻止事件的冒泡
  • keyCode：只針對于keypress事件，獲取鍵盤鍵數字 按下回車，13
  • event.pageX / event.pageY 獲取到游標相對于頁面的x坐標和y坐標
    • 如果沒有jQuery，在IE瀏覽器中用event.x / event.y;在Firefox瀏覽器中用event.pageX / event.pageY，如果頁面上有滾動潭訓要加上滾動條的寬度和高度
  • event.clientX：游標對于瀏覽器視窗的水平坐標 瀏覽器
  • event.clientY：游標對于瀏覽器視窗的垂直坐標
  • event.screenX：游標對于電腦螢屏的水平坐標 電腦螢屏
  • event.screenY：游標對于電腦螢屏的水平坐標
  • event.which 該方法的作用是在滑鼠單擊事件中獲取到滑鼠的左、中、右鍵，在鍵盤事件中的按鍵 1代表左鍵 2代表中鍵 3代表右鍵

• 事件冒泡

• • 什么是冒泡
    • 在頁面上可以有多個事件，也可以多個元素影響同一個元素
    • 從里到外
    • 嵌套關系
    • 相同事件
    • 其中的某一父類沒有相同事件時,繼續向上查找
  • 停止事件冒泡
    • 停止事件冒泡可以阻止事件中其他物件的事件處理函式被執行
    • 在jQuery中提供了stopPropagation()方法
  • 阻止默認行為
    • 網頁中元素有自己的默認行為，例如：單擊超鏈接后會跳轉、單擊提交后表單會提交，有時需要阻止元素的默認行為
    • 在jQuery中提供了 preventDefault()方法來阻止元素的默認行為
• • 事件捕獲
    • 事件捕獲和冒泡是相反的程序，事件捕獲是從最頂端往下開始觸發
    • 并非所有的瀏覽器都支持事件捕獲，并且這個缺陷無法通過JavaScript來修復，jQuery不支持事件捕獲，如需要用事件捕獲，要用原生的JavaScript

• bind();系結

  • 為匹配元素系結處理方法
  • 需要給一個元素添加多個事件 ，事件執行一樣時候
  • one()：只執行一次

• 系結特定事件型別方法

八、 jQuery與Ajax

• Ajax

  簡介 :

  • Asynchronous Javascript And XML （異步的
    JavaScript和XML）
  • 它并不是一種單一的技術，而是有機利用一系列互動式網頁應用相關的技術所形成的結合體

• Ajax優勢與不足

  • Ajax優勢
    • 優秀的用戶體驗
      • 這是Ajax下最大的有點，能在不重繪整個頁面前提下更新資料
    • 提高web程式的性能
      • 與傳統模式相比，Ajax模式在性能上最大的區別在于傳輸資料的方式，在傳統模式中，資料的提交時通過表單來實作的，Ajax模式只是通過XMLHttpRequest物件向服務器提交希望提交的資料，即按需發送
    • 減輕服務器和帶寬的負擔
      • Ajax的作業原理相當于在用戶和服務器之間加了一個中間層，似用戶操作與服務器回應異步化，它在客戶端創建Ajax引擎，把傳統方式下的一些服務器負擔的作業轉移到客戶端，便于客戶端資源來處理，減輕服務器和帶寬的負擔
  • Ajax的不足
    • 瀏覽器對XMLHttpRequest物件的支持度不足
    • 破壞瀏覽器前進、后退按鈕的正常功能
    • 對搜索引擎的支持的不足
    • 開發和除錯工具的缺乏

創建一個Ajax請求

• Ajax的核心是XMLHttpRequest物件，它是Ajax實作的關鍵，發送異步請求、接受回應以及執行回呼都是通過它來完成

• 創建ajax物件 var xhr = new XMLHttpRequest();

• 準備發送請求

  • get / post

  • • get
      • 傳遞的資料放在URL后面
      • 中文編碼 encodeURI( '' );
      • 快取 在資料后面加上亂數或者日期物件或者……
    • post
      • 傳遞的資料放在send()里面，并且一定要規定資料格式
      • 沒有快取問題

  • • form表單中:

    • • action:

      • • method: (默認是 get)
      • • get: 會在url里面以 name=value , 兩個資料之間用 & 連接

    • post:

• • enctype: "application/x-www-form-urlencoded"

• url

• 是否異步

  • 同步(false)：阻塞
  • 異步(true)：非阻塞

• 正式發送請求

• ajax請求處理程序

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4)
    {
        alert( xhr.responseText );
    }
};

• onreadystatechange ：當處理程序發生變化的時候執行下面的函式

• readyState ：ajax處理程序

  • 0：請求未初始化（還沒有呼叫 open()），
  • 1：請求已經建立，但是還沒有發送（還沒有呼叫 send()），
  • 2：請求已發送，正在處理中（通常現在可以從回應中獲取內容頭），
  • 3：請求在處理中；通常回應中已有部分資料可用了，但是服務器還沒有完成回應的生成，
  • 4：回應已完成；您可以獲取并使用服務器的回應了，

• responseText ：請求服務器回傳的資料存在該屬性里面

• status : http狀態碼

• 案例：ajax封裝案例

//ajax請求后臺資料
var btn =  document.getElementsByTagName("input")[0];
btn.onclick = function(){
    
    ajax({//json格式
        type:"post",
        url:"post.php",
        data:"username=poetries&pwd=123456",
        asyn:true,
        success:function(data){
            document.write(data);
        }
    });
}
//封裝ajax
function ajax(aJson){
    var ajx = null;
    var type = aJson.type || "get";
    var asyn = aJson.asyn || true;
    var url = aJson.url;        // url 接收 傳輸位置
    var success = aJson.success;// success 接收 傳輸完成后的回呼函式
    var data = https://www.cnblogs.com/MessiXiaoMo3334/p/aJson.data ||'';// data 接收需要附帶傳輸的資料
    
    if(window.XMLHttpRequest){//兼容處理
        ajx = new XMLHttpRequest();//一般瀏覽器
    }else
    {
        ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
    }
    if (type == "get" && data)
    {
        url +="/?"+data+"&"+Math.random();
    }
    
    //初始化ajax請求
    ajx.open( type , url , asyn );
    //規定傳輸資料的格式
    ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
    //發送ajax請求（包括post資料的傳輸）
    type == "get" ?ajx.send():ajx.send(aJson.data);
    
    //處理請求
    ajx.onreadystatechange = function(aJson){
        
    if(ajx.readState == 4){
            
        if (ajx.status == 200 && ajx.status<300)//200是HTTP 請求成功的狀態碼
        {
            //請求成功處理資料
            success && success(ajx.responseText);
        }else{
            alert("請求出錯"+ajx.status);
            
        }
    }
        
    };

jQuery中的Ajax [補充部分--來自鋒利的jQuery]

jquery對Ajax操作進行了封裝，在jquery中的$.ajax()方法屬于最底層的方法，第2層是load()、$.get()、$.post();第3層是$.getScript()、$.getJSON()，第2層使用頻率很高

load()方法

• load()方法是jquery中最簡單和常用的ajax方法，能載入遠程HTML代碼并插入DOM中 結構為：load(url,[data],[callback])
  • 使用url引數指定選擇符可以加載頁面內的某些元素 load方法中url語法：url selector 注意：url和選擇器之間有一個空格
• 傳遞方式
  • load()方法的傳遞方式根據引數data來自動指定，如果沒有引數傳遞，則采用GET方式傳遞，反之，采用POST
• 回呼引數
  • 必須在加載完成后才執行的操作，該函式有三個引數 分別代表請求回傳的內容、請求狀態、XMLHttpRequest物件
  • 只要請求完成，回呼函式就會被觸發

$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
    //respnoseText 請求回傳的內容
    //textStatus 請求狀態 ：sucess、error、notmodified、timeout
    //XMLHttpRequest 
})

• load方法引數

$.get()和$.post()方法

load()方法通常用來從web服務器上獲取靜態的資料檔案，在專案中需要傳遞一些引數給服務器中的頁面，那么可以使用$.get()和$.post()或$.ajax()方法

• 注意：$.get()和$.post()方法是jquery中的全域函式
• $.get()方法
  • $.get()方法使用GET方式來進行異步請求
  • 結構為：$.get(url,[data],callback,type)
    • 如果服務器回傳的內容格式是xml檔案，需要在服務器端設定Content-Type型別 代碼如下：header("Content-Type:text/xml:charset=utf-8") //php
• $.get()方法引數決議

• $.post()方法

  • 它與$.get()方法的結構和使用方式相同，有如下區別

  • • GET請求會將引數跟張乃URL后進行傳遞，而POST請求則是作為Http訊息的物體內容發送給web服務器，在ajax請求中，這種區別對用戶不可見
  • • GET方式對傳輸資料有大小限制（通常不能大于2KB），而使用POST方式傳遞的資料量要比GET方式大得多（理論不受限制）
    • GET方式請求的資料會被瀏覽器快取起來，因此其他人可以從瀏覽器的歷史紀錄中讀取這些資料，如：賬號、密碼，在某種情況下，GET方式會帶來嚴重的安全問題，而POST相對來說可以避免這些問題
    • GET和POST方式傳遞的資料在服務端的獲取也不相同，在PHP中，GET方式用$_GET[]獲取；POST方式用$_POST[]獲取;兩種方式都可用$_REQUEST[]來獲取

• 總結

  • 使用load()、$.get()和$.post()方法完成了一些常規的Ajax程式，如果還需要復雜的Ajax程式，就需要用到$.ajax()方式

$.ajax()方法

• $.ajax()方法是jquery最底層的Ajax實作，它的結構為$.ajax(options)
• 該方法只有一個引數，但在這個物件里包含了$.ajax()方式所需要的請求設定以及回呼函等資訊，引數以key / value存在，所有引數都是可選的
• $.ajax()方式常用引數決議

九、 插件

• 什么是插件

  • 插件(Plugin)也稱為jQuery的擴展，以jQuery核心代碼為基礎撰寫的符合一定規范的應用程式，通過js檔案的方式參考，

• 插件分為哪幾類

  • UI類、表單及驗證類、輸入類、特效類、Ajax類、滑動類、圖形影像類、導航類、綜合工具類、影片類等等

• 引入插件的步驟

  • 引入jquery.js檔案，而且在所以插件之前引入
  • 引入插件
  • 引入插件相關檔案，比如皮膚、中文包

• 如何自定義插件

  ：

  • 插件形式分為3類：
    • 封裝物件方法插件
    • 封裝全域函式插件
    • 選擇器插件(類似于.find())

• 自定義插件的規范

  （解決各種插件的沖突和錯誤，增加成功率）

  • 命名：jquery.插件名.js
  • 所有的新方法附加在jquery.fn物件上面，所有新功能附加在jquery上
  • 所有的方法或插件必須用分號結尾，避免出問題
  • 插件必須回傳jQuery物件，便于鏈式連綴
  • 避免插件內部使用$，如果要使用，請傳遞jQuery($并不是總等于jQuery，另外其他js框架也可能使用$)
  • 插件中的this應該指向jQuery物件
  • 使用this.each()迭代元素

• 自定義插件案例

  • 為了方便用戶創建插件，jQuery提供了 jQuery.extend() 和 jQuery.fn.extend()
  • jQuery.extend()：創建工具函式或者是選擇器
  • jQuery.fn.extend()：創建jQuery物件命令 （fn相當于prototype的別名）

• jQuery官方提供的插件開發模板

;(function($){
    $.fn.plugin=function(options){
        var defaults = {
            //各種引數 各種屬性
        }
        var options = $.extend(defaults,options);

        this.each(function(){
            //實作功能的代碼
        });

        return this;
    }
})(jQuery);

自定義jQuery函式：

(function($){
    $.extend({
        test: function(){
            alert("hello plugin");
        }
    })
    })(jQuery);

自定義jQuery命令：

• 形式1：

(function($){
    $.fn.extend({
        say : function(){
         alert("hello plugin");
    }
    })
})(jQuery);

• 形式2：

(function($){
    $.fn.say = function(){
        alert("hello plugin");
    };
    
})(jQuery);

附錄一 jQuery各個版本新增的一些常用的方法

• jQuery1.3新增常用的方法

• jQuery1.4新增常用的方法

• jQuery1.6新增常用的方法

附錄二 jQuery性能優化

• 性能優化

• • 使用最新版的jQuery類別庫
  • 使用合適的選擇器
    • $(#id)
      • 使用id來定位DOM元素是最佳的方式，為了提高性能，建議從最近的ID元素開始往下搜索
    • $("p") , $("div") , $("input")
      • 標簽選擇器性能也不錯，它是性能優化的第二選擇，因為jQuery將直接呼叫本地方法document.getElementsByTagName()來定位DOM元素
    • $(".class")
      • 建議有選擇性的使用
    • $("[attribute=value]")
      • 對這個利用屬性定位DOM元素，本地JavaScript并沒有直接實作，這種方式性能并不是很理想，建議避免使用，
    • $(":hidden")
      • 和上面利用屬性定位DOM方式類似，建議盡量不要使用
    • 注意的地方
      • 盡量使用ID選擇器
      • 盡量給選擇器指定背景關系
• • 快取物件
    • 如果你需要在其他函式中使用jQuery物件，你可以把他們快取在全域環境中
  • 陣列方式使用jQuery物件
    • 使用jQuery選擇器獲取的結果是一個jQuery物件，在性能方面，建議使用for或while回圈來處理，而不是$.each()

• • 事件代理

  • • 每一個JavaScript事件（如：click、mouseover）都會冒泡到父級節點，當我們需要給多個元素呼叫同個函式時這點很有用，比如，我們要為一個表單系結這樣的行為：點擊td后，把背景顏色設定為紅色

    • • $("#myTable td").click(function(){$(this).css("background","red");});
      • 假設有100個td元素，在使用以上的方式時，系結了100個事件，將帶來性能影響
      • 代替這種多元素的事件監聽方法是，你只需向他們的父節點系結一次事件，然后通過event.target獲取到點擊的當前元素
        • $("#myTable td").click(function({$(e.target).css("background","red")});
        • e.target捕捉到觸發的目標
    • • 在jQuery1.7中提供了一個新的方法on()，來幫助你將整個事件監聽封裝到一個便利的方法中
        • $("#myTable td").on("click",'td',function(){$(this).css("background","red");});
• • 將你的代碼轉化成jQuery插件
    • 它能夠使你的代碼有更好的重用性，并且能夠有效的幫助你組織代碼

• 使用join()方法來拼接字串

  • 也許你之前使用+來拼接字串，現在可以改了，它確實有助于性能優化，尤其是長字串處理的時候

• 合理使用HTML5和Data屬性

• • HTML5的data屬性可以幫助我們插入資料，特別是后端的資料交換，jQuery的Data()方法有效利用HTML5的屬性
    • 例如：
    • 為了讀取資料，你需要使用如下代碼
      • $("#dl').data("role';//page)
      • $("#dl').data("lastValue';//43)
      • $("#dl').data("options';//john)
• • 盡量使用原生的JavaScript方法
  • 壓縮JavaScript代碼
    • 一方面使用Gzip；另一方面去除JavaScript檔案里面的注釋、空白

附錄三 常用的jQuery代碼片段

附錄四 常見CND加速服務

• Bootstrap中文網開源專案免費 CDN 服務
• 百度靜態資源公共庫
• 360網站衛士常用前端公共庫CDN服務--已停止服務
• 開放靜態檔案 CDN
• 微軟CDN服務
• 阿里云
• 百度開放云平臺
• jQuery CDN
• jQuery cdn加速
• 新浪CDN

附錄五 jQuery的一些資源

• 速查手冊

  • jQuery API 中文檔案--css88
  • jQuery-overapi
  • 在線桌面版API
  • 更多詳情---一份實用的API參考手冊集合

• jQuery插件

  • 基礎常用

    • 滾動固定在某個位置
    • jQuery圖片滾動插件全能版
    • jQuery Wookmark Load 瀑布流布局
    • jQuery Jcrop 影像裁剪
    • jQuery kxbdMarquee 無縫滾動
    • jQuery lightBox 燈箱效果
    • Lazy Load Plugin for jQuery

  • 更多插件-動效庫整理

  • • 插件動效庫
  • • 常用組件

標籤：JavaScript

上一篇：簡單構造 Ext.tree 樹例子

下一篇：js正則運算式總結