jQuery筆記總結(jié)篇

96

poetries 已關(guān)注

2016.10.20 10:52* 字數(shù) 9137 閱讀 6607評論 16喜歡 337贊賞 1

原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery

首先氮块，來了解一下jQuery學習的整體思路

image

• jQuery系統(tǒng)學習篇-XMind源文件提供參考下載

image

• jQuery筆記總結(jié)-XMind源文件提供參考下載

第一節(jié) jQuery初步認知

jQuery概述

• JQuery概念

  • javascript概念
    • 基于Js語言的API和語法組織邏輯傀履，通過內(nèi)置window和document對象，來操作內(nèi)存中的DOM元素
  • JQuery概念
    • 基于javascript的渠鸽，同上莉掂，提高了代碼的效率

• jQuery是什么:

  • 是一個javascript代碼倉庫，我們稱之為javascript框架宝惰。
  • 是一個快速的簡潔的javascript框架妇拯，可以簡化查詢DOM對象、處理事件露泊、制作動畫喉镰、處理Ajax交互過程。
  • 它可以幫我們做什么(有什么優(yōu)勢)
  • 輕量級惭笑、體積小侣姆，使用靈巧(只需引入一個js文件)
  • 強大的選擇器
  • 出色的DOM操作的封裝
  • 出色的瀏覽器兼容性
  • 可靠的事件處理機制
  • 完善的Ajax
  • 鏈式操作、隱式迭代
  • 方便的選擇頁面元素(模仿CSS選擇器更精確沉噩、靈活)
  • 動態(tài)更改頁面樣式/頁面內(nèi)容(操作DOM捺宗，動態(tài)添加、移除樣式)
  • 控制響應事件(動態(tài)添加響應事件)
  • 提供基本網(wǎng)頁特效(提供已封裝的網(wǎng)頁特效方法)
  • 快速實現(xiàn)通信(ajax)
  • 易擴展川蒙、插件豐富

• 如何引入JQuery包

  • 引入本地的JQuery

  • 引入Google在線提供的庫文件（穩(wěn)定可靠高速）

  • 使用Google提供的API導入 <script type=“text/javascript” src=“jquery.js”></script>

  • 寫第一個JQUery案例

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

<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
   $(function(){
       alert(“jQuery 你好!”);
   });
</script>

• 講解$(function(){});

  • $是jQuery別名畜眨。如$()也可jQuery()這樣寫,相當于頁面初始化函數(shù)昼牛，當頁面加載完畢，會執(zhí)行jQuery()康聂。

  • 希望在做所有事情之前贰健，JQuery操作DOM文檔。必須確保在DOM載入完畢后開始執(zhí)行恬汁，應該用ready事件做處理HTML文檔的開始

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

    • 類似于js的window.onload事件函數(shù)伶椿，但是ready事件要先于onload事件執(zhí)行
    • window.onload = function(){};

  • 為方便開發(fā)，jQuery簡化這樣的方法氓侧，直接用$()表示

  • JQuery的ready事件不等于Js的load：

    • 執(zhí)行時機不同：load需要等外部圖片和視頻等全部加載才執(zhí)行脊另。ready是DOM繪制完畢后執(zhí)行，先與外部文件
    • 用法不同：load只可寫一次约巷，ready可以多次
• window.onload與$(document).ready()對比

• jQuery有哪些功能(API)：

  • 選擇器
  • 過濾器
  • 事件
  • 效果
  • ajax

• 簡單的JQuery選擇器：

  • JQuery基本選擇器（ID選擇器偎痛，標簽選擇器，類選擇器独郎，通配選擇器和組選擇器5種）
  • ID選擇器：document.getElementById(id)與$("#id")對比(改變文字大小)---id唯一看彼，返回單個元素
  • 標簽選擇器：document.getElementsByTagName(tagName)與$("tagname")對比---多個標簽，返回數(shù)組
  • 類選擇器:$(".className")--多個classname（改變背景圖片）
  • 通配選擇器：document.getElementsByTagName("*")與$("*")對比---指范圍內(nèi)的所有標簽元素
  • 組選擇器：$("seletor1,seletor2,seletor3")----無數(shù)量限制囚聚，用逗號分割

初步了解JQuery

• JQuery是什么
  • javascript用來干什么的：
    • 操作DOM對象
    • 動態(tài)操作樣式css
    • 數(shù)據(jù)訪問
    • 控制響應事件等
  • jQuery作用一樣，只是更加快速簡潔
• 如何引用JQuery

<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(){} $()本質(zhì)就是一個函數(shù)也就是 jQuery的核心函數(shù)
  • 只要是jQuery的對象都這樣變量加上一個符號$方便識別：var $div = $("#")

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

• $()和document是相等的嗎

<div id="a" class="aa"></div>
<div id="b" class="aa"></div>
<div id="c" class="aa"></div>
alert(document.getElementById("id") == $("#aa"));//返回結(jié)果為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();

• 對象轉(zhuǎn)換($(element))

  • 原生dom對象和jquery代理對象的相互轉(zhuǎn)換

