1.JQuery 基礎(chǔ)

改變web開發(fā)人員創(chuàng)造搞交互性界面的方式渣磷。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。

1.2不唐突的JS

1.2.1行為和結(jié)構(gòu)分離

? ? 分為組織結(jié)構(gòu)、樣式杭跪、行為三部分。

? ? 任何存在與HTML頁面內(nèi)部的JS代碼都是錯誤的驰吓。

1.3.1 JQuery包裝器

? ? 為了使設(shè)計和內(nèi)容分離而把CSS引入Web技術(shù)時涧尿，需要以某種方法從外部樣式表中引用頁面中的元素組。這種方法就是選擇器檬贰。它可以根據(jù)元素的類型姑廉、特性或者元素在HTML文檔中的位置來精確地描述元素。

$()返回特殊的JS對象偎蘸，它包含與選擇器相匹配的DOM元素數(shù)組庄蹋，這個數(shù)組中的元素是按照在文檔中的順序排列的。

這種構(gòu)造方法成為包裝器迷雪，因為它包裝了收集到的元素并添加了擴展器

$()函數(shù)叫包裝器限书。來指這些可以通過JQuery定義的方法操作的含有匹配元素的集合。

包裝器方法：當(dāng)執(zhí)行完畢后會返回相同的一組元素章咧。

作用鏈可以無限連續(xù)倦西。可以把包裝器返回的JS對象當(dāng)作普通數(shù)組赁严。

html()方法：用一些HTML標(biāo)記替換DOM元素的內(nèi)容扰柠。

1.3.2 實用函數(shù)

? ? $()另一作用是 作為一些通用實用函數(shù)集的命名空間前綴粉铐。

? ? ? ? 如 $.trim(someString);

1.3.3 文檔就緒處理程序

onload（）方法，在創(chuàng)建完DOM樹卤档，而且在所有外部資源全部加載完畢蝙泼，并且整個頁面在瀏覽器窗口中顯示完畢后。

使用JQuery的方法：在DOM樹加載完畢立即觸發(fā)腳本執(zhí)行劝枣。 可以多次調(diào)用汤踏，會根據(jù)頁面中的聲明順序依次調(diào)用這些函數(shù)。

$(document).ready(function(){

});

1.3.4 創(chuàng)建DOM元素

? ? 可以通過向$()函數(shù)傳遞一個包含HTML標(biāo)記的字符串動態(tài)創(chuàng)建DOM元素舔腾。

? ? $("

hello

").insertAfter('#id');

1.3.5? 擴展JQuery

? ? JQuery包裝器提供了大量有用的方法溪胶，可以反復(fù)使用。同樣可以自己定制稳诚。

? ? 編寫函數(shù)來填補哗脖。

$.fn.disable=function(){

? ? return this.each(function(){

? ? if(this.disabled !=null ) this.disable=true;

});

}

? ? $.fn.disable表示使用disable方法擴展$包裝器。

? ? each()遍歷每個匹配元素扳还。

1.3.6 JQuery與其它庫共存

? ? $.noConflict();

選擇要操作的元素

2.1選擇被操作的元素

? ? $('li')

2.1.1控制上下文

? ? $(selector,'div#sampleDOM') 第二個參數(shù)為context(上下文)才避，指明要搜索的部分，默認(rèn)為整個DOM樹

2.1.2 使用基本CSS選擇器

? ? $("p a.spcialClass");

2.1.3使用子節(jié)點普办、容器和特性選擇器

? ? 子節(jié)點：ul.myList >li >a

? ? 特性選擇器：? a[attr='']

? ? ? ? ? ? ? ? a[attr^='http']? 以http開頭

? ? ? ? ? ? ? ? a[attr$='.pdf']? 以.pdf結(jié)尾

? ? ? ? ? ? ? ? a[attr*='jquery'] 查找特性值包含任意指定字符串的元素

2.1.4 通過位置選擇元素

? ? a:first 第一個

? ? a:odd 奇數(shù)元素

? ? a:even 偶數(shù)

? ? ul li:last-child

:contains('content') 包含content的節(jié)點? contains(text) :匹配包含給定文本的元素

:has(selector):匹配含有選擇器所匹配的元素的元素

CSS將上面的選擇器稱偽類工扎。JQuery稱之為過濾器。以冒號開頭衔蹲。

nth-child 從1開始計數(shù)肢娘。其它從0開始。

2.1.5 使用CSS和自定義的jQuery過濾選擇器

? ? 1.not 過濾器

? ? $('img:not([src*='dog'])')

2.has過濾器? ? 根據(jù)子節(jié)點選擇父節(jié)點

$('tr:has(img[src$='puppy.jpg'])')

2.2創(chuàng)建新的HTML

? ? 第二個參數(shù)指定特性和特性值

? ? $('

',

? ? ? ? src:'img/image.png',

? ? ? ? click:function(){

? ? ? ? ? ? alert($(this).attr('title'));

? ? }).css({

? ? border:'',

}).appendTo('body');

2.3.2 從包裝集中獲取元素

? ? var imgElement=$('img[alt]').get(index);? index取負(fù)數(shù)舆驶，即從末尾開始查找橱健。

? ? get()

? ? toArray() 更推薦，等價于 get()

? ? first();

? ? last();

? ? index(element) 獲取下標(biāo)沙廉。? 參數(shù)省略拘荡，則找出包裝集中的第一個元素的在同級節(jié)點中的下標(biāo)

? ? var n=$('img').index('img#findMe').

2.3.3分解元素包裝集

1.添加更多元素到包裝集

? ? add（expression,context） 創(chuàng)建一個新的包裝集來保存結(jié)果，返回值是一個副本撬陵。

? ? ? ? ? ? ? ? ? ? ? ? ? ? expression ：選擇器珊皿、元素、數(shù)組

? ? ? ? ? ? ? ? ? ? ? ? ? ? context:指定上下文巨税，和$()一樣

1.$('img[alt]').add('img[title]',div);

2.$('img[alt]').addClass('thickBorder').add('img[title]').addClass('seeThrough')

2.整理包裝集中的內(nèi)容

? ? $('img[title]').not('[title*="puppy"]');

$('img[title]').not(function(){

return !$(this).hasClass('keepMe');

})

? ? not（）? 選擇不包含的? ? 如果參數(shù)是函數(shù)蟋定， 返回值為true的刪除

filter() 選擇包含。? ? ? 草添。驶兜。。。抄淑。屠凶。。肆资。矗愧，返回值為true的添加。

$('td').filter(function(){return this.innerHTML.match(/^\d+$/)})

? ? ? ? ? ? ? ? ? ? ? ? /為開頭結(jié)尾迅耘，

? ? ? ? ? ? ? ? ? ? ? ? 字符^

? ? ? ? ? ? ? ? ? ? ? ? 意義：表示匹配的字符必須在最前邊.

? ? ? ? ? ? ? ? ? ? ? ? 例如：/^A/不匹配"an A,"中的’A’,但匹配"An A."中最前面的’A’.

? ? ? ? ? ? ? ? ? ? ? ? 字符$

? ? ? ? ? ? ? ? ? ? ? ? 意義：與^類似,匹配最末的字符.

? ? ? ? ? ? ? ? ? ? ? ? 例如：/t$/不匹配"eater"中的’t’,但匹配"eat"中的’t’.

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? \d 匹配一個數(shù)字字符 ＋重復(fù)0次或多次

3.獲取包裝集的子集

? ? slice(begin,end)? ? $('*').slice(4) 返回不包含前四個的新包裝集

? ? has(selector)? ? 返回滿足子節(jié)點條件的父節(jié)點

4.轉(zhuǎn)換包裝集中的元素

? ? 例如收集每個元素的ID值

var allIds=$('div').map(function(){

return (this.id==underfined)? null:this.id;

}).get();

5.遍歷包裝集中的元素

? ? each(iterator)? 遍歷贱枣，傳入迭代器

? ? ? ? ? ? ? ? ? ? iterator為回調(diào)函數(shù) ,兩個參數(shù)，下標(biāo)和元素本身

? ? $('img').each(function(n){

? ? ? ? this.alt='this is image['+n+'] with an id of'+this.id;

})

6.使用關(guān)系獲取包裝集

? ? 按鈕的事件處理函數(shù)觸發(fā)時颤专，處理器內(nèi)部的this關(guān)鍵字指向按鈕元素。假設(shè)想找出此按鈕是在哪個

$(this).closest('div')

$(this).siblings('button[title='Close']')

2.3.5 更多處理包裝集的方式

? ? wrapp.find('p cite')

? ? find? ? 返回心得包裝集栖秕，將包裝集中所有元素全部搜索一遍，并返回包含與傳入的選擇器相匹配的新包裝集晓避。

? ? is? ? ? 確定是否存在相匹配的元素? 返回true,false

? ? $('*').is('img');

2.3.6 管理jQuery鏈

? ? 鏈?zhǔn)讲僮魈岣咝省?/p>

