jquery.doc

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