1.JQuery 基礎(chǔ)

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

1.2不唐突的JS

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

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

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

1.3.1 JQuery包裝器

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

$()返回特殊的JS對(duì)象，它包含與選擇器相匹配的DOM元素?cái)?shù)組，這個(gè)數(shù)組中的元素是按照在文檔中的順序排列的。

這種構(gòu)造方法成為包裝器，因?yàn)樗b了收集到的元素并添加了擴(kuò)展器

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

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

作用鏈可以無(wú)限連續(xù)?？梢园寻b器返回的JS對(duì)象當(dāng)作普通數(shù)組。

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

1.3.2 實(shí)用函數(shù)

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

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

1.3.3 文檔就緒處理程序

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

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

$(document).ready(function(){

});

1.3.4 創(chuàng)建DOM元素

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

? ? $("

hello

").insertAfter('#id');

1.3.5? 擴(kuò)展JQuery

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

? ? 編寫(xiě)函數(shù)來(lái)填補(bǔ)。

$.fn.disable=function(){

? ? return this.each(function(){

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

});

}

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

? ? each()遍歷每個(gè)匹配元素。

1.3.6 JQuery與其它庫(kù)共存

? ? $.noConflict();

選擇要操作的元素

2.1選擇被操作的元素

? ? $('li')

2.1.1控制上下文

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

2.1.2 使用基本CSS選擇器

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

2.1.3使用子節(jié)點(diǎn)、容器和特性選擇器

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

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

? ? ? ? ? ? ? ? a[attr^='http']? 以http開(kāi)頭

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

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

2.1.4 通過(guò)位置選擇元素

? ? a:first 第一個(gè)

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

? ? a:even 偶數(shù)

? ? ul li:last-child

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

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

CSS將上面的選擇器稱(chēng)偽類(lèi)。JQuery稱(chēng)之為過(guò)濾器。以冒號(hào)開(kāi)頭。

nth-child 從1開(kāi)始計(jì)數(shù)。其它從0開(kāi)始。

2.1.5 使用CSS和自定義的jQuery過(guò)濾選擇器

? ? 1.not 過(guò)濾器

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

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

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

2.2創(chuàng)建新的HTML

? ? 第二個(gè)參數(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ù)，即從末尾開(kāi)始查找。

? ? get()

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

? ? first();

? ? last();

? ? index(element) 獲取下標(biāo)。? 參數(shù)省略，則找出包裝集中的第一個(gè)元素的在同級(jí)節(jié)點(diǎn)中的下標(biāo)

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

2.3.3分解元素包裝集

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

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? 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+$/)})

? ? ? ? ? ? ? ? ? ? ? ? /為開(kāi)頭結(jié)尾，

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

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

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

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

? ? ? ? ? ? ? ? ? ? ? ? 意義：與^類(lèi)似,匹配最末的字符.

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

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

3.獲取包裝集的子集

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

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

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

? ? 例如收集每個(gè)元素的ID值

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

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

}).get();

5.遍歷包裝集中的元素

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

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

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

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

})

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

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

$(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? 回滾到前一個(gè)包裝集

andSelf? 合并方法鏈中的前兩個(gè)包裝集。

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

第三章? 用jQuery為頁(yè)面添加活力

3.1? 使用元素屬性和特性

? ? ? ? 屬性和特性，屬性時(shí)JS對(duì)象的，特性是DOM元素的。一般特性和屬性一樣。但也有例外比如：class為特性，和屬性關(guān)聯(lián)為

? ? ? ? className。

3.2 操作元素屬性

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

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

})

3.1.2 獲取特性值

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

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

特性名稱(chēng)不區(qū)分大小寫(xiě)

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

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

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

3.1.5 有趣的特性

? ? 1.強(qiáng)制在新窗口打開(kāi)鏈接

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

2.解決雙重提交問(wèn)題

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

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

}))

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

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

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

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

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

removeData(name)

3.2 改變?cè)貥邮?/p>

3.2.1 添加和刪除類(lèi)名

? ? addClass(names)

? ? removeClass(names)

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

function swapThem(){

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

}

? ? $(function(){

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

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

});

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

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

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