$(傳入的原生對象);
//原生對象轉(zhuǎn)化成jQuery對象
var nav = document.getElementById("nav");
var $nav = $(nav);
alert($nav.get(0) == nav);//true

• 檢索范圍的限制（$('字符串',element)）

  • 總結(jié)：三種寫法對比：

    • 方式一：不推薦 搜索速度最慢

      • $("#nav").css();
      • $("#nav li").css();

    • 方式二：搜索速度最快 鏈式操作

      • $("#nav").css().children().css();

    • 方式三：也常用 速度第二快

      • var $nav = $("#nav").css();
      • $("li",$nav).css(); $nav限制了搜索范圍 速度快

• 總結(jié)： $() jquery核心方法的作用和使用場景

  • 如果是一個字符串參數(shù)并且沒有標簽對（選擇器）$(ul.nav")
  • 如果是一個字符串參數(shù)并且有標簽對（創(chuàng)建html標簽）$("<img>") --最終加到DOM樹中 $xx.append("<img>");
  • 如果是傳入一個element dom對象料皇，直接包裝為proxy對象返回 $(DOM對象)
  • 如果第一個參數(shù)是字符串谓松，第二個是element dom對象的話星压，那么就是在element這個dom對象里面尋找選擇器對應的元素并且代理 $("li",$DOM對象)

• 代理模式以及代理內(nèi)存結(jié)構(gòu)

image

image

第二節(jié) 選擇器

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

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

  • css選擇器的規(guī)則

    • 標簽選擇器
    • id選擇器
    • 類選擇器
    • 混合選擇器

  • css3的選擇器規(guī)則

  • 狀態(tài)和偽類（:even :odd :first :last :eq(index)）

  • 屬性（[attr=value]）

• 層級選擇器:通過DOM的嵌套關(guān)系匹配元素

  • jQuery層級選擇器----包含選擇器、子選擇器鬼譬、相鄰選擇器娜膘、兄弟選擇器4種
  • a.包含選擇器：$("a b")在給定的祖先元素下匹配所有后代元素。(不受層級限制)
  • b.子選擇器：$("parent > child")在給定的父元素下匹配所有子元素优质。
  • c.相鄰選擇器：$("prev + next") 匹配所有緊接在prev元素后的next元素竣贪。
  • d.兄弟選擇器：$("prev ~ siblings") 匹配prev元素之后的所有sibling元素。

過濾選擇器

• 基本過濾選擇

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

• 可見過濾選擇器

• 屬性過濾選擇器

• 子元素過濾選擇器

• :nth-child()選擇器是很常用的子元素過濾選擇器巩螃，如下

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

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

• 表單選擇器

• 特定位置選擇器

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

• 指定范圍選擇器

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

• 排除選擇器

  • :not 非

第三節(jié) 選擇器優(yōu)化

• 使用合適的選擇器表達式可以提高性能、增強語義并簡化邏輯避乏。常用的選擇器中爷耀，ID選擇器速度最快，其次是類型選擇器拍皮。

  • a. 多用ID選擇器
  • b. 少直接使用class選擇器
  • c. 多用父子關(guān)系歹叮，少用嵌套關(guān)系
  • d. 緩存jQuery對象

• 使用過濾器

  • jQuery提供了2種選擇文檔元素的方式：選擇器和過濾器
  • a. 類過慮器：根據(jù)元素的類屬性來進行過濾操作。
    • hasClass(className)：判斷當前jQuery對象中的某個元素是否包含指定類名铆帽，包含返回true咆耿，不包含返回false
  • b. 下標過濾器：精確選出指定下標元素
    • eq(index)：獲取第N個元素。index是整數(shù)值锄贼，下標從0開始
  • c. 表達式過濾器
    • filter(expr)/(fn)：篩選出與指定表達式/函數(shù)匹配的元素集合票灰。
    • 功能最強大的表達式過濾器，可接收函數(shù)參數(shù)宅荤，也可以是簡單的選擇器表達式
  • d. 映射 map(callback)：將一組元素轉(zhuǎn)換成其他數(shù)組
  • e. 清洗 not(expr)：刪除與指定表達式匹配的元素
  • f. 截取 slice(start,end)：選取一個匹配的子集

• 查找

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

第四節(jié) 代理對象屬性和樣式操作

• 代理對象屬性和樣式操作

  • attr
  • prop(一般屬性值是boolean的值或者不用設置屬性值屑迂，一般使用)
  • css(最好不用，一般我用來做測試)
  • addClass / removeClass

• 操作原生DOM的時候用的方式：一次只能操作一個

  • 操作屬性：setAttribute / getAttribute
  • 操作樣式：style.xx = value
  • 操作類樣式：className=''
  • 獲取DOM的子元素children屬性
  • DOM里面添加一個子元素appendChild()

• 操作jQuery代理對象的時候：批量操作DOM對象(全都是通過方法操作)

• 操作屬性：attr()冯键、prop()

  • attr和prop區(qū)別：如果屬性的值是布爾類型的值 用prop操作 反之attr

• 操作樣式：css()

• 操作類樣式：addClass() removeClass()

• 操作DOM子元素：children()

• 添加子元素：append()

第五節(jié) jQuery中DOM操作

• DOM是一種與瀏覽器惹盼、平臺|語言無關(guān)的接口，使用該接口可以輕松的訪問 頁面中的所有的標準組件

• DOM操作的分類

  • DOM Core

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

  • HTML-DOM

    • HTML -DOM的出現(xiàn)比DOM-Core還要早手报，它提供一些更簡明的標志來描述HTML元素的屬性

  • 比如：使用HTML-DOM來獲取某元素的src屬性的方法

    • element.src

  • CSS-DOM

    • 針對CSS的操作。在JavaScript中改化，主要用于獲取和設置style對象的各種屬性掩蛤，通過改變style對象的屬性，使網(wǎng)頁呈現(xiàn)不同的效果

• 查找節(jié)點

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

• 創(chuàng)建節(jié)點

  • $(html)：根據(jù)傳遞的標記字符串陈肛，創(chuàng)建DOM對象

• 插入節(jié)點

• 刪除節(jié)點

  • jQuery提供了三種刪除節(jié)點的方法 remove() detach() empty()
  • remove()方法
    • 當某個節(jié)點用此方法刪除后揍鸟，該節(jié)點所包含的所有后代節(jié)點將同時被刪除，用remove()方法刪除后句旱，還是可以繼續(xù)使用刪除后的引用

• detach()

  • 和remove()方法一樣阳藻，也是從DOM中去掉所有匹配的元素晰奖，與remove()不同的是，所有綁定的事件腥泥、附加的數(shù)據(jù)等匾南，都會被保留下來

• empty()

  • empty()方法并不是刪除節(jié)點，而是清空節(jié)點，它能清空元素中所有后代節(jié)點

• 復制節(jié)點

  • 使用clone()方法來完成
  • 在clone()方法中傳遞一個參數(shù)true，同時復制元素中所綁定的事件

• 替換節(jié)點

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

• 樣式操作

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

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

  • html()
    • 此方法類似JavaScript中innerHTML屬性崖技，可以用來讀取和設置某個元素中的HTML內(nèi)容
  • text()方法
    • 此方法類型JavaScript中innerHTML逻住，用來讀取和設置某個元素中的文本內(nèi)容

• val()方法

  • 此方法類似JavaScript中的value屬性，用來設置獲取元素的值迎献。無論是文本框瞎访、下拉列表還是單選框，都可以返回元素的值吁恍，如果元素多選扒秸，返回一個包含所有選擇的值的數(shù)組

• 遍歷節(jié)點

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

• next()方法

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

• prev()方法

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

• siblings()方法

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

• parent()方法

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

• parents()方法

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

CSS DOM操作

• CSS DOM技術(shù)簡單的來說就是讀取和設置style對象的各種屬性
• 用css()方法獲取元素的樣式屬性，可以同時設置多個樣式屬性
• CSS DOM中關(guān)于元素定位有幾個常用的方法
  • offset()方法
    • 它的作用是獲取元素在當前視窗的相對偏移其中返回的對象包含兩個屬性冀瓦，即top和left伴奥，他只對可見元素有效
• position()方法
  • 獲取相對于最近的一個position()樣式屬性設置為relative或者absolute的祖父節(jié)點的相對偏移，與offset()一樣翼闽，他返回的對象也包括兩個屬性拾徙，即top和left
• scrollTop()方法和scrollLeft方法
  • 這兩個方法的作用分別是獲取元素的滾動條距頂端的距離和距左側(cè)的距離
• 一些圖總結(jié)以上的位置關(guān)系(項目中很常用-必須要弄清楚)

image

image

• 更多介紹詳情
  • JavaScript及jQuery中的各種寬高屬性圖解

第六節(jié) jQuery動畫

回顧上節(jié)

• 操作DOM
  • a.什么是DOM：Document Object Model縮寫，文檔對象模型
  • b.理解頁面的樹形結(jié)構(gòu)
  • c.什么是節(jié)點：是DOM結(jié)構(gòu)中最小單元感局，包括元素尼啡、屬性、文本询微、文檔等崖瞭。

一、創(chuàng)建節(jié)點

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

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

• $(html)：根據(jù)傳遞的標記字符串撑毛，創(chuàng)建DOM對象

• 2.創(chuàng)建文本

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

二书聚、插入內(nèi)容

• 內(nèi)部插入

  • 向元素最后面插入節(jié)點：
    • append():向每個匹配的元素內(nèi)部追加內(nèi)容
    • appendTo():把所有匹配的元素追加到指定元素集合中，$("A").append("B")等效 $("B").appendTo("A")
  • 向元素最前面插入節(jié)點：
    • prepend（）：把每個匹配的元素內(nèi)部前置內(nèi)容
    • prependTo（）：把所有匹配的元素前置到另一個指定的元素集合中,$("A").prepend("B") 等效 $("B").prependTo("A")

• 外部插入

  • after():在每個匹配的元素之后插入內(nèi)容
  • before()：在每個匹配想元素之前插入內(nèi)容
  • insertAfter()：將所有匹配的元素插入到另一個指定的元素集合后面，$A.insert($B) 等效$B.insertAfter($A);
  • insertBefore()：將所有匹配的元素插入到另一個指定的元素集合前面 $A.before($B) 等效 $B.insertBefore($A);

三寺惫、刪除內(nèi)容

• 移除
  • remove():從DOM中刪除所有匹配元素
• 清空
  • empty():刪除匹配的元素集合中所有子節(jié)點內(nèi)容

四、克隆內(nèi)容：創(chuàng)建指定節(jié)點副本

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

五西雀、替換內(nèi)容

• replaceWith():將所有匹配的元素替換成指定的元素

• replaceAll():用匹配的元素替換掉指定元素

• 注意：兩者效果一致，只是語法不同 $A.replaceAll($B)等效于 $B.replaceWhith($A);

本節(jié)新知識

• JavaScript語言本身不支持動畫設計歉摧，必須通過改變CSS來實現(xiàn)動畫效果

顯隱動畫

• show():顯示 hide():隱藏

  • 原理：hide()通過改變元素的高度寬度和不透明度艇肴，直到這三個屬性值到0
  • show()從上到下增加元素的高度，從左到右增加元素寬度叁温，從0到1增加透明度再悼，直至內(nèi)容完全可見
  • 參數(shù)：
    • show(speed,callback)
      • speed: 字符串或數(shù)字，表示動畫將運行多久（slow=0.6/normal=0.4/fast=0.2）
      • callback: 動畫完成時執(zhí)行的方法

• 顯示和隱藏式一對密不可分的動畫形式

• 顯隱切換

  • toggle():切換元素的可見狀態(tài)
    • 原理：匹配元素的寬度膝但、高度以及不透明度冲九，同時進行動畫，隱藏動畫后將display設置為none
    • 參數(shù)：
      • toggle(speed)
      • toggle(speed,callback)
      • toggle(boolean)
        • speed: 字符串或數(shù)字跟束，表示動畫將運行多久（slow=0.6/normal=0.4/fast=0.2）
        • easing： 使用哪個緩沖函數(shù)來過渡的字符串(linear/swing)
        • callback： 動畫完成時執(zhí)行的方法
        • boolean:true為顯示 false為隱藏

滑動

• 顯隱滑動效果

• slideDown():滑動隱藏

• slidUp():滑動顯示

• 參數(shù):

  • slideDown(speed,callback)
  • slidUp(speed,callback)

• 顯隱切換滑動

  • slideToggle():顯隱滑動切換
  • 參數(shù):
    • slidUp(speed,callback)

漸變：通過改變不透明度

• 淡入淡出

  • fadeIn()

  • fadeOut()

  • 參數(shù)：

    • fadeIn(speed,callback)
    • fadeOut(speed,callback)

• 設置淡出透明效果

  • fadeTo()：以漸進的方式調(diào)整到指定透明度

  • 參數(shù)：

    • fadeTo(speed,opacity,callback)

• 漸變切換:結(jié)合fadeIn和fadeOut

  • fadeToggle()

  • 參數(shù):

    • fadeOut(speed,callback)

• 自定義動畫：animate()

  • 注意：在使用animate方法之前莺奸，為了影響該元素的top left bottom right樣式屬性，必須先把元素的position樣式設置為relative或者absolute
  • 停止元素的動畫
    • 很多時候需要停止匹配正在進行的動畫冀宴，需要使用stop()
    • stop()語法結(jié)構(gòu)：stop([clearQueue],[gotoEnd]);
      • 都是可選參數(shù)灭贷，為布爾值
      • 如果直接使用stop()方法，會立即停止當前正在進行的動畫
  • 判斷元素是否處于動畫狀態(tài)
    • 如果不處于動畫狀態(tài)略贮，則為元素添加新的動畫甚疟，否則不添加
      if(!$(element).is(":animated")){ //判斷元素是否處于動畫狀態(tài)}
    • 這個方法在animate動畫中經(jīng)常被用到，需要注意
  • 延遲動畫
    • 在動畫執(zhí)行過程中逃延，如果你想對動畫進行延遲操作览妖，那么使用delay()

• 用animate模擬show():

  • show: 表示由透明到不透明
  • toggle: 切換
  • hide:表示由顯示到隱藏

• 動畫方法總結(jié)

第七節(jié) jQuery中的事件

• 事件對象的屬性

  • event.type：獲取事件的類型

  • event.target:獲取到觸發(fā)事件的元素

  • event.preventDefault方法 阻止默認事件行為

  • event.stopPropagation()阻止事件的冒泡

  • keyCode：只針對于keypress事件挺尾，獲取鍵盤鍵數(shù)字 按下回車，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代表右鍵

• 事件冒泡

  • 什么是冒泡
    • 在頁面上可以有多個事件甫题，也可以多個元素影響同一個元素
    • 從里到外
    • 嵌套關(guān)系
    • 相同事件
    • 其中的某一父類沒有相同事件時,繼續(xù)向上查找
  • 停止事件冒泡
    • 停止事件冒泡可以阻止事件中其他對象的事件處理函數(shù)被執(zhí)行
    • 在jQuery中提供了stopPropagation()方法
  • 阻止默認行為
    • 網(wǎng)頁中元素有自己的默認行為，例如：單擊超鏈接后會跳轉(zhuǎn)涂召、單擊提交后表單會提交坠非，有時需要阻止元素的默認行為
    • 在jQuery中提供了preventDefault()方法來阻止元素的默認行為

• 事件捕獲

  • 事件捕獲和冒泡是相反的過程，事件捕獲是從最頂端往下開始觸發(fā)
  • 并非所有的瀏覽器都支持事件捕獲果正，并且這個缺陷無法通過JavaScript來修復炎码。jQuery不支持事件捕獲，如需要用事件捕獲秋泳，要用原生的JavaScript

• bind();綁定

  • 為匹配元素綁定處理方法

  • 需要給一個元素添加多個事件 潦闲，事件執(zhí)行一樣時候

  • one()：只執(zhí)行一次

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

第八節(jié) jQuery與Ajax

• Ajax簡介 :
  • Asynchronous Javascript And XML （異步的
    JavaScript和XML）
  • 它并不是一種單一的技術(shù)，而是有機利用一系列交互式網(wǎng)頁應用相關(guān)的技術(shù)所形成的結(jié)合體
• Ajax優(yōu)勢與不足
  • Ajax優(yōu)勢
    • 優(yōu)秀的用戶體驗
      • 這是Ajax下最大的有點迫皱，能在不刷新整個頁面前提下更新數(shù)據(jù)
    • 提高web程序的性能
      • 與傳統(tǒng)模式相比歉闰，Ajax模式在性能上最大的區(qū)別在于傳輸數(shù)據(jù)的方式，在傳統(tǒng)模式中舍杜，數(shù)據(jù)的提交時通過表單來實現(xiàn)的新娜。Ajax模式只是通過XMLHttpRequest對象向服務器提交希望提交的數(shù)據(jù)，即按需發(fā)送
    • 減輕服務器和帶寬的負擔
      • Ajax的工作原理相當于在用戶和服務器之間加了一個中間層既绩，似用戶操作與服務器響應異步化概龄。它在客戶端創(chuàng)建Ajax引擎，把傳統(tǒng)方式下的一些服務器負擔的工作轉(zhuǎn)移到客戶端饲握，便于客戶端資源來處理私杜，減輕服務器和帶寬的負擔
  • Ajax的不足
    • 瀏覽器對XMLHttpRequest對象的支持度不足
    • 破壞瀏覽器前進、后退按鈕的正常功能
    • 對搜索引擎的支持的不足
    • 開發(fā)和調(diào)試工具的缺乏

創(chuàng)建一個Ajax請求

• Ajax的核心是XMLHttpRequest對象救欧，它是Ajax實現(xiàn)的關(guān)鍵衰粹，發(fā)送異步請求、接受響應以及執(zhí)行回調(diào)都是通過它來完成

• 創(chuàng)建ajax對象 var xhr = new XMLHttpRequest();

• 準備發(fā)送請求

  • get / post

    • get

      • 傳遞的數(shù)據(jù)放在URL后面
      • 中文編碼 encodeURI( '' );
      • 緩存 在數(shù)據(jù)后面加上隨機數(shù)或者日期對象或者……

    • post

      • 傳遞的數(shù)據(jù)放在send()里面笆怠，并且一定要規(guī)定數(shù)據(jù)格式
      • 沒有緩存問題

  • form表單中:

    • action:
    • method: (默認是get)
    • get: 會在url里面以 name=value , 兩個數(shù)據(jù)之間用 & 連接
    • post:

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

  • url

  • 是否異步

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

• 正式發(fā)送請求

• ajax請求處理過程

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

• onreadystatechange ：當處理過程發(fā)生變化的時候執(zhí)行下面的函數(shù)

• readyState ：ajax處理過程

  • 0：請求未初始化（還沒有調(diào)用 open()）铝耻。
  • 1：請求已經(jīng)建立，但是還沒有發(fā)送（還沒有調(diào)用 send()）蹬刷。
  • 2：請求已發(fā)送瓢捉，正在處理中（通常現(xiàn)在可以從響應中獲取內(nèi)容頭）办成。
  • 3：請求在處理中泡态；通常響應中已有部分數(shù)據(jù)可用了，但是服務器還沒有完成響應的生成迂卢。
  • 4：響應已完成某弦；您可以獲取并使用服務器的響應了桐汤。

• responseText ：請求服務器返回的數(shù)據(jù)存在該屬性里面

• status : http狀態(tài)碼

image

• 案例：ajax封裝案例

//ajax請求后臺數(shù)據(jù)
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 接收 傳輸完成后的回調(diào)函數(shù)
    var data = aJson.data || '';// data 接收需要附帶傳輸?shù)臄?shù)據(jù)

    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 );
    //規(guī)定傳輸數(shù)據(jù)的格式
    ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
    //發(fā)送ajax請求（包括post數(shù)據(jù)的傳輸）
    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 請求成功的狀態(tài)碼
        {
            //請求成功處理數(shù)據(jù)
            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中 結(jié)構(gòu)為：load(url,[data],[callback])
• 使用url參數(shù)指定選擇符可以加載頁面內(nèi)的某些元素 load方法中url語法：url selector 注意：url和選擇器之間有一個空格
• 傳遞方式
  • load()方法的傳遞方式根據(jù)參數(shù)data來自動指定蜂莉，如果沒有參數(shù)傳遞，則采用GET方式傳遞混卵，反之映穗，采用POST
• 回調(diào)參數(shù)
  • 必須在加載完成后才執(zhí)行的操作，該函數(shù)有三個參數(shù) 分別代表請求返回的內(nèi)容幕随、請求狀態(tài)蚁滋、XMLHttpRequest對象
  • 只要請求完成，回調(diào)函數(shù)就會被觸發(fā)

$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
    //respnoseText 請求返回的內(nèi)容
    //textStatus 請求狀態(tài) ：sucess赘淮、error辕录、notmodified、timeout
    //XMLHttpRequest 
})