? ? $('img').filter('[title]').hide();

? ? $('img').filter('[title]').hide().end().addClass('anImage');

end? 回滾到前一個包裝集

andSelf? 合并方法鏈中的前兩個包裝集簇捍。

$('div').addClass('a').find('img').addClass('b').andSelf().addClass('c')

第三章? 用jQuery為頁面添加活力

3.1? 使用元素屬性和特性

? ? ? ? 屬性和特性，屬性時JS對象的俏拱，特性是DOM元素的暑塑。一般特性和屬性一樣。但也有例外比如：class為特性锅必，和屬性關(guān)聯(lián)為

? ? ? ? className事格。

3.2 操作元素屬性

? ? $('*').each(function(n){

? ? this.id=this.tagName+n;

})

3.1.2 獲取特性值

? ? attr(name)? 獲取匹配集合的一個元素特性值

? ? ? ? $('#myImage').attr('data-custom')? ? ? ? ? ? 自定義特性：必須data-為前綴命名規(guī)則

特性名稱不區(qū)分大小寫

3.1.3 設(shè)置特性值

? ? attr(name,value)

$('*').attr('title',function(index,previousValue){

return previousValue+'I am element'+index+' and my name is '+(this.id|| 'unset');

})

attr(attributes)

$('input').attr({value:'',title:'please enter a value'});

3.1.4 刪除特性

? ? removeAttr(name);

? ? 注意刪除一個特性不回刪除JS DOM元素中相應(yīng)的屬性，盡管可能導(dǎo)致屬性值改變

? ? 比如從元素中刪除readonly特性會導(dǎo)致元素的readOnly屬性值由true變?yōu)閒alse.

3.1.5 有趣的特性

? ? 1.強制在新窗口打開鏈接

? ? ? ? $("a[href^='http://']").attr("target","_blank");

2.解決雙重提交問題

? ? $('form'.submit(function(){

? ? $(':submit',this).attr('disabled','disable');

}))

3.1.5 在元素上儲存自定義數(shù)據(jù)

? ? 自定義屬性是有風(fēng)險的搞隐。特別是它可以很容易地創(chuàng)建循環(huán)引用驹愚，從而導(dǎo)致嚴(yán)重的內(nèi)存泄漏。

? ? JQuery提供可控的方式將數(shù)據(jù)附加到所選擇的DOM元素上劣纲。

data(name,value)? 將傳入值添加到為所有包裝元素準(zhǔn)備的jQuery托管數(shù)據(jù)倉庫中 寫入

data(name)? 獲取數(shù)據(jù)

removeData(name)

3.2 改變元素樣式

3.2.1 添加和刪除類名

? ? addClass(names)

? ? removeClass(names)

toggleClass(names)? 為了表示兩個狀態(tài)之間的變化? ? 當(dāng)存在這個類名逢捺，刪除；不存在癞季，即添加劫瞳。

function swapThem(){

$('tr').toggleClass('striped');

}

? ? $(function(){

? ? $('table tr:nth-child(even)').addClass("striped");

? ? $("table").mouseover(swapThem).mouseout(swapThem);

});

toggleClass(names,switch)? 如果switch表達式的計算結(jié)果為true，為此添加绷柒。

hasClass(name)? ? 判斷元素是否包含特殊的類志于。? 返回true,false;

$('p:first').hasClass('surpriseMe');

等價于? $('p:first').is('.surpriseMe');

$('p:first').attr("className").split(" ");

$.fn.getClassNames=function(){

var name =this.attr("className");

if(name !=null){

return name.split(" ");

}else{

return [];

}

}

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

css(name,value);

$("div.expandable").css("width",function(index,currentWidth){

return currentWidth+20;

});

css(properties).

css(name).

width(value) height(value)

eg :? $('div.myElements').width(500)

$('div.myElements').css("width",500)

2.定位和滾動

? ? offset（） 返回相對于文檔的位置

? ? position()? 返回包裝集中的一個元素相對于最近偏移父元素的位置。

3.3 設(shè)置元素內(nèi)容

替換HTML或者文本內(nèi)容

? ? html()? 有參設(shè)置辉巡，無參獲取

? ? text() 不帶參數(shù)獲取所有文本組合成的字符串恨憎。 如果傳入的呆<>等，會替換成相應(yīng)的html實體字符

3.3.2 移動和復(fù)制元素

? ? append()? 追加新內(nèi)容到現(xiàn)有內(nèi)容的末尾。

? ? $(‘p’).append(“some text.”);

? ? $('p.appendToMe').append($('a.appendMe'));? ? ? ? 這樣是移動操作

? ? 單一目標(biāo)這就是移動操作：原始位置被刪除憔恳。多個目標(biāo)即為復(fù)制移動瓤荔，創(chuàng)造副本放到每個匹配節(jié)點后面。

prepend(content)? 將內(nèi)容添加到匹配的開頭

before（）钥组、after（）? 放在前后输硝。 和上面類似

appendTo()\prependTo()\insertAfter()\insertBefore()

3.3.3 包裹與反包裹元素

? ? wrap(wraper)? 將每個匹配元素包裹到wraper里。

