Javascript缺點(diǎn)：1.復(fù)雜的文檔對象模型 2.不一致的瀏覽器實(shí)現(xiàn) 3.缺乏便捷的開發(fā)、調(diào)試工具。

jquery優(yōu)點(diǎn):1.輕量級 2.強(qiáng)大的選擇器 3.出色的DOM操作 4.可靠的事件處理機(jī)制 5.完善的ajax\

jquery 代碼風(fēng)格

對于同一對象不超過三個操作，可以寫成一行锋勺。

對于同一個對象的較多操作建議每行寫一個操作植捎。

對于多個對象的少量操作，可以每個對象寫成一行喉前，如果涉及子元素可以考慮適當(dāng)?shù)乜s進(jìn)。

jquery對象與DOM對象

如果獲取的是jquery對象王财，前面加上$以示區(qū)分卵迂。

jquery對象轉(zhuǎn)換成DOM 對象可以用[index]、get(index)

DOM 對象绒净，只要用$()包裝就可以變成jquery對象见咒，如$(document.getElementById(’school’)

jquery與其他庫的沖突

先導(dǎo)入其他庫后導(dǎo)入jQuery庫時：

jQuery.noConflict() //將$控制權(quán)讓渡給其他

Jquery(function($){…})//在jQuery 內(nèi)部使用$ 或匿名函數(shù)（function($){})(jQuery)

先導(dǎo)入jQuery庫，后導(dǎo)入其他庫時：

可以直接使用jQuery 做jQuery的處理挂疆，$用來操作其他庫

jquery選擇器

基本選擇器#id,.class, element, *,( slector1, selector2,…)

層次選擇器

后代$(‘a(chǎn)ncestor descentdant’)改览、子元素$(‘parent> child’)

緊跟后的同輩元素$(‘prev + next’)，等同于next()方法缤言、其后所有同輩元素$(‘prev~siblings’)恃疯，等同于nextAll(); siblings()方法與前后位置無關(guān)。

過濾選擇器

基本過濾選擇器墨闲。:first今妄、:last、:not(selector)鸳碧、:even(偶數(shù)）盾鳞、:odd(奇數(shù)）、:eq(index)(索引）瞻离、:gt(index)(索引大于）腾仅、:lt(index)(索引小于)、:header(選取所有標(biāo)題元素hn)套利、:animated(選取當(dāng)前正在執(zhí)行動畫的所有元素)推励、:focus(選取獲取焦點(diǎn)的元素鹤耍。

內(nèi)容過濾選擇器。:contains(text)(文本中含有text)验辞、:empty()選取不包含子元素(包括文本元素)稿黄、:has(selector)(含有選擇器所匹配的元/素的元素、:parent選取含有子元素或文本的元素跌造。

可見性過濾選擇器杆怕。:hidden選取所有不可見的元素（包括display:none、文本域type=hidden壳贪、visibility:hidden之類的元素)陵珍、:visible選取所有可見的元素。

屬性過濾選擇器违施。[attribute]擁有此屬性的元素互纯、[attribute=value]、[attribute!=value]屬性值不等于磕蒲、[attribute^=value]屬性值開頭留潦、[attribute$=value]屬性值結(jié)尾、[attribute*=value]含有亿卤、[attribute|=value]屬性值為value或以value-開頭、[attribute~=value]屬性值中含有value用空格分開的的屬性的元素

子元素過濾選擇器鹿霸。:nth-child(index/even/odd/equation)排吴、:first-child、:last-child懦鼠、:only-child(某個元素是其父元素的唯一子元素則匹配）

表單對象屬性過濾選擇器钻哩。可用元素:enabled肛冶、不可用元素:disabled街氢、單選框復(fù)選框:checked、下拉列表被選中:selected

表單選擇器睦袖。:input珊肃、:text、:password(密碼框)馅笙、:radio(單選框)伦乔、:checkbox(多選框)、:submit(提交框)董习、:image圖像按鈕烈和、:reset重置按鈕、:button按鈕皿淋、:file上傳域招刹、:hidden 不可見元素

實(shí)例

filter( selector )方法恬试，在集合元素中篩選, 區(qū)別于find(),在子元素中查找

css(name, value)。

is(“:visible")是顯示疯暑。

toggle(fn1,fn2)方法训柴，交替一組動作,fn1中是關(guān)于顯示元素的，fn2中是關(guān)于隱藏元素的缰儿。

DOM操作

查找節(jié)點(diǎn)畦粮，元素節(jié)點(diǎn)（選擇器）、文本節(jié)點(diǎn)text()方法乖阵；查找屬性節(jié)點(diǎn)attr(’title’)

創(chuàng)建節(jié)點(diǎn)宣赔，var $li = $(‘’), $(‘ul’).append($li)

插入節(jié)點(diǎn)。在A中插入B,?A.append(B)方法瞪浸，向元素內(nèi)部后置儒将、prepend()向元素內(nèi)部前置內(nèi)容、after()在每個匹配內(nèi)容之后插入对蒲、before()在每個匹配元素之前插入钩蚊。在B中插入A，appendTo()蹈矮、prependTo()砰逻、insertAfter()、insertBefore()

刪除節(jié)點(diǎn)泛鸟。remove()方法移除元素及后代節(jié)點(diǎn)蝠咆，被移除元素之后還可以繼續(xù)操作，但是綁定的事件已失效北滥，可以向方法中傳遞選擇器來選擇匹配被移除對象刚操。detach()方法移除后，被移除對象繼續(xù)保留綁定的事件再芋，重新添加后恢復(fù)到之前菊霜。empty()，只是清空該元素的所有后代節(jié)點(diǎn)济赎，并非刪除鉴逞。

復(fù)制節(jié)點(diǎn)。clone(),若傳遞參數(shù)true,則表示復(fù)制節(jié)點(diǎn)及其綁定的事件司训。

替換節(jié)點(diǎn)华蜒。replaceWith(),將匹配的節(jié)點(diǎn)都置換成新節(jié)點(diǎn)，被替換元素之前的綁定事件都消失了豁遭。replaceAll(),可將替換內(nèi)容前置叭喜。

包裹節(jié)點(diǎn)。wrap(),將每個匹配元素用新元素包裹蓖谢，wrapAll(),將所有匹配元素捂蕴，用一個新元素包裹譬涡，wrapInner(),將每個匹配元素的子內(nèi)容用一個元素包裹。

屬性操作啥辨。設(shè)置元素的單個屬性涡匀，attr(name, value), 設(shè)置多個屬性，attr({nam1:value, name2:value})溉知。刪除屬性陨瘩，removeAttr(name), 獲取屬性attr(name)

樣式操作。追加樣式级乍，addClass(),移除樣式removeClass(),交替一組動作舌劳，toggle(f1, f2), 第一個是顯示對應(yīng)的動作，第二個是隱藏對應(yīng)的動作玫荣。toggleClass(),如果含有某個class則刪除甚淡，如果不含有則添加。hasClass(),判斷是否有某個樣式捅厂。

設(shè)置和獲取HTML贯卦、文本和值。html(value),設(shè)置html內(nèi)容焙贷，html()獲取內(nèi)容撵割，text(vaue)設(shè)置文本，text()獲取文本辙芍。val(value),設(shè)置元素的值啡彬，val()獲取元素的值，無論是單選沸手，多選外遇，還是文本框注簿，或下拉列表契吉，若為多選，則返回還有所有值的一個數(shù)組诡渴。this.defaultValue設(shè)置的初始值捐晶。val([value1, value2, value3])

遍歷節(jié)點(diǎn)。children()只考慮子元素而不考慮后代元素妄辩，next(),匹配后面緊跟的同輩元素惑灵，prev()前面緊跟的同輩元素，siblings()取得匹配元素所有同輩元素, closest(selector),取得匹配的最近祖先元素元素眼耀。parent()集合中每個匹配的父元素英支，parents()獲取集合中每個匹配的祖先元素。

css-DOM哮伟。css(name, value)設(shè)置的單個樣式干花，設(shè)置多個樣式css({name1:value, name2:value}), 獲取設(shè)置值css(name)妄帘。 height()獲取高度，設(shè)置高度height(100)), 獲取寬度width()池凄、設(shè)置寬度width(100);默認(rèn)單位是px,也可設(shè)置為width(‘100em’)

offset()獲取元素相對視窗的偏移抡驼，offset().left 獲取左偏移，offset().top獲取上偏移肿仑；position(),獲取元素相對于最近一個已定位的父元素的偏移致盟，position().left獲取左偏移，position().top獲取上偏移尤慰。

scrollTop(),獲取滾動條到頂端的距離馏锡，scrollLeft(),獲取滾動條到左端的距離，可以輸入?yún)?shù)割择，表示滾動到某個地方眷篇。scrollTop(200）

jQuery中的事件和動畫

事件綁定。bind(type[,data], fn)荔泳，可以多次調(diào)用蕉饼。可以綁定自定義事件玛歌。bind(‘myClick’, fn);

簡寫綁定事件昧港。click, mouseover, mouseout這類常用事件可采用簡寫形式。.click(),.mouseover(),.mouseout()

合成事件支子。hover(enter, leave),鼠標(biāo)放上去會觸發(fā)第一個函數(shù)创肥，鼠標(biāo)離開會觸發(fā)第二個元素，等同于綁定了mouseover()值朋、mouseout()叹侄。toggle(f1, f2, f3,…),模擬鼠標(biāo)連續(xù)單擊事件，第一次觸發(fā)第一個函數(shù)昨登，第二次觸發(fā)第二個函數(shù)趾代。toggle還有另外一個作用，切換元素的可見狀態(tài)丰辣。

阻止冒泡撒强，event.stopPropagation()，阻止默認(rèn)行為(如鏈接跳轉(zhuǎn)笙什，表單提交)飘哨，event.preventDefault(), 如果同時阻止冒泡和默認(rèn)行為，可以 return false琐凭。jquery不支持事件捕獲芽隆。

事件對象屬性。e.target 觸發(fā)的元素、e.relatedTarget 所有發(fā)生事件的相關(guān)元素胚吁、event.pageX臼闻、event.pageY光標(biāo)相對于頁面的坐標(biāo)。e.which 獲取鼠標(biāo)的按鍵囤采，左中右述呐，或鍵盤事件的按鍵。event.metaKey 獲取ctrl鍵蕉毯。

移除事件乓搬。unbind([type], [data]),若不包含參數(shù)，則刪除該元素的所有事件代虾。bind(‘click’, one=function(){}), unbind(‘click’, one)添加函數(shù)變量进肯，來指定刪除函數(shù)。

one(type, [data], fn)綁定事件棉磨，僅當(dāng)?shù)谝淮斡|發(fā)時執(zhí)行江掩，多次觸發(fā)不執(zhí)行。如綁定了點(diǎn)擊事件乘瓤，僅在第一次點(diǎn)擊時執(zhí)行环形。

模擬操作。trigger(type),trigger(‘focus’)衙傀、triggerHandler(‘focus')(只觸發(fā)事件抬吟，不執(zhí)行瀏覽器默認(rèn)行為）。

綁定多個事件统抬。bind(‘mouseover, mouseout’) 火本。添加事件命名空間，bind(‘mouseover.plugin’), trigger(‘click!’)觸發(fā)不包含命名空間的點(diǎn)擊事件聪建。

jquery做動畫要求在標(biāo)準(zhǔn)環(huán)境下钙畔，需在文件頭部包含DTD定義训桶。否則可能會出現(xiàn)動畫抖動暖眼。

show()、hide()箩帚、slideUp()钱骂、slideDown()改變高度直至完全消失叔锐、fadeIn()挪鹏、fadeOut()改變透明度直至完全消失见秽。可以添加參數(shù)讨盒。

自定義動畫 animate(params, speed, callback)解取， params即是?{property1: “value1”, property2: “value2”}，累加累減動畫animate({left: “+=500px”}, 300)

停止動畫和判斷是否處于動畫狀態(tài)返顺。stop([clearQueue],[gottoEnd]),第一個參數(shù)代表是否要清空未執(zhí)行完的動畫禀苦，第二個參數(shù)代表是否直接將正在執(zhí)行的動畫跳轉(zhuǎn)到末的狀態(tài)蔓肯。stop(),會結(jié)束當(dāng)前正在執(zhí)行的動畫，并立即進(jìn)入下一個動畫振乏。is(‘:animated’) 判斷元素是是否處于動畫蔗包。delay(1000)延遲動畫。

其他動畫方法慧邮。toggle(speed, [callback])调限、slideToggle(speed, [easing], [callback])、fadeTo(speed, opacity, [callback])误澳、fadeToggle(speed, [easing], [callback])

jQuery對表單表格的操作及更多應(yīng)用

單行文本框應(yīng)用耻矮，失去焦點(diǎn)blur()、獲得焦點(diǎn)focus(),可以結(jié)合:focus選擇器

多行文本框應(yīng)用忆谓，高度變化裆装，animate({ height: “+=50"}, 400),滾動條高度變化，animate({ scrollTop: “+=50”?}, 400)

復(fù)選框應(yīng)用倡缠，attr(‘checked’, true)設(shè)置選中哨免，attr(’checked’)獲取設(shè)置的屬性值。反選操作attr(‘checked’, !$(this).attr(‘check’)),采用javascript的DOM操作會更加簡潔昙沦，this.check = !this.checked. ? ?each(fn)方法遍歷jquery元素铁瞒。通過全選/全不選按鈕，來控制數(shù)組桅滋，對全選和全不選按鈕綁定點(diǎn)擊事件慧耍，并將被控制數(shù)組的checked值設(shè)置地和全選/全不選按鈕一樣即可。$(‘[name=items]:checkbox’).each(function(){if(!this.checked){flag= false}}),循環(huán)遍歷數(shù)組丐谋，當(dāng)出現(xiàn)沒有選中選項(xiàng)時芍碧，將flag設(shè)置為false.過濾被選中元素，若長度等于list則為全選号俐，attr(‘checked’, $tmp.length ==$tmp.filter(‘:checked’).length)

prop獲取屬性和設(shè)置屬性值泌豆，當(dāng)屬性只有名沒有值的時候，或?qū)傩灾禐閠rue,false時吏饿，應(yīng)該用prop,代替attr踪危。prop獲取的值只會返回true或false。

下拉框的應(yīng)用猪落。結(jié)合選擇符贞远，:selected。var hasSelected = $(this).hasClass(‘selected’) ? $(this)[hasSelected ? “removeClass“: “addClass”](‘selected’)三元運(yùn)算符在選擇方法中的應(yīng)用笨忌。

slice(-2)蓝仲，從指定位置截取大結(jié)尾，parseInt(),轉(zhuǎn)換為整數(shù)，網(wǎng)頁換膚袱结，attr(‘href’, “css/“ + this.id + “.css”)

Ajax的應(yīng)用

Ajax優(yōu)點(diǎn)亮隙，不刷新整個頁面，數(shù)據(jù)按需發(fā)送垢夹，把一部分服務(wù)器負(fù)擔(dān)轉(zhuǎn)移到客戶端溢吻，減輕了服務(wù)器和帶寬負(fù)擔(dān)。

Ajax缺點(diǎn)果元，破壞瀏覽器的前進(jìn)和后退行為煤裙，對搜索引擎支持不足。

load(url , data, callback),url請求html的頁面地址噪漾，data發(fā)送給服務(wù)器的名值對參數(shù)硼砰，callback無論請求成功失敗的回調(diào)函數(shù)。當(dāng)load方式帶有參數(shù)時會使用post方式發(fā)送請求欣硼。

$.get/post( url, data, callback, type), type為服務(wù)器端返回內(nèi)容的格式题翰。

get與post方法區(qū)別。get請求會將參數(shù)在url后進(jìn)行轉(zhuǎn)換诈胜，post請求豹障，則是作為消息的實(shí)體內(nèi)容。get方式對傳輸數(shù)據(jù)有大小限制(<2kb), 而post理論上不受限制焦匈。get方式的請求會被瀏覽器緩存起來血公，post方式相對安全。

$.getScript(‘a(chǎn)pp.js’[, callback]),加載指定文件缓熟。

$.getJSON(url, callback)

$.each(data, function(i, item){})函數(shù)不同于jquery對象的each方法累魔，接收一個數(shù)組或?qū)ο鬄榈谝粋€參數(shù)，回調(diào)函數(shù)作第二參數(shù)够滑，包含兩個參數(shù)垦写，第一個為對象的成員或數(shù)組的索引，第二個為對應(yīng)變量或內(nèi)容彰触。

$.ajax(options), url, type, timeout, data, dataType, beforeSend, complete, success, error梯投。

序列化元素，serialize()方法况毅，將DOM元素內(nèi)容序列化為字符串分蓖，便于ajax請求，$(‘#form’).serialize()尔许。serializeArray() 將DOM元素序列化后么鹤，返回JSON字符串。$.param(obj), 對數(shù)組或?qū)ο筮M(jìn)行序列化為字符串母债。

ajax全局事件午磁，$(‘#loading’).ajaxStart(function(){$(this).show()}).ajaxStop(function(){$(this).hide()})

jquery新增

$(elements).on( events [, selector], [,data], handler) 綁定事件，取代之前的bind, delegate, live, 可用于動態(tài)元素毡们，$(elements).off( events [, selector], [,data], handler) 解除綁定事件迅皇。

closest()從元素本身逐級向上找，返回最先匹配的祖先元素衙熔，$.fx.off()關(guān)閉所有動畫登颓，$.isArray()確定參數(shù)是否是數(shù)組。

$.proxy(function(){//this}, this)保留特定的上下文