摘要：希望在做所有事情之前，操作文檔。不受層級(jí)限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當(dāng)前對(duì)象中的某個(gè)元素是否包含指定類名，包含返回，不包含返回下標(biāo)過(guò)濾器精確選出指定下標(biāo)元素獲取第個(gè)元素。

原文鏈接 http://blog.poetries.top/2016...

首先，來(lái)了解一下jQuery學(xué)習(xí)的整體思路

XMind源文件提供參考下載

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

jQuery概述

JQuery概念

javascript概念

基于Js語(yǔ)言的API和語(yǔ)法組織邏輯，通過(guò)內(nèi)置window和document對(duì)象，來(lái)操作內(nèi)存中的DOM元素

JQuery概念

基于javascript的，同上，提高了代碼的效率

jQuery是什么:

是一個(gè)javascript代碼倉(cāng)庫(kù)，我們稱之為javascript框架。

是一個(gè)快速的簡(jiǎn)潔的javascript框架，可以簡(jiǎn)化查詢DOM對(duì)象、處理事件、制作動(dòng)畫(huà)、處理Ajax交互過(guò)程。

它可以幫我們做什么(有什么優(yōu)勢(shì))

輕量級(jí)、體積小，使用靈巧(只需引入一個(gè)js文件)

強(qiáng)大的選擇器

出色的DOM操作的封裝

出色的瀏覽器兼容性

可靠的事件處理機(jī)制

完善的Ajax

鏈?zhǔn)讲僮?、隱式迭代

方便的選擇頁(yè)面元素(模仿CSS選擇器更精確、靈活)

動(dòng)態(tài)更改頁(yè)面樣式/頁(yè)面內(nèi)容(操作DOM，動(dòng)態(tài)添加、移除樣式)

控制響應(yīng)事件(動(dòng)態(tài)添加響應(yīng)事件)

提供基本網(wǎng)頁(yè)特效(提供已封裝的網(wǎng)頁(yè)特效方法)

快速實(shí)現(xiàn)通信(ajax)

易擴(kuò)展、插件豐富

如何引入JQuery包

引入本地的JQuery

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

使用Google提供的API導(dǎo)入

寫(xiě)第一個(gè)JQUery案例

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

講解$(function(){});

$是jQuery別名。如$()也可jQuery()這樣寫(xiě),相當(dāng)于頁(yè)面初始化函數(shù)，當(dāng)頁(yè)面加載完畢，會(huì)執(zhí)行jQuery()。

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

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

類似于js的window.onload事件函數(shù)，但是ready事件要先于onload事件執(zhí)行

window.onload = function(){};

為方便開(kāi)發(fā)，jQuery簡(jiǎn)化這樣的方法，直接用$()表示

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

執(zhí)行時(shí)機(jī)不同：load需要等外部圖片和視頻等全部加載才執(zhí)行。ready是DOM繪制完畢后執(zhí)行，先與外部文件

用法不同：load只可寫(xiě)一次，ready可以多次

window.onload與$(document).ready()對(duì)比

window.onload		$(document).ready()
執(zhí)行時(shí)機(jī)	必須等網(wǎng)頁(yè)中所有內(nèi)容加載完后(圖片)才執(zhí)行	網(wǎng)頁(yè)中的DOM結(jié)構(gòu)繪制完后就執(zhí)行,可能DOM元素相關(guān)的東西并沒(méi)有加載完
編寫(xiě)個(gè)數(shù)	不能同時(shí)執(zhí)行多個(gè)	能同時(shí)執(zhí)行多個(gè)
簡(jiǎn)化寫(xiě)法	無(wú)	$(document).ready(function(){ //.. }); 推薦寫(xiě)法：$(function(){ });

jQuery有哪些功能(API)：

選擇器

過(guò)濾器

事件

效果

ajax

簡(jiǎn)單的JQuery選擇器：

JQuery基本選擇器（ID選擇器，標(biāo)簽選擇器，類選擇器，通配選擇器和組選擇器5種）

ID選擇器：document.getElementById(id)與$("#id")對(duì)比(改變文字大小)---id唯一，返回單個(gè)元素

標(biāo)簽選擇器：document.getElementsByTagName(tagName)與$("tagname")對(duì)比---多個(gè)標(biāo)簽，返回?cái)?shù)組

類選擇器:$(".className")--多個(gè)classname（改變背景圖片）

通配選擇器：document.getElementsByTagName("*")與$("*")對(duì)比---指范圍內(nèi)的所有標(biāo)簽元素

組選擇器：$("seletor1,seletor2,seletor3")----無(wú)數(shù)量限制，用逗號(hào)分割

初步了解JQuery

JQuery是什么

javascript用來(lái)干什么的：

操作DOM對(duì)象

動(dòng)態(tài)操作樣式css

數(shù)據(jù)訪問(wèn)

控制響應(yīng)事件等

jQuery作用一樣，只是更加快速簡(jiǎn)潔

如何引用JQuery

寫(xiě)第一個(gè)JQUery案例

$()講解

$在JQuery庫(kù)中，$是JQuery的別名，$()等效于就jQuery().

$()是JQuery方法,贊可看作是JQuery的選擇器，與css選擇器相似（可做對(duì)比）

var jQuery==$ =function(){} $()本質(zhì)就是一個(gè)函數(shù)也就是 jQuery的核心函數(shù)

只要是jQuery的對(duì)象都這樣變量加上一個(gè)符號(hào)$ 方便識(shí)別：var $div = $("#")

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

$()和document是相等的嗎

alert(document.getElementById("id") == $("#aa"));//返回結(jié)果為false
alert(document.getElementById("id") == $("#aa").get(0));//返回true

代理對(duì)象$()

jQuery中返回的是代理對(duì)象本身

jQuery的核心原理是通過(guò)選擇器找到對(duì)應(yīng)的代理對(duì)象

jQuery全都是通過(guò)方法操作

樣式選擇器$(".className")

$(".aa").css("color","green");

id選擇器("")

$("#a").css("background-color","#ff0066");

標(biāo)簽選擇器

$("p").css("color","#cc3366");

組選擇器