等價(jià)于? $('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.定位和滾動(dòng)

? ? offset（） 返回相對(duì)于文檔的位置

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

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

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

? ? html()? 有參設(shè)置，無(wú)參獲取

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

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

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

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

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

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

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

before（）、after（）? 放在前后。 和上面類(lèi)似

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

3.3.3 包裹與反包裹元素

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

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

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

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

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

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

3.3.4 刪除元素

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

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

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

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

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

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

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

3.3.6 替換元素

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

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

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

});

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

3.4處理表單元素

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

? ? 序列化表單元素

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

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

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

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

不適合單選多選。

$('[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對(duì)象的基本原理

A.1.1 對(duì)象從何而來(lái)

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

? ? var shiny=new Object();

A.1.2 對(duì)象的屬性

? ? JS Object實(shí)例就是一組屬性集，每個(gè)屬性由名稱(chēng)和值構(gòu)成。屬性不拘于數(shù)據(jù)類(lèi)型,可以是另一個(gè)數(shù)據(jù)對(duì)象。

? ? object[expression]

下面三個(gè)等價(jià)

ride.make

ride['make']

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

ride["a property name"];

A.1.3 對(duì)象字面值

var ride={

make:'yama',

model:'V-star 110',

year:2005,

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

owner:{

name:'spike',

occupation:'bounty'

}

};

? ? JSON: 對(duì)象由一對(duì)花括號(hào)表示，在其中用逗號(hào)分隔的多個(gè)屬性。每個(gè)屬性通過(guò)以冒號(hào)分隔的名稱(chēng)和值表示。

作為交換格式時(shí)，JSON中屬性的名稱(chēng)必須由雙引號(hào)來(lái)引用。

A.1.4 作為窗體屬性的對(duì)象

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

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

? ? var foo=bar;? 等價(jià)于? window.foo=bar;

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

? ? ? ? 屬性由名稱(chēng)和值組成。

? ? ? ? 可以使用字面值來(lái)聲明對(duì)象

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

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

? ? JS的函數(shù)被認(rèn)為是對(duì)象。函數(shù)也是通過(guò)JS構(gòu)造器來(lái)定義的。

? ? 操作：

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

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

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

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

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

只有把函數(shù)賦值給變量、屬性或參數(shù)時(shí)，函數(shù)才能被引用。

function doSomething(){};等價(jià)于：

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

doSomething=function(){};

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

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

聲明函數(shù)時(shí)，創(chuàng)建一個(gè)Function實(shí)例，并賦值給window屬性，該屬性自動(dòng)創(chuàng)建。function實(shí)例不再有名字，類(lèi)似于

數(shù)字213，只能通過(guò)生成引用來(lái)對(duì)其進(jìn)行命名。

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

? ? function hello(){}

? ? setTimeout(hello,5000);

當(dāng)計(jì)時(shí)器過(guò)期時(shí)，hello函數(shù)會(huì)被調(diào)用。因?yàn)樵诖a中setTimout（）方法回調(diào)了一個(gè)函數(shù)，所以稱(chēng)setTimeout()為回調(diào)函數(shù)。

更通用的辦法，使用函數(shù)字面值來(lái)創(chuàng)建,這樣不回生成沒(méi)有必要的hello名稱(chēng)在window屬性中。

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

A.2.3 this到底是什么

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

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

var bike=ride.whatAmI();

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

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

call（）第一個(gè)參數(shù)作為函數(shù)上下文（this）的對(duì)象，其余參數(shù)稱(chēng)為被調(diào)用函數(shù)的參數(shù)。

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

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

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

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

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

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

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

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

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

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

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

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

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

第四章? 事件處理

? ? 腳本即事件處理器(監(jiān)聽(tīng)器)，

4.1.1 DOM第0級(jí)事件模型

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

onclick="say('BOOM');"

等價(jià)于：

imageElement.onclick=function(event){

say('BOOM');

};

1。event實(shí)例

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

if(! event) event=window.event;

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

target屬性?xún)?chǔ)存目標(biāo)元素的引用。

2.事件冒泡

? ? 當(dāng)觸發(fā)了DOM樹(shù)中一個(gè)元素上的事件時(shí)，觸發(fā)事件處理器，由里往外。

