1.JQuery 基礎css
改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS複雜的高級特性。
1.2不唐突的JS
1.2.1行爲和結構分離
分爲組織結構、樣式、行爲三部分。
任何存在與HTML頁面<body>內部的JS代碼都是錯誤的。
1.3.1 JQuery包裝器
爲了使設計和內容分離而把CSS引入Web技術時，須要以某種方法從外部樣式表中引用頁面中的元素組。這種方法就是選擇器。它能夠根據元素的類型、特性或者元素在HTML文檔中的位置來精確地描述元素。html
$()返回特殊的JS對象，它包含與選擇器相匹配的DOM元素數組，這個數組中的元素是按照在文檔中的順序排列的。 這種構造方法成爲包裝器，由於它包裝了收集到的元素並添加了擴展器 $()函數叫包裝器。來指這些能夠經過JQuery定義的方法操做的含有匹配元素的集合。 包裝器方法：當執行完畢後會返回相同的一組元素。 做用鏈能夠無限連續。能夠把包裝器返回的JS對象看成普通數組。 html()方法：用一些HTML標記替換DOM元素的內容。
1.3.2 實用函數
$()另外一做用是 做爲一些通用實用函數集的命名空間前綴。
如 $.trim(someString);jquery
1.3.3 文檔就緒處理程序web
onload（）方法，在建立完DOM樹，並且在全部外部資源所有加載完畢，而且整個頁面在瀏覽器窗口中顯示完畢後。 使用JQuery的方法：在DOM樹加載完畢當即觸發腳本執行。 能夠屢次調用，會根據頁面中的聲明順序依次調用這些函數。 $(document).ready(function(){
});ajax
1.3.4 建立DOM元素
能夠經過向$()函數傳遞一個包含HTML標記的字符串動態建立DOM元素。
$("<p>hello</p>").insertAfter('#id');express
1.3.5 擴展JQuery
JQuery包裝器提供了大量有用的方法，能夠反覆使用。一樣能夠本身定製。
編寫函數來填補。json
$.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樹ruby
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
第二個參數指定特性和特性值
$('<img>',
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關鍵字指向按鈕元素。假設想找出此按鈕是在哪一個<div>元素塊中定義的。
$(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(「<b>some text.</b>」);
$('p.appendToMe').append($('a.appendMe')); 這樣是移動操做
單一目標這就是移動操做：原始位置被刪除。多個目標即爲複製移動，創造副本放到每一個匹配節點後面。
prepend(content) 將內容添加到匹配的開頭 before（）、after（） 放在先後。 和上面相似 appendTo()\prependTo()\insertAfter()\insertBefore()
3.3.3 包裹與反包裹元素
wrap(wraper) 將每一個匹配元素包裹到wraper裏。
$('a.surprise').wrap("<div class='hello'></div>")
$('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('<span>'+$(this).attr('alt')+'</span>')
});
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 style="display:none;">this will hiden</div> 等價 $('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(); }