$("#b ul li").size();

對(duì)象轉(zhuǎn)換($(element))

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

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

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

總結(jié)：三種寫(xiě)法對(duì)比：

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

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

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

方式二：搜索速度最快 鏈?zhǔn)讲僮?/p>

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

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

var $nav = $("#nav").css();

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

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

如果是一個(gè)字符串參數(shù)并且沒(méi)有標(biāo)簽對(duì)（選擇器） $(ul.nav")

如果是一個(gè)字符串參數(shù)并且有標(biāo)簽對(duì)（創(chuàng)建html標(biāo)簽）$("") --最終加到DOM樹(shù)中 $xx.append("");

如果是傳入一個(gè)element dom對(duì)象，直接包裝為proxy對(duì)象返回 $(DOM對(duì)象)

如果第一個(gè)參數(shù)是字符串，第二個(gè)是element dom對(duì)象的話，那么就是在element這個(gè)dom對(duì)象里面尋找選擇器對(duì)應(yīng)的元素并且代理 $("li",$DOM對(duì)象)

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

第二節(jié) 選擇器

來(lái)回顧一下CSS常用的選擇器

選擇器	語(yǔ)法	描述
標(biāo)簽選擇器	E{css規(guī)則}	以文檔元素作為選擇符
ID選擇器	#ID{css規(guī)則}	ID作為選擇符
類選擇器	E.className{css規(guī)則}	class作為選擇符
群組選擇器	E1,E2,E3{css規(guī)則}	多個(gè)選擇符應(yīng)用同樣的樣式
后代選擇器	E F{css規(guī)則}	元素E的任意后代元素F

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

css選擇器的規(guī)則

標(biāo)簽選擇器

id選擇器

類選擇器

混合選擇器

css3的選擇器規(guī)則

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

屬性（[attr=value]）

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

jQuery層級(jí)選擇器----包含選擇器、子選擇器、相鄰選擇器、兄弟選擇器4種

a.包含選擇器：$("a b")在給定的祖先元素下匹配所有后代元素。(不受層級(jí)限制)

b.子選擇器：$("parent > child") 在給定的父元素下匹配所有子元素。

c.相鄰選擇器：$("prev + next") 匹配所有緊接在prev元素后的next元素。

d.兄弟選擇器：$("prev ~ siblings") 匹配prev元素之后的所有sibling元素。

過(guò)濾選擇器

基本過(guò)濾選擇

選擇器	說(shuō)明	返回
:first	匹配找到的第1個(gè)元素	單個(gè)元素
:last	匹配找到的最后一個(gè)元素	單個(gè)元素
:eq	匹配一個(gè)給定索引值的元素	單個(gè)元素
:even	匹配所有索引值為偶數(shù)的元素	集合元素
: odd	匹配所有索引值為奇數(shù)的元素	集合元素
:gt(index)	匹配所有大于給定索引值的元素	集合元素
:lt(index)	匹配所有小于給定索引值的元素	集合元素
:not	去除所有與給定選擇器匹配的元素	集合元素
:animated	選取當(dāng)前正在執(zhí)行動(dòng)畫(huà)的所有元素	集合元素
focus	選取當(dāng)前正在獲取焦點(diǎn)的元素	集合元素

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

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

可見(jiàn)過(guò)濾選擇器

選擇器	描述	返回
:hidden	選擇所有不可見(jiàn)的元素	集合元素
:visible	選取所有可見(jiàn)的元素	集合元素

屬性過(guò)濾選擇器

選擇器	說(shuō)明	返回
[attribute]	選取擁有此屬性的元素	集合元素
[attribute=value]	選取屬性值為value值的元素	集合元素
[attribue^=value]	選取屬性的值以value開(kāi)始的元素	集合元素
[attribue$=value]	選取屬性的值以value結(jié)束的元素	集合元素

子元素過(guò)濾選擇器

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

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

:nth-child(even)選擇每個(gè)父元素下的索引值是偶數(shù)的元素

:nth-child(odd)選擇每個(gè)父元素下的索引值是奇數(shù)的元素

:nth-child(2)選擇每個(gè)父元素下的索引值是2的元素

:nth-child(3n)選擇每個(gè)父元素下的索引值是3的倍數(shù)的元素 (n從1開(kāi)始)

表單對(duì)象屬性過(guò)濾選擇器

選擇器	說(shuō)明	返回
:enabled	選取所有可用元素	集合元素
:disabled	選取所有不可用元素	集合元素
:checked	選取所有被選中的元素（單選框、復(fù)選框）	集合元素
:selected	選取所有被選中的元素（下拉列表）	集合元素

表單選擇器

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

特定位置選擇器

:first

:last

:eq(index)

指定范圍選擇器

:even

:odd

:gt(index)

:lt(index)

排除選擇器

:not 非

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

使用合適的選擇器表達(dá)式可以提高性能、增強(qiáng)語(yǔ)義并簡(jiǎn)化邏輯。常用的選擇器中，ID選擇器速度最快，其次是類型選擇器。

多用ID選擇器

少直接使用class選擇器

多用父子關(guān)系，少用嵌套關(guān)系

緩存jQuery對(duì)象

使用過(guò)濾器

jQuery提供了2種選擇文檔元素的方式：選擇器和過(guò)濾器

類過(guò)慮器：根據(jù)元素的類屬性來(lái)進(jìn)行過(guò)濾操作。

hasClass(className)：判斷當(dāng)前jQuery對(duì)象中的某個(gè)元素是否包含指定類名，包含返回true，不包含返回false

下標(biāo)過(guò)濾器：精確選出指定下標(biāo)元素

eq(index)：獲取第N個(gè)元素。index是整數(shù)值，下標(biāo)從0開(kāi)始

表達(dá)式過(guò)濾器

filter(expr)/(fn)：篩選出與指定表達(dá)式/函數(shù)匹配的元素集合。

功能最強(qiáng)大的表達(dá)式過(guò)濾器，可接收函數(shù)參數(shù)，也可以是簡(jiǎn)單的選擇器表達(dá)式

映射 map(callback)：將一組元素轉(zhuǎn)換成其他數(shù)組

清洗 not(expr)：刪除與指定表達(dá)式匹配的元素

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

查找

向下查找后代元素

children():取得所有元素的所有子元素集合（子元素）

find():搜索所有與指定表達(dá)式匹配的元素(所有后代元素中查找)

查找兄弟元素 siblings()查找當(dāng)前元素的兄弟

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

代理對(duì)象屬性和樣式操作

attr

prop(一般屬性值是boolean的值或者不用設(shè)置屬性值，一般使用)

css(最好不用，一般我用來(lái)做測(cè)試)

addClass / removeClass

操作原生DOM的時(shí)候用的方式：一次只能操作一個(gè)

操作屬性：setAttribute / getAttribute

操作樣式：style.xx = value

操作類樣式：className=""

獲取DOM的子元素children屬性

DOM里面添加一個(gè)子元素appendChild()

操作jQuery代理對(duì)象的時(shí)候：批量操作DOM對(duì)象(全都是通過(guò)方法操作)

操作屬性：attr()、prop()

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

操作樣式：css()

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

操作DOM子元素：children()

添加子元素：append()

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

DOM是一種與瀏覽器、平臺(tái)|語(yǔ)言無(wú)關(guān)的接口，使用該接口可以輕松的訪問(wèn) 頁(yè)面中的所有的標(biāo)準(zhǔn)組件

DOM操作的分類

DOM Core

DOM core并不專屬于JavaScript，任何支持DOM的程序都可以使用

JavaScript 中的getElementByID() getElementsByTagName() getAttribute() setAttribute()等方法都是DOM Core的組成部分

HTML-DOM

HTML -DOM的出現(xiàn)比DOM-Core還要早，它提供一些更簡(jiǎn)明的標(biāo)志來(lái)描述HTML元素的屬性

比如：使用HTML-DOM來(lái)獲取某元素的src屬性的方法

element.src

CSS-DOM

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

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

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

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

$(html)：根據(jù)傳遞的標(biāo)記字符串，創(chuàng)建DOM對(duì)象

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

方法	說(shuō)明
append()	向每個(gè)匹配元素內(nèi)部追加內(nèi)容
appendTo()	顛倒append()的操作
prepend()	向每個(gè)匹配元素的內(nèi)容內(nèi)部前置內(nèi)容
prependTo()	顛倒prepend()的操作
after()	向每個(gè)匹配元素之后插入內(nèi)容
insertAfter()	顛倒after()的操作
before()	在每個(gè)匹配元素之前插入內(nèi)容
insertBefore()	顛倒before()的操作

刪除節(jié)點(diǎn)

jQuery提供了三種刪除節(jié)點(diǎn)的方法 remove() detach() empty()

remove()方法

當(dāng)某個(gè)節(jié)點(diǎn)用此方法刪除后，該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時(shí)被刪除，用remove()方法刪除后，還是可以繼續(xù)使用刪除后的引用

detach()

和remove()方法一樣，也是從DOM中去掉所有匹配的元素，與remove()不同的是，所有綁定的事件、附加的數(shù)據(jù)等，都會(huì)被保留下來(lái)

empty()

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

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

使用clone()方法來(lái)完成

在clone()方法中傳遞一個(gè)參數(shù)true，同時(shí)復(fù)制元素中所綁定的事件

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

jQuery提供相應(yīng)的方法 replaceWidth()

樣式操作

獲取樣式和設(shè)置樣式 attr()

追加樣式 addClass()

移除樣式 removeClass()

切換樣式

toggle()方法只要是控制行為上的重復(fù)切換（如果元素是顯示的，則隱藏；如果元素原來(lái)是隱藏的，則顯示）

toggleClass()方法控制樣式上的重復(fù)切換（如何類名存在，則刪除它，如果類名不存在，則添加它）

判斷是否含有某個(gè)樣式

hasClass()可以用來(lái)判斷元素是否含有某個(gè)class,如有返回true 該方法等價(jià)于is()

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

html()

此方法類似JavaScript中innerHTML屬性，可以用來(lái)讀取和設(shè)置某個(gè)元素中的HTML內(nèi)容

text()方法

此方法類型JavaScript中innerHTML，用來(lái)讀取和設(shè)置某個(gè)元素中的文本內(nèi)容

val()方法

此方法類似JavaScript中的value屬性，用來(lái)設(shè)置獲取元素的值。無(wú)論是文本框、下拉列表還是單選框，都可以返回元素的值，如果元素多選，返回一個(gè)包含所有選擇的值的數(shù)組

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

children()方法

該方法用來(lái)取得匹配元素的子元素集合

childre()方法只考慮子元素而不考慮其他后代元素

next()方法

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

prev()方法

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

siblings()方法

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

parent()方法

獲得集合中每個(gè) 元素的父級(jí)元素

parents()方法

獲得集合中每個(gè)元素的祖先元素

CSS DOM操作

CSS DOM技術(shù)簡(jiǎn)單的來(lái)說(shuō)就是讀取和設(shè)置style對(duì)象的各種屬性

用css()方法獲取元素的樣式屬性，可以同時(shí)設(shè)置多個(gè)樣式屬性

CSS DOM中關(guān)于元素定位有幾個(gè)常用的方法

offset()方法

它的作用是獲取元素在當(dāng)前視窗的相對(duì)偏移其中返回的對(duì)象包含兩個(gè)屬性，即top和left，他只對(duì)可見(jiàn)元素有效

position()方法

獲取相對(duì)于最近的一個(gè)position()樣式屬性設(shè)置為relative或者absolute的祖父節(jié)點(diǎn)的相對(duì)偏移，與offset()一樣，他返回的對(duì)象也包括兩個(gè)屬性，即top和left

scrollTop()方法和scrollLeft方法

這兩個(gè)方法的作用分別是獲取元素的滾動(dòng)條距頂端的距離和距左側(cè)的距離

一張圖總結(jié)以上的位置關(guān)系(項(xiàng)目中很常用-必須要弄清楚)

第六節(jié) jQuery動(dòng)畫(huà)

回顧上節(jié)

操作DOM

a.什么是DOM：Document Object Model縮寫(xiě)，文檔對(duì)象模型

b.理解頁(yè)面的樹(shù)形結(jié)構(gòu)

c.什么是節(jié)點(diǎn)：是DOM結(jié)構(gòu)中最小單元，包括元素、屬性、文本、文檔等。

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

1.創(chuàng)建元素

語(yǔ)法：document.createElement(name);

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

$(html)：根據(jù)傳遞的標(biāo)記字符串，創(chuàng)建DOM對(duì)象

2.創(chuàng)建文本

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

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

3.設(shè)置屬性

語(yǔ)法：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 = = $("
DOM
");
$(body).append($div);

二、插入內(nèi)容

內(nèi)部插入

向元素最后面插入節(jié)點(diǎn)：

append():向每個(gè)匹配的元素內(nèi)部追加內(nèi)容

appendTo():把所有匹配的元素追加到指定元素集合中，$("A").append("B") 等效 $("B").appendTo("A")

向元素最前面插入節(jié)點(diǎn)：

prepend（）：把每個(gè)匹配的元素內(nèi)部前置內(nèi)容

prependTo（）：把所有匹配的元素前置到另一個(gè)指定的元素集合中,$("A").prepend("B") 等效 $("B").prependTo("A")

外部插入

after():在每個(gè)匹配的元素之后插入內(nèi)容

before()：在每個(gè)匹配想元素之前插入內(nèi)容

insertAfter()：將所有匹配的元素插入到另一個(gè)指定的元素集合后面，$A.insert($B) 等效 $B.insertAfter($A);

insertBefore()：將所有匹配的元素插入到另一個(gè)指定的元素集合前面 $A.before($B) 等效 $B.insertBefore($A);

三、刪除內(nèi)容

移除

remove():從DOM中刪除所有匹配元素

清空

empty():刪除匹配的元素集合中所有子節(jié)點(diǎn)內(nèi)容

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

clone()

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

五、替換內(nèi)容

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

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

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

本節(jié)新知識(shí)

JavaScript語(yǔ)言本身不支持動(dòng)畫(huà)設(shè)計(jì)，必須通過(guò)改變CSS來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果

顯隱動(dòng)畫(huà)

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

原理：hide()通過(guò)改變?cè)氐母叨葘挾群筒煌该鞫?，直到這三個(gè)屬性值到0

show()從上到下增加元素的高度，從左到右增加元素寬度，從0到1增加透明度，直至內(nèi)容完全可見(jiàn)

參數(shù)：

show(speed,callback)

speed: 字符串或數(shù)字，表示動(dòng)畫(huà)將運(yùn)行多久（slow=0.6/normal=0.4/fast=0.2）

callback: 動(dòng)畫(huà)完成時(shí)執(zhí)行的方法

顯示和隱藏式一對(duì)密不可分的動(dòng)畫(huà)形式

顯隱切換

toggle():切換元素的可見(jiàn)狀態(tài)

原理：匹配元素的寬度、高度以及不透明度，同時(shí)進(jìn)行動(dòng)畫(huà)，隱藏動(dòng)畫(huà)后將display設(shè)置為none

參數(shù)：

toggle(speed)

toggle(speed,callback)

toggle(boolean)

speed: 字符串或數(shù)字，表示動(dòng)畫(huà)將運(yùn)行多久（slow=0.6/normal=0.4/fast=0.2）

easing： 使用哪個(gè)緩沖函數(shù)來(lái)過(guò)渡的字符串(linear/swing)

callback： 動(dòng)畫(huà)完成時(shí)執(zhí)行的方法

boolean:true為顯示 false為隱藏

滑動(dòng)

顯隱滑動(dòng)效果

slideDown():滑動(dòng)隱藏

slidUp():滑動(dòng)顯示

參數(shù):

slideDown(speed,callback)

slidUp(speed,callback)

顯隱切換滑動(dòng)

slideToggle():顯隱滑動(dòng)切換

參數(shù):

slidUp(speed,callback)

漸變：通過(guò)改變不透明度

淡入淡出

fadeIn()

fadeOut()

參數(shù)：

fadeIn(speed,callback)

fadeOut(speed,callback)

設(shè)置淡出透明效果

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

參數(shù)：

fadeTo(speed,opacity,callback)

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

fadeToggle()

參數(shù):

fadeOut(speed,callback)

自定義動(dòng)畫(huà)：animate()

注意：在使用animate方法之前，為了影響該元素的top left bottom right樣式屬性，必須先把元素的position樣式設(shè)置為relative或者absolute

停止元素的動(dòng)畫(huà)

很多時(shí)候需要停止匹配正在進(jìn)行的動(dòng)畫(huà)，需要使用stop()

stop()語(yǔ)法結(jié)構(gòu)：stop([clearQueue],[gotoEnd]);

都是可選參數(shù)，為布爾值

如果直接使用stop()方法，會(huì)立即停止當(dāng)前正在進(jìn)行的動(dòng)畫(huà)

判斷元素是否處于動(dòng)畫(huà)狀態(tài)

如果不處于動(dòng)畫(huà)狀態(tài)，則為元素添加新的動(dòng)畫(huà)，否則不添加
if(!$(element).is(":animated")){ //判斷元素是否處于動(dòng)畫(huà)狀態(tài)}

這個(gè)方法在animate動(dòng)畫(huà)中經(jīng)常被用到，需要注意

延遲動(dòng)畫(huà)

在動(dòng)畫(huà)執(zhí)行過(guò)程中，如果你想對(duì)動(dòng)畫(huà)進(jìn)行延遲操作，那么使用delay()

用animate模擬show():

show: 表示由透明到不透明

toggle: 切換

hide:表示由顯示到隱藏

動(dòng)畫(huà)方法總結(jié)

方法名	說(shuō)明
hide()和show()	同時(shí)修改多個(gè)樣式屬性即高度和寬度和不透明度
fadeIn()和fadeOut()	只改變不透明度
slideUp()和slideDown()	只改變高度
fadeTo()	只改變不透明度
toggle()	用來(lái)代替show()和hide()方法，所以會(huì)同時(shí)修改多個(gè)屬性即高度、寬度和不透明度
slideToggle()	用來(lái)代替slideUp和slideDown()方法，所以只能改變高度
fadeToggle()	用來(lái)代替fadeIn()和fadeOut方法，只能改變不透明度
animate()	屬于自定義動(dòng)畫(huà)，以上各種動(dòng)畫(huà)方法都是調(diào)用了animate方法。此外，用animate方法還能自定義其他的樣式屬性，例如：left marginLeft `scrollTop`等

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

事件對(duì)象的屬性

event.type：獲取事件的類型

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

event.preventDefault方法 阻止默認(rèn)事件行為

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

keyCode：只針對(duì)于keypress事件，獲取鍵盤(pán)鍵數(shù)字 按下回車，13

event.pageX / event.pageY 獲取到光標(biāo)相對(duì)于頁(yè)面的x坐標(biāo)和y坐標(biāo)

如果沒(méi)有jQuery，在IE瀏覽器中用event.x / event.y;在Firefox瀏覽器中用event.pageX / event.pageY。如果頁(yè)面上有滾動(dòng)條還要加上滾動(dòng)條的寬度和高度

event.clientX：光標(biāo)對(duì)于瀏覽器窗口的水平坐標(biāo) 瀏覽器

event.clientY：光標(biāo)對(duì)于瀏覽器窗口的垂直坐標(biāo)

event.screenX：光標(biāo)對(duì)于電腦屏幕的水平坐標(biāo) 電腦屏幕

event.screenY：光標(biāo)對(duì)于電腦屏幕的水平坐標(biāo)

event.which 該方法的作用是在鼠標(biāo)單擊事件中獲取到鼠標(biāo)的左、中、右鍵，在鍵盤(pán)事件中的按鍵 1代表左鍵 2代表中鍵 3代表右鍵

事件冒泡

什么是冒泡

在頁(yè)面上可以有多個(gè)事件，也可以多個(gè)元素影響同一個(gè)元素

從里到外

嵌套關(guān)系

相同事件

其中的某一父類沒(méi)有相同事件時(shí),繼續(xù)向上查找

停止事件冒泡

停止事件冒泡可以阻止事件中其他對(duì)象的事件處理函數(shù)被執(zhí)行

在jQuery中提供了stopPropagation()方法

阻止默認(rèn)行為

網(wǎng)頁(yè)中元素有自己的默認(rèn)行為，例如：?jiǎn)螕舫溄雍髸?huì)跳轉(zhuǎn)、單擊提交后表單會(huì)提交，有時(shí)需要阻止元素的默認(rèn)行為