? ? $('a.surprise').wrap("

$('a.surprise').wrap($("div:first")[0]);

wrapAll(wraper)? 將匹配元素中所有元素作為整體包裹到wraper里程梦。

wrapInner(wraper)? 包裹匹配集中的內(nèi)容

unwrap()? 刪除包裝元素的父節(jié)點点把。子元素和其所有的同級節(jié)點一起替換DOM中的父親

3.3.4 刪除元素

? ? remove（slector）? 刪除包裝集中的所有元素,返回刪除元素的集合。JQuery的數(shù)據(jù)和事件也會被刪除

? ? detach(selector)? 刪除元素屿附，保留綁定事件和jQuery數(shù)據(jù)

? ? empty()? 清空元素郎逃，返回包裝集

? ? clone(copyHanders)? copyHander true,復(fù)制事件處理器。false不復(fù)制

$('img').clone().appendTo('fieldset.photo');

$('ul').clone().insertBefore('#here');? ? ul的子節(jié)點也會被復(fù)制

$('ul').clone().insertBefore('#here').end().hide();

3.3.6 替換元素

? ? replaceWith(content)? 使用指定內(nèi)容替換每個元素

? ? $('img[alt]').each(function(){

? ? $(this).replaceWith(''+$(this).attr('alt')+'')

});

replaceAll(selector) 使用匹配元素替換slector中匹配的元素挺份。

3.4處理表單元素

? ? 獲取和設(shè)置表單元素值

? ? 序列化表單元素

? ? 基于表單特定的屬性選擇元素

當(dāng)我們是有表單元素時褒翰，指的是出現(xiàn)在表單內(nèi)部的元素，擁有name和value特性匀泊，并且提交時优训，會作為http請求參數(shù)

發(fā)送到服務(wù)器中

val()? ? 訪問包裝集的第一個表單元素的value特性? 若第一個不是表單元素，返回空字符串

不適合單選多選各聘。

$('[name="radioGroup"]:checked').val();

var checkboxValues=$('[name="radioGroup"]:checked').map(function(){

return $(this).val();

}).toArray();

$('input,select').val(['one','two','three']);

附錄：JS概念

A揣非。1 JS對象的基本原理

A.1.1 對象從何而來

? ? 新的對象由new操作符和與其相配的Object構(gòu)造器產(chǎn)生。

? ? var shiny=new Object();

A.1.2 對象的屬性

? ? JS Object實例就是一組屬性集躲因，每個屬性由名稱和值構(gòu)成早敬。屬性不拘于數(shù)據(jù)類型,可以是另一個數(shù)據(jù)對象。

? ? object[expression]

下面三個等價

ride.make

ride['make']

ride['m'+'a'+'k'+'e'];

ride["a property name"];

A.1.3 對象字面值

var ride={

make:'yama',

model:'V-star 110',

year:2005,

purchased:new Date(2005,3,12),

owner:{

name:'spike',

occupation:'bounty'

}

};

? ? JSON: 對象由一對花括號表示毛仪，在其中用逗號分隔的多個屬性搁嗓。每個屬性通過以冒號分隔的名稱和值表示。

作為交換格式時箱靴，JSON中屬性的名稱必須由雙引號來引用腺逛。

A.1.4 作為窗體屬性的對象

? ? 如果在頂層（任何內(nèi)部的函數(shù)主體之外）中使用var 關(guān)鍵詞，都是引用于定義在JS window對象的屬性衡怀。

? ? 任何在頂層作用域中生成的引用都隱式地創(chuàng)建在window實例中棍矛。

? ? var foo=bar;? 等價于? window.foo=bar;

總結(jié)：? ? JS對象是屬性的無序集合。

? ? ? ? 屬性由名稱和值組成抛杨。

? ? ? ? 可以使用字面值來聲明對象

? ? ? ? 頂層變量是window的屬性

A.2? 作為一等公民的函數(shù)

? ? JS的函數(shù)被認(rèn)為是對象够委。函數(shù)也是通過JS構(gòu)造器來定義的。

? ? 操作：

? ? ? ? 1.函數(shù)賦值給變量

? ? ? ? 2.函數(shù)指定為一個對象的屬性

? ? ? ? 3.函數(shù)作為參數(shù)傳遞

? ? ? ? 4.函數(shù)作為函數(shù)結(jié)果返回

? ? ? ? 5.使用字面值創(chuàng)建函數(shù)

只有把函數(shù)賦值給變量怖现、屬性或參數(shù)時茁帽，函數(shù)才能被引用玉罐。

function doSomething(){};等價于：

它與通過var 創(chuàng)建window屬性使用相同的語法：

doSomething=function(){};

等價與 window.doSomething=function(){}

函數(shù)字面值：由關(guān)鍵字function與緊接著的被圓括號所包含的參數(shù)列表，以及函數(shù)主體構(gòu)成潘拨。

聲明函數(shù)時吊输，創(chuàng)建一個Function實例，并賦值給window屬性铁追，該屬性自動創(chuàng)建季蚂。function實例不再有名字，類似于

數(shù)字213琅束，只能通過生成引用來對其進行命名扭屁。

A.2.2 作為回調(diào)函數(shù)

? ? function hello(){}

? ? setTimeout(hello,5000);

當(dāng)計時器過期時，hello函數(shù)會被調(diào)用涩禀。因為在代碼中setTimout（）方法回調(diào)了一個函數(shù)料滥，所以稱setTimeout()為回調(diào)函數(shù)。

更通用的辦法埋泵，使用函數(shù)字面值來創(chuàng)建,這樣不回生成沒有必要的hello名稱在window屬性中幔欧。

setTimeout(function(){alert();},5000);

A.2.3 this到底是什么

? ? ? ? this所引用的對象（稱為函數(shù)上下文）并不是由聲明函數(shù)的方式所決定的，而是 由調(diào)用函數(shù)的方式?jīng)Q定的丽声。

在默認(rèn)情況下，函數(shù)調(diào)用的上下文（this）是對象觉义，其屬性包含用于調(diào)用該函數(shù)的引用雁社。

var bike=ride.whatAmI();

函數(shù)上下文（this）被設(shè)置為ride所指向的對象實例。

JS還提供顯式地控制函數(shù)上下文所使用的內(nèi)容晒骇。通過call()\apply()來調(diào)用霉撵。

call（）第一個參數(shù)作為函數(shù)上下文（this）的對象，其余參數(shù)稱為被調(diào)用函數(shù)的參數(shù)洪囤。

apply（）第一個參數(shù)作為函數(shù)上下文（this）的對象徒坡。第二個參數(shù)是被調(diào)用函數(shù)參數(shù)的對象數(shù)組。

當(dāng)對象o充當(dāng)函數(shù)f的調(diào)用函數(shù)上下文時瘤缩，函數(shù)f就充當(dāng)了對象o的方法喇完。

alert(o1.idetifyMe.call(o3));

盡管函數(shù)作為o1的屬性來引用，但調(diào)用的函數(shù)上下文是o3.更強調(diào)了函數(shù)上下文取決于調(diào)用函數(shù)的方式剥啤，而不是聲明函數(shù)的方式锦溪。

A.2.4 閉包（一種特殊的函數(shù)）

? ? 閉包就是Fuction實例，它結(jié)合了來自環(huán)境的（函數(shù)執(zhí)行所必需的）局部變量府怯。

在聲明函數(shù)時刻诊，可以在聲明函數(shù)時引用函數(shù)作用域內(nèi)任何變量。但是使用閉包時牺丙，即使在函數(shù)聲明之后则涯，已經(jīng)超出函數(shù)作用域（也就是關(guān)閉函數(shù)

聲明）的情況下，該函數(shù)仍然帶有這些變量。

在回調(diào)函數(shù)運行時粟判，引用聲明回調(diào)函數(shù)時的局部變量時不可或缺的工具亿昏。

閉包允許回調(diào)訪問環(huán)境中的值溢谤，即使該環(huán)境已經(jīng)超出了作用域鸿秆。

當(dāng)就緒處理器執(zhí)行完畢，local聲明所在的塊超出了作用域浇借，但是函數(shù)聲明所創(chuàng)建的閉包（包括local變量）在函數(shù)的生命周期內(nèi)都保持在作用域中事秀。

閉包的另一個重要特征是：函數(shù)上下文絕不會被包含在閉包的一部分彤断。

在局部變量中創(chuàng)建this引用的副本，這個副本將會被包含在閉包中易迹。

第四章? 事件處理

? ? 腳本即事件處理器(監(jiān)聽器)宰衙，

4.1.1 DOM第0級事件模型