• load方法參數(shù)

.get()和.post()方法

load()方法通常用來從web服務器上獲取靜態(tài)的數(shù)據(jù)文件走诞。在項目中需要傳遞一些參數(shù)給服務器中的頁面，那么可以使用$.get()和$.post()或$.ajax()方法

• 注意：$.get()和$.post()方法是jquery中的全局函數(shù)

• $.get()方法

  • $.get()方法使用GET方式來進行異步請求
  • 結(jié)構(gòu)為：$.get(url,[data],callback,type)
    • 如果服務器返回的內(nèi)容格式是xml文檔蛤高，需要在服務器端設置Content-Type類型 代碼如下：header("Content-Type:text/xml:charset=utf-8") //php

• $.get()方法參數(shù)解析

• $.post()方法

  • 它與$.get()方法的結(jié)構(gòu)和使用方式相同恤批，有如下區(qū)別
    • GET請求會將參數(shù)跟張乃URL后進行傳遞异吻，而POST請求則是作為Http消息的實體內(nèi)容發(fā)送給web服務器，在ajax請求中喜庞，這種區(qū)別對用戶不可見
    • GET方式對傳輸數(shù)據(jù)有大小限制（通常不能大于2KB）诀浪，而使用POST方式傳遞的數(shù)據(jù)量要比GET方式大得多（理論不受限制）
    • GET方式請求的數(shù)據(jù)會被瀏覽器緩存起來，因此其他人可以從瀏覽器的歷史紀錄中讀取這些數(shù)據(jù)赋荆，如：賬號笋妥、密碼。在某種情況下窄潭，GET方式會帶來嚴重的安全問題春宣，而POST相對來說可以避免這些問題
    • GET和POST方式傳遞的數(shù)據(jù)在服務端的獲取也不相同酵颁。在PHP中，GET方式用$_GET[]獲仍碌邸躏惋；POST方式用$_POST[]獲取;兩種方式都可用$_REQUEST[]來獲取