在jQuery中提供了 preventDefault()方法來(lái)阻止元素的默認(rèn)行為

事件捕獲

事件捕獲和冒泡是相反的過(guò)程，事件捕獲是從最頂端往下開(kāi)始觸發(fā)

并非所有的瀏覽器都支持事件捕獲，并且這個(gè)缺陷無(wú)法通過(guò)JavaScript來(lái)修復(fù)。jQuery不支持事件捕獲，如需要用事件捕獲，要用原生的JavaScript

bind();綁定

為匹配元素綁定處理方法

需要給一個(gè)元素添加多個(gè)事件 ，事件執(zhí)行一樣時(shí)候

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

綁定特定事件類型方法：

|分類|方法名稱|說(shuō)明|

頁(yè)面載入	ready(fn)	當(dāng)DOM載入就緒可以綁定一個(gè)要執(zhí)行的函數(shù)
事件綁定	blind(type,[data],fn)	為每個(gè)匹配元素的特定事件綁定一個(gè)事件處理函數(shù)
事件綁定	unblind()	解除綁定
事件綁定	on(events,[,selector[,]data],handler)	在選擇元素上綁定一個(gè)或者多個(gè)事件處理函數(shù)
事件綁定	off()	移除on綁定的事件
事件綁定	delegate(selector,eventType,handler)	為所有選擇匹配元素附加一個(gè)或多個(gè)事件處理函數(shù)
事件綁定	undelegate()	移除綁定
事件動(dòng)態(tài)	live(type,fn)	對(duì)動(dòng)態(tài)生成的元素進(jìn)行事件綁定
事件動(dòng)態(tài)	die(type,fn)	移除live()綁定的事件
交互事件	hover()	鼠標(biāo)移入移出
交互事件	toggle(fn1,fn2,[fn3],[fn4])	每單擊后依次調(diào)用函數(shù)
交互事件	blur(fn)	觸發(fā)每一個(gè)匹配元素的blur事件
交互事件	change()	觸發(fā)每一個(gè)匹配元素的change事件
交互事件	click()	觸發(fā)每一個(gè)匹配元素的click事件
交互事件	focus()	觸發(fā)每一個(gè)匹配元素的focus事件
交互事件	submit()	觸發(fā)每一個(gè)匹配元素的submit事件
鍵盤(pán)事件	keydown()	觸發(fā)每一個(gè)匹配元素的keydown事件
鍵盤(pán)事件	keypress()	觸發(fā)每一個(gè)匹配元素的keypress事件
鍵盤(pán)事件	keyup()	觸發(fā)每一個(gè)匹配元素的keyup事件
鼠標(biāo)事件	mousedown(fn)	綁定一個(gè)處理函數(shù)
鼠標(biāo)事件	mouseenter(fn)	綁定一個(gè)處理函數(shù)
鍵盤(pán)事件	mouseleave(fn)	綁定一個(gè)處理函數(shù)
鍵盤(pán)事件	mouseout(fn)	綁定一個(gè)處理函數(shù)
鍵盤(pán)事件	mouseover(fn)	綁定一個(gè)處理函數(shù)
窗口操作	resize(fn)	綁定一個(gè)處理函數(shù)
窗口操作	scroll(fn)	綁定一個(gè)處理函數(shù)