3.影響事件傳播和語(yǔ)義動(dòng)作

? ? 通過(guò)調(diào)用event實(shí)例的stopPropagation()方法來(lái)阻止事件向更高層傳播。

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

4.1.2 DOM第二級(jí)事件模型

1.建立事件處理器

DOM第2級(jí)事件處理器（也稱(chēng)為監(jiān)聽(tīng)器）是通過(guò)元素方法創(chuàng)建的。每個(gè)元素都定義有一個(gè)名為addEventListener()方法，

用來(lái)敷家事件處理器到元素上。

addEventListener(eventType,listener,useCapture);

eventType:click、mouseover、keydown

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

useCapture：boolean。是否使用捕捉。

$(function(){

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

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

? ? say('BOOM once!');

},false);

})

2.事件傳播

? ? 基本事件模型是冒泡。第二級(jí)增加了額外捕獲階段。

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

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

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

IE并不支持第二級(jí)事件模型，它提供對(duì)應(yīng)的專(zhuān)有模型。

4.1.3 IE事件模型

attachEvent(eventName,handler);

eventName:onclick、onmouseover、onkeydown

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

4.2? JQuery事件模型

? ? 隱藏了 IE和瀏覽器的不一致。讓開(kāi)發(fā)更簡(jiǎn)單。

JQuery事件模型的實(shí)現(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:處理類(lèi)型

data(對(duì)象)：調(diào)用者提供的數(shù)據(jù)，用來(lái)附加到Event實(shí)例的data屬性，以便為處理器函數(shù)使用。

handler：函數(shù)

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

JQuery還為事件處理提供了一個(gè)小巧的額外功能，就是通過(guò)指定命名空間來(lái)對(duì)事件處理器進(jìn)行分組。它通過(guò)為事件名稱(chēng)添加

圓點(diǎn)分割的后綴來(lái)指定命名空間。

頁(yè)面有兩種模式：顯示模式和編輯模式，事件監(jiān)聽(tīng)器只能放置在編輯模式下，因此當(dāng)頁(yè)面離開(kāi)編輯模式，需要?jiǎng)h除監(jiān)聽(tīng)器，如下：

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

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

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

離開(kāi)時(shí)： $('*').unbind('click.editMode');

eventMap:? 一個(gè)對(duì)象，名字為eventType,屬性值為handler.

$('.whatever').bind({

click:function(event){}

mouseenter:function(event){}

mouseleave:function(event){}

});

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

元素上的任何此類(lèi)處理器。

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

4.2.2 刪除事件處理器

unbind(eventType,listener);

unbind(event);

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

4.2.3 Event實(shí)例

? ? event實(shí)例提供各種信息。

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

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

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

live(eventType,data,listner).

當(dāng)指定類(lèi)型的事件在元素上發(fā)生時(shí)，會(huì)將傳入的監(jiān)聽(tīng)器座位處理器調(diào)用，而無(wú)論在調(diào)用live方法時(shí)這些元素是否存在。

$('div.attendToMe').live(

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

在整個(gè)頁(yè)面的生命周期中，單擊任意匹配元素都會(huì)調(diào)用事件處理器并傳入event實(shí)例。而且代碼不需要放在就緒處理器中，因?yàn)?/p>

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

2.刪除 live事件

? ? 使用die()方法來(lái)解除綁定。與unbind()相似。

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

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

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

trigger(eventType,data)

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

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

triggerHandler(eventType,data)

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

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

? ? toggle(),他為單機(jī)事件處理器創(chuàng)建了一個(gè)循環(huán)隊(duì)列。

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

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

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

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

等價(jià)于：

? ? hover(enterHandlder,leaveHandler);

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

第五章 用動(dòng)畫(huà)和特效裝扮頁(yè)面

特效用來(lái)增強(qiáng)頁(yè)面的可用性，而不是用來(lái)炫耀。

5.1 顯示和隱藏元素

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

hide()用于隱藏它們。

jQuery通過(guò)將元素的style.display屬性改為none來(lái)隱藏元素。

等價(jià)

$('div').hide();

