jQuery筆記總結

來源於：http://blog.poetries.top/2016/10/20/review-jQuery/

http://www.jianshu.com/p/f8e3936b34c9

首先，來了解一下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導入 <script type=「text/javascript」 src=「jquery.js」></script>

  • 寫第一個JQUery案例

    • 解釋:在JQuery庫中，$是JQuery的別名，$()等效於就jQuery()

  1 2 3 4 5 6

  <script type=「text/javascript」 src=「」> </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()對比

	window.onload	$(document).ready()
執行時機	必須等網頁中全部內容加載完後(圖片)才執行	網頁中的DOM結構繪製完後就執行,可能DOM元素相關的東西並無加載完
編寫個數	不能同時執行多個	能同時執行多個
簡化寫法	無	$(document).ready(function(){ //.. }); 推薦寫法：$(function(){ });

• 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

  1 2 3 4 5 6 7 8

  <script type= "text/javascript"></script> 寫第一個JQUery案例 <script type=「text/javascript」 src=「」> </script> <script type=「text/javascript」> $( function(){ alert(「jQuery 你好!」); }); </script>

• $()講解

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

1 2 3

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

• $()和document是相等的嗎

1 2 3 4 5

<div id="a" class="aa"></div> <div id="b" class="aa"></div> <div id="c" class="aa"></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代理對象的相互轉換

1 2 3 4 5

$(傳入的原生對象); //原生對象轉化成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標籤）$("<img>") –最終加到DOM樹中 $xx.append("<img>");
  • 若是是傳入一個element dom對象，直接包裝爲proxy對象返回 $(DOM對象)
  • 若是第一個參數是字符串，第二個是element dom對象的話，那麼就是在element這個dom對象裏面尋找選擇器對應的元素而且代理 $("li",$DOM對象)

• 代理模式以及代理內存結構

第二節 選擇器

---

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

選擇器	語法	描述
標籤選擇器	E{css規則}	以文檔元素做爲選擇符
ID選擇器	#ID{css規則}	ID做爲選擇符
類選擇器	E.className{css規則}	class做爲選擇符
羣組選擇器	E1,E2,E3{css規則}	多個選擇符應用一樣的樣式
後代選擇器	E F{css規則}	元素E的任意後代元素F

• 選擇器引擎規則($('字符串'))

  • 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元素。

過濾選擇器

---

• 基本過濾選擇

選擇器	說明	返回
:first	匹配找到的第1個元素	單個元素
:last	匹配找到的最後一個元素	單個元素
:eq	匹配一個給定索引值的元素	單個元素
:even	匹配全部索引值爲偶數的元素	集合元素
: odd	匹配全部索引值爲奇數的元素	集合元素
:gt(index)	匹配全部大於給定索引值的元素	集合元素
:lt(index)	匹配全部小於給定索引值的元素	集合元素
:not	去除全部與給定選擇器匹配的元素	集合元素
:animated	選取當前正在執行動畫的全部元素	集合元素
focus	選取當前正在獲取焦點的元素	集合元素

• 內容過濾選擇器

選擇器	描述	返回
:contains(text)	選取含有文本內容爲text的元素	集合元素
:empty	選取不包含子元素獲取文本的空元素	集合元素
:has(selector)	選擇含有選擇器所匹配的元素的元素	集合元素
:parent	選取含有子元素或者文本的元素	集合元素

• 可見過濾選擇器

選擇器	描述	返回
:hidden	選擇全部不可見的元素	集合元素
:visible	選取全部可見的元素	集合元素

• 屬性過濾選擇器

選擇器	說明	返回
[attribute]	選取擁有此屬性的元素	集合元素
[attribute=value]	選取屬性值爲value值的元素	集合元素
[attribue^=value]	選取屬性的值以value開始的元素	集合元素
[attribue$=value]	選取屬性的值以value結束的元素	集合元素

• 子元素過濾選擇器

選擇器	說明	返回
:nth-child(index/even/odd)	選取每一個父元素下的第index個子元素或者奇偶元素（index從1算起）	集合元素
:first-child	選取每一個元素的第一個子元素	集合元素
:last-child	選取每一個元素的最後一個子元素	集合元素

• :nth-child()選擇器是很經常使用的子元素過濾選擇器，以下

  • :nth-child(even)選擇每一個父元素下的索引值是偶數的元素
  • :nth-child(odd)選擇每一個父元素下的索引值是奇數的元素
  • :nth-child(2)選擇每一個父元素下的索引值是2的元素
  • :nth-child(3n)選擇每一個父元素下的索引值是3的倍數的元素 (n從1開始)

• 表單對象屬性過濾選擇器

選擇器	說明	返回
:enabled	選取全部可用元素	集合元素
:disabled	選取全部不可用元素	集合元素
:checked	選取全部被選中的元素（單選框、複選框）	集合元素
:selected	選取全部被選中的元素（下拉列表）	集合元素

• 表單選擇器

選擇器	說明
:input	選取全部input textarea select button元素
:text	選取全部單行文本框
:password	選取全部密碼框
:radio	選取全部單選框
:checkbox	選取全部多選框
:submit	選取全部的提交按鈕
:image	選取全部的圖像按鈕
:reset	選取全部的重置按鈕
:button	選取全部的按鈕
:file	選取全部的上傳域
:hidden	選取全部的不可見元素

• 特定位置選擇器

  • :first
  • :last
  • :eq(index)

• 指定範圍選擇器

  • :even
  • :odd
  • :gt(index)
  • :lt(index)

• 排除選擇器

  • :not 非

第三節 選擇器優化

---

• 使用合適的選擇器表達式能夠提升性能、加強語義並簡化邏輯。經常使用的選擇器中，ID選擇器速度最快，其次是類型選擇器。

  • a. 多用ID選擇器
  • b. 少直接使用class選擇器
  • c. 多用父子關係，少用嵌套關係
  • d. 緩存jQuery對象

• 使用過濾器

  • jQuery提供了2種選擇文檔元素的方式：選擇器和過濾器
  • a. 類過慮器：根據元素的類屬性來進行過濾操做。
    • hasClass(className)：判斷當前jQuery對象中的某個元素是否包含指定類名，包含返回true，不包含返回false
  • b. 下標過濾器：精確選出指定下標元素
    • eq(index)：獲取第N個元素。index是整數值，下標從0開始
  • c. 表達式過濾器
    • filter(expr)/(fn)：篩選出與指定表達式/函數匹配的元素集合。
    • 功能最強大的表達式過濾器，可接收函數參數，也能夠是簡單的選擇器表達式
  • d. 映射 map(callback)：將一組元素轉換成其餘數組
  • e. 清洗 not(expr)：刪除與指定表達式匹配的元素
  • f. 截取 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對象
• 插入節點

方法	說明
append()	向每一個匹配元素內部追加內容
appendTo()	顛倒append()的操做
prepend()	向每一個匹配元素的內容內部前置內容
prependTo()	顛倒prepend()的操做
after()	向每一個匹配元素以後插入內容
insertAfter()	顛倒after()的操做
before()	在每一個匹配元素以前插入內容
insertBefore()	顛倒before()的操做

• 刪除節點

  • 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、建立節點

---

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

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

• $(html)：根據傳遞的標記字符串，建立DOM對象

• 2.建立文本

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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) `   ` ``javascript 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);