• 總結(jié)

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

$.ajax()方法

• $.ajax()方法是jquery最底層的Ajax實現(xiàn)，它的結(jié)構(gòu)為$.ajax(options)
• 該方法只有一個參數(shù)簸搞，但在這個對象里包含了$.ajax()方式所需要的請求設置以及回調(diào)函等信息扁位，參數(shù)以key / value存在，所有參數(shù)都是可選的
• $.ajax()方式常用參數(shù)解析

this;//調(diào)用本次Ajax請求時傳遞的options參數(shù)
} |
| success | Function | 請求成功后調(diào)用的回調(diào)函數(shù)乘盖，有兩個參數(shù)<br />(1)由服務器返回焰檩，并根據(jù)dataTyppe參數(shù)進行處理后的數(shù)據(jù)<br />(2)描述狀態(tài)的字符串<br />function(data,textStatus){
//data可能是xmlDoc、``jsonObj订框、html析苫、text等
this;//調(diào)用本次Ajax請求時傳遞的options參數(shù)<br />} |
| error | Function | 請求失敗時被調(diào)用的函數(shù) |
| global | Boolean | 默認為true。表示是否觸發(fā)全局Ajax事件穿扳，設置為false將不會觸發(fā)衩侥。AjaxStart或AjaxStop可用于控制各種Ajax事件 |

第九節(jié) 插件

• 什么是插件

  • 插件(Plugin)也稱為jQuery的擴展。以jQuery核心代碼為基礎編寫的符合一定規(guī)范的應用程序矛物。通過js文件的方式引用茫死。

• 插件分為哪幾類

  • UI類、表單及驗證類履羞、輸入類峦萎、特效類屡久、Ajax類、滑動類爱榔、圖形圖像類被环、導航類、綜合工具類详幽、動畫類等等

• 引入插件的步驟

• 引入jquery.js文件筛欢，而且在所以插件之前引入

• 引入插件

• 引入插件相關(guān)文件，比如皮膚唇聘、中文包

• 如何自定義插件：

  • 插件形式分為3類：
    • 封裝對象方法插件
    • 封裝全局函數(shù)插件
    • 選擇器插件(類似于.find())

• 自定義插件的規(guī)范（解決各種插件的沖突和錯誤版姑，增加成功率）

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

• 自定義插件案例

  • 為了方便用戶創(chuàng)建插件宇姚，jQuery提供了 jQuery.extend() 和 jQuery.fn.extend()
  • jQuery.extend()：創(chuàng)建工具函數(shù)或者是選擇器
  • jQuery.fn.extend()：創(chuàng)建jQuery對象命令 （fn相當于prototype的別名）

• jQuery官方提供的插件開發(fā)模板

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

        this.each(function(){
            //實現(xiàn)功能的代碼
        });

        return this;
    }
})(jQuery);