? ? 在這種事件模型下，事件處理器是通過將一個函數(shù)實例的引用賦值給DOM元素的屬性來聲明睹欲。

onclick="say('BOOM');"

等價于：

imageElement.onclick=function(event){

say('BOOM');

};

1供炼。event實例

? ? 當(dāng)一個事件處理器被觸發(fā)時，名為Event的類實例會作為第一個參數(shù)傳入處理器中窘疮。而IE存到event的全局屬性中袋哼。

if(! event) event=window.event;

Event實例屬性提供了關(guān)于當(dāng)前正在被處理的已觸發(fā)事件的大量信息。

target屬性儲存目標(biāo)元素的引用闸衫。

2.事件冒泡

? ? 當(dāng)觸發(fā)了DOM樹中一個元素上的事件時涛贯，觸發(fā)事件處理器，由里往外蔚出。

3.影響事件傳播和語義動作

? ? 通過調(diào)用event實例的stopPropagation()方法來阻止事件向更高層傳播弟翘。

? ? 或IE瀏覽器，event實例的屬性cancelBubble的值為true.

4.1.2 DOM第二級事件模型

1.建立事件處理器

DOM第2級事件處理器（也稱為監(jiān)聽器）是通過元素方法創(chuàng)建的骄酗。每個元素都定義有一個名為addEventListener()方法稀余，

用來敷家事件處理器到元素上。

addEventListener(eventType,listener,useCapture);

eventType:click趋翻、mouseover睛琳、keydown

listener:一個函數(shù)引用或內(nèi)聯(lián)函數(shù)，用來在元素上創(chuàng)建指定事件類型的處理器嘿歌。? event實例是傳入這個函數(shù)的第一個參數(shù)

useCapture：boolean掸掏。是否使用捕捉。

$(function(){

? ? var element=$('example')[0];

? ? element.addEventListener('click',function(event){

? ? say('BOOM once!');

},false);

})

2.事件傳播

? ? 基本事件模型是冒泡宙帝。第二級增加了額外捕獲階段丧凤。

在二級中，事件先從根部向下傳遞到目標(biāo)元素步脓，在從目標(biāo)傳到DOM根部愿待，前者為捕獲階段浩螺，后者為冒泡階段。

useCapture為true仍侥， 表示在捕獲階段觸發(fā)事件要出。

? ? ? ? 為false,在冒泡階段觸發(fā)事件。

IE并不支持第二級事件模型农渊，它提供對應(yīng)的專有模型患蹂。

4.1.3 IE事件模型

attachEvent(eventName,handler);

eventName:onclick、onmouseover砸紊、onkeydown

hander:指的是處理函數(shù)传于。

4.2? JQuery事件模型

? ? 隱藏了 IE和瀏覽器的不一致。讓開發(fā)更簡單醉顽。

JQuery事件模型的實現(xiàn)沼溜，也被非正式地成為JQuery事件模型。

不支持捕獲階段游添。

4.2.1 使用JQuery綁定事件處理器

? ? bind()

$('img').bind('click',function(event){alert("Hi there!");});

eg:

$(function(){

$('#example')

.bind('click',function(event){

say('BOOM once!');

})

.bind('click',function(event){

say('BOOM twice!');

})

.bind('click',function(event){

say('BOOM three');

});

})

? ? bind(eventType,data,handler)

? ? bind(eventMap)

eventType:處理類型

data(對象)：調(diào)用者提供的數(shù)據(jù)系草，用來附加到Event實例的data屬性，以便為處理器函數(shù)使用唆涝。

handler：函數(shù)

eventMap:一個JS對象找都，允許在一次調(diào)用中創(chuàng)建多個事件類型的處理器。

JQuery還為事件處理提供了一個小巧的額外功能廊酣，就是通過指定命名空間來對事件處理器進行分組檐嚣。它通過為事件名稱添加

圓點分割的后綴來指定命名空間。

頁面有兩種模式：顯示模式和編輯模式啰扛，事件監(jiān)聽器只能放置在編輯模式下，因此當(dāng)頁面離開編輯模式嗡贺，需要刪除監(jiān)聽器隐解，如下：

$('#thing1').bind('click.editMode',someListener1);

$('#thing2').bind('click.editMode',someListener2);

$('#thing3').bind('click.editMode',someListener3);

離開時： $('*').unbind('click.editMode');

eventMap:? 一個對象，名字為eventType,屬性值為handler.

$('.whatever').bind({

click:function(event){}

mouseenter:function(event){}

mouseleave:function(event){}

});

focusin和focusout :當(dāng)可聚焦元素獲取或失去焦點時诫睬，會調(diào)用為元素上的這些事件創(chuàng)建的處理器煞茫，同時也會調(diào)用建立在其祖先

元素上的任何此類處理器。

one(eventType,data,listner)? 只觸發(fā)一次摄凡，觸發(fā)完畢即刪除

4.2.2 刪除事件處理器

unbind(eventType,listener);

unbind(event);

為包裝集中的所有元素刪除由可選的傳入?yún)?shù)指定的事件處理器续徽。

4.2.3 Event實例

? ? event實例提供各種信息。

4.2.4? ? 預(yù)先管理事件處理器

? ? 不僅僅能在就緒處理器中使用亲澡，還提供動態(tài)的管理事件處理器钦扭。

live（），允許預(yù)先為哪些還不存在的元素創(chuàng)建事件處理器床绪。

live(eventType,data,listner).

當(dāng)指定類型的事件在元素上發(fā)生時客情，會將傳入的監(jiān)聽器座位處理器調(diào)用其弊，而無論在調(diào)用live方法時這些元素是否存在。

$('div.attendToMe').live(

'click',function(event){alert(this);})

在整個頁面的生命周期中膀斋，單擊任意匹配元素都會調(diào)用事件處理器并傳入event實例梭伐。而且代碼不需要放在就緒處理器中，因為

live()不關(guān)心DOM是否存在仰担。

2.刪除 live事件

? ? 使用die()方法來解除綁定糊识。與unbind()相似。

4.2.5 觸發(fā)事件處理器

? ? 當(dāng)瀏覽器或者用戶活動觸發(fā)了相關(guān)事件在DOM層次結(jié)構(gòu)中傳播時摔蓝，事件處理器將會被調(diào)用赂苗。但有時我們想在腳本控制下觸發(fā)

? ? 處理器的執(zhí)行∠罟恚可以將這樣的事件處理器定義為頂級函數(shù)哑梳。

trigger(eventType,data)

在所有匹配元素上調(diào)用為傳入的事件類型創(chuàng)造的事件處理器

只想觸發(fā)處理器，而不需要事件傳播和語義動作執(zhí)行的情況：

triggerHandler(eventType,data)

4.2.6 其它事件相關(guān)的方法

1.起切換作用的監(jiān)聽器

? ? toggle(),他為單機事件處理器創(chuàng)建了一個循環(huán)隊列绘盟。

? ? toggle(listener1,listener2,...)

用途：根據(jù)元素被單機次數(shù)切換元素的可用狀態(tài)鸠真。

2.在元素上懸停鼠標(biāo)

$(element).mouseenter(function1).mouseleave(function2);

等價于：

? ? hover(enterHandlder,leaveHandler);

4.3 充分利用（更多的）事件

第五章 用動畫和特效裝扮頁面

特效用來增強頁面的可用性，而不是用來炫耀龄毡。

5.1 顯示和隱藏元素

show()用于顯示包裝集中的元素

hide()用于隱藏它們吠卷。

jQuery通過將元素的style.display屬性改為none來隱藏元素。

