jQuery模塊
選擇器、DOM操作弟断、事件兵拢、AJAX與動(dòng)畫(huà)
匿名函數(shù)自執(zhí)行
作用：解決命名空間與變量污染的問(wèn)題
總結(jié)：全局變量是魔鬼,?匿名函數(shù)可以有效的保證在頁(yè)面上寫(xiě)入JavaScript正蛙，而不會(huì)造成全局變量的污染然想，通過(guò)小括號(hào)温治，讓其加載的時(shí)候立即初始化扯罐，這樣就形成了一個(gè)單例模式的效果從而只會(huì)執(zhí)行一次
jQuery與DOM
jQuery是一個(gè)類(lèi)數(shù)組對(duì)象陆赋，而DOM對(duì)象就是一個(gè)單獨(dú)的DOM元素
如何把jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象：
????var $div = $('div')? ? //jQuery對(duì)象
????var div = $div.get(0)? ?//轉(zhuǎn)化成DOM對(duì)象
????div.style.color = 'red'? ? //操作dom對(duì)象的屬性
如何將DOM對(duì)象轉(zhuǎn)化成jQuery對(duì)象：
????var div = document.getElementsByTagName('div'); //dom對(duì)象
????var $div = $(div); //jQuery對(duì)象
????var $first = $div.first(); //找到第一個(gè)div元素
????$first.css('color', 'red'); //給第一個(gè)元素設(shè)置顏色
jQuery 選擇器
1. id選擇器? ??$( "#id" )? ? ? ? =>dpcument.getElementById('id')
2.?類(lèi)選擇器? ?$( ".class" )? ? ? ? => document.getElementsByClassName('class');
3.?元素選擇器??$( "element" )? => document.getElementsByTagName('div')
4.?全選擇器? ?$( "*" )? ? =>document.getElementsByTagName('*')? ?
5.?層級(jí)選擇器? ?$('div > p')??
6.?基本篩選選擇器??
例如：$(".div:first")
7.?內(nèi)容篩選選擇器??
注意：
1》:contains與:has都有查找的意思扛门，但是contains查找包含“指定文本”的元素鸠信，has查找包含“指定元素”的元素
2》如果:contains匹配的文本包含在元素的子元素中，同樣認(rèn)為是符合條件的尖飞。
3》:parent與:empty是相反的症副，兩者所涉及的子元素，包括文本節(jié)點(diǎn)
8.?可見(jiàn)性篩選選擇器
:hidden選擇器政基，不僅僅包含樣式是display="none"的元素贞铣，還包括隱藏表單、visibility等等
可以隱藏一個(gè)元素的方式：
? ? 1.CSS display的值是none沮明。
? ? 2.type="hidden"的表單元素辕坝。
? ? 3. 寬度和高度都顯式設(shè)置為0。
? ? 4.一個(gè)祖先元素是隱藏的荐健，該元素是不會(huì)在頁(yè)面上顯示
? ? 5.CSS visibility的值是hidden
? ? 6.CSS opacity的指是0
注意：如果元素中占據(jù)文檔中一定的空間,元素被認(rèn)為是可見(jiàn)的酱畅。
????????????可見(jiàn)元素的寬度或高度琳袄，是大于零。
????????????元素的visibility: hidden 或 opacity: 0被認(rèn)為是可見(jiàn)的纺酸，因?yàn)樗麄內(nèi)匀徽加每臻g布局
9.?屬性篩選選擇器
例如??$('input[type="text"]')
10.?元素篩選選擇器
注意：
? ? 1. :first只匹配一個(gè)單獨(dú)的元素窖逗，但是:first-child選擇器可以匹配多個(gè)：即為每個(gè)父級(jí)元素匹配第一個(gè)子元素。這相當(dāng)于:nth-child(1)
? ? 2. :last 只匹配一個(gè)單獨(dú)的元素餐蔬， :last-child 選擇器可以匹配多個(gè)元素：即碎紊，為每個(gè)父級(jí)元素匹配最后一個(gè)子元素
? ? 3. 如果子元素只有一個(gè)的話，:first-child與:last-child是同一個(gè)
? ? ?4. :only-child匹配某個(gè)元素是父元素中唯一的子元素樊诺，就是說(shuō)當(dāng)前子元素是父元素中唯一的元素仗考，則匹配
? ? ?5. jQuery實(shí)現(xiàn):nth-child(n)是嚴(yán)格來(lái)自CSS規(guī)范，所以n值是“索引”词爬，也就是說(shuō)秃嗜，從1開(kāi)始計(jì)數(shù)，:nth-child(index)從1開(kāi)始的顿膨，而eq(index)是從0開(kāi)始的
? ? ?6. nth-child(n) 與 :nth-last-child(n) 的區(qū)別前者是從前往后計(jì)算锅锨，后者從后往前計(jì)算
11.?表單元素選擇器
12.?表單對(duì)象屬性篩選選擇器
注意：
????選擇器適用于復(fù)選框和單選框，對(duì)于下拉框元素, 使用 :selected 選擇器
????在某些瀏覽器中虽惭，選擇器:checked可能會(huì)錯(cuò)誤選取到<option>元素橡类，所以保險(xiǎn)起見(jiàn)換用選擇器input:checked，確保只會(huì)選取元素
13.?特殊選擇器this
this是JavaScript中的關(guān)鍵字芽唇，指的是當(dāng)前的上下文對(duì)象顾画，簡(jiǎn)單的說(shuō)就是方法/屬性的所有者
注意：
? ??this，表示當(dāng)前的上下文對(duì)象是一個(gè)html對(duì)象匆笤，可以調(diào)用html對(duì)象所擁有的屬性和方法研侣。
? ??$(this),代表的上下文對(duì)象是一個(gè)jquery的上下文對(duì)象，可以調(diào)用jQuery的方法和屬性值炮捧。
jQuery的屬性與樣式
1. attr()? prop()?
操作特性的DOM方法主要有3個(gè)：getAttribute庶诡、setAttribute、removeAttribute
jQuery：attr()? 獲取和設(shè)置元素屬性咆课、removeAttr()
獲取Attribute就需要用attr末誓，獲取Property（特性）就需要用prop
2.?html()? text()
.html()??獲取集合中第一個(gè)匹配元素的HTML內(nèi)容 或 設(shè)置每一個(gè)匹配元素的html內(nèi)容
注意：.html()方法內(nèi)部使用的是DOM的innerHTML屬性來(lái)處理的，所以在設(shè)置與獲取上需要注意的一個(gè)最重要的問(wèn)題书蚪，這個(gè)操作是針對(duì)整個(gè)HTML內(nèi)容（不僅僅只是文本內(nèi)容）
.text()??得到匹配元素集合中每個(gè)元素的文本內(nèi)容結(jié)合喇澡，包括他們的后代，或設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容
3.?.val()? ?用于處理表單元素的值
.html(),.text()和.val()的區(qū)別：?
????1>.html()殊校、.text()晴玖、.val()三種方法都是用來(lái)讀取選定元素的內(nèi)容；只不過(guò).html()是用來(lái)讀取元素的html內(nèi)容（包括html標(biāo)簽），.text()用來(lái)讀取元素的純文本內(nèi)容呕屎，包括其后代元素让簿，.val()是用來(lái)讀取表單元素的"value"值。其中.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上秀睛；另外.html()方法使用在多個(gè)元素上時(shí)尔当，只讀取第一個(gè)元素；.val()方法和.html()相同琅催，如果其應(yīng)用在多個(gè)元素上時(shí)居凶，只能讀取第一個(gè)表單元素的"value"值，但是.text()和他們不一樣藤抡，如果.text()應(yīng)用在多個(gè)元素上時(shí)，將會(huì)讀取所有選中元素的文本內(nèi)容抹估。
????2>.html(htmlString),.text(textString)和.val(value)三種方法都是用來(lái)替換選中元素的內(nèi)容缠黍，如果三個(gè)方法同時(shí)運(yùn)用在多個(gè)元素上時(shí)，那么將會(huì)替換所有選中元素的內(nèi)容药蜻。
????3>.html(),.text(),.val()都可以使用回調(diào)函數(shù)的返回值來(lái)動(dòng)態(tài)的改變多個(gè)元素的內(nèi)容瓷式。
4.?.addClass()? ?.removeClass()
????.addClass()? ??增加樣式
? ?.removeClass()? ?刪除樣式
5. 切換樣式.toggleClass()
通過(guò)toggleClass方法動(dòng)態(tài)添加刪除Class，一次執(zhí)行相當(dāng)于addClass语泽，再次執(zhí)行相當(dāng)于removeClass
6.?樣式操作.css()
.css() ：獲取元素樣式屬性的計(jì)算值或者設(shè)置元素的CSS屬性
7.?元素的數(shù)據(jù)存儲(chǔ)
jQuery操作DOM
JavaScript創(chuàng)建div節(jié)點(diǎn)元素
創(chuàng)建流程：
????創(chuàng)建節(jié)點(diǎn)(常見(jiàn)的：元素贸典、屬性和文本)
????添加節(jié)點(diǎn)的一些屬性
????加入到文檔中
流程中涉及的方法：
????創(chuàng)建元素：document.createElement
????設(shè)置屬性：setAttribute
????添加文本：innerHTML
????加入文檔：appendChild
1. jQuery?創(chuàng)建元素節(jié)點(diǎn)
? ??$("<div>是文本節(jié)點(diǎn)</div>")
2.?DOM內(nèi)部插入append() 、appendTo()
append()前面是被插入的對(duì)象踱卵，后面是要在對(duì)象內(nèi)插入的元素內(nèi)容
appendTo()前面是要插入的元素內(nèi)容廊驼，而后面是被插入的對(duì)象
3.?DOM外部插入after()、before()
before與after都是用來(lái)對(duì)相對(duì)選中元素外部增加相鄰的兄弟節(jié)點(diǎn)
都可以接收HTML字符串惋砂，DOM 元素妒挎，元素?cái)?shù)組，或者jQuery對(duì)象西饵，用來(lái)插入到集合中每個(gè)匹配元素的前面或者后面
都支持多個(gè)參數(shù)傳遞
4.?內(nèi)部插入prepend()與prependTo()
5.?外部插入insertAfter()與insertBefore()
6.?DOM節(jié)點(diǎn)刪除? empty()? 酝掩、remove()
? ? empty()? ?只移除了 指定元素中的所有子節(jié)點(diǎn)
????通過(guò)empty移除了當(dāng)前div元素下的所有p元素 但是本身id=test的div元素沒(méi)有被刪除
? ??remove（ ）? 會(huì)將元素自身移除，同時(shí)也會(huì)移除元素內(nèi)部的一切眷柔，包括綁定的事件及與該元素相關(guān)的jQuery數(shù)據(jù)
empty和remove區(qū)別：
嚴(yán)格地講期虾，empty()方法并不是刪除節(jié)點(diǎn)，而是清空節(jié)點(diǎn)驯嘱，它能清空元素中的所有后代節(jié)點(diǎn)
empty不能刪除自己本身這個(gè)節(jié)點(diǎn)
remove方法?該節(jié)點(diǎn)與該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時(shí)被刪除
提供傳遞一個(gè)篩選的表達(dá)式镶苞，刪除指定合集中的元素
7.?保留數(shù)據(jù)的刪除操作detach()
detach() 讓一個(gè)web元素托管 即從當(dāng)前頁(yè)面中移除該元素，但保留這個(gè)元素的內(nèi)存模型對(duì)象
var a = $("div").detach()? ?移除對(duì)象
$('body').append(a)? ?添加
detach()和remove()區(qū)別：
remove：
無(wú)參數(shù)宙拉，移除自身整個(gè)節(jié)點(diǎn)以及該節(jié)點(diǎn)的內(nèi)部的所有節(jié)點(diǎn)宾尚，包括節(jié)點(diǎn)上事件與數(shù)據(jù)
有參數(shù)，移除篩選出的節(jié)點(diǎn)以及該節(jié)點(diǎn)的內(nèi)部的所有節(jié)點(diǎn)，包括節(jié)點(diǎn)上事件與數(shù)據(jù)
detach：
移除的處理與remove一致
與remove()不同的是煌贴，所有綁定的事件御板、附加的數(shù)據(jù)等都會(huì)保留下來(lái)
例如：$("p").detach()這一句會(huì)移除對(duì)象，僅僅是顯示效果沒(méi)有了牛郑。但是內(nèi)存中還是存在的怠肋。當(dāng)你append之后，又重新回到了文檔流中淹朋。就又顯示出來(lái)了
8.?DOM拷貝? ?clone()
.clone()方法? 深度 復(fù)制所有匹配的元素集合笙各，包括所有匹配元素、匹配元素的下級(jí)元素础芍、文字節(jié)點(diǎn)
9.?DOM替換replaceWith()和replaceAll()
.replaceWith( newContent )：用提供的內(nèi)容替換集合中所有匹配的元素并且返回被刪除元素的集合
.replaceAll( target )?：用集合的匹配元素替換每個(gè)目標(biāo)元素
10.?DOM包裹? ?
.wrap( wrappingElement )：在集合中匹配的每個(gè)元素周?chē)粋€(gè)HTML結(jié)構(gòu)
.wrap( function )?：一個(gè)回調(diào)函數(shù)杈抢，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對(duì)象
unwrap()? ?將匹配元素集合的父級(jí)元素刪除，保留自身（和兄弟元素仑性，如果存在）在原來(lái)的位置
$('p').unwrap();? ?調(diào)用unwrap方法惶楼，會(huì)刪除p的父輩元素
.wrapAll( wrappingElement )：給集合中匹配的元素增加一個(gè)外面包裹HTML結(jié)構(gòu)
.wrapAll( function )?：一個(gè)回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對(duì)象
????通過(guò)回調(diào)的方式可以單獨(dú)處理每一個(gè)元素
.wrapInner( wrappingElement|function )：給集合中匹配的元素的內(nèi)部诊杆，增加包裹的HTML結(jié)構(gòu)
????$('div').wrapInner(function() {
? ????? return '';
????})
jQuery遍歷
1.?children()
.children(selector)? ?返回匹配元素集合中每個(gè)元素的所有子元素（僅兒子輩歼捐，這里可以理解為就是父親-兒子的關(guān)系）
children()無(wú)參數(shù)
.children()方法選擇性地接受同一類(lèi)型選擇器表達(dá)式
? ??$("div").children(".selected")
? ??$("div").children(":last")
注意：jQuery是一個(gè)合集對(duì)象，所以通過(guò)children是匹配合集中每一個(gè)元素的第一級(jí)子元素
2.?find()?
find是后代關(guān)系（包含父子關(guān)系）??children是父子關(guān)系查找
find是遍歷當(dāng)前元素集合中每個(gè)元素的后代晨汹。只要符合豹储，不管是兒子輩，孫子輩都可以淘这。
與其他的樹(shù)遍歷方法不同剥扣，選擇器表達(dá)式對(duì)于 .find() 是必需的參數(shù)。如果我們需要實(shí)現(xiàn)對(duì)所有后代元素的操作慨灭，可以傳遞通配選擇器 '*'朦乏。
find只在后代中遍歷，不包括自己氧骤。
選擇器 context 是由 .find() 方法實(shí)現(xiàn)的呻疹；因此，$('.item-ii').find('li') 等價(jià)于 $('li', '.item-ii')(找到類(lèi)名為item-ii的標(biāo)簽下的li標(biāo)簽)
如：$('.left').find('a:first').css('color','red')
3.?parent()? ? 快速查找合集里面的每一個(gè)元素的父元素
因?yàn)槭歉冈爻锪辏@個(gè)方法只會(huì)向上查找一級(jí)
4.?parents()? ?快速查找合集里面的每一個(gè)元素的所有祖輩元素
parent只會(huì)查找一級(jí)
parents則會(huì)往上一直查到查找到祖先節(jié)點(diǎn)
$( "html" ).parent()方法返回一個(gè)包含document的集合
$( "html" ).parents()返回一個(gè)空集合
5.?closest() 方法
closest()? ?接受一個(gè)匹配元素的選擇器字符串
從元素本身開(kāi)始刽锤，在DOM 樹(shù)上逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素
parents()和.closest()區(qū)別
? ? 1>起始位置不同：.closest開(kāi)始于當(dāng)前元素 .parents開(kāi)始于父元素
? ? 2> 遍歷的目標(biāo)不同：.closest要找到指定的目標(biāo)朦佩，.parents遍歷到文檔根元素并思，closest向上查找，直到找到一個(gè)匹配的就停止查找语稠，parents一直查找到根元素宋彼，并將匹配的元素加入集合
? ? 3>結(jié)果不同：.closest返回的是包含零個(gè)或一個(gè)元素的jquery對(duì)象弄砍，parents返回的是包含零個(gè)或一個(gè)或多個(gè)元素的jquery對(duì)象
6.?next()? ?查找指定元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合
????$('a').next(':last').css('border','1px solid blue')
7.?prev()??查找指定元素集合中每一個(gè)元素緊鄰的前面同輩元素的元素集合
8.?siblings()? ?查找指定元素集合中每一個(gè)元素的同輩元素
無(wú)參數(shù):?取得一個(gè)包含匹配的元素集合中每一個(gè)元素的同輩元素的元素集合
$('a').siblings(':last-child').css('border','1px solid blue')
9.?add()? ?用來(lái)創(chuàng)建一個(gè)新的jQuery對(duì)象 ，元素添加到匹配的元素集合中
10.?each()
.each() 方法就是一個(gè)for循環(huán)的迭代器输涕，它會(huì)迭代jQuery對(duì)象合集中的每一個(gè)DOM元素音婶。每次回調(diào)函數(shù)執(zhí)行時(shí)，會(huì)傳遞當(dāng)前循環(huán)次數(shù)作為參數(shù)(從0開(kāi)始計(jì)數(shù)
jQuery鼠標(biāo)事件
1.?click與dbclick事件
????click? ? ? 方法用于監(jiān)聽(tīng)用戶(hù)單擊操作
????dbclick? 方法用于監(jiān)聽(tīng)用戶(hù)雙擊操作
2.?mousedown與mouseup事件 鼠標(biāo)按上按下
3.?mousemove事件??監(jiān)聽(tīng)用戶(hù)移動(dòng)的的操作
4.?mouseover與mouseout事件? ?監(jiān)聽(tīng)用戶(hù)的移入移出操作
5. mouseenter與mouseleave事件? ?監(jiān)聽(tīng)用戶(hù)操作鼠標(biāo)是否有移到元素內(nèi)部或是元素外部
6.?hover事件??
? ??$(selector).hover(handlerIn, handlerOut)
? ? 1> handlerIn(eventObject)：當(dāng)鼠標(biāo)指針進(jìn)入元素時(shí)觸發(fā)執(zhí)行的事件函數(shù)
? ? 2> handlerOut(eventObject)：當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí)觸發(fā)執(zhí)行的事件函數(shù)
hover 取代mouseenter和mouseleave?可以避免冒泡問(wèn)題
7.?focusin事件? ?莱坎、focusout事件
focusin? ?當(dāng)一個(gè)元素衣式，或者其內(nèi)部任何一個(gè)元素獲得焦點(diǎn)的時(shí)候
focusout??當(dāng)一個(gè)元素，或者其內(nèi)部任何一個(gè)元素失去焦點(diǎn)的時(shí)候
jQuery表單事件
1.?blur與focus事件? 用于處理表單焦點(diǎn)的事件
事件focus在獲得焦點(diǎn)時(shí)被調(diào)用
事件blur在失去焦點(diǎn)時(shí)被調(diào)用
本質(zhì)區(qū)別：是否支持冒泡處理
focus()在元素本身產(chǎn)生檐什，focusin()在元素包含的元素中產(chǎn)生
2.?change事件
input元素監(jiān)聽(tīng)value值的變化碴卧，當(dāng)有改變時(shí)，失去焦點(diǎn)后觸發(fā)change事件乃正。
對(duì)于單選按鈕和復(fù)選框住册，當(dāng)用戶(hù)用鼠標(biāo)做出選擇時(shí)，該事件立即觸發(fā)
select元素：對(duì)于下拉選擇框烫葬，當(dāng)用戶(hù)用鼠標(biāo)作出選擇時(shí)界弧，該事件立即觸發(fā)
textarea元素：多行文本輸入框，當(dāng)有改變時(shí)搭综，失去焦點(diǎn)后觸發(fā)change事件
3.?select事件
select事件只能用于<input>元素和<textarea>元素
當(dāng) textarea 或文本類(lèi)型的 input 元素中的文本被選擇時(shí)，會(huì)發(fā)生 select 事件
$("#test").select(function() { //響應(yīng)文字選中回調(diào)
? ? //this指向 input元素
});
4.?submit事件??表單的提交
????<div id="test">點(diǎn)擊觸發(fā)
????$("#test").submit(function(){
? ? ????alert('觸發(fā)指定事件')
????})
form元素是有默認(rèn)提交表單的行為划栓，如果通過(guò)submit處理的話兑巾，需要禁止瀏覽器的這個(gè)默認(rèn)行為
傳統(tǒng)的方式是調(diào)用事件對(duì)象? e.preventDefault() 來(lái)處理， jQuery中可以直接在函數(shù)中最后結(jié)尾return false即可
jQuery鍵盤(pán)事件
1.?keydown()與keyup()事件
keydown事件：當(dāng)用戶(hù)在一個(gè)元素上第一次按下鍵盤(pán)上字母鍵的時(shí)候忠荞，就會(huì)觸發(fā)
keyup事件：當(dāng)用戶(hù)在一個(gè)元素上第一次松手鍵盤(pán)上的鍵的時(shí)候蒋歌，就會(huì)觸發(fā)
2.?keypress()事件??捕獲鍵盤(pán)輸入
keypress事件與keydown和keyup的主要區(qū)別：
????只能捕獲單個(gè)字符，不能捕獲組合鍵
????無(wú)法響應(yīng)系統(tǒng)功能鍵（如delete委煤，backspace）
????不區(qū)分小鍵盤(pán)和主鍵盤(pán)的數(shù)字字符
jQuery事件綁定和解綁
1.?on()的多事件綁定
.on( events ,[?selector ] ,[?data ] )
.on堂油、 .click的區(qū)別：
1> .on?多個(gè)事件綁定同一個(gè)函數(shù)
? ??$("#elem").on("mouseover mouseout",function(){ });
2>??.on多個(gè)事件綁定不同函數(shù)
? ??$("#elem").on({
? ????? mouseover:function(){},?
? ? ????mouseout:function(){}
????});
3>??.on將數(shù)據(jù)傳遞到處理程序
? ??function greet( event ) {
? ????alert( "Hello " + event.data.name ); //Hello 慕課網(wǎng)
????}
????$( "button" ).on( "click", {
? ????name: "慕課網(wǎng)"
????}, greet );
? ?
2.?委托機(jī)制 .on
.on( events ,[ selector ] ,[ data ], handler(eventObject) )
$("div").on("click","p",fn)
事件綁定在最上層div元素上，當(dāng)用戶(hù)觸發(fā)在a元素上碧绞，事件將往上冒泡府框，一直會(huì)冒泡在div元素上。如果提供了第二參數(shù)讥邻，那么事件在往上冒泡的過(guò)程中遇到了選擇器匹配的元素迫靖，將會(huì)觸發(fā)事件回調(diào)函數(shù)
3.?卸載事件off()方法
? ??通過(guò).on()綁定的事件處理程序
????通過(guò)off() 方法移除該綁定
????$("elem").off("mousedown mouseup")
????$("elem").off()? ?節(jié)點(diǎn)上綁定的所有事件講全部銷(xiāo)毀
4. 事件對(duì)象
事件對(duì)象是用來(lái)記錄一些事件發(fā)生時(shí)的相關(guān)信息的對(duì)象。
事件對(duì)象只有事件發(fā)生時(shí)才會(huì)產(chǎn)生兴使，并且只能是事件處理函數(shù)內(nèi)部訪問(wèn)系宜，在所有事件處理函數(shù)運(yùn)行結(jié)束后，事件對(duì)象就被銷(xiāo)毀
??event.target代表當(dāng)前觸發(fā)事件的元素盹牧，可以通過(guò)當(dāng)前元素對(duì)象的一系列屬性來(lái)判斷是不是我們想要的元素
5.?事件對(duì)象的屬性和方法
event.type：獲取事件的類(lèi)型
event.pageX 和 event.pageY：獲取鼠標(biāo)當(dāng)前相對(duì)于頁(yè)面的坐標(biāo)
event.preventDefault() 方法：阻止默認(rèn)行為
? ???event.isDefaultPrevented() 來(lái)確定這個(gè)方法是否(在那個(gè)事件對(duì)象上)被調(diào)用過(guò)
event.stopPropagation() 方法：阻止事件冒泡
? ??事件是可以冒泡的，為防止事件冒泡到DOM樹(shù)上，也就是不觸發(fā)的任何前輩元素上的事件處理函數(shù)
event.which：獲取在鼠標(biāo)單擊時(shí)汰寓，單擊的是鼠標(biāo)的哪個(gè)鍵
? ??左鍵報(bào)告1口柳，中間鍵報(bào)告2，右鍵報(bào)告3
event.currentTarget : 在事件冒泡過(guò)程中的當(dāng)前DOM元素
? ??冒泡前的當(dāng)前觸發(fā)事件的DOM對(duì)象, 等同于this.
this和event.target的區(qū)別：
js中事件是會(huì)冒泡的踩寇，所以this是可以變化的啄清，但event.target不會(huì)變化，它永遠(yuǎn)是直接接受事件的目標(biāo)DOM元素俺孙；
.this和event.target都是dom對(duì)象
如果要使用jquey中的方法可以將他們轉(zhuǎn)換為jquery對(duì)象辣卒。比如this和$(this)的使用、event.target和$(event.target)的使用睛榄；
trigger() 方法觸發(fā)被選元素的指定事件類(lèi)型
trigger事件還有一個(gè)特性：會(huì)在DOM樹(shù)上冒泡荣茫，所以如果要阻止冒泡就需要在事件處理程序中返回false或調(diào)用事件對(duì)象中的.stopPropagation() 方法可以使事件停止冒泡
trigger事件是具有觸發(fā)原生與自定義能力的，但是存在一個(gè)不可避免的問(wèn)題： 事件對(duì)象event無(wú)法完美的實(shí)現(xiàn)
若要觸發(fā)通過(guò) jQuery 綁定的事件處理函數(shù)场靴，而不觸發(fā)原生的事件啡莉，使用.triggerHandler() 來(lái)代替
triggerHandler與trigger的用法是一樣的，不同：
????triggerHandler不會(huì)觸發(fā)瀏覽器的默認(rèn)行為旨剥，.triggerHandler( "submit" )將不會(huì)調(diào)用表單上的.submit()
????.trigger() 會(huì)影響所有與 jQuery 對(duì)象相匹配的元素咧欣，而 .triggerHandler() 僅影響第一個(gè)匹配到的元素
????使用 .triggerHandler() 觸發(fā)的事件，并不會(huì)在 DOM 樹(shù)中向上冒泡轨帜。 如果它們不是由目標(biāo)元素直接觸發(fā)的魄咕，那么它就不會(huì)進(jìn)行任何處理
????與普通的方法返回 jQuery 對(duì)象(這樣就能夠使用鏈?zhǔn)接梅?相反，.triggerHandler() 返回最后一個(gè)處理的事件的返回值蚌父。如果沒(méi)有觸發(fā)任何事件哮兰，會(huì)返回 undefined
jQuery 動(dòng)畫(huà)
1. 隱藏元素 hide()??顯示元素show()
.hide( options )
.hide( "fast / slow")? 'fast' 和 'slow' 分別代表200和600毫秒的延時(shí)，就是元素會(huì)執(zhí)行200/600毫秒的動(dòng)畫(huà)后再隱藏
$('elem').hide(3000).show(3000)
注意事項(xiàng)：
show與hide方法是修改的display屬性苟弛，通過(guò)是visibility屬性布局需要通過(guò)css方法單獨(dú)設(shè)置
如果使用!important在你的樣式中喝滞，比如display: none !important，如果你希望.show()方法正常工作膏秫，必須使用.css('display', 'block !important')重寫(xiě)樣式
如果讓show與hide成為一個(gè)動(dòng)畫(huà)右遭，那么默認(rèn)執(zhí)行動(dòng)畫(huà)會(huì)改變?cè)氐母叨龋叨壤蠖茫该鞫?/p>
2. 顯示與隱藏切換toggle方法
? ??.toggle( [duration ] [, complete ] )
3.?下拉動(dòng)畫(huà)slideDown
.slideDown()：用滑動(dòng)動(dòng)畫(huà)顯示一個(gè)匹配元素
.slideDown( [duration ] [, complete ] )
下拉動(dòng)畫(huà)是從無(wú)到有狸演，所以一開(kāi)始元素是需要先隱藏起來(lái)的，可以設(shè)置display:none
如 果提供回調(diào)函數(shù)參數(shù)僻他，callback會(huì)在動(dòng)畫(huà)完成的時(shí)候調(diào)用宵距。將不同的動(dòng)畫(huà)串聯(lián)在一起按順序排列執(zhí)行是非常有用的。這個(gè)回調(diào)函數(shù)不設(shè)置任何參數(shù)吨拗，但是 this會(huì)設(shè)成將要執(zhí)行動(dòng)畫(huà)的那個(gè)DOM元素满哪，如果多個(gè)元素一起做動(dòng)畫(huà)效果婿斥，那么要非常注意，回調(diào)函數(shù)會(huì)在每一個(gè)元素執(zhí)行完動(dòng)畫(huà)后都執(zhí)行一次哨鸭，而不是這組 動(dòng)畫(huà)整體才執(zhí)行一次
4. 上卷動(dòng)畫(huà)slideUp
? ??.slideUp( [duration ] [, easing ] [, complete ] )
5.?上卷下拉切換slideToggle
? ? ? ?.slideToggle( [duration ] ,[?complete ] )
注意：
display屬性值保存在jQuery的數(shù)據(jù)緩存中民宿，所以display可以方便以后可以恢復(fù)到其初始值
當(dāng)一個(gè)隱藏動(dòng)畫(huà)后，高度值達(dá)到0的時(shí)候像鸡，display 樣式屬性被設(shè)置為none板熊，以確保該元素不再影響頁(yè)面布局
6.?淡出動(dòng)畫(huà)fadeOut? ? 淡入動(dòng)畫(huà)fadeIn
? ??fadeOut()函數(shù)用于隱藏所有匹配的元素由蘑，并帶有淡出的過(guò)渡動(dòng)畫(huà)效果
? ??fadeIn()函數(shù)用于顯示所有匹配的元素偎血，并帶有淡入的過(guò)渡動(dòng)畫(huà)效果
????fadeIn：淡入效果掺喻，內(nèi)容顯示，opacity是0到1
????fadeOut：淡出效果蛔钙，內(nèi)容隱藏锌云，opacity是1到0
?淡入淡出切換fadeToggle
fadeToggle切換fadeOut與fadeIn效果，所謂"切換"吁脱，即如果元素當(dāng)前是可見(jiàn)的桑涎，則將其隱藏(淡出)；如果元素當(dāng)前是隱藏的兼贡，則使其顯示(淡入)
.fadeToggle( [duration ] ,[?complete ] )
7.?淡入效果fadeTo
.fadeTo( duration, opacity ,callback)
8.?jQuery中toggle與slideToggle以及fadeToggle的比較
操作元素的顯示和隱藏可以有幾種方法攻冷，例如：
????改變樣式display為none
????設(shè)置位置高度為0
????設(shè)置透明度為0
toggle、sildeToggle以及fadeToggle的區(qū)別：
????toggle：切換顯示與隱藏效果
????sildeToggle：切換上下拉卷滾效果
????fadeToggle：切換淡入淡出效果
toggle與slideToggle細(xì)節(jié)區(qū)別：
????toggle：動(dòng)態(tài)效果為從右至左遍希。橫向動(dòng)作讲衫，toggle通過(guò)display來(lái)判斷切換所有匹配元素的可見(jiàn)性
????slideToggle：動(dòng)態(tài)效果從下至上。豎向動(dòng)作孵班，slideToggle 通過(guò)高度變化來(lái)切換所有匹配元素的可見(jiàn)性
fadeToggle方法
????fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之間切換。
????元素是淡出顯示的招驴，fadeToggle() 會(huì)使用淡入效果顯示它們篙程。
????元素是淡入顯示的，fadeToggle() 會(huì)使用淡出效果顯示它們别厘。
? ??注釋?zhuān)?/b>隱藏的元素不會(huì)被完全顯示（不再影響頁(yè)面的布局）
9.?動(dòng)畫(huà)animate
.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate()方法允許我們?cè)谌我獾臄?shù)值的CSS屬性上創(chuàng)建動(dòng)畫(huà)
? ??properties：一個(gè)或多個(gè)css屬性的鍵值對(duì)所構(gòu)成的Object對(duì)象
? ??duration時(shí)間?動(dòng)畫(huà)執(zhí)行的時(shí)間虱饿，持續(xù)時(shí)間是以毫秒為單位的；值越大表示動(dòng)畫(huà)執(zhí)行的越慢触趴，不是越快氮发。還可以提供'fast' 和 'slow'字符串，分別表示持續(xù)時(shí)間為200 和 600毫秒
? ??easing動(dòng)畫(huà)運(yùn)動(dòng)的算法?jQuery庫(kù)中默認(rèn)調(diào)用 swing冗懦。如果需要其他的動(dòng)畫(huà)算法爽冕，請(qǐng)查找相關(guān)的插件
? ??complete回調(diào)??動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)，這個(gè)可以保證當(dāng)前動(dòng)畫(huà)確定完成后發(fā)會(huì)觸發(fā)
.animate( properties, options )
10 .?停止動(dòng)畫(huà)stop
.stop()? 當(dāng)前正在運(yùn)行的動(dòng)畫(huà)（如果有的話）立即停止
.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )
.stop(); 停止當(dāng)前動(dòng)畫(huà)乌奇，點(diǎn)擊在暫停處繼續(xù)開(kāi)始
.stop(true); 如果同一元素調(diào)用多個(gè)動(dòng)畫(huà)方法，尚未被執(zhí)行的動(dòng)畫(huà)被放置在元素的效果隊(duì)列中眯娱。這些動(dòng)畫(huà)不會(huì)開(kāi)始礁苗，直到第一個(gè)完成。當(dāng)調(diào)用.stop()的時(shí)候徙缴，隊(duì)列中的下一個(gè)動(dòng)畫(huà)立即開(kāi)始试伙。如果clearQueue參數(shù)提供true值,那么在隊(duì)列中的動(dòng)畫(huà)其余被刪除并永遠(yuǎn)不會(huì)運(yùn)行
.stop(true,true); 當(dāng)前動(dòng)畫(huà)將停止，但該元素上的 CSS 屬性會(huì)被立刻修改成動(dòng)畫(huà)的目標(biāo)值
jQuery核心
1. each()
jQuery.each(array, callback )
jQuery.each( object, callback )
2.?查找數(shù)組中的索引 inArray
jQuery.inArray( value, array ,[ fromIndex ] )
jQuery.inArray()函數(shù)用于在數(shù)組中搜索指定的值于样，并返回其索引值疏叨。如果數(shù)組中不存在該值，則返回 -1
如果要判斷數(shù)組中是否存在指定值百宇，你需要通過(guò)該函數(shù)的返回值不等于(或大于)-1來(lái)進(jìn)行判斷
$.inArray('Aaron',['test','Aaron', 'array','慕課網(wǎng)']);
3.?去空格神器trim()
jQuery.trim()函數(shù)用于去除字符串兩端的空白字符
注意：
????移除字符串開(kāi)始和結(jié)尾處的所有換行符考廉，空格(包括連續(xù)的空格)和制表符（tab）
????如果這些空白字符在字符串中間時(shí)，它們將被保留携御，不會(huì)被移除
4.?DOM元素的獲取get方法
如果需要單獨(dú)操作合集中的的某一個(gè)元素昌粤，可以通過(guò).get()方法獲取到
注意：
????get方法是獲取的dom對(duì)象，也就是通過(guò)document.getElementById獲取的對(duì)象
????get方法是從0開(kāi)始索引
負(fù)索引值參數(shù)
get方法還可以從后往前索引啄刹，傳遞一個(gè)負(fù)索引值涮坐，注意的負(fù)值的索引起始值是-1
5.?DOM元素的獲取index方法
.index()方法，從匹配的元素中搜索給定元素的索引值誓军，從0開(kāi)始計(jì)數(shù)
參數(shù)接受一個(gè)jQuery或者dom對(duì)象作為查找的條件
.index()
.index( selector )
.index( element )
?jQuery? Ajax應(yīng)用
1.?使用load()方法異步請(qǐng)求數(shù)據(jù)
2.?使用getJSON()方法異步加載JSON格式數(shù)據(jù)
? ??使用getJSON()方法可以通過(guò)Ajax異步請(qǐng)求的方式袱讹，獲取服務(wù)器中的數(shù)據(jù)，并對(duì)獲取的數(shù)據(jù)進(jìn)行解析昵时，顯示在頁(yè)面中
3.?使用getScript()方法異步加載并執(zhí)行js文件
????jQuery.getScript(url,[callback])或$.getScript(url,[callback])
4.?使用get()方法以GET方式從服務(wù)器獲取數(shù)據(jù)
? ??$.get(url,[callback])
5.?使用post()方法以POST方式從服務(wù)器發(fā)送數(shù)據(jù)
? ??$.post(url,[data],[callback])
6.?使用serialize()方法序列化表單元素值
使用serialize()方法可以將表單中有name屬性的元素值進(jìn)行序列化捷雕，生成標(biāo)準(zhǔn)URL編碼文本字符串，直接可用于ajax請(qǐng)求
7.?使用ajax()方法加載服務(wù)器數(shù)據(jù)
? ??jQuery.ajax([settings])或$.ajax([settings])
8. 使用ajaxSetup()方法設(shè)置全局Ajax默認(rèn)選項(xiàng)
9.?使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是綁定Ajax事件壹甥。ajaxStart()方法用于在Ajax請(qǐng)求發(fā)出前觸發(fā)函數(shù)救巷，ajaxStop()方法用于在Ajax請(qǐng)求完成后觸發(fā)函數(shù)
jQuery 常用插件
1.?表單驗(yàn)證插件——validate
該插件自帶包含必填、數(shù)字句柠、URL在內(nèi)容的驗(yàn)證規(guī)則浦译，即時(shí)顯示異常信息，此外溯职，還允許自定義驗(yàn)證規(guī)則
$(form).validate({options})
2.?表單插件——form
通過(guò)表單form插件精盅，調(diào)用ajaxForm()方法，實(shí)現(xiàn)ajax方式向服務(wù)器提交表單數(shù)據(jù)谜酒，并通過(guò)方法中的options對(duì)象獲取服務(wù)器返回?cái)?shù)據(jù)
$(form). ajaxForm ({options})
3.?圖片燈箱插件——lightBox
該插件可以用圓角的方式展示選擇中的圖片叹俏，使用按鈕查看上下張圖片，在加載圖片時(shí)自帶進(jìn)度條甚带，還能以自動(dòng)播放的方式瀏覽圖片
$(linkimage).lightBox({options})
4.?圖片放大鏡插件——jqzoom
5.?cookie插件
使用cookie插件后她肯，可以很方便地通過(guò)cookie對(duì)象保存佳头、讀取、刪除用戶(hù)的信息晴氨，還能通過(guò)cookie插件保存用戶(hù)的瀏覽記錄
保存：$.cookie(key康嘉，value)；讀茸亚啊：$.cookie(key)亭珍，刪除：$.cookie(key，null)
6.?搜索插件——autocomplete
$(textbox).autocomplete(urlData,[options])
7.?右鍵菜單插件——contextmenu
右鍵菜單插件可以綁定頁(yè)面中的任意元素枝哄，綁定后肄梨，選中元素，點(diǎn)擊右鍵挠锥，便通過(guò)該插件彈出一個(gè)快捷菜單众羡，點(diǎn)擊菜單各項(xiàng)名稱(chēng)執(zhí)行相應(yīng)操作
$(selector).contextMenu(menuId,{options});
jQuery UI插件
1.?拖曳插件——draggable
$(selector). draggable({options})