自定義jQuery函數(shù)：

(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性能優(yōu)化

• 性能優(yōu)化

  • 使用最新版的jQuery類庫

  • 使用合適的選擇器

    • $(#id)
      • 使用id來定位DOM元素是最佳的方式蒜绽，為了提高性能镶骗，建議從最近的ID元素開始往下搜索
    • $("p") , $("div") , $("input")
      • 標簽選擇器性能也不錯，它是性能優(yōu)化的第二選擇躲雅。因為jQuery將直接調(diào)用本地方法document.getElementsByTagName()來定位DOM元素
    • $(".class")
      • 建議有選擇性的使用
    • $("[attribute=value]")
      • 對這個利用屬性定位DOM元素鼎姊，本地JavaScript并沒有直接實現(xiàn)。這種方式性能并不是很理想相赁。建議避免使用相寇。
    • $(":hidden")
      • 和上面利用屬性定位DOM方式類似，建議盡量不要使用
    • 注意的地方
      • 盡量使用ID選擇器
      • 盡量給選擇器指定上下文

  • 緩存對象

    • 如果你需要在其他函數(shù)中使用jQuery對象钮科，你可以把他們緩存在全局環(huán)境中

  • 數(shù)組方式使用jQuery對象

    • 使用jQuery選擇器獲取的結(jié)果是一個jQuery對象唤衫。在性能方面，建議使用for或while循環(huán)來處理绵脯，而不是$.each()

• 事件代理

  • 每一個JavaScript事件（如：click佳励、mouseover）都會冒泡到父級節(jié)點休里。當我們需要給多個元素調(diào)用同個函數(shù)時這點很有用。比如植兰，我們要為一個表單綁定這樣的行為：點擊td后份帐，把背景顏色設置為紅色
    • $("#myTable td").click(function(){$(this).css("background","red");});
    • 假設有100個td元素，在使用以上的方式時楣导，綁定了100個事件废境，將帶來性能影響
    • 代替這種多元素的事件監(jiān)聽方法是，你只需向他們的父節(jié)點綁定一次事件筒繁，然后通過event.target獲取到點擊的當前元素
      • $("#myTable td").click(function({$(e.target).css("background","red")});
      • e.target捕捉到觸發(fā)的目標
  • 在jQuery1.7中提供了一個新的方法on()噩凹，來幫助你將整個事件監(jiān)聽封裝到一個便利的方法中
    • $("#myTable td").on("click",'td',function(){$(this).css("background","red");});

• 將你的代碼轉(zhuǎn)化成jQuery插件

  • 它能夠使你的代碼有更好的重用性，并且能夠有效的幫助你組織代碼

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

  • 也許你之前使用+來拼接字符串毡咏，現(xiàn)在可以改了驮宴。它確實有助于性能優(yōu)化，尤其是長字符串處理的時候

• 合理使用HTML5和Data屬性

  • HTML5的data屬性可以幫助我們插入數(shù)據(jù)呕缭，特別是后端的數(shù)據(jù)交換堵泽。jQuery的Data()方法有效利用HTML5的屬性
    • 例如：<div id="dl" data-role="page" data-list-value="43" data-options='{"name:""John"}'>
    • 為了讀取數(shù)據(jù)，你需要使用如下代碼
      • $("#dl').data("role';//page)
      • $("#dl').data("lastValue';//43)
      • $("#dl').data("options';//john)

• 盡量使用原生的JavaScript方法

• 壓縮JavaScript代碼

  • 一方面使用Gzip恢总；另一方面去除JavaScript文件里面的注釋迎罗、空白

附錄三 常用的jQuery代碼片段

• 禁用頁面的右鍵菜單

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

• 新窗口打開頁面

$(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  rel="external">open</a>

• 判斷瀏覽器類型

$(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
  }

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

$(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);
      }
  })
}

• 獲取鼠標位置

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

• 判斷元素是否存在

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

• 點擊div也可以跳轉(zhuǎn)

$("div").click(function(){
    window.location  = $(this).find("a").attr("href");
})

//use

<div><a href="index.html">home</a></div>

• 設置div在屏幕中央

$(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();
});

• 關(guān)閉所有動畫效果

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

• 檢測鼠標的右鍵和左鍵

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

• 回車提交表單

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

• 設置全局的Ajax參數(shù)

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

• 獲取選中的下拉框

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

• 切換復選框

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

• 個性化鏈接

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

• 在一段時間后自動隱藏或關(guān)閉元素

setTimeOut(function(){
        $("div").fadeIn(400);
  },3000);

//而在1.4之后的版本可以用delay()來實現(xiàn)
$("div").slideUp(300).delay(3000).fadeIn(400);

• 使用事件代理綁定元素

 //為table里面的td元素綁定click事件，不管td是一直存在還是動態(tài)創(chuàng)建的
 //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");
 })

