jQuery-api-1.7.1下載-jQuery-api-1.7.1下載_

Form Filters
$(“input:enabled”)，選中所有enabled的元素
$(“input:disabled”)，選中所有disabled的元素
$(“input:checked”)，選中所有checked的元素
$(“input:selected”)，選中所有selected的

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
}

jQuery.toggleClass(class)，反複切換class屬性，該方法第一次執行，增加class，然後去除該class，循環
jQuery.toggleClass(class,switch)，增加一個switch表達式
jQuery.hasClass(class)，返回boolean
jQuery.removeClass(class)，刪除class
jQueyr.addClass(class)，增加class

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

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

jQuery.val()，返回string或者array
jQuery.val(val)，設置string值
jQuery.val(array)，設置多個值，以上3個方法，主要都是用在表單標簽裏，如，等

以下幾類方法有點像把選擇符Filter進行方法化，比如$(“label:eq(4)”)，取到第4個元素，這個就可以用$(“label”).eq(4)來替代，達到同樣的效果

jQuery.is(expr)，返回boolean，比如$(this).is(“:first-child”)，判斷一個元素，是不是其父節點的第一個子節點

元素

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對象集合中選出一段

11、在jQuery對象之間查找

jQuery.parent(expr)，找父親節點，可以傳入expr進行過濾，比如$(“span”).parent()或者$(“span”).parent(“.class”)
jQuery.parents(expr)，類似於jQuery.parent(expr)，但是是查找所有祖先元素，不限於父元素
jQuery.children(expr)，返回所有子節點，和parents()方法不一樣的是，這個方法隻會返回直接的孩子節點，不會返回所有的子孫節點
jQuery.contents()，返回下麵的所有內容，包括節點和文本。這個方法和children()的區別就在於，包括空白文本，也會被作為一個jQuery對象返回，children()則隻會返回節點

jQuery.prev()，返回上一個兄弟節點，不是所有的兄弟節點
jQuery.prevAll()，返回所有之前的兄弟節點
jQuery.next()，返回下一個兄弟節點，不是所有的兄弟節點
jQuery.nextAll()，返回所有之後的兄弟節點
jQuery.siblings()，返回兄弟姐妹節點，不分前後

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)，類似上一個，區別在於，所有的

會被同一個

包裹

jQuery.replaceWith(content)，比如$(this).replaceWith(“

”+$(this).text()+”

”);
jQuery.replaceAll(selector)，比如$(“

hello

”).replaceAll(“p”);

jQuery.empty()，比如$(“p”).empty()，這樣的話，會把

下麵的所有子節點清空
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個參數是當事件發生時，要執行的函數，函數原型是
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()方法，區別在於隻會綁定一次

jQuery.unbind(type,fn)，解除綁定

jQuery.trigger(event,data)，觸發事件，要注意這個方法，同樣會引起瀏覽器的默認行為，比如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"])來觸發，則參數foo會被賦值為”foo”

jQuery.triggerHandler(event,data)，這個方法和trigger()方法十分相像，主要有2點不同，1是這個方法不會觸發瀏覽器的默認行為，2是它隻會在jQuery對象集合的第一個元素上觸發

jQuery.live(type,fn)，這個方法十分類似jQuery.bind()方法，區別在於這個方法對後來才添加進來的元素同樣有效

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()的簡易方法，用於發送GET請求

url：請求地址
data：發送到服務端的請求參數
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()差不多，用於發送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無效

相關應用