第八節(jié) jQuery與Ajax

Ajax簡(jiǎn)介 :

Asynchronous Javascript And XML （異步的
JavaScript和XML）

它并不是一種單一的技術(shù)，而是有機(jī)利用一系列交互式網(wǎng)頁(yè)應(yīng)用相關(guān)的技術(shù)所形成的結(jié)合體

Ajax優(yōu)勢(shì)與不足

Ajax優(yōu)勢(shì)

優(yōu)秀的用戶體驗(yàn)

這是Ajax下最大的有點(diǎn)，能在不刷新整個(gè)頁(yè)面前提下更新數(shù)據(jù)

提高web程序的性能

與傳統(tǒng)模式相比，Ajax模式在性能上最大的區(qū)別在于傳輸數(shù)據(jù)的方式，在傳統(tǒng)模式中，數(shù)據(jù)的提交時(shí)通過(guò)表單來(lái)實(shí)現(xiàn)的。Ajax模式只是通過(guò)XMLHttpRequest對(duì)象向服務(wù)器提交希望提交的數(shù)據(jù)，即按需發(fā)送

減輕服務(wù)器和帶寬的負(fù)擔(dān)

Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了一個(gè)中間層，似用戶操作與服務(wù)器響應(yīng)異步化。它在客戶端創(chuàng)建Ajax引擎，把傳統(tǒng)方式下的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)移到客戶端，便于客戶端資源來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)