• 預加載圖片

(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");

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

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'
    });
};

• 圖像等比例縮放

$(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
});

• 返回頁面頂部

// 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打造手風琴式的折疊效果

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自動填充選擇框

$(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);
})
})
})

• 自動替換丟失的圖片

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

• 預防對表單進行多次提交

$(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;
    }
  });
});

• 動態(tài)添加表單元素

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

• 在窗口滾動時自動加載內(nèi)容

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);
});

• 導航菜單背景切換效果

<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共存片仿，$全局變量沖突問題

<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 判斷元素上是否綁定了事件

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

• 如何正確地使用toggleClass

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

• 如何設置IE特有的功能

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

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

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

• 訪問IFrame里的元素

var iFrameDOM = $("iframe#someID").contents();
//然后厢岂，就可以通過find方法來遍歷獲取iFrame中的元素了
iFrameDOM.find(".message").slideUp();

• 管理搜索框的值
  • 現(xiàn)在各大網(wǎng)站都有搜索框所森，而搜索框通常都有默認值祷舀，當輸入框獲取焦點時葵姥，默認值消失俊犯。而一旦輸入框失去焦點际邻，而輸入框里又沒有輸入新的值工腋，輸入框里的值又會恢復成默認值淌哟，如果往輸入框里輸入了新值吏恭，則輸入框的值為新輸入的值蓄拣。這種特效用JQuery
    很容易實現(xiàn)

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