jQuery可以將display屬性從none改變?yōu)閎lock或inline來(lái)顯示對(duì)象。選擇哪個(gè)值取決于之前是否顯示設(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 用動(dòng)畫(huà)改變?cè)氐娘@示狀態(tài)

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

三種特效：

顯示和隱藏

淡入和淡出

滑下和滑上

5.2.1 漸變地顯示和隱藏元素

hide(speed,callback)

speed:時(shí)間（毫秒）? 也可以為字符串slow、normal、fast

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

show(speed,callback)

speed:時(shí)間（毫秒）? 也可以為字符串slow、normal、fast

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

toggle(speed,callback)

speed:時(shí)間（毫秒）? 也可以為字符串slow、normal、fast

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

toggle(condition)

基于傳入條件的運(yùn)算結(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)

逐漸改變?cè)赝该鞫?，從他們的?dāng)前值到opacity指定的新值。

5.2.上下滑動(dòng)元素

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

slideDown(speed,callback)

隱藏的元素滑下顯示出來(lái)。

slideUp(speed,callback)

刪除匹配的顯示元素。

slideToggle(speed,callback)

5.2.4 停止動(dòng)畫(huà)

? ? stop(clearQueue,gotoEnd)

? ? 停止匹配集元素上正在進(jìn)行的所有動(dòng)畫(huà)

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

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

jQuery.fx.off 標(biāo)志為true 將導(dǎo)致所有的特效立即發(fā)生，而沒(méi)有動(dòng)畫(huà)過(guò)程。

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

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

? ? animate(properties,options)

properties(對(duì)象): 一個(gè)散列對(duì)象，指定動(dòng)畫(huà)結(jié)束時(shí)所支持的CSS樣式應(yīng)該達(dá)到的值。

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

easing(字符串)：一個(gè)函數(shù)名稱(chēng)，用于指定動(dòng)畫(huà)緩動(dòng)特效。通常是插件提供。

callback:

options:

? ? duration：

? ? easing

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

? ? queue：如果false，則動(dòng)畫(huà)立即運(yùn)行，無(wú)需排隊(duì)

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

$.fn.fadeToggle=function(speed){

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

};

5.3.1 自定義縮放動(dòng)畫(huà)

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

? ? $(this).animate({

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

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

? ? },2000);

})

5.3.2 自定義掉落動(dòng)畫(huà)

$('.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 自定義消散動(dòng)畫(huà)

$('.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 動(dòng)畫(huà)和隊(duì)列

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

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

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

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

dequeue(name)

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

3.清除沒(méi)有執(zhí)行的隊(duì)列函數(shù)

clearQueue(name)

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

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

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

5.4.3 插入函數(shù)到特效隊(duì)列。

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

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

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

標(biāo)志：

? $.fx.off? 啟用或者禁用特效? ? ? 可讀寫(xiě)

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

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

6.1.1? 禁用動(dòng)畫(huà)

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

6.1.2 檢測(cè)用戶(hù)代理支持

? ? 1.瀏覽器檢測(cè)

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

? ? ? ? 瀏覽器通過(guò)設(shè)置一個(gè)稱(chēng)為用戶(hù)代理字符串的請(qǐng)求頭來(lái)標(biāo)識(shí)自己。

? ? 2.代替方案：特征檢測(cè)

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

? ? ? ? $.support對(duì)象的屬性

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

? ? ? ? $.browser

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

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

6.2 JQuery與其他庫(kù)并存

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

? ? $.noConflict(queryToo)

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

? ? var $j=jQuery;

? ? 創(chuàng)建一個(gè)作用域環(huán)境，在該環(huán)境中$標(biāo)識(shí)符指向JQuery對(duì)象。

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

? ? （function($){/*函數(shù)主體*/})? 聲明了一個(gè)函數(shù)并用圓括號(hào)括起來(lái)，由此生成了一個(gè)表達(dá)式，這個(gè)表達(dá)式的結(jié)果是對(duì)一個(gè)匿名函數(shù)的引用，這個(gè)函數(shù)

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

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

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

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

? ? 通過(guò)將一個(gè)函數(shù)作為參數(shù)傳入jQuery函數(shù)來(lái)聲明就緒處理器。但是這次，我們實(shí)用$標(biāo)識(shí)符聲明傳入就緒處理器的單個(gè)參數(shù)。因?yàn)閖Query總是將jquery引

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