Ajax的不足

瀏覽器對(duì)XMLHttpRequest對(duì)象的支持度不足

破壞瀏覽器前進(jìn)、后退按鈕的正常功能

對(duì)搜索引擎的支持的不足

開(kāi)發(fā)和調(diào)試工具的缺乏

創(chuàng)建一個(gè)Ajax請(qǐng)求

Ajax的核心是XMLHttpRequest對(duì)象，它是Ajax實(shí)現(xiàn)的關(guān)鍵，發(fā)送異步請(qǐng)求、接受響應(yīng)以及執(zhí)行回調(diào)都是通過(guò)它來(lái)完成

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

準(zhǔn)備發(fā)送請(qǐng)求

get / post

get

傳遞的數(shù)據(jù)放在URL后面

中文編碼 encodeURI( "" );

緩存 在數(shù)據(jù)后面加上隨機(jī)數(shù)或者日期對(duì)象或者……

post

傳遞的數(shù)據(jù)放在send()里面，并且一定要規(guī)定數(shù)據(jù)格式

沒(méi)有緩存問(wèn)題

form表單中:

action:

method: (默認(rèn)是 get)

get: 會(huì)在url里面以 name=value , 兩個(gè)數(shù)據(jù)之間用 & 連接

post:

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

url

是否異步