等價

$('div').hide();

jQuery可以將display屬性從none改變?yōu)閎lock或inline來顯示對象沦零。選擇哪個值取決于之前是否顯示設(shè)置元素display值祭隔。

若顯式設(shè)置，則它被記錄并恢復(fù)路操。否則取決于默認(rèn)值疾渴。

$('div.caption img').click(function(){

var body$=$(this).closest('div.module').find('div.body');

if(body$.is(':hidden')){

? ? body$.show();

}else{

body$.hide();

}

})

$作為變量前后綴，代表包裝集引用屯仗。

5.1.2 切換元素的顯示

? ? 再顯示和隱藏之間切換元素的狀態(tài)搞坝。使用toggle()方法。

? ? $('div.caption img').click(function(){

? ? $(this).closest('div.module').find('div.body').toggle();

}）

5.2 用動畫改變元素的顯示狀態(tài)

? ? 短時間的漸變過程有助于我們了解什么正在改變魁袜，以及如何從一個狀態(tài)轉(zhuǎn)換到另一個狀態(tài)桩撮。

三種特效：

顯示和隱藏

淡入和淡出

滑下和滑上

5.2.1 漸變地顯示和隱藏元素

hide(speed,callback)

speed:時間（毫秒）? 也可以為字符串slow、normal峰弹、fast

callback:當(dāng)動畫結(jié)束時調(diào)用

show(speed,callback)

speed:時間（毫秒）? 也可以為字符串slow店量、normal、fast

callback:當(dāng)動畫結(jié)束時調(diào)用

toggle(speed,callback)

speed:時間（毫秒）? 也可以為字符串slow鞠呈、normal融师、fast

callback:當(dāng)動畫結(jié)束時調(diào)用

toggle(condition)

基于傳入條件的運算結(jié)果顯示和隱藏匹配元素。 true 顯示? false 隱藏

$('div.caption img').click(function(){

$(this).closest('div.module').find('div.body')

.toggle('slow',function(){

$(this).closest('div.module')

? ? .toggleClass('rolledup',$(this).is(':hidden'));

});

}）

5.2.2 使元素淡入和淡出

fadeIn(speed,callback)

只影響元素的透明度粟按。

fadeOut(speed,callback)

淡出

fadeTo(speed,opacity,callback)

逐漸改變元素透明度诬滩，從他們的當(dāng)前值到opacity指定的新值霹粥。

5.2.上下滑動元素

? ? 另一組用于隱藏和顯示元素的特效（slideDown()、slideUp()）疼鸟，再顯示時好像從頂部滑下后控，隱藏是滑入頂部。

slideDown(speed,callback)

隱藏的元素滑下顯示出來空镜。

slideUp(speed,callback)

刪除匹配的顯示元素浩淘。

slideToggle(speed,callback)

5.2.4 停止動畫

? ? stop(clearQueue,gotoEnd)

? ? 停止匹配集元素上正在進行的所有動畫

? ? clearQueue(布爾)：true, 停止當(dāng)前動畫，而且停止動畫隊列中等待的其他所有動畫

? ? gotoEnd(布爾): true, 則使當(dāng)前動畫執(zhí)行到其邏輯結(jié)束吴攒。

jQuery.fx.off 標(biāo)志為true 將導(dǎo)致所有的特效立即發(fā)生张抄，而沒有動畫過程。

5.3 創(chuàng)建自定義動畫

? ? animate(properties,duration,easing,callback)

? ? animate(properties,options)

properties(對象): 一個散列對象洼怔，指定動畫結(jié)束時所支持的CSS樣式應(yīng)該達到的值署惯。

duration: 時間可毫秒或可預(yù)定于字符串。

easing(字符串)：一個函數(shù)名稱镣隶，用于指定動畫緩動特效极谊。通常是插件提供。

callback:

options:

? ? duration：

? ? easing

? ? complete：動畫完成調(diào)用函數(shù)

? ? queue：如果false安岂，則動畫立即運行轻猖，無需排隊

? ? step：在動畫每一步都會調(diào)用的回調(diào)函數(shù)。

$.fn.fadeToggle=function(speed){

? ? return this.animate({opacity:'toggle'},speed);

};

5.3.1 自定義縮放動畫

? ? $('.animateMe').each(function(){

? ? $(this).animate({

? ? ? ? width:$(this).width()2,

? ? ? ? width:$(this).height()2

? ? },2000);

})

5.3.2 自定義掉落動畫

$('.animateMe').each(function(){

? ? $(this)

? ? .css('position','relative')

? ? .animate({

? ? ? ? opacity:0,

? ? ? ? top:$(window).height()-$(this).height()-$(this).position().top

},'slow',function(){$(this).hide();})

})域那；

5.3.3 自定義消散動畫

$('.animateMe').each(function(){

? ? var position=$(this).position();

? ? $(this).css({

? ? ? ? position:'absolute',

? ? ? ? top:position.top,

? ? ? ? left:position.left})

? ? ? ? .animate({

? ? ? ? opacity:'hide',

? ? ? ? width:$(this).width()*5,

? ? ? ? height:

? ? })

})

5.4 動畫和隊列

? ? 如果想使自己的函數(shù)擁有相同功能該怎么辦呢咙边？jQuery隊列

queue(name)? ? ? ? ? 根據(jù)傳入的名字查找建立在匹配集中第一個元素上的任意隊列，以函數(shù)數(shù)組的形式返回次员。

queue(name,function)? 添加函數(shù)到隊列

queue(name,queue)? ? 把匹配元素上現(xiàn)有的任意隊列替換為傳入的隊列

dequeue(name)

刪除匹配集中每個元素的命名隊列中的第一個函數(shù)败许，并執(zhí)行。

3.清除沒有執(zhí)行的隊列函數(shù)

clearQueue(name)

? ? 從命名隊列中刪除所有未執(zhí)行的函數(shù)

4.延遲隊列函數(shù)

? ? delay(duration,name);? 延遲隊列中下一個函數(shù)的執(zhí)行淑蔚。

5.4.3 插入函數(shù)到特效隊列檐束。

第六章? DOM無關(guān)的jQuery實用函數(shù)

實用函數(shù)：定義在JQuery／$命名空間下步操作包裝集的函數(shù)。這些函數(shù)可以看作是定義在$實例束倍。

實用函數(shù)要么操作除DOM以外的JS對象，要么執(zhí)行一些對象無關(guān)的操作（Ajax）盟戏。

標(biāo)志：

? $.fx.off? 啟用或者禁用特效? ? ? 可讀寫

? $.support? 所支持特征的詳細(xì)信息? ? 只讀

? $.browser 公開瀏覽器的細(xì)節(jié)? ? ? ? 只讀

6.1.1? 禁用動畫

$.fx.off? 啟用或者禁用特效? true? 禁用

6.1.2 檢測用戶代理支持

? ? 1.瀏覽器檢測

? ? ? ? 避免使用瀏覽器檢測技術(shù)

? ? ? ? 瀏覽器通過設(shè)置一個稱為用戶代理字符串的請求頭來標(biāo)識自己绪妹。

? ? 2.代替方案：特征檢測

? ? 3.jQuery瀏覽器功能標(biāo)志

? ? ? ? $.support對象的屬性

6.13 瀏覽器檢測標(biāo)志

? ? ? ? $.browser

? ? 建議使用這樣的方式，哪怕mise消失柿究，只需修改一次邮旷。

? ? ：? $.support.useIntForSelectAdds=$.browser.mise;

6.2 JQuery與其他庫并存

? ? ? ? $.noConflict()實用函數(shù)調(diào)用來放棄對$標(biāo)識符的占用，是通過JQuery標(biāo)識符

? ? $.noConflict(queryToo)

? ? jqueryToo（布爾） 若true蝇摸，放棄$和JQuery標(biāo)識符

? ? var $j=jQuery;

? ? 創(chuàng)建一個作用域環(huán)境婶肩，在該環(huán)境中$標(biāo)識符指向JQuery對象办陷。

? ? （function($){/*函數(shù)主體*/})(jQuery）;

? ? （function($){/*函數(shù)主體*/})? 聲明了一個函數(shù)并用圓括號括起來，由此生成了一個表達式律歼，這個表達式的結(jié)果是對一個匿名函數(shù)的引用民镜，這個函數(shù)

? ? 期望傳入單個參數(shù)并將其命名為$

? ? (jQuery）在匿名函數(shù)上執(zhí)行函數(shù)調(diào)用，講JQuery對象作為參數(shù)傳遞险毁。

? ? 習(xí)慣用法的變體： 用于聲明就緒處理函數(shù)

? ? ? ? jQuery（function($){alert("111")}）;

? ? 通過將一個函數(shù)作為參數(shù)傳入jQuery函數(shù)來聲明就緒處理器制圈。但是這次，我們實用$標(biāo)識符聲明傳入就緒處理器的單個參數(shù)畔况。因為jQuery總是將jquery引

? ? 用作為第一個也是唯一的參數(shù)傳入就緒處理器鲸鹦。

6.3 操作JS對象和集合

6.3.1 修建字符串

? ? $.trim(value)

? ? 刪除傳入的字符串開頭和結(jié)尾處的空白自負(fù)，并返回修改后的結(jié)果

6.3.2 遍歷屬性和集合

? ? $.each() 函數(shù)

$.each(container,callback)

遍歷傳入的容器中的每一項跷跪，并為每一項調(diào)用傳入的回調(diào)函數(shù)

container(數(shù)組｜對象)

callback(函數(shù))? callback的一個參數(shù)是數(shù)組元素的下標(biāo)或?qū)ο髮傩缘拿Q馋嗜。第二個參數(shù)是數(shù)組項或?qū)傩灾?/p>

