本文基于jQuery1.7.1版本，是對官方API的整理和總結，完整的官方API見http://api.jquery.com/browser/

下陸網站制作公司哪家好，找成都創(chuàng)新互聯公司！從網頁設計、網站建設、微信開發(fā)、APP開發(fā)、自適應網站建設等網站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯公司從2013年創(chuàng)立到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選成都創(chuàng)新互聯公司。

0、總述

jQuery框架提供了很多方法，但大致上可以分為3大類：獲取jQuery對象的方法、在jQuery對象間跳轉的方法，以及獲取jQuery對象后調用的方法

其中第一步是怎樣獲取jQuery對象。大致來說，是通過最核心的$()方法，將頁面上的元素(或者在頁面上不存在的html片段)包裝成jQuery對象。

$()方法里面支持的語法又包括3大類，分別是表達式(包括類表達式.，id表達式#，元素表達式等)、符號(包括后代符號space，next符號+等)、過濾器(包括:過濾器和[]過濾器)。

通過以上3種的組合，“查詢”得到想要操作的元素或者元素集合，作為$()的參數，得到jQuery對象(或者jQuery對象的集合)

第二步是在jQuery對象間的跳轉。也就是說，已經得到了一個jQuery對象，但是并不是想要的，那么可以通過一系列的跳轉方法，比如parent()、next()、children()、find()等，或者過濾篩選的方法，比如eq()、filter()、not()等，來得到最終想要操作的jQuery對象。

用跳轉和過濾方式得到的jQuery結果，往往通過比較復雜的表達式組合，可以達到同樣的目的。

比如說$("div").eq(3)，也可以用$("div:eq(3)")達到同樣的目的。

又比如說$("div").find("span")，可以用$("div span")取到同樣的元素。

方法是很靈活的，要根據具體的情況來選擇。一般來說，HTML頁面寫得越規(guī)范，使用jQuery就越簡單

還有一種情況，在得到了jQuery()對象之后，想要判斷其是否滿足條件，那么可以調用is()、hasClass()等方法，返回一個boolean值，進行后續(xù)的判斷。這類方法也可以歸到這類。

第三步是在獲取準確的jQuery對象之后，調用其上的各種方法，來進行操作。這一步反而是比較簡單的了。

后面就是對jQuery框架各種方法的簡要介紹，更詳細的內容，還是以官方API為準

1、$(...)

$() 一切的核心，可以跟4種參數

$(expression)，比如$("#id")、$(".class")等，返回jQuery對象，或者jQuery對象的集合

$(html)，比如$("hello world")，返回jQuery對象，或者jQuery對象的集合

$(element)，比如$(document.body)，返回jQuery對象，或者jQuery對象的集合

$(*)，所有元素

2、jQuery Object Accessors

jQuery.index(element)，返回該jQuery對象在集合中的索引

jQuery.each(function)，遍歷jQuery對象集合，在每個對象上執(zhí)行function函數，function callback(index, domElement){this};

jQuery.size()，返回jQuery對象集合的大小

jQuery.length，相當于size()方法

jQuery.get()，獲取原生DomElement對象的Array

jQuery.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")，選中所有奇數行

$("tr:even")，選中所有偶數行

$(":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)來實現同樣的效果

Content Filters

$("div:contains('John')")，選中所有包含"John"字符串的div

$("td:empty")，選中所有內容為空的td

$("div:has(p)")，選中包含有

元素的

元素，返回jQuery對象集合

$("td:parent")，選中所有包含子節(jié)點的元素，包括文本也可以算是子節(jié)點

Visibility Filters

$("span:hidden")，選中所有隱藏的

$("span:visible")，選中所有可見的

Attribute Filters

$("div[id]")，選中包含id屬性的

元素

$("input[name$='letter']")，選中包含某個屬性的元素，這個屬性名是以'letter'結尾的

$("input[name^='letter']")，選中包含某個屬性的元素，這個屬性名是以'letter'開頭的

$("input[name*='man']")，選中包含某個屬性的元素，這個屬性的屬性名里包含'man'

$("input[name='newsletter']")，選中包含一個屬性的元素，這個屬性的名字是'newsletter'

$("input[name!='newsletter']")，選中所有不包含'newsletter'屬性的元素

$("input[id][name$='man']")，選中包含id屬性，和以'man'結尾屬性的元素

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)，也是設置屬性的值

  例子：

   
   
   
    
    
    
  $("img").attr({   
    
    
    
  src: "/images/hat.gif",   
    
    
    
  title: "jQuery",   
    
    
    
  alt: "jQuery Logo"   
    
    
    
  });   
   
   
  

  jQuery.attr(key,function)，也是設置屬性的值，這個function計算出的結果，賦給key

   
   
   
    
    
    
  function callback(index) {   
    
    
    
  // index == position in the jQuery object   
    
    
    
  // this means DOM Element   
    
    
    
  }  
   
   
  

  6、class相關的方法

  jQuery.toggleClass(class)，反復切換class屬性，該方法第一次執(zhí)行，增加class，然后去除該class，循環(huán)

  jQuery.toggleClass(class,switch)，增加一個switch表達式

  jQuery.hasClass(class)，返回boolean

  jQuery.removeClass(class)，刪除class

  jQueyr.addClass(class)，增加class

  7、HTML相關的方法

  jQuery.html()，返回包含的html文本

  jQuery.html(val)，用val替換包含的html文本

  8、文本相關的方法

  jQuery.text()，返回包含的純文本，不會包括html標簽，比如abcd，調用.text()方法，只會返回abcd，不會返回abcd
  jQuery.text(val)，用val替換包含的純文本，和html(val)方法的區(qū)別在于，所有的內容會被看作是純文本，不會作為html標簽進行處理，比如調用.text("abcd")，和不會被認為是html標簽

  9、值相關的方法

  jQuery.val()，返回string或者array

  jQuery.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")來代替這個方法，會從初始的結果集中，篩選保留一部分

  jQuery.filter(fn)，類似于上一個函數，可以傳進去一個function，用這個function的返回值，進行篩選

   
   
   
    
    
    
  function callback(index){   
    
    
    
  // index == position in the jQuery object   
    
    
    
  // this means DOM Element   
    
    
    
  return boolean;   
    
    
    
  }  
   
   
  

  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()，返回下面的所有內容，包括節(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()的返回結果，不會有初始集合中的內容，比如$("p").find("span")，是從

  元素開始找，等同于$("p span")

  12、串聯方法

  jQuery.andSelf()，把最后一次查詢前一次的集合，也增加到最終結果集中，比如$("div").find("p").andSelf()，這樣結果集中包括所有的

  和

  。如果是$("div").find("p")，那就只有

  ，沒有

  jQuery.end()，把最后一次查詢前一次的集合，作為最終結果集，比如$("p").find("span").end()，這樣的結果集，是所有的

  ，沒有

  13、DOM文檔操作方法

  jQuery.append(content)，這個方法用于追加內容，比如$("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)，在內部插入標簽，比如$("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()，這樣的話，會把所有

  移除，可以用表達式做參數，進行過濾

  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和left

  jQuery.position()，計算位置，返回值也有2個屬性，top和left

  16、寬度和高度計算相關方法

  這組方法需要結合CSS的盒子模型來理解，margin始終不參與計算

  jQuery.height()，這個方法計算的是content

  jQuery.innerHeight()，這個方法計算的是content+padding

  jQuery.outerHeight()，這個方法計算的是content+padding+border

  jQuery.width();

  jQuery.innerWidth();

  jQuery.outerWidth();

  17、頁面加載完成事件

  $(document).ready(function(){})，可以簡寫為$(function(){})

  18、事件綁定方法

  jQuery.bind(type,data,fn)

  bind()方法可以接受3個參數，第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個參數是當事件發(fā)生時，要執(zhí)行的函數，函數原型是

   
   
   
    
    
    
  function callback(eventObject) {   
    
    
    
  this; // dom element   
    
    
    
  }  
   
   
  

  在這個方法里return false會阻止事件冒泡并中止默認行為，如果在這個方法里調用eventObject.preventDefault()則會中止默認行為，如果在這個方法里調用eventObject.stopPropagation()則只會阻止事件冒泡

  第2個參數是可選的，會賦值給e.data，比如

   
   
   
    
    
    
  function handler(event) {   
    
    
    
  alert(event.data.foo);   
    
    
    
  }   
    
    
    
  $("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配合使用，可以更加靈活地傳遞參數，比如

   
   
   
    
    
    
  $("#test").bind("click", {name : "kyfxbl"}, function(e, foo) {   
    
    
    
  alert(e.data.name);   
    
    
    
  alert("foo: " + foo);   
    
    
    
  });  
   
   
  

  以上代碼，如果直接點擊#test，則foo的值是undefined

  但是如果通過$("#test").trigger("click",["foo"])來觸發(fā)，則參數foo會被賦值為"foo"

  jQuery.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個參數的函數原型是：

   
   
   
    
    
    
  function callback(eventObject) {   
    
    
    
  this; // dom element   
    
    
    
  }   
   
   
  

  jQuery.toggle(fn,fn2,fn3,...)，這個方法是多次點擊的便捷方法，參數的函數原型是：

   
   
   
    
    
    
  function callback(eventObject) {   
    
    
    
  this; // dom element   
    
    
    
  }  
   
   
  

  jQuery提供了兩類便捷方法：

  第一類是類似于click()這種，相當于簡化的jQuery.trigger()方法，比如$("p").click()相當于$("p").trigger("click")，不過該方法，無法像完整的jQuery.trigger("click", data)方法一樣，傳遞一個附帶的參數

  第二類是類似于click(function)這種，相當于簡化的jQuery.bind()方法，比如$("p").click(function)相當于$("p").bind("click",function)，不過該方法，無法像完整的jQuery.bind("click", data, func)一樣，傳遞一個額外的參數

  20、切換元素顯示與否的方法

  jQuery.toggle()，原本顯示的元素會不顯示，原本不顯示的會顯示出來。這些元素可以是通過show()和hide()切換的，也可以是通過display:none來設置的

  jQuery.show()，顯示元素

  jQuery.hide()，隱藏元素

  jQuery.show(speed, callback)，類似于上面的jQuery.show()，不過可以設置速度以及回調函數

  speed可以是"slow"、"normal"、"fast"，也可以是毫秒數

  callback函數的原型是：
  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：是否異步，默認為true

  url：目標地址

  type：請求類型，可以是"POST"或者"GET"

  data：請求參數，比如"name=kyfxbl&location=shenzhen"

  complete(function)：請求結束后的回調函數，函數原型是

   
   
   
    
    
    
  function (XMLHttpRequest, textStatus) {   
    
    
    
  this; // the options for this ajax request   
    
    
    
  }  
   
   
  

  success(function)：請求成功后的回調函數，函數原型是

   
   
   
    
    
    
  function (data, textStatus) {   
    
    
    
  // data could be xmlDoc, jsonObj, html, text, etc...   
    
    
    
  this; // the options for this ajax request   
    
    
    
  }  
   
   
  

  例子：

   
   
   
    
    
    
  $.ajax({   
    
    
    
  url : "user/ajax",   
    
    
    
  type : "GET",   
    
    
    
  data : "name=kyfxbl&location=shenzhen",   
    
    
    
  success : function(data, textStatus) {   
    
    
    
  alert(data);   
    
    
    
  alert(this.success);   
    
    
    
  }   
    
    
    
  });  
   
   
  

  $.get(url, data, callback, type)，$.ajax()的簡易方法，用于發(fā)送GET請求

  url：請求地址

  data：發(fā)送到服務端的請求參數

  callback：請求成功后的回調函數，函數原型是：

   
   
   
    
    
    
  function (data, textStatus) {   
    
    
    
  // data could be xmlDoc, jsonObj, html, text, etc...   
    
    
    
  this; // the options for this ajax request   
    
    
    
  }  
   
   
  

  $.post(url, data, callback, type)，$.ajax()的簡易方法，跟$.get()差不多，用于發(fā)送POST請求

  23、瀏覽器及特性檢測

  $.support，可以檢測當前瀏覽器是否支持下列屬性，返回boolean。包括boxModel、cssFloat、opacity、tbody等
  $.browser，檢測當前瀏覽器類型，返回一個map，其中可能的值有safari、opera、msie、mozilla

  24、數據緩存方法

  該類方法是jQuery.data()方法和jQuery.removeData()的另一種形式，增加的elem參數是DOM Element

  $.data(elem, name)，取出elem上name的值

  $.data(elem, name, value)，設置elem上name的值為value

  $.removeData(elem, name)，刪除elem上的name

  $.removeData(elem)，刪除elem上的所有緩存數據

  25、工具方法

  $.isArray(obj)，檢測一個對象是否是數組

  $.isFunction(obj)，檢測一個對象是否是函數

  $.trim(str)，去除string的空格

  $.inArray(value, array)，返回value在array中的下標，如果沒有找到則返回-1，比如$.inArray(123, ["john",1,123,"f"])將會返回2

  $.unique(array)，去除array中的重復元素，該方法只對DOM Element有效，對string和number無效

  原文：http://www.iteye.com/topic/1120761

  【編輯推薦】

  1. jQuery LigerUI使用教程入門篇
  2. jQuery LigerUI V1.1.5發(fā)布(包括API和全部源碼)
  3. jQuery使用方法
  4. jQuery基本原理
  5. 2011年度最佳jQuery插件揭曉（附下載）

  
  網站欄目：前端必備：jQuery 1.7.1API手冊
  本文路徑：http://m.5511xx.com/article/ccdjodh.html

  其他資訊

  • phpadmin如何導出html
  • 免實名香港服務器租用怎么選擇
  • linux服務器重裝系統(tǒng)命令是什么
  • 搭建前端開發(fā)環(huán)境——docker篇
  • 實現多選表單數據自動寫入數據庫的方法解析(多選表單寫入數據庫)