同步(false)：阻塞

異步(true)：非阻塞

正式發(fā)送請(qǐng)求

ajax請(qǐng)求處理過(guò)程

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

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

readyState ：ajax處理過(guò)程

0：請(qǐng)求未初始化（還沒(méi)有調(diào)用 open()）。

1：請(qǐng)求已經(jīng)建立，但是還沒(méi)有發(fā)送（還沒(méi)有調(diào)用 send()）。

2：請(qǐng)求已發(fā)送，正在處理中（通常現(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。

3：請(qǐng)求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒(méi)有完成響應(yīng)的生成。

4：響應(yīng)已完成；您可以獲取并使用服務(wù)器的響應(yīng)了。

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

status : http狀態(tài)碼

案例：ajax封裝案例

//ajax請(qǐng)求后臺(tái)數(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請(qǐng)求
    ajx.open( type , url , asyn );
    //規(guī)定傳輸數(shù)據(jù)的格式
    ajx.setRequestHeader("content-type","application/x-www-form-urlencoded");
    //發(fā)送ajax請(qǐng)求（包括post數(shù)據(jù)的傳輸）
    type == "get" ?ajx.send():ajx.send(aJson.data);
    
    //處理請(qǐng)求
    ajx.onreadystatechange = function(aJson){
        
    if(ajx.readState == 4){
            
        if (ajx.status == 200 && ajx.status<300)//200是HTTP 請(qǐng)求成功的狀態(tài)碼
        {
            //請(qǐng)求成功處理數(shù)據(jù)
            success && success(ajx.responseText);
        }else{
            alert("請(qǐng)求出錯(cuò)"+ajx.status);
            
        }
    }
        
    };

jQuery中的Ajax [補(bǔ)充部分--來(lái)自鋒利的jQuery]

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

load()方法

load()方法是jquery中最簡(jiǎn)單和常用的ajax方法，能載入遠(yuǎn)程HTML代碼并插入DOM中 結(jié)構(gòu)為：load(url,[data],[callback])

使用url參數(shù)指定選擇符可以加載頁(yè)面內(nèi)的某些元素 load方法中url語(yǔ)法：url selector 注意：url和選擇器之間有一個(gè)空格

傳遞方式

load()方法的傳遞方式根據(jù)參數(shù)data來(lái)自動(dòng)指定，如果沒(méi)有參數(shù)傳遞，則采用GET方式傳遞，反之，采用POST

回調(diào)參數(shù)

必須在加載完成后才執(zhí)行的操作，該函數(shù)有三個(gè)參數(shù) 分別代表請(qǐng)求返回的內(nèi)容、請(qǐng)求狀態(tài)、XMLHttpRequest對(duì)象

只要請(qǐng)求完成，回調(diào)函數(shù)就會(huì)被觸發(fā)

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

load方法參數(shù)

參數(shù)名稱	類型	說(shuō)明
url	String	請(qǐng)求HTML頁(yè)面的URL地址
data(可選)	Object	發(fā)送至服務(wù)器的key / value數(shù)據(jù)
callback(可選)	Function	請(qǐng)求完成時(shí)的回調(diào)函數(shù)，無(wú)論是請(qǐng)求成功還是失敗

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

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

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

$.get()方法

$.get()方法使用GET方式來(lái)進(jìn)行異步請(qǐng)求

結(jié)構(gòu)為：$.get(url,[data],callback,type)

如果服務(wù)器返回的內(nèi)容格式是xml文檔，需要在服務(wù)器端設(shè)置Content-Type類型 代碼如下：header("Content-Type:text/xml:charset=utf-8") //php

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

參數(shù)	類型	說(shuō)明
url	String	請(qǐng)求HTML頁(yè)的地址
data(可選)	Object	發(fā)送至服務(wù)器的key/ value 數(shù)據(jù)會(huì)作為QueryString附加到請(qǐng)求URL中
callback(可選)	Function	載入成功的回調(diào)函數(shù)（只有當(dāng)Response的返回狀態(tài)是success才調(diào)用該方法）
type(可選)	String	服務(wù)器返回內(nèi)容的格式，包括xml、html、script、json、text和_default

$.post()方法

它與$.get()方法的結(jié)構(gòu)和使用方式相同，有如下區(qū)別

GET請(qǐng)求會(huì)將參數(shù)跟張乃URL后進(jìn)行傳遞，而POST請(qǐng)求則是作為Http消息的實(shí)體內(nèi)容發(fā)送給web服務(wù)器，在ajax請(qǐng)求中，這種區(qū)別對(duì)用戶不可見(jiàn)

GET方式對(duì)傳輸數(shù)據(jù)有大小限制（通常不能大于2KB），而使用POST方式傳遞的數(shù)據(jù)量要比GET方式大得多（理論不受限制）

GET方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來(lái)，因此其他人可以從瀏覽器的歷史紀(jì)錄中讀取這些數(shù)據(jù)，如：賬號(hào)、密碼。在某種情況下，GET方式會(huì)帶來(lái)嚴(yán)重的安全問(wèn)題，而POST相對(duì)來(lái)說(shuō)可以避免這些問(wèn)題

GET和POST方式傳遞的數(shù)據(jù)在服務(wù)端的獲取也不相同。在PHP中，GET方式用$_GET[]獲??；POST方式用$_POST[]獲取;兩種方式都可用$_REQUEST[]來(lái)獲取

總結(jié)

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

$.ajax()方法

$.ajax()方法是jquery最底層的Ajax實(shí)現(xiàn)，它的結(jié)構(gòu)為$.ajax(options)

該方法只有一個(gè)參數(shù)，但在這個(gè)對(duì)象里包含了$.ajax()方式所需要的請(qǐng)求設(shè)置以及回調(diào)函等信息，參數(shù)以key / value存在，所有參數(shù)都是可選的

$.ajax()方式常用參數(shù)解析

參數(shù)	類型	說(shuō)明
url	String	(默認(rèn)為當(dāng)前頁(yè)地址)發(fā)送請(qǐng)求的地址
type	String	請(qǐng)求方式（POST或GET）默認(rèn)為GET
timeout	Number	設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）
dataType	String	預(yù)期服務(wù)器返回的類型。可用的類型如下 xml:返回XML文檔，可用jquery處理 html:返回純文本的HTML信息，包含的script標(biāo)簽也會(huì)在插入DOM時(shí)執(zhí)行 script：返回純文本的javascript代碼。不會(huì)自動(dòng)緩存結(jié)果，除非設(shè)置cache參數(shù)。注意：在遠(yuǎn)程請(qǐng)求時(shí)，所有的POST請(qǐng)求都將轉(zhuǎn)為GET請(qǐng)求 json:返回JSON數(shù)據(jù) jsonp:JSONP格式，使用jsonp形式調(diào)用函數(shù)時(shí)，例如：myurl?call back=?,jquery將自動(dòng)替換后一個(gè)？為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù) text:返回純文本字符串
beforeSend	Function	發(fā)送請(qǐng)求前可以修改XMLHttpRequest對(duì)象的函數(shù)，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次Ajax請(qǐng)求。XMLHttpRequest對(duì)象是唯一的參數(shù) function(XMLHttpRequest){ ?????????this;//調(diào)用本次Ajax請(qǐng)求時(shí)傳遞的options參數(shù) }
complete	Function	請(qǐng)求完成后的回調(diào)函數(shù)（請(qǐng)求成功或失敗時(shí)都調(diào)用） 參數(shù)：XMLHttpRequest對(duì)象和一個(gè)描述成功請(qǐng)求類型的字符串 function(XMLHttpRequest,textStatus){ ?????????this;//調(diào)用本次Ajax請(qǐng)求時(shí)傳遞的options參數(shù) }
success	Function	請(qǐng)求成功后調(diào)用的回調(diào)函數(shù)，有兩個(gè)參數(shù) (1)由服務(wù)器返回，并根據(jù)dataTyppe參數(shù)進(jìn)行處理后的數(shù)據(jù) (2)描述狀態(tài)的字符串 function(data,textStatus){ ?????????//data可能是xmlDoc、`jsonObj、html、text等          this;//調(diào)用本次Ajax請(qǐng)求時(shí)傳遞的options`參數(shù) }
error	Function	請(qǐng)求失敗時(shí)被調(diào)用的函數(shù)
global	Boolean	默認(rèn)為true。表示是否觸發(fā)全局Ajax事件，設(shè)置為false將不會(huì)觸發(fā)。AjaxStart或AjaxStop可用于控制各種Ajax事件

第九節(jié) 插件

什么是插件

插件(Plugin)也稱為jQuery的擴(kuò)展。以jQuery核心代碼為基礎(chǔ)編寫(xiě)的符合一定規(guī)范的應(yīng)用程序。通過(guò)js文件的方式引用。

插件分為哪幾類

UI類、表單及驗(yàn)證類、輸入類、特效類、Ajax類、滑動(dòng)類、圖形圖像類、導(dǎo)航類、綜合工具類、動(dòng)畫(huà)類等等

引入插件的步驟

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

引入插件

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

如何自定義插件：

插件形式分為3類：

封裝對(duì)象方法插件

封裝全局函數(shù)插件

選擇器插件(類似于.find())

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

命名：jquery.插件名.js

所有的新方法附加在jquery.fn對(duì)象上面，所有新功能附加在jquery上

所有的方法或插件必須用分號(hào)結(jié)尾，避免出問(wèn)題

插件必須返回jQuery對(duì)象，便于鏈?zhǔn)竭B綴

避免插件內(nèi)部使用$，如果要使用，請(qǐng)傳遞jQuery($并不是總等于jQuery，另外其他js框架也可能使用$)

插件中的this應(yīng)該指向jQuery對(duì)象

使用this.each()迭代元素

自定義插件案例

為了方便用戶創(chuàng)建插件，jQuery提供了 jQuery.extend() 和 jQuery.fn.extend()

jQuery.extend()：創(chuàng)建工具函數(shù)或者是選擇器

jQuery.fn.extend()：創(chuàng)建jQuery對(duì)象命令 （fn相當(dāng)于prototype的別名）

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

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

        this.each(function(){
            //實(shí)現(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各個(gè)版本新增的一些常用的方法

jQuery1.3新增常用的方法

方法	說(shuō)明
.closest()	從元素本身開(kāi)始，逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素
die()	從元素中刪除先前用live()方法綁定的所有的事件
live()	附加一個(gè)事件處理器到符合目前選擇器的所有元素匹配

jQuery1.4新增常用的方法

方法	說(shuō)明
.first()	獲取集合中第一個(gè)元素
last()	獲取集合中最后一個(gè)元素
has(selector)	保留包含特定后代的元素，去掉那些不含有指定后代的元素
detach()	從DOM中去掉所有匹配的元素。detach()和remov()一樣，除了detach()保存了所有jquery數(shù)據(jù)和被移走的元素相關(guān)聯(lián)。當(dāng)需要移走一個(gè)元素，不久又將該元素插入DOM時(shí)，這種方法很有用
delegate()	為所有選擇器匹配的元素附加一個(gè)處理一個(gè)或多個(gè)事件
undelegate()	為所有選擇器匹配的元素刪除一個(gè)處理一個(gè)或多個(gè)事件

jQuery1.6新增常用的方法

方法	說(shuō)明
prop(proptyName)	獲取在匹配元素集合中的第一個(gè)元素的屬性值
removeProp(proptyName,value)	為匹配的元素刪除設(shè)置的屬性
:focus	選擇當(dāng)前獲取焦點(diǎn)的元素

附錄二 jQuery性能優(yōu)化

性能優(yōu)化

使用最新版的jQuery類庫(kù)

使用合適的選擇器

$(#id)

使用id來(lái)定位DOM元素是最佳的方式，為了提高性能，建議從最近的ID元素開(kāi)始往下搜索

$("p") , $("div") , $("input")

標(biāo)簽選擇器性能也不錯(cuò)，它是性能優(yōu)化的第二選擇。因?yàn)?b>jQuery將直接調(diào)用本地方法document.getElementsByTagName()來(lái)定位DOM元素

$(".class")

建議有選擇性的使用

$("[attribute=value]")

對(duì)這個(gè)利用屬性定位DOM元素，本地JavaScript并沒(méi)有直接實(shí)現(xiàn)。這種方式性能并不是很理想。建議避免使用。

$(":hidden")

和上面利用屬性定位DOM方式類似，建議盡量不要使用

注意的地方

盡量使用ID選擇器

盡量給選擇器指定上下文

緩存對(duì)象

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

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

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

事件代理

每一個(gè)JavaScript事件（如：click、mouseover）都會(huì)冒泡到父級(jí)節(jié)點(diǎn)。當(dāng)我們需要給多個(gè)元素調(diào)用同個(gè)函數(shù)時(shí)這點(diǎn)很有用。比如，我們要為一個(gè)表單綁定這樣的行為：點(diǎn)擊td后，把背景顏色設(shè)置為紅色

$("#myTable td").click(function(){$(this).css("background","red");});

假設(shè)有100個(gè)td元素，在使用以上的方式時(shí)，綁定了100個(gè)事件，將帶來(lái)性能影響

代替這種多元素的事件監(jiān)聽(tīng)方法是，你只需向他們的父節(jié)點(diǎn)綁定一次事件，然后通過(guò)event.target獲取到點(diǎn)擊的當(dāng)前元素

$("#myTable td").click(function({$(e.target).css("background","red")});

e.target捕捉到觸發(fā)的目標(biāo)

在jQuery1.7中提供了一個(gè)新的方法on()，來(lái)幫助你將整個(gè)事件監(jiān)聽(tīng)封裝到一個(gè)便利的方法中

$("#myTable td").on("click","td",function(){$(this).css("background","red");});

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

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

使用join()方法來(lái)拼接字符串

也許你之前使用+來(lái)拼接字符串，現(xiàn)在可以改了。它確實(shí)有助于性能優(yōu)化，尤其是長(zhǎng)字符串處理的時(shí)候

合理使用HTML5和Data屬性

HTML5的data屬性可以幫助我們插入數(shù)據(jù)，特別是后端的數(shù)據(jù)交換。jQuery的Data()方法有效利用HTML5的屬性

例如：

相關(guān)文章

• 前端相關(guān)大雜燴

  摘要：希望幫助更多的前端愛(ài)好者學(xué)習(xí)。前端開(kāi)發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開(kāi)發(fā)工程師當(dāng)你問(wèn)起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒(méi)有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單 原文地址：Learning React.js is easier than you think 原文作...

  fuyi501 2019-08-22 13:46 評(píng)論0 收藏0

• 前端文檔收集

  摘要：系列種優(yōu)化頁(yè)面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁(yè)性能管理詳解離線緩存簡(jiǎn)介系列編寫(xiě)高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問(wèn)性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁(yè)面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁(yè)性能管理詳解 HTML5 ...

  jsbintask 2019-08-21 12:05 評(píng)論0 收藏0

• 前端文檔收集

  摘要：系列種優(yōu)化頁(yè)面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁(yè)性能管理詳解離線緩存簡(jiǎn)介系列編寫(xiě)高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問(wèn)性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁(yè)面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁(yè)性能管理詳解 HTML5 ...

  muddyway 2019-08-29 13:21 評(píng)論0 收藏0

• 個(gè)人分享--web前端學(xué)習(xí)資源分享

  摘要：前言月份開(kāi)始出沒(méi)社區(qū)，現(xiàn)在差不多月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開(kāi)始出沒(méi)社區(qū)，現(xiàn)在差不多9月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...

  sherlock221 2019-08-20 18:59 評(píng)論0 收藏0

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論