當(dāng)遍歷時，可以使函數(shù)返回false跳出循環(huán)吵瞻。

6.3.3篩選數(shù)組

? ? $.grep()函數(shù),篩選數(shù)據(jù)

$.grep(array,callback,invert)

對每個元素調(diào)用回調(diào)函數(shù)葛菇。

invert 省略或為false,回調(diào)函數(shù)返回true將導(dǎo)致數(shù)據(jù)被收集

? ? ? ? true,? ? ? ? ? ? ? ? ? false? ? ? ? 被收集

var badZips=$.grep(originlArray,function(value){return value.match(/^\d(-\d{4})?$/)!=null;}

? ? ? ? ? ? ,true);

6.3.4 轉(zhuǎn)換數(shù)組

? ? 數(shù)據(jù)并不總是以我們需要的格式存在。

? ? $.map(array,callback)

遍歷傳入的數(shù)組听皿，為每一項調(diào)用回調(diào)函數(shù)熟呛，并將函數(shù)調(diào)用的返回值收集到一個新的數(shù)組中。

var oneBased=$.map([0,1,2,3,4],function(value){return value+1;});

eg:

var strings=['1','2','3','S'];

var value=$.map(strings,function(value){

? ? var result=new Number(value);

? ? return isNaN(result)?null:result;

})

6.3.5 需要知道JS數(shù)組中是否包含特定值和位置尉姨。

? ? $.inArray(value,array)

? ? ? ? 返回傳入的值第一次出現(xiàn)時的下標(biāo)

? ? value(對象) 需要在數(shù)組上搜索的值

? ? array（數(shù)組）被搜索的數(shù)組

var index=$.inArray(2,[1,2,3,4,5]);

$.makeArray:? ? 可以從其他類似數(shù)組的對象來創(chuàng)建JS數(shù)組庵朝。

$.makeArray(object)

將傳入的類似數(shù)組的對象轉(zhuǎn)換為JS數(shù)組

$.unique(array)

向其傳入DOM元素的數(shù)組，則返回由原始數(shù)組中不重復(fù)的元素組成的數(shù)組又厉。

$.merge(array1,array2)

將第二個數(shù)組合并到的一個數(shù)組九府，返回的一個數(shù)組

6.3.6 擴展對象

? ? 在JS中模擬繼承的一個模式是，通過將基礎(chǔ)對象的屬性復(fù)制到新對象來擴展對象覆致。

? ? $.extend(deep,target,source1,source2,...,sourceN)

? ? ? ? 使用其余傳入的對象對象的屬性來擴展傳入的target對象侄旬。

deep（布爾） 深復(fù)制還是淺復(fù)制。

var target={a:1,b:2,c:3};

var source1={c:4,d:5,e:6};

var source2={e:7,f:8,g:9};

$.extend(target,source1,source2);

target={a:1,b:2,c:4,d:5,e:7,f:8,g:9};

6.3.7 序列化參數(shù)值

? ? 正確創(chuàng)建和格式化查詢字符串煌妈。

服務(wù)器端的模版工具一般都會提供強大機制來幫助我們構(gòu)建有效的URL儡羔。

對每一個名稱和值進行URL編碼

$.param(params,traditional)

將傳入的信息序列化成可在提交請求中使用的查詢字符串。

params(數(shù)組｜jQuery｜對象) 需要序列化為查詢字符串的值

traditionl(布爾)

序列化嵌套參數(shù)

? ? 使用括號來表示組織關(guān)系

? ? name[first]=YOGi&name[last]=Bear

6.4 其他實用函數(shù)

6.4.1 什么都不做

$.noop()

還記得有多少個Jquery方法需要傳入可選的回調(diào)函數(shù)作為參數(shù)或者選項值嗎璧诵？$.noop()就是用戶沒有提供回調(diào)函數(shù)時作為其

默認(rèn)值用的汰蜘。

6.4.2 測試包含關(guān)系

? ? $.contains(container,containee)

? ? ? ? ? ? 測試一個元素是否在DOM層次結(jié)構(gòu)中包含在另一個元素內(nèi)部

? ? ? ? ? ? ? ? container(元素) 要測試的包含另一個元素的DOM元素

? ? ? ? ? ? ? ? containee（元素）要測試的被包含的元素

? ? ? ? ? ? 返回true ,false

6.4.3 附加數(shù)據(jù)到元素上

? ? $.data(element,name,value)

? ? ? ? 使用指定的名稱在傳入的元素上存儲或檢索數(shù)據(jù)

? ? ? ? ? ? element(元素)，? 用于儲存或檢索的元素

? ? ? ? ? ? name

? ? ? ? ? ? value （對象） 將要被賦值給指定名稱的元素的數(shù)據(jù)之宿。如果省略族操，獲取指定名稱的數(shù)據(jù)

? ? ? ? 返回： 存儲或獲取的數(shù)據(jù)值

$.removeData（element,name）

? ? 刪除儲存在傳入的元素上的數(shù)據(jù)

? ? ? ? element(元素) 將要從中刪除數(shù)據(jù)的元素

? ? ? ? name? 將要刪除的數(shù)據(jù)項名稱。? 省略比被，全刪色难。

6.4.4 預(yù)綁定函數(shù)上下文

? ? 我們想調(diào)用特定的函數(shù)并且顯示地控制函數(shù)的上下文時泼舱，可以使用Function.call()方法來調(diào)用。