6.3 操作JS對(duì)象和集合

6.3.1 修建字符串

? ? $.trim(value)

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

6.3.2 遍歷屬性和集合

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

$.each(container,callback)

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

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

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

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

6.3.3篩選數(shù)組

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

$.grep(array,callback,invert)

對(duì)每個(gè)元素調(diào)用回調(diào)函數(shù)。

invert 省略或?yàn)閒alse,回調(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ù)組，為每一項(xiàng)調(diào)用回調(diào)函數(shù)，并將函數(shù)調(diào)用的返回值收集到一個(gè)新的數(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)時(shí)的下標(biāo)

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

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

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

$.makeArray:? ? 可以從其他類(lèi)似數(shù)組的對(duì)象來(lái)創(chuàng)建JS數(shù)組。

$.makeArray(object)

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

$.unique(array)

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

$.merge(array1,array2)

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

6.3.6 擴(kuò)展對(duì)象

? ? 在JS中模擬繼承的一個(gè)模式是，通過(guò)將基礎(chǔ)對(duì)象的屬性復(fù)制到新對(duì)象來(lái)擴(kuò)展對(duì)象。

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

? ? ? ? 使用其余傳入的對(duì)象對(duì)象的屬性來(lái)擴(kuò)展傳入的target對(duì)象。

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)建和格式化查詢(xún)字符串。

服務(wù)器端的模版工具一般都會(huì)提供強(qiáng)大機(jī)制來(lái)幫助我們構(gòu)建有效的URL。

對(duì)每一個(gè)名稱(chēng)和值進(jìn)行URL編碼

$.param(params,traditional)

將傳入的信息序列化成可在提交請(qǐng)求中使用的查詢(xún)字符串。

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

traditionl(布爾)

序列化嵌套參數(shù)

? ? 使用括號(hào)來(lái)表示組織關(guān)系

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

6.4 其他實(shí)用函數(shù)

6.4.1 什么都不做

$.noop()

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

默認(rèn)值用的。

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

? ? $.contains(container,containee)

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

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

? ? ? ? ? ? ? ? containee（元素）要測(cè)試的被包含的元素

? ? ? ? ? ? 返回true ,false

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

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

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

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

? ? ? ? ? ? name

? ? ? ? ? ? value （對(duì)象） 將要被賦值給指定名稱(chēng)的元素的數(shù)據(jù)。如果省略，獲取指定名稱(chēng)的數(shù)據(jù)

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

$.removeData（element,name）

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

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

? ? ? ? name? 將要?jiǎng)h除的數(shù)據(jù)項(xiàng)名稱(chēng)。? 省略，全刪。

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

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

$.proxy(function,proxy)

$.proxy(proxy,property)

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

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

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

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

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

6.4.5 解析JSON

$.parseJSON(json)

? ? 解析傳入的JSON字符串，返回其計(jì)算值

JSON字符串必須是雙引號(hào)字符分割

6.4.6 表達(dá)式求值

? ? $.globalEval(code)

? ? ? ? 在全局上下文中對(duì)傳入的JS代碼進(jìn)行求值

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

? ? $.getScript(url,callback)

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

? ? 返回：涌來(lái)獲取腳本的XML HTTP請(qǐng)求實(shí)例

第7章 擴(kuò)展JQuery

7.1為什么要擴(kuò)展JQuery

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

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

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

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

? ? 擴(kuò)展JQuery有兩種形式：

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

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

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

? ? ? ? 插件內(nèi)部避免名稱(chēng)沖突的辦法。但是首先來(lái)給將要編寫(xiě)的插件起個(gè)文件名以便不會(huì)和其他文件沖突。

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

? ? ? ? ? ? 前綴后面是插件的名稱(chēng)

? ? ? ? ? ? 包含插件主版本號(hào)和次版本號(hào)

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

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

7.2.2 當(dāng)心$

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