2、插入內容

---

• 內部插入

  • 向元素最後面插入節點：
    • 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);

3、刪除內容

---

• 移除
  • remove():從DOM中刪除全部匹配元素
• 清空
  • empty():刪除匹配的元素集合中全部子節點內容

4、克隆內容：建立指定節點副本

---

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

5、替換內容

---

• 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:表示由顯示到隱藏

• 動畫方法總結

方法名	說明
hide()和show()	同時修改多個樣式屬性即高度和寬度和不透明度
fadeIn()和fadeOut()	只改變不透明度
slideUp()和slideDown()	只改變高度
fadeTo()	只改變不透明度
toggle()	用來代替show()和hide()方法，因此會同時修改多個屬性即高度、寬度和不透明度
slideToggle()	用來代替slideUp和slideDown()方法，因此只能改變高度
fadeToggle()	用來代替fadeIn()和fadeOut方法，只能改變不透明度
animate()	屬於自定義動畫，以上各類動畫方法都是調用了animate方法。此外，用animate方法還能自定義其餘的樣式屬性，例如：left marginLeft ``scrollTop等

第七節 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()：只執行一次

• 綁定特定事件類型方法：

分類	方法名稱	說明
頁面載入	ready(fn)	當DOM載入就緒能夠綁定一個要執行的函數
事件綁定	blind(type,[data],fn)	爲每一個匹配元素的特定事件綁定一個事件處理函數
事件綁定	unblind()	解除綁定
事件綁定	on(events,[,selector[,]data],handler)	在選擇元素上綁定一個或者多個事件處理函數
事件綁定	off()	移除on綁定的事件
事件綁定	delegate(selector,eventType,handler)	爲全部選擇匹配元素附加一個或多個事件處理函數
事件綁定	undelegate()	移除綁定
事件動態	live(type,fn)	對動態生成的元素進行事件綁定
事件動態	die(type,fn)	移除live()綁定的事件
交互事件	hover()	鼠標移入移出
交互事件	toggle(fn1,fn2,[fn3],[fn4])	每單擊後依次調用函數
交互事件	blur(fn)	觸發每個匹配元素的blur事件
交互事件	change()	觸發每個匹配元素的change事件
交互事件	click()	觸發每個匹配元素的click事件
交互事件	focus()	觸發每個匹配元素的focus事件
交互事件	submit()	觸發每個匹配元素的submit事件
鍵盤事件	keydown()	觸發每個匹配元素的keydown事件
鍵盤事件	keypress()	觸發每個匹配元素的keypress事件
鍵盤事件	keyup()	觸發每個匹配元素的keyup事件
鼠標事件	mousedown(fn)	綁定一個處理函數
鼠標事件	mouseenter(fn)	綁定一個處理函數
鍵盤事件	mouseleave(fn)	綁定一個處理函數
鍵盤事件	mouseout(fn)	綁定一個處理函數
鍵盤事件	mouseover(fn)	綁定一個處理函數
窗口操做	resize(fn)	綁定一個處理函數
窗口操做	scroll(fn)	綁定一個處理函數