$.proxy(function,proxy)

$.proxy(proxy,property)

使用預(yù)綁定的代理對象創(chuàng)建函數(shù)的一個副本枷莉，在函數(shù)作為回調(diào)函數(shù)被調(diào)用時娇昙，此對象作為函數(shù)的上下文。

? ? proxy 將要綁定微代理函數(shù)上下文的對象

? ? property（字符串） 傳入的proxy對象的屬性名稱依沮，包含要綁定的函數(shù)

用途：當(dāng)向回調(diào)函數(shù)提供的數(shù)據(jù)難以正常地通過閉包或者其他方式訪問時涯贞，這個功能非常有用

將對象的方法綁定微處理器，并且將擁有方法的對象作為處理器的函數(shù)上下文危喉。

6.4.5 解析JSON

$.parseJSON(json)

? ? 解析傳入的JSON字符串宋渔，返回其計算值

JSON字符串必須是雙引號字符分割

6.4.6 表達式求值

? ? $.globalEval(code)

? ? ? ? 在全局上下文中對傳入的JS代碼進行求值

6.4.7 動態(tài)加載腳本

? ? $.getScript(url,callback)

? ? ? ? 通過向指定的服務(wù)器發(fā)起GET請求來獲取由URL參數(shù)指定的腳本，在請求成功后調(diào)用回調(diào)辜限。

? ? 返回：涌來獲取腳本的XML HTTP請求實例

第7章 擴展JQuery

7.1為什么要擴展JQuery

? ? 1.可以提供保持一致的代碼風(fēng)格

? ? 2.通過遵循這些工具的設(shè)計先例皇拣，自然就能從這些設(shè)計中獲得規(guī)劃的好處。

? ? 3.擴展JQuery薄嫡，可以使用現(xiàn)有的代碼基礎(chǔ)氧急，方便易用。

7.2 JQuery插件開發(fā)指南

? ? 擴展JQuery有兩種形式：

? ? ? ? 1.直接定義在$上的實用函數(shù)

? ? ? ? 2.操作JQuery包裝集的方法

7.2.1 為文件和函數(shù)命名

? ? ? ? 插件內(nèi)部避免名稱沖突的辦法毫深。但是首先來給將要編寫的插件起個文件名以便不會和其他文件沖突吩坝。

? ? ? ? ? ? 為文件名添加Jquery前綴。

? ? ? ? ? ? 前綴后面是插件的名稱

? ? ? ? ? ? 包含插件主版本號和次版本號

? ? ? ? ? ? 以.js 結(jié)束

? ? ? ? eg： jquery.fred-1.0.js

7.2.2 當(dāng)心$

? ? (function($){})(JQuery);

7.2.3 簡化復(fù)雜參數(shù)列表

? ? complex(valueA,null,null,null,valueB)

? ? complex(valueA,{p7:valueB});

新的函數(shù)使用：

complex(p1,options)

function complex(p1,options){

var settings=$.extend({

option1:d1,

option2:d2,

option3:d3,

},options||{});

}

7.3 編寫自定義實用函數(shù)

? ? $.say=function(){};

? ? 更加穩(wěn)妥的方法

? ? jQuery.say=function(){}

(function($){})(JQuery); 這樣是最推薦的方式

7.3哑蔫。1 創(chuàng)建數(shù)據(jù)操作的實用函數(shù)

$.toFixedWidth(value,length,fill)

把傳入的值格式化成指定長度的定寬子段钉寝，提供可選的填充字符。

（function($){

? ? $.toFixedWidth=function(value,length,fill){

? ? var result=(value||'').toString();

? ? fill=fill||'0';

? ? var padding=length-result.length;

}

})(jQuery);

為實用函數(shù)添加命名空間

? ? $.jQiaDateFormat.toFixedWidth=function(){};

7.3.2 編寫日期格式器

? ? $.formatDate(date,pattern)

? ? ? ? 根據(jù)提供的模式格式化傳入的日期闸迷。

? ? ? ? 任何不匹配模式標(biāo)記的字符被原封不動地復(fù)制到結(jié)果中

7.4 添加新的包裝器方法

? ? ? ? 要給jQuery添加包裝器方法嵌纲，必須把這些方法賦值給$命名空間中名為fn的對象的屬性

? ? ? ? ? ? $.fn.wrapper=function(){}

? ? ? ? 定義的包裝器方法主體部分的this必須志向包裝集。

? ? 原則：除非要返回特定的值腥沽，否則函數(shù)應(yīng)該總是將包裝集作為其返回值逮走。

通過使用接受函數(shù)作為值的方法進行遍歷

7.4.1 在包裝器方法中應(yīng)用多個操作

setReadOnly()

(function($){

? ? $.fn.setReadOnly=function(readonly){

return this.filter('input:text').attr('readOnly',readonly)

? ? ? ? ? ? .css('opacity',readonly?0.5:1.0).end();

}

})(jQuery);

7.4.2 保留在包裝器方法里的狀態(tài)

? ? ? ? photomatic(options)

? ? ? ? ? ? 設(shè)置縮略圖包裝集以及在options散列對象里標(biāo)識的頁面元素

(function($){

? ? $.fn.photomatc=function(options){

? ? var settings=$.extend({

? ? photoElement:'img.photomaticPhoto',

? ? transformer:function(name){ return name.replace(/thumbnail/,'photo')};

? ? nextControl:null,

? ? previousControl:null,

? ? firstControl:null,

? ? lastControl:null,

? ? playControl:null,

? ? delay:3000

? ? },option||{});

};

settings.thumbnails$=this.filter('img');

settings.current=0;

setting.thumbnials$.each(function(n){ $(this).data('photomatic-index',n);})

? ? .click(function(){

? ? showPhoto($(this).data('photomatic-index'));? ? //為每個匹配元素添加click（）

})

function showPhoto(index){

$(settings.photoElement).attr(src,settings.transformer(settings.thumbnails$[index].src));

settings.cureent=index;

}

$(settings.photoElement).attr('title','Click for next photo')

? ? .css('cursor','pointer').click(function(){

? ? ? ? showPhoto((settings.current+1)%settings.thumbnails.length);

});

$(settings.playControl).toggle(

? ? function(event){

? ? settings.tick=window.setTnterval(

? ? function (){

? ? ? ? $(settings.nextControl).triggerHandler('click')

? ? },settings.delay);

? ? $(event.target).addClass('photomatic-playing');

? ? $(settings.nextControl).click();

},

function(event){

? ? window.clearInterval(settings.tick);

? ? $(event.target).removeClass('photomatic-playing');

}

? ? );

showPhoto(0);

return this；

})(jQuery);

技巧：使用閉包跨越j(luò)QUery插件的作用域來維持狀態(tài)今阳，以及啟用可以由插件來定義和使用的私有函數(shù)創(chuàng)建师溅， 無需侵占任何命名空間。

第八章 使用Ajax與服務(wù)器通信

? ? Ajax： 無需刷新面向用戶的頁面就能發(fā)出服務(wù)器請求的所有方法盾舌。

8.1.1 創(chuàng)建XHR實例

? ? 一旦創(chuàng)建了XHR险胰，用來建立、初始化以及響應(yīng)請求的代碼就是相對于瀏覽器而獨立的矿筝，并且為任何特殊的瀏覽器創(chuàng)建XML實例都很容易。

8.1.2 發(fā)起請求

? ? 1棚贾，指定http方法

? ? 2窖维，提供要接觸的服務(wù)器端資源的URL

? ? 3.告訴XHR實例如何通報進度