7.2.3 簡(jiǎn)化復(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 編寫(xiě)自定義實(shí)用函數(shù)

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

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

? ? jQuery.say=function(){}

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

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

$.toFixedWidth(value,length,fill)

把傳入的值格式化成指定長(zhǎng)度的定寬子段，提供可選的填充字符。

（function($){

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

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

? ? fill=fill||'0';

? ? var padding=length-result.length;

}

})(jQuery);

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

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

7.3.2 編寫(xiě)日期格式器

? ? $.formatDate(date,pattern)

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

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

7.4 添加新的包裝器方法

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

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

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

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

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

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

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散列對(duì)象里標(biāo)識(shí)的頁(yè)面元素

(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'));? ? //為每個(gè)匹配元素添加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插件的作用域來(lái)維持狀態(tài)，以及啟用可以由插件來(lái)定義和使用的私有函數(shù)創(chuàng)建， 無(wú)需侵占任何命名空間。

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

? ? Ajax： 無(wú)需刷新面向用戶(hù)的頁(yè)面就能發(fā)出服務(wù)器請(qǐng)求的所有方法。

8.1.1 創(chuàng)建XHR實(shí)例

? ? 一旦創(chuàng)建了XHR，用來(lái)建立、初始化以及響應(yīng)請(qǐng)求的代碼就是相對(duì)于瀏覽器而獨(dú)立的，并且為任何特殊的瀏覽器創(chuàng)建XML實(shí)例都很容易。

8.1.2 發(fā)起請(qǐng)求

? ? 1，指定http方法

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

? ? 3.告訴XHR實(shí)例如何通報(bào)進(jìn)度

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

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

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

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

8.1.3 保持追蹤進(jìn)度

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

? ? 屬性來(lái)建立處理器。

xhr.onreadystatechange=function(){

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

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

? ? }

}

}

8.1.4 獲取響應(yīng)

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

? ? 將會(huì)解析為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ā)起帶有可選請(qǐng)求參數(shù)的Ajax請(qǐng)求。可以指定一個(gè)回調(diào)函數(shù)，并在請(qǐng)求完成并且DOM被修改后調(diào)用此函數(shù)。

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

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

返回：包裝集

? ? paramaters 若為散列對(duì)象或者數(shù)組，則通過(guò)POST發(fā)起請(qǐng)求，否則為GET

? ? ? ? 若想要?jiǎng)?chuàng)建一個(gè)帶參數(shù)的GET請(qǐng)求，可以將他們作為查詢(xún)字符串包含在url,且保證正確。

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

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

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

? ? ? ? serialize()

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

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

? ? serializeArray()

8.2.2 加載動(dòng)態(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請(qǐng)求

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

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

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

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

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

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

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

返回：XHR實(shí)例

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

$.getJSON(url,parameters,callback)

? ? 返回： XHR實(shí)例

8.3.3 發(fā)起POST請(qǐng)求

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

8.3.4 實(shí)現(xiàn)級(jí)聯(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請(qǐng)求

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

$.ajax(options)

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

$.ajaxSetup(options)

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

通?？梢栽陧?yè)面頭部的元素的第一行編寫(xiě)這樣的代碼：

$.ajaxSetup({

? ? type:'POST',

? ? timeout:5000,

? ? dataType:'html'

});

8.4.3 處理Ajax事件

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

? ? 全局事件是像jQuery中其他自定義事件那樣被觸發(fā)的事件?？梢酝ㄟ^(guò)ajaxStart、ajaxSend

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

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

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

ajaxCompelete（callback）

8.5 實(shí)現(xiàn)Termifier

? ? 術(shù)語(yǔ)提示 。

addClass-- 添加到生成的Termifier面板的外部容器的類(lèi)名。

可重用插件：

1.沒(méi)有特定于THE Boot Closet 的硬編碼

2.在樣式和布局方面賦予頁(yè)面開(kāi)發(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;? ? //保證方法鏈能夠運(yùn)行良好。

}

})(jQuery);

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

Goodyear welt

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

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

第九章? ? jQuery UI 簡(jiǎn)介：主題和特效

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

9.2 jQuery的主題和樣式

1.類(lèi)名

2.識(shí)別部件

? ? 用jQuery

? ? ? ?

?

? ?

? ?

? ?