第八節 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請求處理過程

1 2 3 4 5 6

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

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

• readyState ：ajax處理過程

  • 0：請求未初始化（尚未調用 open()）。
  • 1：請求已經創建，可是尚未發送（尚未調用 send()）。
  • 2：請求已發送，正在處理中（一般如今能夠從響應中獲取內容頭）。
  • 3：請求在處理中；一般響應中已有部分數據可用了，可是服務器尚未完成響應的生成。
  • 4：響應已完成；您能夠獲取並使用服務器的響應了。

• responseText ：請求服務器返回的數據存在該屬性裏面

• status : http狀態碼

• 案例：ajax封裝案例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

//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 = 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對象
  • 只要請求完成，回調函數就會被觸發

1 2 3 4 5

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

• load方法參數

參數名稱	類型	說明
url	String	請求HTML頁面的URL地址
data(可選)	Object	發送至服務器的key / value數據
callback(可選)	Function	請求完成時的回調函數，不管是請求成功仍是失敗

$.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()方法參數解析

參數	類型	說明
url	String	請求HTML頁的地址
data(可選)	Object	發送至服務器的key/ value 數據會做爲QueryString附加到請求URL中
callback(可選)	Function	載入成功的回調函數（只有當Response的返回狀態是success才調用該方法）
type(可選)	String	服務器返回內容的格式，包括xml、html、script、json、text和_default

• $.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()方式經常使用參數解析

