1.JQuery 基礎
改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。
1.2不唐突的JS
1.2.1行為和結構分離
? ? 分為組織結構、樣式、行為三部分。
? ? 任何存在與HTML頁面內部的JS代碼都是錯誤的。
1.3.1 JQuery包裝器
? ? 為了使設計和內容分離而把CSS引入Web技術時，需要以某種方法從外部樣式表中引用頁面中的元素組。這種方法就是選擇器。它可以根據元素的類型、特性或者元素在HTML文檔中的位置來精確地描述元素。
$()返回特殊的JS對象，它包含與選擇器相匹配的DOM元素數組，這個數組中的元素是按照在文檔中的順序排列的。
這種構造方法成為包裝器，因為它包裝了收集到的元素并添加了擴展器
$()函數叫包裝器。來指這些可以通過JQuery定義的方法操作的含有匹配元素的集合。
包裝器方法：當執行完畢后會返回相同的一組元素。
作用鏈可以無限連續。可以把包裝器返回的JS對象當作普通數組。
html()方法：用一些HTML標記替換DOM元素的內容。
1.3.2 實用函數
? ? $()另一作用是 作為一些通用實用函數集的命名空間前綴。
? ? ? ? 如 $.trim(someString);
1.3.3 文檔就緒處理程序
onload（）方法，在創建完DOM樹，而且在所有外部資源全部加載完畢，并且整個頁面在瀏覽器窗口中顯示完畢后。
使用JQuery的方法：在DOM樹加載完畢立即觸發腳本執行。 可以多次調用，會根據頁面中的聲明順序依次調用這些函數。
$(document).ready(function(){
});
1.3.4 創建DOM元素
? ? 可以通過向$()函數傳遞一個包含HTML標記的字符串動態創建DOM元素。
? ? $("
hello
").insertAfter('#id');
1.3.5? 擴展JQuery
? ? JQuery包裝器提供了大量有用的方法，可以反復使用。同樣可以自己定制。
? ? 編寫函數來填補。
$.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') 第二個參數為context(上下文)，指明要搜索的部分，默認為整個DOM樹
2.1.2 使用基本CSS選擇器
? ? $("p a.spcialClass");
2.1.3使用子節點、容器和特性選擇器
? ? 子節點：ul.myList >li >a
? ? 特性選擇器：? a[attr='']
? ? ? ? ? ? ? ? a[attr^='http']? 以http開頭
? ? ? ? ? ? ? ? a[attr$='.pdf']? 以.pdf結尾
? ? ? ? ? ? ? ? a[attr*='jquery'] 查找特性值包含任意指定字符串的元素
2.1.4 通過位置選擇元素
? ? a:first 第一個
? ? a:odd 奇數元素
? ? a:even 偶數
? ? ul li:last-child
:contains('content') 包含content的節點? contains(text) :匹配包含給定文本的元素
:has(selector):匹配含有選擇器所匹配的元素的元素
CSS將上面的選擇器稱偽類。JQuery稱之為過濾器。以冒號開頭。
nth-child 從1開始計數。其它從0開始。
2.1.5 使用CSS和自定義的jQuery過濾選擇器
? ? 1.not 過濾器
? ? $('img:not([src*='dog'])')
2.has過濾器? ? 根據子節點選擇父節點
$('tr:has(img[src$='puppy.jpg'])')
2.2創建新的HTML
? ? 第二個參數指定特性和特性值
? ? $('
',
? ? ? ? src:'img/image.png',
? ? ? ? click:function(){
? ? ? ? ? ? alert($(this).attr('title'));
? ? }).css({
? ? border:'',
}).appendTo('body');
2.3.2 從包裝集中獲取元素
? ? var imgElement=$('img[alt]').get(index);? index取負數，即從末尾開始查找。
? ? get()
? ? toArray() 更推薦，等價于 get()
? ? first();
? ? last();
? ? index(element) 獲取下標。? 參數省略，則找出包裝集中的第一個元素的在同級節點中的下標
? ? var n=$('img').index('img#findMe').
2.3.3分解元素包裝集
1.添加更多元素到包裝集
? ? add（expression,context） 創建一個新的包裝集來保存結果，返回值是一個副本。
? ? ? ? ? ? ? ? ? ? ? ? ? ? expression ：選擇器、元素、數組
? ? ? ? ? ? ? ? ? ? ? ? ? ? context:指定上下文，和$()一樣
1.$('img[alt]').add('img[title]',div);
2.$('img[alt]').addClass('thickBorder').add('img[title]').addClass('seeThrough')
2.整理包裝集中的內容
? ? $('img[title]').not('[title*="puppy"]');
$('img[title]').not(function(){
return !$(this).hasClass('keepMe');
})
? ? not（）? 選擇不包含的? ? 如果參數是函數， 返回值為true的刪除
filter() 選擇包含。? ? ? 。。。。。。。。，返回值為true的添加。
$('td').filter(function(){return this.innerHTML.match(/^\d+$/)})
? ? ? ? ? ? ? ? ? ? ? ? /為開頭結尾，
? ? ? ? ? ? ? ? ? ? ? ? 字符^
? ? ? ? ? ? ? ? ? ? ? ? 意義：表示匹配的字符必須在最前邊.
? ? ? ? ? ? ? ? ? ? ? ? 例如：/^A/不匹配"an A,"中的’A’,但匹配"An A."中最前面的’A’.
? ? ? ? ? ? ? ? ? ? ? ? 字符$
? ? ? ? ? ? ? ? ? ? ? ? 意義：與^類似,匹配最末的字符.
? ? ? ? ? ? ? ? ? ? ? ? 例如：/t$/不匹配"eater"中的’t’,但匹配"eat"中的’t’.
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? \d 匹配一個數字字符 ＋重復0次或多次
3.獲取包裝集的子集
? ? slice(begin,end)? ? $('*').slice(4) 返回不包含前四個的新包裝集
? ? has(selector)? ? 返回滿足子節點條件的父節點
4.轉換包裝集中的元素
? ? 例如收集每個元素的ID值
var allIds=$('div').map(function(){
return (this.id==underfined)? null:this.id;
}).get();
5.遍歷包裝集中的元素
? ? each(iterator)? 遍歷，傳入迭代器
? ? ? ? ? ? ? ? ? ? iterator為回調函數 ,兩個參數，下標和元素本身
? ? $('img').each(function(n){
? ? ? ? this.alt='this is image['+n+'] with an id of'+this.id;
})
6.使用關系獲取包裝集
? ? 按鈕的事件處理函數觸發時，處理器內部的this關鍵字指向按鈕元素。假設想找出此按鈕是在哪個
$(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鏈
? ? 鏈式操作提高效率。
? ? $('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為特性，和屬性關聯為
? ? ? ? className。
3.2 操作元素屬性
? ? $('*').each(function(n){
? ? this.id=this.tagName+n;
})
3.1.2 獲取特性值
? ? attr(name)? 獲取匹配集合的一個元素特性值
? ? ? ? $('#myImage').attr('data-custom')? ? ? ? ? ? 自定義特性：必須data-為前綴命名規則
特性名稱不區分大小寫
3.1.3 設置特性值
? ? 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元素中相應的屬性，盡管可能導致屬性值改變
? ? 比如從元素中刪除readonly特性會導致元素的readOnly屬性值由true變為false.
3.1.5 有趣的特性
? ? 1.強制在新窗口打開鏈接
? ? ? ? $("a[href^='http://']").attr("target","_blank");
2.解決雙重提交問題
? ? $('form'.submit(function(){
? ? $(':submit',this).attr('disabled','disable');
}))
3.1.5 在元素上儲存自定義數據
? ? 自定義屬性是有風險的。特別是它可以很容易地創建循環引用，從而導致嚴重的內存泄漏。
? ? JQuery提供可控的方式將數據附加到所選擇的DOM元素上。
data(name,value)? 將傳入值添加到為所有包裝元素準備的jQuery托管數據倉庫中 寫入
data(name)? 獲取數據
removeData(name)
3.2 改變元素樣式
3.2.1 添加和刪除類名
? ? addClass(names)
? ? removeClass(names)
toggleClass(names)? 為了表示兩個狀態之間的變化? ? 當存在這個類名，刪除；不存在，即添加。
function swapThem(){
$('tr').toggleClass('striped');
}
? ? $(function(){
? ? $('table tr:nth-child(even)').addClass("striped");
? ? $("table").mouseover(swapThem).mouseout(swapThem);
});
toggleClass(names,switch)? 如果switch表達式的計算結果為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 獲取和設置樣式
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 設置元素內容
替換HTML或者文本內容
? ? html()? 有參設置，無參獲取
? ? text() 不帶參數獲取所有文本組合成的字符串。 如果傳入的呆<>等，會替換成相應的html實體字符
3.3.2 移動和復制元素
? ? append()? 追加新內容到現有內容的末尾。
? ? $(‘p’).append(“some text.”);
? ? $('p.appendToMe').append($('a.appendMe'));? ? ? ? 這樣是移動操作
? ? 單一目標這就是移動操作：原始位置被刪除。多個目標即為復制移動，創造副本放到每個匹配節點后面。
prepend(content)? 將內容添加到匹配的開頭
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)? 包裹匹配集中的內容
unwrap()? 刪除包裝元素的父節點。子元素和其所有的同級節點一起替換DOM中的父親
3.3.4 刪除元素
? ? remove（slector）? 刪除包裝集中的所有元素,返回刪除元素的集合。JQuery的數據和事件也會被刪除
? ? detach(selector)? 刪除元素，保留綁定事件和jQuery數據
? ? empty()? 清空元素，返回包裝集
? ? clone(copyHanders)? copyHander true,復制事件處理器。false不復制
$('img').clone().appendTo('fieldset.photo');
$('ul').clone().insertBefore('#here');? ? ul的子節點也會被復制
$('ul').clone().insertBefore('#here').end().hide();
3.3.6 替換元素
? ? replaceWith(content)? 使用指定內容替換每個元素
? ? $('img[alt]').each(function(){
? ? $(this).replaceWith(''+$(this).attr('alt')+'')
});
replaceAll(selector) 使用匹配元素替換slector中匹配的元素。
3.4處理表單元素
? ? 獲取和設置表單元素值
? ? 序列化表單元素
? ? 基于表單特定的屬性選擇元素
當我們是有表單元素時，指的是出現在表單內部的元素，擁有name和value特性，并且提交時，會作為http請求參數
發送到服務器中
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構造器產生。
? ? var shiny=new Object();
A.1.2 對象的屬性
? ? JS Object實例就是一組屬性集，每個屬性由名稱和值構成。屬性不拘于數據類型,可以是另一個數據對象。
? ? 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 作為窗體屬性的對象
? ? 如果在頂層（任何內部的函數主體之外）中使用var 關鍵詞，都是引用于定義在JS window對象的屬性。
? ? 任何在頂層作用域中生成的引用都隱式地創建在window實例中。
? ? var foo=bar;? 等價于? window.foo=bar;
總結：? ? JS對象是屬性的無序集合。
? ? ? ? 屬性由名稱和值組成。
? ? ? ? 可以使用字面值來聲明對象
? ? ? ? 頂層變量是window的屬性
A.2? 作為一等公民的函數
? ? JS的函數被認為是對象。函數也是通過JS構造器來定義的。
? ? 操作：
? ? ? ? 1.函數賦值給變量
? ? ? ? 2.函數指定為一個對象的屬性
? ? ? ? 3.函數作為參數傳遞
? ? ? ? 4.函數作為函數結果返回
? ? ? ? 5.使用字面值創建函數
只有把函數賦值給變量、屬性或參數時，函數才能被引用。
function doSomething(){};等價于：
它與通過var 創建window屬性使用相同的語法：
doSomething=function(){};
等價與 window.doSomething=function(){}
函數字面值：由關鍵字function與緊接著的被圓括號所包含的參數列表，以及函數主體構成。
聲明函數時，創建一個Function實例，并賦值給window屬性，該屬性自動創建。function實例不再有名字，類似于
數字213，只能通過生成引用來對其進行命名。
A.2.2 作為回調函數
? ? function hello(){}
? ? setTimeout(hello,5000);
當計時器過期時，hello函數會被調用。因為在代碼中setTimout（）方法回調了一個函數，所以稱setTimeout()為回調函數。
更通用的辦法，使用函數字面值來創建,這樣不回生成沒有必要的hello名稱在window屬性中。
setTimeout(function(){alert();},5000);
A.2.3 this到底是什么
? ? ? ? this所引用的對象（稱為函數上下文）并不是由聲明函數的方式所決定的，而是 由調用函數的方式決定的。
在默認情況下，函數調用的上下文（this）是對象，其屬性包含用于調用該函數的引用。
var bike=ride.whatAmI();
函數上下文（this）被設置為ride所指向的對象實例。
JS還提供顯式地控制函數上下文所使用的內容。通過call()\apply()來調用。
call（）第一個參數作為函數上下文（this）的對象，其余參數稱為被調用函數的參數。
apply（）第一個參數作為函數上下文（this）的對象。第二個參數是被調用函數參數的對象數組。
當對象o充當函數f的調用函數上下文時，函數f就充當了對象o的方法。
alert(o1.idetifyMe.call(o3));
盡管函數作為o1的屬性來引用，但調用的函數上下文是o3.更強調了函數上下文取決于調用函數的方式，而不是聲明函數的方式。
A.2.4 閉包（一種特殊的函數）
? ? 閉包就是Fuction實例，它結合了來自環境的（函數執行所必需的）局部變量。
在聲明函數時，可以在聲明函數時引用函數作用域內任何變量。但是使用閉包時，即使在函數聲明之后，已經超出函數作用域（也就是關閉函數
聲明）的情況下，該函數仍然帶有這些變量。
在回調函數運行時，引用聲明回調函數時的局部變量時不可或缺的工具。
閉包允許回調訪問環境中的值，即使該環境已經超出了作用域。
當就緒處理器執行完畢，local聲明所在的塊超出了作用域，但是函數聲明所創建的閉包（包括local變量）在函數的生命周期內都保持在作用域中。
閉包的另一個重要特征是：函數上下文絕不會被包含在閉包的一部分。
在局部變量中創建this引用的副本，這個副本將會被包含在閉包中。
第四章? 事件處理
? ? 腳本即事件處理器(監聽器)，
4.1.1 DOM第0級事件模型
? ? 在這種事件模型下，事件處理器是通過將一個函數實例的引用賦值給DOM元素的屬性來聲明。
onclick="say('BOOM');"
等價于：
imageElement.onclick=function(event){
say('BOOM');
};
1。event實例
? ? 當一個事件處理器被觸發時，名為Event的類實例會作為第一個參數傳入處理器中。而IE存到event的全局屬性中。
if(! event) event=window.event;
Event實例屬性提供了關于當前正在被處理的已觸發事件的大量信息。
target屬性儲存目標元素的引用。
2.事件冒泡
? ? 當觸發了DOM樹中一個元素上的事件時，觸發事件處理器，由里往外。
3.影響事件傳播和語義動作
? ? 通過調用event實例的stopPropagation()方法來阻止事件向更高層傳播。
? ? 或IE瀏覽器，event實例的屬性cancelBubble的值為true.
4.1.2 DOM第二級事件模型
1.建立事件處理器
DOM第2級事件處理器（也稱為監聽器）是通過元素方法創建的。每個元素都定義有一個名為addEventListener()方法，
用來敷家事件處理器到元素上。
addEventListener(eventType,listener,useCapture);
eventType:click、mouseover、keydown
listener:一個函數引用或內聯函數，用來在元素上創建指定事件類型的處理器。? event實例是傳入這個函數的第一個參數
useCapture：boolean。是否使用捕捉。
$(function(){
? ? var element=$('example')[0];
? ? element.addEventListener('click',function(event){
? ? say('BOOM once!');
},false);
})
2.事件傳播
? ? 基本事件模型是冒泡。第二級增加了額外捕獲階段。
在二級中，事件先從根部向下傳遞到目標元素，在從目標傳到DOM根部，前者為捕獲階段，后者為冒泡階段。
useCapture為true， 表示在捕獲階段觸發事件。
? ? ? ? 為false,在冒泡階段觸發事件。
IE并不支持第二級事件模型，它提供對應的專有模型。
4.1.3 IE事件模型
attachEvent(eventName,handler);
eventName:onclick、onmouseover、onkeydown
hander:指的是處理函數。
4.2? JQuery事件模型
? ? 隱藏了 IE和瀏覽器的不一致。讓開發更簡單。
JQuery事件模型的實現，也被非正式地成為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(對象)：調用者提供的數據，用來附加到Event實例的data屬性，以便為處理器函數使用。
handler：函數
eventMap:一個JS對象，允許在一次調用中創建多個事件類型的處理器。
JQuery還為事件處理提供了一個小巧的額外功能，就是通過指定命名空間來對事件處理器進行分組。它通過為事件名稱添加
圓點分割的后綴來指定命名空間。
頁面有兩種模式：顯示模式和編輯模式，事件監聽器只能放置在編輯模式下，因此當頁面離開編輯模式，需要刪除監聽器，如下：
$('#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 :當可聚焦元素獲取或失去焦點時，會調用為元素上的這些事件創建的處理器，同時也會調用建立在其祖先
元素上的任何此類處理器。
one(eventType,data,listner)? 只觸發一次，觸發完畢即刪除
4.2.2 刪除事件處理器
unbind(eventType,listener);
unbind(event);
為包裝集中的所有元素刪除由可選的傳入參數指定的事件處理器。
4.2.3 Event實例
? ? event實例提供各種信息。
4.2.4? ? 預先管理事件處理器
? ? 不僅僅能在就緒處理器中使用，還提供動態的管理事件處理器。
live（），允許預先為哪些還不存在的元素創建事件處理器。
live(eventType,data,listner).
當指定類型的事件在元素上發生時，會將傳入的監聽器座位處理器調用，而無論在調用live方法時這些元素是否存在。
$('div.attendToMe').live(
'click',function(event){alert(this);})
在整個頁面的生命周期中，單擊任意匹配元素都會調用事件處理器并傳入event實例。而且代碼不需要放在就緒處理器中，因為
live()不關心DOM是否存在。
2.刪除 live事件
? ? 使用die()方法來解除綁定。與unbind()相似。
4.2.5 觸發事件處理器
? ? 當瀏覽器或者用戶活動觸發了相關事件在DOM層次結構中傳播時，事件處理器將會被調用。但有時我們想在腳本控制下觸發
? ? 處理器的執行。可以將這樣的事件處理器定義為頂級函數。
trigger(eventType,data)
在所有匹配元素上調用為傳入的事件類型創造的事件處理器
只想觸發處理器，而不需要事件傳播和語義動作執行的情況：
triggerHandler(eventType,data)
4.2.6 其它事件相關的方法
1.起切換作用的監聽器
? ? toggle(),他為單機事件處理器創建了一個循環隊列。
? ? toggle(listener1,listener2,...)
用途：根據元素被單機次數切換元素的可用狀態。
2.在元素上懸停鼠標
$(element).mouseenter(function1).mouseleave(function2);
等價于：
? ? hover(enterHandlder,leaveHandler);
4.3 充分利用（更多的）事件
第五章 用動畫和特效裝扮頁面
特效用來增強頁面的可用性，而不是用來炫耀。
5.1 顯示和隱藏元素
show()用于顯示包裝集中的元素
hide()用于隱藏它們。
jQuery通過將元素的style.display屬性改為none來隱藏元素。
等價
$('div').hide();
jQuery可以將display屬性從none改變為block或inline來顯示對象。選擇哪個值取決于之前是否顯示設置元素display值。
若顯式設置，則它被記錄并恢復。否則取決于默認值。
$('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 切換元素的顯示
? ? 再顯示和隱藏之間切換元素的狀態。使用toggle()方法。
? ? $('div.caption img').click(function(){
? ? $(this).closest('div.module').find('div.body').toggle();
}）
5.2 用動畫改變元素的顯示狀態
? ? 短時間的漸變過程有助于我們了解什么正在改變，以及如何從一個狀態轉換到另一個狀態。
三種特效：
顯示和隱藏
淡入和淡出
滑下和滑上
5.2.1 漸變地顯示和隱藏元素
hide(speed,callback)
speed:時間（毫秒）? 也可以為字符串slow、normal、fast
callback:當動畫結束時調用
show(speed,callback)
speed:時間（毫秒）? 也可以為字符串slow、normal、fast
callback:當動畫結束時調用
toggle(speed,callback)
speed:時間（毫秒）? 也可以為字符串slow、normal、fast
callback:當動畫結束時調用
toggle(condition)
基于傳入條件的運算結果顯示和隱藏匹配元素。 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)
逐漸改變元素透明度，從他們的當前值到opacity指定的新值。
5.2.上下滑動元素
? ? 另一組用于隱藏和顯示元素的特效（slideDown()、slideUp()），再顯示時好像從頂部滑下，隱藏是滑入頂部。
slideDown(speed,callback)
隱藏的元素滑下顯示出來。
slideUp(speed,callback)
刪除匹配的顯示元素。
slideToggle(speed,callback)
5.2.4 停止動畫
? ? stop(clearQueue,gotoEnd)
? ? 停止匹配集元素上正在進行的所有動畫
? ? clearQueue(布爾)：true, 停止當前動畫，而且停止動畫隊列中等待的其他所有動畫
? ? gotoEnd(布爾): true, 則使當前動畫執行到其邏輯結束。
jQuery.fx.off 標志為true 將導致所有的特效立即發生，而沒有動畫過程。
5.3 創建自定義動畫
? ? animate(properties,duration,easing,callback)
? ? animate(properties,options)
properties(對象): 一個散列對象，指定動畫結束時所支持的CSS樣式應該達到的值。
duration: 時間可毫秒或可預定于字符串。
easing(字符串)：一個函數名稱，用于指定動畫緩動特效。通常是插件提供。
callback:
options:
? ? duration：
? ? easing
? ? complete：動畫完成調用函數
? ? queue：如果false，則動畫立即運行，無需排隊
? ? step：在動畫每一步都會調用的回調函數。
$.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 動畫和隊列
? ? 如果想使自己的函數擁有相同功能該怎么辦呢？jQuery隊列
queue(name)? ? ? ? ? 根據傳入的名字查找建立在匹配集中第一個元素上的任意隊列，以函數數組的形式返回。
queue(name,function)? 添加函數到隊列
queue(name,queue)? ? 把匹配元素上現有的任意隊列替換為傳入的隊列
dequeue(name)
刪除匹配集中每個元素的命名隊列中的第一個函數，并執行。
3.清除沒有執行的隊列函數
clearQueue(name)
? ? 從命名隊列中刪除所有未執行的函數
4.延遲隊列函數
? ? delay(duration,name);? 延遲隊列中下一個函數的執行。
5.4.3 插入函數到特效隊列。
第六章? DOM無關的jQuery實用函數
實用函數：定義在JQuery／$命名空間下步操作包裝集的函數。這些函數可以看作是定義在$實例。
實用函數要么操作除DOM以外的JS對象，要么執行一些對象無關的操作（Ajax）。
標志：
? $.fx.off? 啟用或者禁用特效? ? ? 可讀寫
? $.support? 所支持特征的詳細信息? ? 只讀
? $.browser 公開瀏覽器的細節? ? ? ? 只讀
6.1.1? 禁用動畫
$.fx.off? 啟用或者禁用特效? true? 禁用
6.1.2 檢測用戶代理支持
? ? 1.瀏覽器檢測
? ? ? ? 避免使用瀏覽器檢測技術
? ? ? ? 瀏覽器通過設置一個稱為用戶代理字符串的請求頭來標識自己。
? ? 2.代替方案：特征檢測
? ? 3.jQuery瀏覽器功能標志
? ? ? ? $.support對象的屬性
6.13 瀏覽器檢測標志
? ? ? ? $.browser
? ? 建議使用這樣的方式，哪怕mise消失，只需修改一次。
? ? ：? $.support.useIntForSelectAdds=$.browser.mise;
6.2 JQuery與其他庫并存
? ? ? ? $.noConflict()實用函數調用來放棄對$標識符的占用，是通過JQuery標識符
? ? $.noConflict(queryToo)
? ? jqueryToo（布爾） 若true，放棄$和JQuery標識符
? ? var $j=jQuery;
? ? 創建一個作用域環境，在該環境中$標識符指向JQuery對象。
? ? （function($){/*函數主體*/})(jQuery）;
? ? （function($){/*函數主體*/})? 聲明了一個函數并用圓括號括起來，由此生成了一個表達式，這個表達式的結果是對一個匿名函數的引用，這個函數
? ? 期望傳入單個參數并將其命名為$
? ? (jQuery）在匿名函數上執行函數調用，講JQuery對象作為參數傳遞。
? ? 習慣用法的變體： 用于聲明就緒處理函數
? ? ? ? jQuery（function($){alert("111")}）;
? ? 通過將一個函數作為參數傳入jQuery函數來聲明就緒處理器。但是這次，我們實用$標識符聲明傳入就緒處理器的單個參數。因為jQuery總是將jquery引
? ? 用作為第一個也是唯一的參數傳入就緒處理器。
6.3 操作JS對象和集合
6.3.1 修建字符串
? ? $.trim(value)
? ? 刪除傳入的字符串開頭和結尾處的空白自負，并返回修改后的結果
6.3.2 遍歷屬性和集合
? ? $.each() 函數
$.each(container,callback)
遍歷傳入的容器中的每一項，并為每一項調用傳入的回調函數
container(數組｜對象)
callback(函數)? callback的一個參數是數組元素的下標或對象屬性的名稱。第二個參數是數組項或屬性值
當遍歷時，可以使函數返回false跳出循環。
6.3.3篩選數組
? ? $.grep()函數,篩選數據
$.grep(array,callback,invert)
對每個元素調用回調函數。
invert 省略或為false,回調函數返回true將導致數據被收集
? ? ? ? true,? ? ? ? ? ? ? ? ? false? ? ? ? 被收集
var badZips=$.grep(originlArray,function(value){return value.match(/^\d(-\d{4})?$/)!=null;}
? ? ? ? ? ? ,true);
6.3.4 轉換數組
? ? 數據并不總是以我們需要的格式存在。
? ? $.map(array,callback)
遍歷傳入的數組，為每一項調用回調函數，并將函數調用的返回值收集到一個新的數組中。
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數組中是否包含特定值和位置。
? ? $.inArray(value,array)
? ? ? ? 返回傳入的值第一次出現時的下標
? ? value(對象) 需要在數組上搜索的值
? ? array（數組）被搜索的數組
var index=$.inArray(2,[1,2,3,4,5]);
$.makeArray:? ? 可以從其他類似數組的對象來創建JS數組。
$.makeArray(object)
將傳入的類似數組的對象轉換為JS數組
$.unique(array)
向其傳入DOM元素的數組，則返回由原始數組中不重復的元素組成的數組。
$.merge(array1,array2)
將第二個數組合并到的一個數組，返回的一個數組
6.3.6 擴展對象
? ? 在JS中模擬繼承的一個模式是，通過將基礎對象的屬性復制到新對象來擴展對象。
? ? $.extend(deep,target,source1,source2,...,sourceN)
? ? ? ? 使用其余傳入的對象對象的屬性來擴展傳入的target對象。
deep（布爾） 深復制還是淺復制。
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 序列化參數值
? ? 正確創建和格式化查詢字符串。
服務器端的模版工具一般都會提供強大機制來幫助我們構建有效的URL。
對每一個名稱和值進行URL編碼
$.param(params,traditional)
將傳入的信息序列化成可在提交請求中使用的查詢字符串。
params(數組｜jQuery｜對象) 需要序列化為查詢字符串的值
traditionl(布爾)
序列化嵌套參數
? ? 使用括號來表示組織關系
? ? name[first]=YOGi&name[last]=Bear
6.4 其他實用函數
6.4.1 什么都不做
$.noop()
還記得有多少個Jquery方法需要傳入可選的回調函數作為參數或者選項值嗎？$.noop()就是用戶沒有提供回調函數時作為其
默認值用的。
6.4.2 測試包含關系
? ? $.contains(container,containee)
? ? ? ? ? ? 測試一個元素是否在DOM層次結構中包含在另一個元素內部
? ? ? ? ? ? ? ? container(元素) 要測試的包含另一個元素的DOM元素
? ? ? ? ? ? ? ? containee（元素）要測試的被包含的元素
? ? ? ? ? ? 返回true ,false
6.4.3 附加數據到元素上
? ? $.data(element,name,value)
? ? ? ? 使用指定的名稱在傳入的元素上存儲或檢索數據
? ? ? ? ? ? element(元素)，? 用于儲存或檢索的元素
? ? ? ? ? ? name
? ? ? ? ? ? value （對象） 將要被賦值給指定名稱的元素的數據。如果省略，獲取指定名稱的數據
? ? ? ? 返回： 存儲或獲取的數據值
$.removeData（element,name）
? ? 刪除儲存在傳入的元素上的數據
? ? ? ? element(元素) 將要從中刪除數據的元素
? ? ? ? name? 將要刪除的數據項名稱。? 省略，全刪。
6.4.4 預綁定函數上下文
? ? 我們想調用特定的函數并且顯示地控制函數的上下文時，可以使用Function.call()方法來調用。
$.proxy(function,proxy)
$.proxy(proxy,property)
使用預綁定的代理對象創建函數的一個副本，在函數作為回調函數被調用時，此對象作為函數的上下文。
? ? proxy 將要綁定微代理函數上下文的對象
? ? property（字符串） 傳入的proxy對象的屬性名稱，包含要綁定的函數
用途：當向回調函數提供的數據難以正常地通過閉包或者其他方式訪問時，這個功能非常有用
將對象的方法綁定微處理器，并且將擁有方法的對象作為處理器的函數上下文。
6.4.5 解析JSON
$.parseJSON(json)
? ? 解析傳入的JSON字符串，返回其計算值
JSON字符串必須是雙引號字符分割
6.4.6 表達式求值
? ? $.globalEval(code)
? ? ? ? 在全局上下文中對傳入的JS代碼進行求值
6.4.7 動態加載腳本
? ? $.getScript(url,callback)
? ? ? ? 通過向指定的服務器發起GET請求來獲取由URL參數指定的腳本，在請求成功后調用回調。
? ? 返回：涌來獲取腳本的XML HTTP請求實例
第7章 擴展JQuery
7.1為什么要擴展JQuery
? ? 1.可以提供保持一致的代碼風格
? ? 2.通過遵循這些工具的設計先例，自然就能從這些設計中獲得規劃的好處。
? ? 3.擴展JQuery，可以使用現有的代碼基礎，方便易用。
7.2 JQuery插件開發指南
? ? 擴展JQuery有兩種形式：
? ? ? ? 1.直接定義在$上的實用函數
? ? ? ? 2.操作JQuery包裝集的方法
7.2.1 為文件和函數命名
? ? ? ? 插件內部避免名稱沖突的辦法。但是首先來給將要編寫的插件起個文件名以便不會和其他文件沖突。
? ? ? ? ? ? 為文件名添加Jquery前綴。
? ? ? ? ? ? 前綴后面是插件的名稱
? ? ? ? ? ? 包含插件主版本號和次版本號
? ? ? ? ? ? 以.js 結束
? ? ? ? eg： jquery.fred-1.0.js
7.2.2 當心$
? ? (function($){})(JQuery);
7.2.3 簡化復雜參數列表
? ? complex(valueA,null,null,null,valueB)
? ? complex(valueA,{p7:valueB});
新的函數使用：
complex(p1,options)
function complex(p1,options){
var settings=$.extend({
option1:d1,
option2:d2,
option3:d3,
},options||{});
}
7.3 編寫自定義實用函數
? ? $.say=function(){};
? ? 更加穩妥的方法
? ? jQuery.say=function(){}
(function($){})(JQuery); 這樣是最推薦的方式
7.3。1 創建數據操作的實用函數
$.toFixedWidth(value,length,fill)
把傳入的值格式化成指定長度的定寬子段，提供可選的填充字符。
（function($){
? ? $.toFixedWidth=function(value,length,fill){
? ? var result=(value||'').toString();
? ? fill=fill||'0';
? ? var padding=length-result.length;
}
})(jQuery);
為實用函數添加命名空間
? ? $.jQiaDateFormat.toFixedWidth=function(){};
7.3.2 編寫日期格式器
? ? $.formatDate(date,pattern)
? ? ? ? 根據提供的模式格式化傳入的日期。
? ? ? ? 任何不匹配模式標記的字符被原封不動地復制到結果中
7.4 添加新的包裝器方法
? ? ? ? 要給jQuery添加包裝器方法，必須把這些方法賦值給$命名空間中名為fn的對象的屬性
? ? ? ? ? ? $.fn.wrapper=function(){}
? ? ? ? 定義的包裝器方法主體部分的this必須志向包裝集。
? ? 原則：除非要返回特定的值，否則函數應該總是將包裝集作為其返回值。
通過使用接受函數作為值的方法進行遍歷
7.4.1 在包裝器方法中應用多個操作
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 保留在包裝器方法里的狀態
? ? ? ? photomatic(options)
? ? ? ? ? ? 設置縮略圖包裝集以及在options散列對象里標識的頁面元素
(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);
技巧：使用閉包跨越jQUery插件的作用域來維持狀態，以及啟用可以由插件來定義和使用的私有函數創建， 無需侵占任何命名空間。
第八章 使用Ajax與服務器通信
? ? Ajax： 無需刷新面向用戶的頁面就能發出服務器請求的所有方法。
8.1.1 創建XHR實例
? ? 一旦創建了XHR，用來建立、初始化以及響應請求的代碼就是相對于瀏覽器而獨立的，并且為任何特殊的瀏覽器創建XML實例都很容易。
8.1.2 發起請求
? ? 1，指定http方法
? ? 2，提供要接觸的服務器端資源的URL
? ? 3.告訴XHR實例如何通報進度
? ? 4.為post請求提供任何主體內容
1.? xhr.open('GET',url).
2. 操作onreadystatechange屬性的函數
3.send()或 send('a=1&b=2');
8.1.3 保持追蹤進度
? ? XHR通過就緒狀態處理器通知我們它的進度。通過將作為就緒處理器的函數引用賦值給XHR實例的onreadystatechange
? ? 屬性來建立處理器。
xhr.onreadystatechange=function(){
? ? if(this.readyState==4){
? ? ? ? if(this.status>200 && this.status<300){
? ? }
}
}
8.1.4 獲取響應
? ? 通過XHR實例的responseText屬性來獲取響應主體。如果響應通過包含內容類型頭來表明它的主體格式是XML,那么響應主體
? ? 將會解析為XML.結果DOM將可以在responseXML屬性中獲取，然后可以使用JS處理XML DOM
8.2 加載內容到元素中
? ? $('#someContainer').load('someResource');
8.2.1 使用jQuery加載內容
? ? load(url,parameters,callback)
? ? ? ? 向指定url發起帶有可選請求參數的Ajax請求。可以指定一個回調函數，并在請求完成并且DOM被修改后調用此函數。
? ? ? ? 響應文本會替換所有匹配的元素。
? ? 為包裝集的每個雨啊怒調用一次此函數，并把函數上下文設為目標元素
返回：包裝集
? ? paramaters 若為散列對象或者數組，則通過POST發起請求，否則為GET
? ? ? ? 若想要創建一個帶參數的GET請求，可以將他們作為查詢字符串包含在url,且保證正確。
若想要篩選作為響應返回的元素 使用選擇器。
? ? $('.injectMe').load('/someResource div');
序列化表單數據
? ? ? ? serialize()
? ? ? ? ? ? 根據包裝集中所有成功的表單元素或包裝集的表單中所有成功的表單元素，創建正確格式化和編碼的查詢字符串。
若想以JS數組的形式獲取表數據：
? ? serializeArray()
8.2.2 加載動態的HTML片段
? ? $('#bootChooserControl').load('');
$('#bootChooserControl').change(function(event){
? ? $('#productDetailPane').load('/jqia2/action'),
? ? {style:$(event.target).val()},
? ? function(){? $('[value=""]',event.target).remove(); }
})
8.3 發起GET和POST請求
? ? ? ? get()? 獲取數據。? 不加密
? ? ? ? POST（） 更改信息? ? ? 加密
8.3.1 使用GET獲取數據
? ? jQuery提供了發送GET請求的幾種方式。
? ? $.get(url,paramters,callback,type)
callback: 可選回調函數，請求成功調用。傳入回調的參數依次為 響應主體、文本信息、XHR實例的引用
type: 指定如何解析響應主體? ? 如：html\text\xml\json
返回：XHR實例
8.3.2 獲取JSON數據
$.getJSON(url,parameters,callback)
? ? 返回： XHR實例
8.3.3 發起POST請求
$.post(url,parameters,callback,type)
8.3.4 實現級聯下拉列表
$('#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 發起帶所有參數的Ajax請求
$.ajax(options)
? ? 使用傳入的選項來發起Ajax請求，以便控制如何創建請求以及如何通知回調.
$.ajaxSetup(options)
? ? 把傳入的一組選項屬性創建為隨后調用$.ajax()的默認值
通常可以在頁面頭部的元素的第一行編寫這樣的代碼：
$.ajaxSetup({
? ? type:'POST',
? ? timeout:5000,
? ? dataType:'html'
});
8.4.3 處理Ajax事件
? ? 局部事件由回調函數來處理。? ? beforeSend\success\error\complete
? ? 全局事件是像jQuery中其他自定義事件那樣被觸發的事件。可以通過ajaxStart、ajaxSend
全局事件在被觸發時會廣播到DOM中的每個元素上，因此可以在所選的DOM上創建這些處理器。
局部事件表現為傳遞給$.ajax()的回調函數，而全局事件是被觸發的自定義事件。
jQuery Ajax事件創建器
ajaxCompelete（callback）
8.5 實現Termifier
? ? 術語提示 。
addClass-- 添加到生成的Termifier面板的外部容器的類名。
可重用插件：
1.沒有特定于THE Boot Closet 的硬編碼
2.在樣式和布局方面賦予頁面開發者最大的靈活性
(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);
決定如何找出頁面上希望添加提示框的屬于。我需要構造一個元素包裝集，其中包含了方法將要操作的術語元素。
Goodyear welt
可以只添加一些代碼到Load（）函數，而且只需監聽那些同志什么時候可以刪除任何termfier的事件。
2.為提示框應用樣式
第九章? ? jQuery UI 簡介：主題和特效
jQuery UI 不只是一個插件，它是jQuery 核心庫的官方擴展，旨在為啟用jQuery的Web應用頁面提供擴展用戶界面的能力
9.2 jQuery的主題和樣式
1.類名
2.識別部件
? ? 用jQuery
? ? ? ?
?
? ?
? ?
? ?