• 部分頁面加載更新
  • 為了提高web性能扬虚，有更新時我們通常不會加載整個頁面，而只是僅僅更新部分頁面內(nèi)容球恤，如圖片的延遲加載等辜昵。頁面部分刷新的特效在JQuery中也很容易實現(xiàn)

setInterval(function() { 
//每隔5秒鐘刷新頁面內(nèi)容 //獲取的內(nèi)容將增加到 id為content的元素后 

$("#content").load(url); }, 5000);

• 采配置JQuery與其它庫的兼容性
  • 如果在項目中使用JQuery，$ 是最常用的變量名咽斧，但JQuery并不是唯一一個使用$作為變量名的庫堪置，為了避免命名沖突躬存，你可以按照下面方式來組織你的代碼

//方法一： 為JQuery重新命名為
 $jvar $j = jQuery.noConflict();$j('#id').... //

方法二： 推薦使用的方式

(function($){ $(document).ready(function(){
     //這兒，你可以正常的使用JQuery語法 });
})(jQuery);

• 測試密碼的強度
  • 在某些網(wǎng)站注冊時常常會要求設置密碼舀锨，網(wǎng)站也會根據(jù)輸入密碼的字符特點給出相應的提示岭洲，如密碼過短、強度差坎匿、強度中等盾剩、強度強等。這又是怎么實現(xiàn)的呢替蔬？看下面代碼：

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

//下面的正則表達式建議各位收藏哦告私，項目上有可能會用得著
$('#pass').keyup(function(e) { 

//密碼為八位及以上并且字母數(shù)字特殊字符三項都包括 
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 

//密碼為七位及以上并且字母、數(shù)字承桥、特殊字符三項中有兩項驻粟，強度是中等 
 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中文網(wǎng)開源項目免費 CDN 服務
• 百度靜態(tài)資源公共庫
• 360網(wǎng)站衛(wèi)士常用前端公共庫CDN服務--已停止服務
• 開放靜態(tài)文件 CDN
• 微軟CDN服務
• 阿里云
• 百度開放云平臺
• jQuery CDN
• jQuery cdn加速
• 新浪CDN

附錄五 jQuery的一些資源

• 速查手冊
  • jQuery API 中文文檔--css88
  • jQuery API 中文文檔--jquery123.com
  • jQuery API 3.1 中文文檔
  • jQuery-overapi
  • 在線桌面版API
  • 更多詳情---一份實用的API參考手冊集合
• jQuery插件
• 基礎常用
  • 滾動固定在某個位置
  • jQuery圖片滾動插件全能版
  • jQuery Wookmark Load 瀑布流布局
  • jQuery Jcrop 圖像裁剪
  • jQuery kxbdMarquee 無縫滾動
  • jQuery lightBox 燈箱效果
  • Lazy Load Plugin for jQuery
• 更多插件-動效庫整理
  • 自己整理的一份插件庫

擴展閱讀

• jQuery源碼分析系列

參考

• 鋒利的jQuery

• 本文md源文件