參數	類型	說明
url	String	(默認爲當前頁地址)發送請求的地址
type	String	請求方式（POST或GET）默認爲GET
timeout	Number	設置請求超時時間（毫秒）
dataType	String	預期服務器返回的類型。可用的類型以下 xml:返回XML文檔，可用jquery處理 html:返回純文本的HTML信息，包含的script標籤也會在插入DOM時執行 script：返回純文本的javascript代碼。不會自動緩存結果，除非設置cache參數。注意：在遠程請求時，全部的POST請求都將轉爲GET請求 json:返回JSON數據 jsonp:JSONP格式，使用jsonp形式調用函數時，例如：myurl?call back=?,jquery將自動替換後一個？爲正確的函數名，以執行回調函數 text:返回純文本字符串
beforeSend	Function	發送請求前能夠修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中若是返回false能夠取消本次Ajax請求。XMLHttpRequest對象是惟一的參數 function(XMLHttpRequest){          this;//調用本次Ajax請求時傳遞的options參數 }
complete	Function	請求完成後的回調函數（請求成功或失敗時都調用） 參數：XMLHttpRequest對象和一個描述成功請求類型的字符串 function(XMLHttpRequest,textStatus){          this;//調用本次Ajax請求時傳遞的options參數 }
success	Function	請求成功後調用的回調函數，有兩個參數 (1)由服務器返回，並根據dataTyppe參數進行處理後的數據 (2)描述狀態的字符串 function(data,textStatus){          //data多是xmlDoc、``jsonObj、html、text等          this;//調用本次Ajax請求時傳遞的options參數 }
error	Function	請求失敗時被調用的函數
global	Boolean	默認爲true。表示是否觸發全局Ajax事件，設置爲false將不會觸發。AjaxStart或AjaxStop可用於控制各類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官方提供的插件開發模板

1 2 3 4 5 6 7 8 9 10 11 12 13 14

;( function($){ $.fn.plugin= function(options){ var defaults = { //各類參數 各類屬性 } var options = $.extend(defaults,options);   this.each(function(){ //實現功能的代碼 });   return this; } })(jQuery);

自定義jQuery函數：

1 2 3 4 5 6 7

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

自定義jQuery命令：

• 形式1：

1 2 3 4 5 6 7

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

• 形式2：

1 2 3 4 5 6

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

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

---

• jQuery1.3新增經常使用的方法

方法	說明
.closest()	從元素自己開始，逐級向上級元素匹配，並返回最早匹配的祖先元素
die()	從元素中刪除先前用live()方法綁定的全部的事件
live()	附加一個事件處理器到符合目前選擇器的全部元素匹配

• jQuery1.4新增經常使用的方法

方法	說明
.first()	獲取集合中第一個元素
last()	獲取集合中最後一個元素
has(selector)	保留包含特定後代的元素，去掉那些不含有指定後代的元素
detach()	從DOM中去掉全部匹配的元素。detach()和remov()同樣，除了detach()保存了全部jquery數據和被移走的元素相關聯。當須要移走一個元素，不久又將該元素插入DOM時，這種方法頗有用
delegate()	爲全部選擇器匹配的元素附加一個處理一個或多個事件
undelegate()	爲全部選擇器匹配的元素刪除一個處理一個或多個事件

• jQuery1.6新增經常使用的方法

方法	說明
prop(proptyName)	獲取在匹配元素集合中的第一個元素的屬性值
removeProp(proptyName,value)	爲匹配的元素刪除設置的屬性
:focus	選擇當前獲取焦點的元素

附錄二 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的屬性
      • 例如：<div id="dl" data-role="page" data-list-value="43" data-options='{"name:""John"}'>
      • 爲了讀取數據，你須要使用以下代碼
        • $("#dl').data("role';//page)
        • $("#dl').data("lastValue';//43)
        • $("#dl').data("options';//john)

  • 儘可能使用原生的JavaScript方法

  • 壓縮JavaScript代碼
    • 一方面使用Gzip；另外一方面去除JavaScript文件裏面的註釋、空白

附錄三 經常使用的jQuery代碼片斷

---

• 禁用頁面的右鍵菜單

1 2 3 4 5

$( document).ready(functuion(){ $( document).bind("contextmenu",function(e){ return false; }); });

• 新窗口打開頁面

1 2 3 4 5 6 7 8 9 10 11

$( document).ready(function(){ //例子1：href="http://"的連接將會在新窗口打開連接 $( 'a[href=^="http://"]').attr("target","_blank");   //例子2：rel="external"的超連接將會在新窗口打開連接 $( "a[rel$='external']").click(function(){ this.target = "_blank"; }); }); //use <a href= "http://baidu.com" rel="external">open</a>

• 判斷瀏覽器類型

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

$( document).reday(function(){ //Firefox2 and above if( $.browser.mozilla && $.browser.version>="1.8"){ //do something }   // Safari if($.browser.safari){ //do something }   // Chrome if($.browser.chrome){ //do something }   // Opera if($.browser.opera){ //do something }   })   // IE6 and blow if($.browser.msie && $.browser.version<=6){ //do something }   // anything above IE6 if($.browser.msie && $.browser.version > 6){ //do something }

• 輸入框文字獲取和失去焦點

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$( document).ready(function(){ $( "input.text1").val("Enter you search text here"); textFill($( 'input.text1')); });   function textFill(input){//input focus text function var originvalue = input.val(); input.focus(funtion(){ if($.trim(input.val())== originvalue){ input.val( ' '); } }).blur( function(){ if($.trim(input.val()) == ' '){ input.val(originalvalue); } }) }

• 獲取鼠標位置

1 2 3 4 5 6

$( document).ready(function(){ $( document).mousemove(function(e){ $( "#XY").html("X:" + e.pageX+ "| Y" + e.pageY); }); });

• 判斷元素是否存在

1 2 3 4 5

$( document).ready(function(){ if($("#id").length){ // do some thing } })

• 點擊div也能夠跳轉

1 2 3 4 5 6 7

$( "div").click(function(){ window.location = $(this).find("a").attr("href"); })   //use   <div> <a href="index.html">home</a></div>

• 設置div在屏幕中央

1 2 3 4 5 6 7 8 9 10 11

$( document).ready(function(){ jQuery.fn.center = function(){ this.css("position","absolute"); this.css("top",($(window).height() - this.lenght()) / 2 +$(window).scrollTop() + "px"); this.css("left",($(window).height() - this.lenght()) / 2 +$(window).scrollLeft() + "px"); return this; } //use   $( "#XY").center(); });

• 關閉全部動畫效果

1 2 3

$( document).ready(function(){ jQuery.fx.off = true; });

• 檢測鼠標的右鍵和左鍵

1 2 3 4 5

$( document).ready(function(){ $( "#xy").mousedown(function(e){ alert(e.which); //1 = 鼠標左鍵 2= 鼠標中間 3 = 鼠標右鍵 }); });

• 回車提交表單

1 2 3 4 5 6 7

$( document).ready(function(){ $( "input").keyup(function(e){ if(e.which == "13"){ alert( "回車提交"); } }) });

• 設置全局的Ajax參數

1 2 3 4 5 6 7 8

$( "#load").ajaxStart(function(){ showLoading(); //顯示loading disableButtons() //禁用按鈕 }) $( "#load").ajaxComplete(function(){ hideLoading(); //隱藏loading enableButtons(); //啓用按鈕 })

• 獲取選中的下拉框

1 2	$( "#someElement").find('option:selected'); $( "#someElement option:selected");

• 切換複選框

1 2 3 4 5

var tog = false; $("button").click(function(){ $("input[type=checkbox]').attr("checked",!tog); tog = !tog; });

• 個性化連接

1 2 3 4 5

$( document).ready(function(){ $( "a[href$='pdf']").addClass("pdf"); $( "a[href$='zip']").addClass("zip"); $( "a[href$='psd']").addClass("psd"); });

• 在一段時間後自動隱藏或關閉元素

1 2 3 4 5 6

setTimeOut( function(){ $( "div").fadeIn(400); }, 3000);   //而在1.4以後的版本能夠用delay()來實現 $( "div").slideUp(300).delay(3000).fadeIn(400);

• 使用事件代理綁定元素

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//爲table裏面的td元素綁定click事件，無論td是一直存在仍是動態建立的 //jQuery 1.4.2以前使用這種方式 $( "table").each(function(){ $( "td",this).live("click",function(){ $( this).toggleClass("hover"); }); });   //jquery 1.4.2使用的方式   $( "table").delegate("td","click",function(){ $( this).toggleClass("hover"); });   //jQuery1.7.1使用的方式 $( "table").on("click","td",function(){ $( this).toggleClass("hover"); })

• 預加載圖片

1 2 3 4 5 6 7 8 9 10 11 12

( function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } jQuery.preLoadImages( "image1.gif", "/path/to/image2.png");

• 讓頁面中的每一個元素都適合在移動設備上展現

1 2 3 4 5 6 7 8 9 10 11

var scr = document.createElement('script'); scr.setAttribute( 'src', 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'); document.body.appendChild(scr); scr.onload = function(){ $( 'div').attr('class', '').attr('id', '').css({ 'margin' : 0, 'padding' : 0, 'width': '100%', 'clear':'both' }); };

• 圖像等比例縮放

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

$( window).bind("load", function() { // IMAGE RESIZE $( '#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(this).height(); if(width > maxWidth){ ratio = maxWidth / width; $( this).css("width", maxWidth); $( this).css("height", height * ratio); height = height * ratio; } var width = $(this).width(); var height = $(this).height(); if(height > maxHeight){ ratio = maxHeight / height; $( this).css("height", maxHeight); $( this).css("width", width * ratio); width = width * ratio; } }); //$("#contentpage img").show(); // IMAGE RESIZE });

• 返回頁面頂部

1 2 3 4 5 6 7 8

// Back To Top $( document).ready(function(){ $( '.top').click(function() { $( document).scrollTo(0,500); }); }); //Create a link defined with the class .top <a href= "#" class="top">Back To Top</a>

• 使用jQuery打造手風琴式的摺疊效果

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

var accordion = { init: function(){ var $container = $('#accordion'); $container.find( 'li:not(:first) .details').hide(); $container.find( 'li:first').addClass('active'); $container.on( 'click','li a',function(e){ e.preventDefault(); var $this = $(this).parents('li'); if($this.hasClass('active')){ if($('.details').is(':visible')) { $ this.find('.details').slideUp(); } else { $ this.find('.details').slideDown(); } } else { $container.find( 'li.active .details').slideUp(); $container.find( 'li').removeClass('active'); $ this.addClass('active'); $ this.find('.details').slideDown(); } }); } };

• 使用jQuery和Ajax自動填充選擇框

1 2 3 4 5 6 7 8 9 10 11 12 13

$(function(){ $("select#ctlJob").change(function(){ $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){ var options = ''; for (var i = 0; i < j.length; i++) { options += ' ' + j[i].optionDisplay + ' '; } $("select#ctlPerson").html(options); }) }) })

• 自動替換丟失的圖片

1 2 3 4 5 6 7 8

// Safe Snippet $( "img").error(function () { $( this).unbind("error").attr("src", "missing_image.gif"); }); // Persistent Snipper $( "img").error(function () { $( this).attr("src", "missing_image.gif"); });

• 預防對錶單進行屢次提交

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$( document).ready(function() { $( 'form').submit(function() { if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') { jQuery.data( this, "disabledOnSubmit", { submited: true }); $( 'input[type=submit], input[type=button]', this).each(function() { $( this).attr("disabled", "disabled"); }); return true; } else { return false; } }); });

• 動態添加表單元素

1 2 3 4 5

//change event on password1 field to prompt new input $( '#password1').change(function() { //dynamically create new input and insert after password1 $( "#password1").append(""); });

• 在窗口滾動時自動加載內容

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

var loading = false; $( window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(loading == false){ loading = true; $( '#loadingbar').css("display","block"); $.get( "load.php?start="+$('#loaded_max').val(), function(loaded){ $( 'body').append(loaded); $( '#loaded_max').val(parseInt($('#loaded_max').val())+50); $( '#loadingbar').css("display","none"); loading = false; }); } } }); $( document).ready(function() { $( '#loaded_max').val(50); });

• 導航菜單背景切換效果

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<ul id='nav'> <li>導航一</li> <li>導航二</li> <li>導航三</li> </ul>   //注意：代碼須要修飾完善   $('#nav').click(function(e) { // 要知道siblings的使用   $(e.target).addClass('tclass').siblings('.tclass').removeClass('tclass');;   });

• 解決jQuery, prototype共存，$全局變量衝突問題

1 2 3 4 5

<script src= "prototype.js"></script> <script src= "http://blogbeta.blueidea.com/jquery.js"></script> <script type= "text/javascript"> jQuery.noConflict();</script>   注意：必定要先引入prototype.js 再引入jquery.js，前後順序不可錯

• jQuery 判斷元素上是否綁定了事件

1 2 3 4 5

//jQuery event封裝支持判斷元素上是否綁定了事件，此方法只適用於jQuery綁定的事件 var $events = $("#foo").data("events"); if( $events && $events["click"] ){ //your code }

• 如何正確地使用toggleClass

1 2 3 4 5

//切換（toggle）類容許你根據某個類的//是否存在來添加或是刪除該類。 //這種狀況下有些開發者使用： a.hasClass( 'blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton'); //toggleClass容許你使用下面的語句來很容易地作到這一點 a.toggleClass( 'blueButton');

• 如何設置IE特有的功能

1 2 3

if ($.browser.msie) { // Internet Explorer就是個虐待狂 }

• 如何驗證某個元素是否爲空

1 2 3 4 5 6 7 8

// 方法一 if (! $('#keks').html()) { //什麼都沒有找到; } // 方法二 if ($('#keks').is(":empty")) { //什麼都沒有找到; }

• 訪問IFrame裏的元素

1 2 3

var iFrameDOM = $("iframe#someID").contents(); //而後，就能夠經過find方法來遍歷獲取iFrame中的元素了 iFrameDOM.find( ".message").slideUp();

• 管理搜索框的值
  • 如今各大網站都有搜索框，而搜索框一般都有默認值，當輸入框獲取焦點時，默認值消失。而一旦輸入框失去焦點，而輸入框裏又沒有輸入新的值，輸入框裏的值又會恢復成默認值，若是往輸入框裏輸入了新值，則輸入框的值爲新輸入的值。這種特效用JQuery
    很容易實現

1 2 3 4 5 6 7

$( "#searchbox") .focus(function(){ $( this).val('') }) .blur( function(){ var $this = $(this); // '請搜索...'爲搜索框默認值 ($ this.val() === '')? $this.val('請搜索...') : null; });

• 部分頁面加載更新
  • 爲了提升web性能，有更新時咱們一般不會加載整個頁面，而只是僅僅更新部分頁面內容，如圖片的延遲加載等。頁面部分刷新的特效在JQuery中也很容易實現

1 2 3 4

setInterval( function() { //每隔5秒鐘刷新頁面內容 //獲取的內容將增長到 id爲content的元素後   $( "#content").load(url); }, 5000);

• 採配置JQuery與其它庫的兼容性
  • 若是在項目中使用JQuery，$ 是最經常使用的變量名，但JQuery並非惟一一個使用$做爲變量名的庫，爲了不命名衝突，你能夠按照下面方式來組織你的代碼

1 2 3 4 5 6 7 8

//方法一： 爲JQuery從新命名爲 $jvar $j = jQuery.noConflict();$j( '#id').... //   方法二： 推薦使用的方式   ( function($){ $(document).ready(function(){ //這兒，你能夠正常的使用JQuery語法 }); })(jQuery);

• 測試密碼的強度
  • 在某些網站註冊時經常會要求設置密碼，網站也會根據輸入密碼的字符特色給出相應的提示，如密碼太短、強度差、強度中等、強度強等。這又是怎麼實現的呢？看下面代碼：

1	<input type="password" name="pass" id="pass" /> <span id="passstrength"></span>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

//下面的正則表達式建議各位收藏哦，項目上有可能會用得着 $( '#pass').keyup(function(e) {   //密碼爲八位及以上而且字母數字特殊字符三項都包括 var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");   //密碼爲七位及以上而且字母、數字、特殊字符三項中有兩項，強度是中等 var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); var enoughRegex = new RegExp("(?=.{6,}).*", "g");   if (false == enoughRegex.test($(this).val())) {   $( '#passstrength').html('More Characters'); } else if (strongRegex.test($(this).val())) { $( '#passstrength').className = 'ok'; $( '#passstrength').html('Strong!'); } else if (mediumRegex.test($(this).val())) { $( '#passstrength').className = 'alert'; $( '#passstrength').html('Medium!'); } else { $( '#passstrength').className = 'error'; $( '#passstrength').html('Weak!'); } return true;   });

附錄四 常見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
  • 更多插件-動效庫整理
    • 插件動效庫
    • 經常使用組件

擴展閱讀

---

• jQuery源碼分析系列

參考

---

• 鋒利的jQuery

---

• 本文md源文件