jquery.doc

本文基于jQuery1.7.1版本，是對(duì)官方API的整理和總結(jié)，完整的官方API見/browser/0、總述jQuery框架提供了很多方法，但大致上可以分為3大類：獲取jQuery對(duì)象的方法、在jQuery對(duì)象間跳轉(zhuǎn)的方法，以及獲取jQuery對(duì)象后調(diào)用的方法其中第一步是怎樣獲取jQuery對(duì)象。大致來說，是通過最核心的$()方法，將頁(yè)面上的元素(或者在頁(yè)面上不存在的html片段)包裝成jQuery對(duì)象。$()方法里面支持的語法又包括3大類，分別是表達(dá)式(包括類表達(dá)式.，id表達(dá)式#，元素表達(dá)式等)、符號(hào)(包括后代符號(hào)space，next符號(hào)+等)、過濾器(包括:過濾器和過濾器)。通過以上3種的組合，“查詢”得到想要操作的元素或者元素集合，作為$()的參數(shù)，得到j(luò)Query對(duì)象(或者jQuery對(duì)象的集合)第二步是在jQuery對(duì)象間的跳轉(zhuǎn)。也就是說，已經(jīng)得到了一個(gè)jQuery對(duì)象，但是并不是想要的，那么可以通過一系列的跳轉(zhuǎn)方法，比如parent()、next()、children()、find()等，或者過濾篩選的方法，比如eq()、filter()、not()等，來得到最終想要操作的jQuery對(duì)象。用跳轉(zhuǎn)和過濾方式得到的jQuery結(jié)果，往往通過比較復(fù)雜的表達(dá)式組合，可以達(dá)到同樣的目的。比如說$(div).eq(3)，也可以用$(div:eq(3)達(dá)到同樣的目的。又比如說$(div).find(span)，可以用$(div span)取到同樣的元素。方法是很靈活的，要根據(jù)具體的情況來選擇。一般來說，HTML頁(yè)面寫得越規(guī)范，使用jQuery就越簡(jiǎn)單還有一種情況，在得到了jQuery()對(duì)象之后，想要判斷其是否滿足條件，那么可以調(diào)用is()、hasClass()等方法，返回一個(gè)boolean值，進(jìn)行后續(xù)的判斷。這類方法也可以歸到這類。第三步是在獲取準(zhǔn)確的jQuery對(duì)象之后，調(diào)用其上的各種方法，來進(jìn)行操作。這一步反而是比較簡(jiǎn)單的了。后面就是對(duì)jQuery框架各種方法的簡(jiǎn)要介紹，更詳細(xì)的內(nèi)容，還是以官方API為準(zhǔn)1、$(.)$() 一切的核心，可以跟4種參數(shù)$(expression)，比如$(#id)、$(.class)等，返回jQuery對(duì)象，或者jQuery對(duì)象的集合$(html)，比如$(hello world)，返回jQuery對(duì)象，或者jQuery對(duì)象的集合$(element)，比如$(document.body)，返回jQuery對(duì)象，或者jQuery對(duì)象的集合$(*)，所有元素2、jQuery Object AccessorsjQuery.index(element)，返回該jQuery對(duì)象在集合中的索引jQuery.each(function)，遍歷jQuery對(duì)象集合，在每個(gè)對(duì)象上執(zhí)行function函數(shù)，function callback(index, domElement)this;jQuery.size()，返回jQuery對(duì)象集合的大小jQuery.length，相當(dāng)于size()方法jQuery.get()，獲取原生DomElement對(duì)象的ArrayjQuery.get(index)，獲取原生DomElement對(duì)象jQuery.eq(position)，獲取jQuery對(duì)象集合中的一個(gè)jQuery對(duì)象3、Data相關(guān)方法jQuery.data(name)jQuery.data(name, value)jQuery.removeData(name)4、選擇符multiple(selector1, selector2)，可以選擇多個(gè)元素或者表達(dá)式，包裝成jQuery對(duì)象的集合例子：$(div,span)id(id)例子：$(#id)class(class)例子：$(.class)element(element)例子：$(div)all例子：$(*)descendant例子：$(table tr td)child(parent, child)例子：$(#id span)，和上一個(gè)descendant的區(qū)別在于，descendant只要是后代就會(huì)被選中，而child必須是直接子節(jié)點(diǎn)，不包括孫子節(jié)點(diǎn)next(prev, next)例子：$(label + input)，選中的是label標(biāo)簽的下一個(gè)input標(biāo)簽，返回jQuery對(duì)象的集合siblings(prev, siblings)例子：$(#prev div)，選中的是#prev之后的所有div標(biāo)簽，返回jQuery對(duì)象的集合，有點(diǎn)像next，但是范圍更大Basic Filters$(:header)，選中所有header，包括等$(tr:odd)，選中所有奇數(shù)行$(tr:even)，選中所有偶數(shù)行$(:animated)，選中所有當(dāng)前有特效的元素，$(div:animated)，選中當(dāng)前所有有特效的$(tr:first)，選中第一行$(tr:last)，選中最后一行$(input:not(:checked)，選中所有沒有“checked”的input元素$(td:gt(4)，選中所有index是4之后的td$(td:lt(4)，選中所有index是4之前的td$(td:eq(4)，選中index是4的td，可以用$(td).eq(4)來實(shí)現(xiàn)同樣的效果Content Filters$(div:contains(John)，選中所有包含John字符串的div$(td:empty)，選中所有內(nèi)容為空的td$(div:has(p)，選中包含有元素的元素，返回jQuery對(duì)象集合$(td:parent)，選中所有包含子節(jié)點(diǎn)的元素，包括文本也可以算是子節(jié)點(diǎn)Visibility Filters$(span:hidden)，選中所有隱藏的$(span:visible)，選中所有可見的Attribute Filters$(divid)，選中包含id屬性的元素$(inputname$=letter)，選中包含某個(gè)屬性的元素，這個(gè)屬性名是以letter結(jié)尾的$(inputname=letter)，選中包含某個(gè)屬性的元素，這個(gè)屬性名是以letter開頭的$(inputname*=man)，選中包含某個(gè)屬性的元素，這個(gè)屬性的屬性名里包含man$(inputname=newsletter)，選中包含一個(gè)屬性的元素，這個(gè)屬性的名字是newsletter$(inputname!=newsletter)，選中所有不包含newsletter屬性的元素$(inputidname$=man)，選中包含id屬性，和以man結(jié)尾屬性的元素Child Filters$(ul li:nth-child(2)，選中自身是元素的第二個(gè)子節(jié)點(diǎn)的元素，注意這個(gè)計(jì)算是從1開始的，不是從0開始$(div span:firstChild)，選中自身是元素的第一個(gè)子節(jié)點(diǎn)的元素$(div span:lastChild)，選中自身是元素的最后一個(gè)子節(jié)點(diǎn)的元素$(div span:onlyChild)，選中自身是元素的唯一子節(jié)點(diǎn)的元素Forms$(:button)，所有元素，和元素$(form :checkbox)，選中所有標(biāo)簽下的，不過這樣會(huì)比較慢，官方建議使用$(input:checkbox)$(:file)，選中所有$(:hidden)，選中所有隱藏元素，以及$(:input)，選中所有$(:text)，選中所有$(:password)，選中所有$(:radio)，選中所有，不過這樣會(huì)比較慢，建議使用$(input:radio)$(:image)，選中所有$(:reset)，選中所有$(:submit)，選中所有Form Filters$(input:enabled)，選中所有enabled的元素$(input:disabled)，選中所有disabled的元素$(input:checked)，選中所有checked的元素$(input:selected)，選中所有selected的元素5、屬性相關(guān)的方法 jQuery.removeAttr(name)jQuery.attr(name)，返回屬性的值，比如$(img).attr(src)jQuery.attr(key,value)，這是設(shè)置屬性的值jQuery.attr(properties)，也是設(shè)置屬性的值例子：1. $(img).attr( 2. src:/images/hat.gif, 3. title:jQuery, 4. alt:jQueryLogo 5. ); jQuery.attr(key,function)，也是設(shè)置屬性的值，這個(gè)function計(jì)算出的結(jié)果，賦給key1. functioncallback(index) 2. /index=positioninthejQueryobject 3. /thismeansDOMElement 4. 6、class相關(guān)的方法 jQuery.toggleClass(class)，反復(fù)切換class屬性，該方法第一次執(zhí)行，增加class，然后去除該class，循環(huán)jQuery.toggleClass(class,switch)，增加一個(gè)switch表達(dá)式j(luò)Query.hasClass(class)，返回booleanjQuery.removeClass(class)，刪除classjQueyr.addClass(class)，增加class7、HTML相關(guān)的方法 jQuery.html()，返回包含的html文本jQuery.html(val)，用val替換包含的html文本8、文本相關(guān)的方法 jQuery.text()，返回包含的純文本，不會(huì)包括html標(biāo)簽，比如abcd，調(diào)用.text()方法，只會(huì)返回abcd，不會(huì)返回abcd jQuery.text(val)，用val替換包含的純文本，和html(val)方法的區(qū)別在于，所有的內(nèi)容會(huì)被看作是純文本，不會(huì)作為html標(biāo)簽進(jìn)行處理，比如調(diào)用.text(abcd)，和不會(huì)被認(rèn)為是html標(biāo)簽9、值相關(guān)的方法jQuery.val()，返回string或者arrayjQuery.val(val)，設(shè)置string值jQuery.val(array)，設(shè)置多個(gè)值，以上3個(gè)方法，主要都是用在表單標(biāo)簽里，如，等10、在jQuery對(duì)象集合中進(jìn)行過濾以下幾類方法有點(diǎn)像把選擇符Filter進(jìn)行方法化，比如$(label:eq(4)，取到第4個(gè)元素，這個(gè)就可以用$(label).eq(4)來替代，達(dá)到同樣的效果jQuery.is(expr)，返回boolean，比如$(this).is(:first-child)，判斷一個(gè)元素，是不是其父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)jQuery.eq(index)，$(div).eq(2)，取出第2個(gè)元素jQuery.filter(expr)，比如$(div).filter(.middle)，會(huì)從div元素中篩選出屬于middle的class的元素；再比如$(p).filter(.selected, :first)，會(huì)取出是selected類，或者是第一個(gè)元素的元素，這個(gè)可以用$(p.class, p:first)來代替這個(gè)方法，會(huì)從初始的結(jié)果集中，篩選保留一部分jQuery.filter(fn)，類似于上一個(gè)函數(shù)，可以傳進(jìn)去一個(gè)function，用這個(gè)function的返回值，進(jìn)行篩選1. functioncallback(index) 2. /index=positioninthejQueryobject 3. /thismeansDOMElement 4. returnboolean; 5. jQuery.not(expr)，是和filter(expr)相反的方法，不是和is(expr)相反的方法。該方法把滿足expr的元素給排除掉，比如$(div).not(.green, #blue)，把class是green或者id是blue的元素過濾掉jQuery.slice(start, end)，從jQuery對(duì)象集合中選出一段jQuery.map(callback)，不知道是干嘛的11、在jQuery對(duì)象之間查找 jQuery.parent(expr)，找父親節(jié)點(diǎn)，可以傳入expr進(jìn)行過濾，比如$(span).parent()或者$(span).parent(.class)jQuery.parents(expr)，類似于jQuery.parent(expr)，但是是查找所有祖先元素，不限于父元素jQuery.children(expr)，返回所有子節(jié)點(diǎn)，和parents()方法不一樣的是，這個(gè)方法只會(huì)返回直接的孩子節(jié)點(diǎn)，不會(huì)返回所有的子孫節(jié)點(diǎn)jQuery.contents()，返回下面的所有內(nèi)容，包括節(jié)點(diǎn)和文本。這個(gè)方法和children()的區(qū)別就在于，包括空白文本，也會(huì)被作為一個(gè)jQuery對(duì)象返回，children()則只會(huì)返回節(jié)點(diǎn)jQuery.prev()，返回上一個(gè)兄弟節(jié)點(diǎn)，不是所有的兄弟節(jié)點(diǎn)jQuery.prevAll()，返回所有之前的兄弟節(jié)點(diǎn)jQuery.next()，返回下一個(gè)兄弟節(jié)點(diǎn)，不是所有的兄弟節(jié)點(diǎn)jQuery.nextAll()，返回所有之后的兄弟節(jié)點(diǎn)jQuery.siblings()，返回兄弟姐妹節(jié)點(diǎn)，不分前后jQuery.add(expr)，往既有的jQuery對(duì)象集合中增加新的jQuery對(duì)象，例子：$(div).add(p)jQuery.find(expr)，跟jQuery.filter(expr)完全不一樣。jQuery.filter()是從初始的jQuery對(duì)象集合中篩選出一部分，而jQuery.find()的返回結(jié)果，不會(huì)有初始集合中的內(nèi)容，比如$(p).find(span)，是從元素開始找，等同于$(p span)12、串聯(lián)方法 jQuery.andSelf()，把最后一次查詢前一次的集合，也增加到最終結(jié)果集中，比如$(div).find(p).andSelf()，這樣結(jié)果集中包括所有的和。如果是$(div).find(p)，那就只有，沒有jQuery.end()，把最后一次查詢前一次的集合，作為最終結(jié)果集，比如$(p).find(span).end()，這樣的結(jié)果集，是所有的，沒有13、DOM文檔操作方法 jQuery.append(content)，這個(gè)方法用于追加內(nèi)容，比如$(div).append(hello);jQuery.appendTo(selector)，這個(gè)方法和上一個(gè)方法相反，比如$(hello).appendTo(#div)，這個(gè)方法其實(shí)還有一個(gè)隱藏的move作用，即原來的元素被移動(dòng)了jQuery.prepend(content)，跟append()方法相對(duì)應(yīng)，在前面插入jQuery.prependTo(selector)，跟上一個(gè)方法相反jQuery.after(content)，在外部插入，插入到后面，比如$(#foo).after(hello);jQuery.insertAfter(selector)，和上一個(gè)方法相反，比如$(hello).insertAfter(#foo);jQuery.before(content)，在外部插入，插入到前面jQuery.insertBefore(selector)，跟上一個(gè)方法相反jQuery.wrapInner(html)，在內(nèi)部插入標(biāo)簽，比如$(p).wrapInner();jQuery.wrap(html)，在外部插入標(biāo)簽，比如$(p).wrap()，這樣的話，所有的都會(huì)被各自的包裹jQuery.wrapAll(html)，類似上一個(gè)，區(qū)別在于，所有的會(huì)被同一個(gè)包裹jQuery.replaceWith(content)，比如$(this).replaceWith(+$(this).text()+);jQuery.replaceAll(selector)，比如$(hello).replaceAll(p);jQuery.empty()，比如$(p).empty()，這樣的話，會(huì)把下面的所有子節(jié)點(diǎn)清空jQuery.remove(expr)，比如$(p).remove()，這樣的話，會(huì)把所有移除，可以用表達(dá)式做參數(shù)，進(jìn)行過濾jQuery.clone()，復(fù)制一個(gè)頁(yè)面元素14、CSS相關(guān)方法 jQuery.css(name)，獲取一個(gè)css屬性的值，比如$(p).css(color)jQuery.css(object)，設(shè)置css屬性的值，比如$(p).css(color:red,border:1px red solid);jQuery.css(name,value)，設(shè)置css屬性的值，比如$(p).css(color,red);15、位置計(jì)算相關(guān)方法 jQuery.scrollLeft()，設(shè)置滾動(dòng)條偏移，這個(gè)方法對(duì)可見元素或不可見元素都生效jQuery.scrollTop()，設(shè)置滾動(dòng)條偏移，這個(gè)方法對(duì)可見元素或不可見元素都生效jQuery.offset()，計(jì)算偏移量，返回值有2個(gè)屬性，分別是top和leftjQuery.position()，計(jì)算位置，返回值也有2個(gè)屬性，top和left16、寬度和高度計(jì)算相關(guān)方法 這組方法需要結(jié)合CSS的盒子模型來理解，margin始終不參與計(jì)算jQuery.height()，這個(gè)方法計(jì)算的是contentjQuery.innerHeight()，這個(gè)方法計(jì)算的是content+paddingjQuery.outerHeight()，這個(gè)方法計(jì)算的是content+padding+borderjQuery.width();jQuery.innerWidth();jQuery.outerWidth();17、頁(yè)面加載完成事件 $(document).ready(function()，可以簡(jiǎn)寫為$(function()18、事件綁定方法 jQuery.bind(type,data,fn)bind()方法可以接受3個(gè)參數(shù)，第1個(gè)是事件類型，類型是string，可能的值有blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select,submit, keydown, keypress, keyup, error第3個(gè)參數(shù)是當(dāng)事件發(fā)生時(shí)，要執(zhí)行的函數(shù)，函數(shù)原型是1. functioncallback(eventObject) 2. this;/domelement 3. 在這個(gè)方法里return false會(huì)阻止事件冒泡并中止默認(rèn)行為，如果在這個(gè)方法里調(diào)用eventObject.preventDefault()則會(huì)中止默認(rèn)行為，如果在這個(gè)方法里調(diào)用eventObject.stopPropagation()則只會(huì)阻止事件冒泡第2個(gè)參數(shù)是可選的，會(huì)賦值給e.data，比如1. functionhandler(event) 2. alert(event.data.foo); 3. 4. $(p).bind(click,foo:bar,handler) jQuery.one(type,data,fn)，這個(gè)方法類似于bind()方法，區(qū)別在于只會(huì)綁定一次jQuery.unbind(type,fn)，解除綁定jQuery.trigger(event,data)，觸發(fā)事件，要注意這個(gè)方法，同樣會(huì)引起瀏覽器的默認(rèn)行為，比如submit另外，這個(gè)方法如果和bind()方法里定義的handler配合使用，可以更加靈活地傳遞參數(shù)，比如1. $(#test).bind(click,name:kyfxbl,function(e,foo) 2. alert(); 3. alert(foo:+foo); 4. );以上代碼，如果直接點(diǎn)擊#test，則foo的值是undefined但是如果通過$(#test).trigger(click,foo)來觸發(fā)，則參數(shù)foo會(huì)被賦值為foojQuery.triggerHandler(event,data)，這個(gè)方法和trigger()方法十分相像，主要有2點(diǎn)不同，1是這個(gè)方法不會(huì)觸發(fā)瀏覽器的默認(rèn)行為，2是它只會(huì)在jQuery對(duì)象集合的第一個(gè)元素上觸發(fā)jQuery.live(type,fn)，這個(gè)方法十分類似jQuery.bind()方法，區(qū)別在于這個(gè)方法對(duì)后來才添加進(jìn)來的元素同樣有效jQuery.die(type,fn)，這個(gè)是jQuery.live()的相反方法19、事件快捷方法 jQuery.hover(over,out)，這個(gè)方法是mouseenter和mouseleave的便捷方法，2個(gè)參數(shù)的函數(shù)原型是：1. functioncallback(eventObject) 2. this;/domelement 3. jQuery.toggle(fn,fn2,fn3,.)，這個(gè)方法是多次點(diǎn)擊的便捷方法，參數(shù)的函數(shù)原型是：1. functioncallback(eventObject) 2. this;/domelement 3. jQuery提供了兩類便捷方法：第一類是類似于click()這種，相當(dāng)于簡(jiǎn)化的jQuery.trigger()方法，比如$(p).click()相當(dāng)于$(p).trigger(click)，不過該方法，無法像完整的jQuery.trigger(click, data)方法一樣，傳遞一個(gè)附帶的參數(shù)第二類是類似于click(function)這種，相當(dāng)于簡(jiǎn)化的jQuery.bind()方法，比如$(p).click(function)相當(dāng)于$(p).bind(click,function)，不過該方法，無法像完整的jQuery.bind(click, data, func)一樣，傳遞一個(gè)額外的參數(shù)20、切換元素顯示與否的方法 jQuery.toggle()，原本顯示的元素會(huì)不顯示，原本不顯示的會(huì)顯示出來。這些元素可以是通過show()和hide()切換的，也可以是通過display:none來設(shè)置的jQuery.show()，顯示元素jQuery.hide()，隱藏元素jQuery.show(speed, callback)，類似于上面的jQuery.show()，不過可以設(shè)置速度以及回調(diào)函數(shù)speed可以是slow、normal、fast，也可以是毫秒數(shù)callback函數(shù)的原型是： function callback() this; / dom element jQuery.hide(speed, callback) jQuery.toggle(speed, callback)21、頁(yè)面一些特效方法 jQuery.slideDown(speed, callback)，讓一個(gè)元素下滑，從無到有jQuery.slideUp(speed, callback)，讓一個(gè)元素上升，從有到無jQuery.slideToggle(speed, callback)，切換一個(gè)下滑和上升jQuery.fadeIn(speed, callback)，淡入效果jQuery.fadeOut(speed, callback)，淡出效果jQuery.fadeTo(speed, opacity, callback)，變淡效果22、ajax相關(guān)方法 $.ajax(options)，這個(gè)是底層方法，上層的$.get()和$.post()都是基于此方法的封裝options:async：是否異步，默認(rèn)為trueurl：目標(biāo)地址type：請(qǐng)求類型，可以是POST或者GETdata：請(qǐng)求參數(shù)，比如name=kyfxbl&location=shenzhencomplete(function)：請(qǐng)求結(jié)束后的回調(diào)函數(shù)，函數(shù)原型是1. function(XMLHttpRequest,textStatus) 2. this;/theoptionsforthisajaxrequest 3. success(function)：請(qǐng)求成功后的回調(diào)函數(shù)，函數(shù)原型是1. function(data,textStatus) 2. /datacouldbexmlDoc,jsonObj