? ? 4.為post請求提供任何主體內(nèi)容

1.? xhr.open('GET',url).

2. 操作onreadystatechange屬性的函數(shù)

3.send()或 send('a=1&b=2');

8.1.3 保持追蹤進度

? ? XHR通過就緒狀態(tài)處理器通知我們它的進度榆综。通過將作為就緒處理器的函數(shù)引用賦值給XHR實例的onreadystatechange

? ? 屬性來建立處理器。

xhr.onreadystatechange=function(){

? ? if(this.readyState==4){

? ? ? ? if(this.status>200 && this.status<300){

? ? }

}

}

8.1.4 獲取響應(yīng)

? ? 通過XHR實例的responseText屬性來獲取響應(yīng)主體铸史。如果響應(yīng)通過包含內(nèi)容類型頭來表明它的主體格式是XML,那么響應(yīng)主體

? ? 將會解析為XML.結(jié)果DOM將可以在responseXML屬性中獲取鼻疮，然后可以使用JS處理XML DOM

8.2 加載內(nèi)容到元素中

? ? $('#someContainer').load('someResource');

8.2.1 使用jQuery加載內(nèi)容

? ? load(url,parameters,callback)

? ? ? ? 向指定url發(fā)起帶有可選請求參數(shù)的Ajax請求×战危可以指定一個回調(diào)函數(shù)判沟，并在請求完成并且DOM被修改后調(diào)用此函數(shù)。

? ? ? ? 響應(yīng)文本會替換所有匹配的元素崭篡。

? ? 為包裝集的每個雨啊怒調(diào)用一次此函數(shù)挪哄，并把函數(shù)上下文設(shè)為目標(biāo)元素

返回：包裝集

? ? paramaters 若為散列對象或者數(shù)組，則通過POST發(fā)起請求琉闪，否則為GET

? ? ? ? 若想要創(chuàng)建一個帶參數(shù)的GET請求迹炼，可以將他們作為查詢字符串包含在url,且保證正確。

若想要篩選作為響應(yīng)返回的元素 使用選擇器颠毙。

? ? $('.injectMe').load('/someResource div');

序列化表單數(shù)據(jù)

? ? ? ? serialize()

? ? ? ? ? ? 根據(jù)包裝集中所有成功的表單元素或包裝集的表單中所有成功的表單元素斯入，創(chuàng)建正確格式化和編碼的查詢字符串。

若想以JS數(shù)組的形式獲取表數(shù)據(jù)：

? ? serializeArray()

8.2.2 加載動態(tài)的HTML片段

? ? $('#bootChooserControl').load('');

$('#bootChooserControl').change(function(event){

? ? $('#productDetailPane').load('/jqia2/action'),

? ? {style:$(event.target).val()},

? ? function(){? $('[value=""]',event.target).remove(); }

})

8.3 發(fā)起GET和POST請求

? ? ? ? get()? 獲取數(shù)據(jù)蛀蜜。? 不加密

? ? ? ? POST（） 更改信息? ? ? 加密

8.3.1 使用GET獲取數(shù)據(jù)

? ? jQuery提供了發(fā)送GET請求的幾種方式刻两。

? ? $.get(url,paramters,callback,type)

callback: 可選回調(diào)函數(shù)，請求成功調(diào)用滴某。傳入回調(diào)的參數(shù)依次為 響應(yīng)主體磅摹、文本信息、XHR實例的引用

type: 指定如何解析響應(yīng)主體? ? 如：html\text\xml\json

返回：XHR實例

8.3.2 獲取JSON數(shù)據(jù)

$.getJSON(url,parameters,callback)

? ? 返回： XHR實例

8.3.3 發(fā)起POST請求

$.post(url,parameters,callback,type)

8.3.4 實現(xiàn)級聯(lián)下拉列表

$('#bootChooseControl').change(function(event){

$('#productDetailPane').load(

? ? '/jqia2/action',

? ? $(this).serialize());

};

$.('#colorChosserControl').load(

? ? '/jqia2/action',

? ? $(this).serialize(),

? ? funtion(){

? ? $(this).attr('disabled',false);

? ? $('#sizeChooserControl').attr('disabled',true).html("");

}

);

8.4 完全控制Ajax請求

8.4.1 發(fā)起帶所有參數(shù)的Ajax請求

$.ajax(options)

? ? 使用傳入的選項來發(fā)起Ajax請求壮池，以便控制如何創(chuàng)建請求以及如何通知回調(diào).

$.ajaxSetup(options)

? ? 把傳入的一組選項屬性創(chuàng)建為隨后調(diào)用$.ajax()的默認(rèn)值

通称浚可以在頁面頭部的元素的第一行編寫這樣的代碼：

$.ajaxSetup({

? ? type:'POST',

? ? timeout:5000,

? ? dataType:'html'

});

8.4.3 處理Ajax事件

? ? 局部事件由回調(diào)函數(shù)來處理。? ? beforeSend\success\error\complete

? ? 全局事件是像jQuery中其他自定義事件那樣被觸發(fā)的事件椰憋√耍可以通過ajaxStart、ajaxSend

全局事件在被觸發(fā)時會廣播到DOM中的每個元素上橙依，因此可以在所選的DOM上創(chuàng)建這些處理器证舟。

局部事件表現(xiàn)為傳遞給$.ajax()的回調(diào)函數(shù)，而全局事件是被觸發(fā)的自定義事件窗骑。

jQuery Ajax事件創(chuàng)建器

ajaxCompelete（callback）

8.5 實現(xiàn)Termifier

? ? 術(shù)語提示 女责。

addClass-- 添加到生成的Termifier面板的外部容器的類名。

可重用插件：

1.沒有特定于THE Boot Closet 的硬編碼

2.在樣式和布局方面賦予頁面開發(fā)者最大的靈活性

(function($){

? ? $.fn.termifier=function(actionURL,options){

? ? ? ? var settings=$.extend({

? ? ? ? origin:{top:0,left:0},

? ? ? ? paramName:'term',

? ? ? ? addClass:null,

? ? ? ? actionURL:actionURL

? ? ? ? },options||{});

? ? this.click(function(event){

? ? ? ? $('div.termifier').remove();

? ? ? ? $('

.addClass('termifier'+(setting.addClass?(' ')

+settings.addClass:''))

.css({

position:'absolute',

top:event.pageY-settings.origin.top,

left:event.pageX-settings.origin.left,

display:'none'

})

.click(function(event){

$(this).fadeOut('slow');})

}).appendTo('body')

? ? .append($('

encodeURIComponent(settings.paramName)+'='+

encodeURIComponent($(event.target).text()),

function(){

$(this).closest('.termifier').fadeIn('slow');

}

)

);

this.addClass('termified');

? ? return this;? ? //保證方法鏈能夠運行良好创译。

}

})(jQuery);

決定如何找出頁面上希望添加提示框的屬于抵知。我需要構(gòu)造一個元素包裝集，其中包含了方法將要操作的術(shù)語元素。

Goodyear welt

可以只添加一些代碼到Load（）函數(shù)刷喜，而且只需監(jiān)聽那些同志什么時候可以刪除任何termfier的事件残制。

2.為提示框應(yīng)用樣式

第九章? ? jQuery UI 簡介：主題和特效

jQuery UI 不只是一個插件，它是jQuery 核心庫的官方擴展掖疮，旨在為啟用jQuery的Web應(yīng)用頁面提供擴展用戶界面的能力

9.2 jQuery的主題和樣式

1.類名

2.識別部件

? ? 用jQuery

? ? ? ?

?

? ?

? ?

? ?