JQuery常用方法一覽
引用:jquery常用方法一覽
Attribute:
$(”p”).addClass(css中定義的樣式型別); 給某個元素新增樣式
$(”img”).attr({src:”test.jpg”,alt:”test Image”}); 給某個元素新增屬性/值,引數是map
$(”img”).attr(”src”,”test.jpg”); 給某個元素新增屬性/值
$(”img”).attr(”title”, function() { return this.src }); 給某個元素新增屬性/值
$(”元素名稱”).html(); 獲得該元素內的內容(元素,文字等)
$(”元素名稱”).html(”new stuff”); 給某元素設定內容
$(”元素名稱”).removeAttr(”屬性名稱”) 給某元素刪除指定的屬性以及該屬性的值
$(”元素名稱”).removeClass(”class”) 給某元素刪除指定的樣式
$(”元素名稱”).text(); 獲得該元素的文字
$(”元素名稱”).text(value); 設定該元素的文字值為value
$(”元素名稱”).toggleClass(class) 當元素存在引數中的樣式的時候取消,如果不存在就設定此樣式
$(”input元素名稱”).val(); 獲取input元素的值
$(”input元素名稱”).val(value); 設定input元素的值為value
Manipulation:
$(”元素名稱”).after(content); 在匹配元素後面新增內容
$(”元素名稱”).append(content); 將content作為元素的內容插入到該元素的後面
$(”元素名稱”).appendTo(content); 在content後接元素
$(”元素名稱”).before(content); 與after方法相反
$(”元素名稱”).clone(布林表示式) 當布林表示式為真時,克隆元素(無參時,當作true處理)
$(”元素名稱”).empty() 將該元素的內容設定為空
$(”元素名稱”).insertAfter(content); 將該元素插入到content之後
$(”元素名稱”).insertBefore(content); 將該元素插入到content之前
$(”元素”).prepend(content); 將content作為該元素的一部分,放到該元素的最前面
$(”元素”).prependTo(content); 將該元素作為content的一部分,放content的最前面
$(”元素”).remove(); 刪除所有的指定元素
$(”元素”).remove(”exp”); 刪除所有含有exp的元素
$(”元素”).wrap(”html”); 用html來包圍該元素
$(”元素”).wrap(element); 用element來包圍該元素
Traversing:
add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings(expr)
Core:
$(html).appendTo(”body”) 相當於在body中寫了一段html程式碼
$(elems) 獲得DOM上的某個元素
$(function(){………}); 執行一個函式
$(”div > p”).css(”border”, “1px solid gray”); 查詢所有div的子節點p,新增樣式
$(”input:radio”, document.forms[0]) 在當前頁面的第一個表單中查詢所有的單選按鈕
.
e
x
t
e
n
d
(
p
r
o
p
)
p
r
o
p
是
一
個
j
q
u
e
r
y
對
象
,
舉
例
:
j
Q
u
e
r
y
.
e
x
t
e
n
d
(
m
i
n
:
f
u
n
c
t
i
o
n
(
a
,
b
)
r
e
t
u
r
n
a
<
b
?
a
:
b
;
,
m
a
x
:
f
u
n
c
t
i
o
n
(
a
,
b
)
r
e
t
u
r
n
a
>
b
?
a
:
b
;
)
;
j
Q
u
e
r
y
(
e
x
p
r
e
s
s
i
o
n
,
[
c
o
n
t
e
x
t
]
)
—
.extend(prop) prop是一個jquery物件, 舉例: jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery( expression, [context] ) —
.extend(prop)prop是一個jquery對象,舉例:jQuery.extend(min:function(a,b)returna<b?a:b;,max:function(a,b)returna>b?a:b;);jQuery(expression,[context])—( expression, [context]); 在預設情況下,$()查詢的是當前HTML文件中的DOM元素。
each( callback ) 以每一個匹配的元素作為上下文來執行一個函式
舉例:1
$(”span”).click(function){
$(”li”).each(function(){
$(this).toggleClass(”example”);
});
});
舉例:2
$(”button”).click(function () {
$(”div”).each(function (index, domEle) {
// domEle == this
(
d
o
m
E
l
e
)
.
c
s
s
(
”
b
a
c
k
g
r
o
u
n
d
C
o
l
o
r
”
,
“
y
e
l
l
o
w
”
)
;
i
f
(
(domEle).css(”backgroundColor”, “yellow”); if (
(domEle).css(”backgroundColor”,“yellow”);if((this).is(”#stop”)) {
$(”span”).text(”Stopped at div index #” + index);
return false;
}
});
});
jQuery Event:
ready(fn); $(document).ready()注意在body中沒有onload事件,否則該函式不能執行。在每個頁面中可以
有很多個函式被載入執行,按照fn的順序來執行。
bind( type, [data], fn ) 為每一個匹配元素的特定事件(像click)繫結一個或多個事件處理器函式。可能的事件屬性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
keyup, error
one( type, [data], fn ) 為每一個匹配元素的特定事件(像click)繫結一個或多個事件處理器函式。在每個對
象上,這個事件處理函式只會被執行一次。其他規則與bind()函式相同。
trigger( type, [data] ) 在每一個匹配的元素上觸發某類事件。
triggerHandler( type, [data] ) 這一特定方法會觸發一個元素上特定的事件(指定一個事件型別),同時取消瀏覽器對此事件的預設行動
unbind( [type], [data] ) 反繫結,從每一個匹配的元素中刪除繫結的事件。
$(”p”).unbind() 移除所有段落上的所有繫結的事件
$(”p”).unbind( “click” ) 移除所有段落上的click事件
hover( over, out ) over,out都是方法, 當滑鼠移動到一個匹配的元素上面時,會觸發指定的第一個函式。當滑鼠移出這個元素時,會觸發指定的第二個函式。
$(”p”).hover(function(){
$(this).addClass(”over”);
},
function(){
$(this).addClass(”out”);
}
);
toggle( fn, fn ) 如果點選了一個匹配的元素,則觸發指定的第一個函式,當再次點選同一元素時,則觸發指定的第二個函式。
$(”p”).toggle(function(){
$(this).addClass(”selected”);
},
function(){
$(this).removeClass(”selected”);
}
);
元素事件列表說明
注:不帶引數的函式,其引數為可選的 fn。jQuery不支援form元素的reset事件。
事件 描述 支援元素或物件
blur( ) 元素失去焦點 a, input, textarea, button, select, label, map, area
change( ) 使用者改變域的內容 input, textarea, select
click( ) 滑鼠點選某個物件 幾乎所有元素
dblclick( ) 滑鼠雙擊某個物件 幾乎所有元素
error( ) 當載入文件或影像時發生某個錯誤 window, img
focus( ) 元素獲得焦點 a, input, textarea, button, select, label, map, area
keydown( ) 某個鍵盤的鍵被按下 幾乎所有元素
keypress( ) 某個鍵盤的鍵被按下或按住 幾乎所有元素
keyup( ) 某個鍵盤的鍵被鬆開 幾乎所有元素
load( fn ) 某個頁面或影像被完成載入 window, img
mousedown( fn ) 某個滑鼠按鍵被按下 幾乎所有元素
mousemove( fn ) 滑鼠被移動 幾乎所有元素
mouseout( fn ) 滑鼠從某元素移開 幾乎所有元素
mouseover( fn ) 滑鼠被移到某元素之上 幾乎所有元素
mouseup( fn ) 某個滑鼠按鍵被鬆開 幾乎所有元素
resize( fn ) 視窗或框架被調整尺寸 window, iframe, frame
scroll( fn ) 滾動文件的可視部分時 window
select( ) 文字被選定 document, input, textarea
submit( ) 提交按鈕被點選 form
unload( fn ) 使用者退出頁面 window
JQuery Ajax 方法說明:
load( url, [data], [callback] ) 裝入一個遠端HTML內容到一個DOM結點。
$(”#feeds”).load(”feeds.html”); 將feeds.html檔案載入到id為feeds的div中
$(”#feeds”).load(”feeds.php”, {limit: 25}, function(){
alert(”The last 25 entries in the feed have been loaded”);
});
jQuery.get( url, [data], [callback] ) 使用GET請求一個頁面。
$.get(”test.cgi”, { name: “John”, time: “2pm” }, function(data){
alert(”Data Loaded: ” + data);
});
jQuery.getJSON( url, [data], [callback] ) 使用GET請求JSON資料。
$.getJSON(”test.js”, { name: “John”, time: “2pm” }, function(json){
alert(”JSON Data: ” + json.users[3].name);
});
jQuery.getScript( url, [callback] ) 使用GET請求javascript檔案並執行。
$.getScript(”test.js”, function(){
alert(”Script loaded and executed.”);
});
jQuery.post( url, [data], [callback], [type] ) 使用POST請求一個頁面。
ajaxComplete( callback ) 當一個AJAX請求結束後,執行一個函式。這是一個Ajax事件
$(”#msg”).ajaxComplete(function(request, settings){
$(this).append(”
- Request Complete.
- ”);
});
ajaxError( callback ) 當一個AJAX請求失敗後,執行一個函式。這是一個Ajax事件
$(”#msg”).ajaxError(function(request, settings){
$(this).append(” - Error requesting page ” + settings.url + “
- ”);
});ajaxSend( callback ) 在一個AJAX請求傳送時,執行一個函式。這是一個Ajax事件
$(”#msg”).ajaxSend(function(evt, request, settings){
$(this).append(”<li<Starting request at ” + settings.url- “</li<”);
});
ajaxStart( callback ) 在一個AJAX請求開始但還沒有啟用時,執行一個函式。這是一個Ajax事件
當AJAX請求開始(並還沒有啟用時)顯示loading資訊
$(”#loading”).ajaxStart(function(){
$(this).show();
});ajaxStop( callback ) 當所有的AJAX都停止時,執行一個函式。這是一個Ajax事件
當所有AJAX請求都停止時,隱藏loading資訊。
$(”#loading”).ajaxStop(function(){
$(this).hide();
});ajaxSuccess( callback ) 當一個AJAX請求成功完成後,執行一個函式。這是一個Ajax事件
當AJAX請求成功完成時,顯示資訊。
$(”#msg”).ajaxSuccess(function(evt, request, settings){
$(this).append(” - “</li<”);
- Successful Request!
- ”);
});jQuery.ajaxSetup( options ) 為所有的AJAX請求進行全域性設定。檢視$.ajax函式取得所有選項資訊。
設定預設的全域性AJAX請求選項。
$.ajaxSetup({
url: “/xmlhttp/”,
global: false,
type: “POST”
});
$.ajax({ data: myData });serialize( ) 以名稱和值的方式連線一組input元素。實現了正確表單元素序列
function showValues() {
var str = $(”form”).serialize();
$(”#results”).text(str);
}
$(”:checkbox, :radio”).click(showValues);
$(”select”).change(showValues);
showValues();serializeArray( ) 連線所有的表單和表單元素(類似於.serialize()方法),但是返回一個JSON資料格式。
從form中取得一組值,顯示出來
function showValues() {
var fields = $(”:input”).serializeArray();
alert(fields);
$(”#results”).empty();
jQuery.each(fields, function(i, field){
$(”#results”).append(field.value + ” “);
});
}
$(”:checkbox, :radio”).click(showValues);
$(”select”).change(showValues);
showValues();JQuery Effects 方法說明
show( ) 顯示隱藏的匹配元素。
show( speed, [callback] ) 以優雅的動畫顯示所有匹配的元素,並在顯示完成後可選地觸發一個回撥函式。
hide( ) 隱藏所有的匹配元素。
hide( speed, [callback] ) 以優雅的動畫隱藏所有匹配的元素,並在顯示完成後可選地觸發一個回撥函式
toggle( ) 切換元素的可見狀態。如果元素是可見的,切換為隱藏的;如果元素是隱藏的,
切換為可見的。
slideDown( speed, [callback] ) 通過高度變化(向下增大)來動態地顯示所有匹配的元素,在顯示完成後可選
地觸發一個回撥函式。這個動畫效果只調整元素的高度,可以使匹配的元素以
“滑動”的方式顯示出來。
slideUp( speed, [callback] ) 通過高度變化(向上減小)來動態地隱藏所有匹配的元素,在隱藏完成後可選地
觸發一個回撥函式。這個動畫效果只調整元素的高度,可以使匹配的元素以”滑動”
的方式隱藏起來。
slideToggle( speed, [callback] ) 通過高度變化來切換所有匹配元素的可見性,並在切換完成後可選地觸發一個回
調函式。 這個動畫效果只調整元素的高度,可以使匹配的元素以”滑動”的方式隱
藏或顯示。
fadeIn( speed, [callback] ) 通過不透明度的變化來實現所有匹配元素的淡入效果,並在動畫完成後可選地觸
發一個回撥函式。 這個動畫只調整元素的不透明度,也就是說所有匹配的元素的
高度和寬度不會發生變化。
fadeOut( speed, [callback] ) 通過不透明度的變化來實現所有匹配元素的淡出效果,並在動畫完成後可選地觸
發一個回撥函式。 這個動畫只調整元素的不透明度,也就是說所有匹配的元素的
高度和寬度不會發生變化。
fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度,並在動畫完成
後可選地觸發一個回撥函式。 這個動畫只調整元素的不透明度,也就是說所
有匹配的元素的高度和寬度不會發生變化。
stop( ) 停止所有匹配元素當前正在執行的動畫。如果有動畫處於佇列當中,他們就會立即開始。
queue( ) 取得第一個匹配元素的動畫序列的引用(返回一個內容為函式的陣列)
queue( callback ) 在每一個匹配元素的事件序列的末尾新增一個可執行函式,作為此元素的事件函式
queue( queue ) 以一個新的動畫序列代替所有匹配元素的原動畫序列
dequeue( ) 執行並移除動畫序列前端的動畫
animate( params, [duration], [easing], [callback] ) 用於建立自定義動畫的函式。
animate( params, options ) 建立自定義動畫的另一個方法。作用同上。JQuery Traversing 方法說明
eq( index ) 從匹配的元素集合中取得一個指定位置的元素,index從0開始
filter( expr ) 返回與指定表示式匹配的元素集合,可以使用”,”號分割多個expr,用於實現多個條件篩選
filter( fn ) 利用一個特殊的函式來作為篩選條件移除集合中不匹配的元素。
is( expr ) 用一個表示式來檢查當前選擇的元素集合,如果其中至少有一個元素符合這個給定的
表示式就返回true。
map( callback ) 將jQuery物件中的一組元素利用callback方法轉換其值,然後新增到一個jQuery陣列中。
not( expr ) 從匹配的元素集合中刪除與指定的表示式匹配的元素。
slice( start, [end] ) 從匹配元素集合中取得一個子集,和內建的陣列的slice方法相同。
add( expr ) 把與表示式匹配的元素新增到jQuery物件中。
children( [expr] ) 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。可選的過濾器
將使這個方法只匹配符合的元素(只包括元素節點,不包括文字節點)。
contents( ) 取得一個包含匹配的元素集合中每一個元素的所有子孫節點的集合(只包括元素節點,不
包括文字節點),如果元素為iframe,則取得其中的文件元素
find( expr ) 搜尋所有與指定表示式匹配的元素。
next( [expr] ) 取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。
nextAll( [expr] ) 取得一個包含匹配的元素集合中每一個元素所有的後面同輩元素的元素集合
parent( [expr] ) 取得一個包含著所有匹配元素的唯一父元素的元素集合。
parents( [expr] ) 取得一個包含著所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。
prev( [expr] ) 取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。
prevAll( [expr] ) 取得一個包含匹配的元素集合中每一個元素的之前所有同輩元素的元素集合。
siblings( [expr] ) 取得一個包含匹配的元素集合中每一個元素的所有同輩元素的元素集合。
andSelf( ) 將前一個匹配的元素集合新增到當前的集合中
取得所有div元素和其中的p元素,新增border類屬性。取得所有div元素中的p元素,
新增background類屬性
$(”div”).find(”p”).andSelf().addClass(”border”);
$(”div”).find(”p”).addClass(”background”);
end( ) 結束當前的操作,回到當前操作的前一個操作
找到所有p元素其中的span元素集合,然後返回p元素集合,新增css屬性
$(”p”).find(”span”).end().css(”border”, “2px red solid”);JQuery Selectors 方法說明
基本選擇器
$(”#myDiv”) 匹配唯一的具有此id值的元素
$(”div”) 匹配指定名稱的所有元素
$(”.myClass”) 匹配具有此class樣式值的所有元素
$(”*”) 匹配所有元素
$(”div,span,p.myClass”) 聯合所有匹配的選擇器
層疊選擇器
$(”form input”) 後代選擇器,選擇ancestor的所有子孫節點
$(”#main > ”) 子選擇器,選擇parent的所有子節點
$(”label + input”) 臨選擇器,選擇prev的下一個臨節點
$(”#prev ~ div”) 同胞選擇器,選擇prev的所有同胞節點
基本過濾選擇器
$(”tr:first”) 匹配第一個選擇的元素
$(”tr:last”) 匹配最後一個選擇的元素
$(”input:not(:checked) + span”)從原元素集合中過濾掉匹配selector的所有元素(這裡有是一個臨選擇器)
$(”tr:even”) 匹配集合中偶數位置的所有元素(從0開始)
$(”tr:odd”) 匹配集合中奇數位置的所有元素(從0開始)
$(”td:eq(2)”) 匹配集合中指定位置的元素(從0開始)
$(”td:gt(4)”) 匹配集合中指定位置之後的所有元素(從0開始)
$(”td:gl(4)”) 匹配集合中指定位置之前的所有元素(從0開始)
$(”:header”) 匹配所有標題
$(”div:animated”) 匹配所有正在執行動畫的所有元素
內容過濾選擇器
$(”div:contains(’John’)”) 匹配含有指定文字的所有元素
$(”td:empty”) 匹配所有空元素(只含有文字的元素不算空元素)
$(”div:has§”) 從原元素集合中再次匹配所有至少含有一個selector的所有元素
$(”td:parent”) 匹配所有不為空的元素(含有文字的元素也算)
$(”div:hidden”) 匹配所有隱藏的元素,也包括表單的隱藏域
$(”div:visible”) 匹配所有可見的元素
屬性過濾選擇器
$(”div[id]”) 匹配所有具有指定屬性的元素
$(”input[name=’newsletter’]”) 匹配所有具有指定屬性值的元素
$(”input[name!=’newsletter’]”) 匹配所有不具有指定屬性值的元素
$(”input[name^=’news’]”) 匹配所有指定屬性值以value開頭的元素
( ” i n p u t [ n a m e (”input[name (”input[name=’letter’]”) 匹配所有指定屬性值以value結尾的元素
$(”input[name=’man’]”) 匹配所有指定屬性值含有value字元的元素
( ” i n p u t [ i d ] [ n a m e (”input[id][name (”input[id][name=’man’]”) 匹配同時符合多個選擇器的所有元素
子元素過濾選擇器
$(”ul li:nth-child(2)”),
$(”ul li:nth-child(odd)”), 匹配父元素的第n個子元素
$(”ul li:nth-child(3n + 1)”)$(”div span:first-child”) 匹配父元素的第1個子元素
$(”div span:last-child”) 匹配父元素的最後1個子元素
$(”div button:only-child”) 匹配父元素的唯一1個子元素
表單元素選擇器
$(”:input”) 匹配所有的表單輸入元素,包括所有型別的input, textarea, select 和 button
$(”:text”) 匹配所有型別為text的input元素
$(”:password”) 匹配所有型別為password的input元素
$(”:radio”) 匹配所有型別為radio的input元素
$(”:checkbox”) 匹配所有型別為checkbox的input元素
$(”:submit”) 匹配所有型別為submit的input元素
$(”:image”) 匹配所有型別為image的input元素
$(”:reset”) 匹配所有型別為reset的input元素
$(”:button”) 匹配所有型別為button的input元素
$(”:file”) 匹配所有型別為file的input元素
$(”:hidden”) 匹配所有型別為hidden的input元素或表單的隱藏域
表單元素過濾選擇器
$(”:enabled”) 匹配所有可操作的表單元素
$(”:disabled”) 匹配所有不可操作的表單元素
$(”:checked”) 匹配所有已點選的元素
$(”select option:selected”) 匹配所有已選擇的元素JQuery CSS 方法說明
css( name ) 訪問第一個匹配元素的樣式屬性。
css( properties ) 把一個”名/值對”物件設定為所有匹配元素的樣式屬性。
$(”p”).hover(function () {
$(this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });
}, function () {
var cssObj = {
backgroundColor: “#ddd”,
fontWeight: “”,
color: “rgb(0,40,244)”
}
$(this).css(cssObj);
});
css( name, value ) 在所有匹配的元素中,設定一個樣式屬性的值。
offset( ) 取得匹配的第一個元素相對於當前可視視窗的位置。返回的物件有2個屬性,
top和left,屬性值為整數。這個函式只能用於可見元素。
var p = $(”p:last”);
var offset = p.offset();
p.html( “left: ” + offset.left + “, top: ” + offset.top );
width( ) 取得當前第一匹配的元素的寬度值,
width( val ) 為每個匹配的元素設定指定的寬度值。
height( ) 取得當前第一匹配的元素的高度值,
height( val ) 為每個匹配的元素設定指定的高度值。JQuery Utilities 方法說明
jQuery.browser
.msie 表示ie
jQuery.browser.version 讀取使用者瀏覽器的版本資訊
jQuery.boxModel 檢測使用者瀏覽器針對當前頁的顯示是否基於w3c CSS的盒模型
jQuery.isFunction( obj ) 檢測傳遞的引數是否為function
function stub() { }
var objs = [
function () {},
{ x:15, y:20 },
null,
stub,
“function”
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$(”span:eq( ” + i + “)”).text(isFunc);
});
jQuery.trim( str ) 清除字串兩端的空格,使用正規表示式來清除給定字元兩端的空格
jQuery.each( object, callback ) 一個通用的迭代器,可以用來無縫迭代物件和陣列
jQuery.extend( target, object1, [objectN] ) 擴充套件一個物件,修改原來的物件並返回,這是一個強大的實現繼承的
工具,這種繼承是採用傳值的方法來實現的,而不是JavaScript中的
原型鏈方式。
合併settings和options物件,返回修改後的settings物件
var settings = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
jQuery.extend(settings, options);合併defaults和options物件,defaults物件並沒有被修改。options物件中的值
代替了defaults物件的值傳遞給了empty。var empty = {}
var defaults = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
var settings = $.extend(empty, defaults, options);
jQuery.grep( array, callback, [invert] ) 通過一個篩選函式來去除陣列中的項
$.grep( [0,1,2], function(n,i){
return n > 0;
});
jQuery.makeArray( obj ) 將一個類似陣列的物件轉化為一個真正的陣列
將選取的div元素集合轉化為一個陣列
var arr = jQuery.makeArray(document.getElementsByTagName(”div”));
arr.reverse(); // use an Array method on list of dom elements
$(arr).appendTo(document.body);
jQuery.map( array, callback ) 使用某個方法修改一個陣列中的項,然後返回一個新的陣列
jQuery.inArray( value, array ) 返回value在陣列中的位置,如果沒有找到,則返回-1
jQuery.unique( array ) 刪除陣列中的所有重複元素,返回整理後的陣列1、關於頁面元素的引用
通過jquery的$()引用元素包括通過id、class、元素名以及元素的層級關係及dom或者xpath條件等方法,且返回的物件為jquery物件(集合物件),不能直接呼叫dom定義的方法。2、jQuery物件與dom物件的轉換
只有jquery物件才能使用jquery定義的方法。注意dom物件和jquery物件是有區別的,呼叫方法時要注意操作的是dom物件還是 jquery物件。
普通的dom物件一般可以通過 ( ) 轉 換 成 j q u e r y 對 象 。 如 : ()轉換成jquery物件。 如: ()轉換成jquery對象。如:(document.getElementById(“msg”))則為jquery物件,可以使用jquery的方法。
由於jquery物件本身是一個集合。所以如果jquery物件要轉換為dom物件則必須取出其中的某一項,一般可通過索引取出。
如:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲msg")[0],(“div”).eq(1)[0], ( " d i v " ) . g e t ( ) [ 1 ] , ("div").get()[1], ("div").get()[1],(“td”)[5]這些都是dom物件,可以使用dom中的方法,但不能再使用Jquery的方法。
以下幾種寫法都是正確的:
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;3、如何獲取jQuery集合的某一項
對於獲取的元素集合,獲取其中的某一項(通過索引指定)可以使用eq或get(n)方法或者索引號獲取,要注意,eq返回的是jquery物件,而 get(n)和索引返回的是dom元素物件。對於jquery物件只能使用jquery的方法,而dom物件只能使用dom的方法,如要獲取第三個元素的內容。有如下兩種方法:
$(“div”).eq(2).html(); //呼叫jquery物件的方法
$(“div”).get(2).innerHTML; //呼叫dom的方法屬性4、同一函式實現set和get
Jquery中的很多方法都是如此,主要包括如下幾個:
$("#msg").html(); //返回id為msg的元素節點的html內容。
$("#msg").html(“new content”);
//將“new content” 作為html串寫入id為msg的元素節點內容中,頁面顯示粗體的new content$("#msg").text(); //返回id為msg的元素節點的文字內容。
$("#msg").text(“new content”);
//將“new content” 作為普通文字串寫入id為msg的元素節點內容中,頁面顯示new content$("#msg").height(); //返回id為msg的元素的高度
$("#msg").height(“300”); //將id為msg的元素的高度設為300
$("#msg").width(); //返回id為msg的元素的寬度
$("#msg").width(“300”); //將id為msg的元素的寬度設為300$(“input”).val("); //返回表單輸入框的value值
$(“input”).val(“test”); //將表單輸入框的value值設為test$("#msg").click(); //觸發id為msg的元素的單擊事件
$("#msg").click(fn); //為id為msg的元素單擊事件新增函式
同樣blur,focus,select,submit事件都可以有著兩種呼叫方法5、集合處理功能
對於jquery返回的集合內容無需我們自己迴圈遍歷並對每個物件分別做處理,jquery已經為我們提供的很方便的方法進行集合的處理。
包括兩種形式:
$(“p”).each(function(i){this.style.color=[’#f00’,’#0f0’,’#00f’][ i ]})
//為索引分別為0,1,2的p元素分別設定不同的字型顏色。$(“tr”).each(function(i){this.style.backgroundColor=[’#ccc’,’#fff’][i%2]})
//實現表格的隔行換色效果KaTeX parse error: Expected '}', got 'EOF' at end of input: …nction(){alert((this).html())})
//為每個p元素增加了click事件,單擊某個p元素則彈出其內容6、擴充套件我們需要的功能
. e x t e n d ( m i n : f u n c t i o n ( a , b ) r e t u r n a < b ? a : b ; , m a x : f u n c t i o n ( a , b ) r e t u r n a > b ? a : b ; ) ; / / 為 j q u e r y 擴 展 了 m i n , m a x 兩 個 方 法 使 用 擴 展 的 方 法 ( 通 過 “ .extend({ min: function(a, b){return a < b?a:b; }, max: function(a, b){return a > b?a:b; } }); //為jquery擴充套件了min,max兩個方法 使用擴充套件的方法(通過“ .extend(min:function(a,b)returna<b?a:b;,max:function(a,b)returna>b?a:b;);//為jquery擴展了min,max兩個方法使用擴展的方法(通過“.方法名”呼叫):
alert(“a=10,b=20,max=”+ . m a x ( 10 , 20 ) + " , m i n = " + .max(10,20)+",min="+ .max(10,20)+",min="+.min(10,20));7、支援方法的連寫
所謂連寫,即可以對一個jquery物件連續呼叫各種不同的方法。
例如:
KaTeX parse error: Expected '}', got 'EOF' at end of input: …nction(){alert((this).html())})
.mouseover(function(){alert(‘mouse over event’)})
.each(function(i){this.style.color=[’#f00’,’#0f0’,’#00f’][ i ]});8、操作元素的樣式
主要包括以下幾種方式:
$("#msg").css(“background”); //返回元素的背景顏色
$("#msg").css(“background”,"#ccc") //設定元素背景為灰色
$("#msg").height(300); $("#msg").width(“200”); //設定寬高
$("#msg").css({ color: “red”, background: “blue” });//以名值對的形式設定樣式
$("#msg").addClass(“select”); //為元素增加名稱為select的class
$("#msg").removeClass(“select”); //刪除元素名稱為select的class
$("#msg").toggleClass(“select”); //如果存在(不存在)就刪除(新增)名稱為select的class9、完善的事件處理功能
Jquery已經為我們提供了各種事件處理方法,我們無需在html元素上直接寫事件,而可以直接為通過jquery獲取的物件新增事件。
如:
$("#msg").click(function(){alert(“good”)}) //為元素新增了單擊事件
$(“p”).click(function(i){this.style.color=[’#f00’,’#0f0’,’#00f’][ i ]})
//為三個不同的p元素單擊事件分別設定不同的處理
jQuery中幾個自定義的事件:
(1)hover(fn1,fn2):一個模仿懸停事件(滑鼠移動到一個物件上面及移出這個物件)的方法。當滑鼠移動到一個匹配的元素上面時,會觸發指定的第一個函式。當滑鼠移出這個元素時,會觸發指定的第二個函式。
//當滑鼠放在表格的某行上時將class置為over,離開時置為out。
$(“tr”).hover(function(){
$(this).addClass(“over”);
},
function(){
$(this).addClass(“out”);
});
(2)ready(fn):當DOM載入就緒可以查詢及操縱時繫結一個要執行的函式。
( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) a l e r t ( " L o a d S u c c e s s " ) ) / / 頁 面 加 載 完 畢 提 示 “ L o a d S u c c e s s ” , 相 當 於 o n l o a d 事 件 。 與 (document).ready(function(){alert("Load Success")}) //頁面載入完畢提示“Load Success”,相當於onload事件。與 (document).ready(function()alert("LoadSuccess"))//頁面加載完畢提示“LoadSuccess”,相當於onload事件。與(fn)等價
(3)toggle(evenFn,oddFn): 每次點選時切換要呼叫的函式。如果點選了一個匹配的元素,則觸發指定的第一個函式,當再次點選同一元素時,則觸發指定的第二個函式。隨後的每次點選都重複對這兩個函式的輪番呼叫。
//每次點選時輪換新增和刪除名為selected的class。
$(“p”).toggle(function(){
$(this).addClass(“selected”);
},function(){
$(this).removeClass(“selected”);
});
(4)trigger(eventtype): 在每一個匹配的元素上觸發某類事件。
例如:
$(“p”).trigger(“click”); //觸發所有p元素的click事件
(5)bind(eventtype,fn),unbind(eventtype): 事件的繫結與反繫結
從每一個匹配的元素中(新增)刪除繫結的事件。
例如:
KaTeX parse error: Expected '}', got 'EOF' at end of input: …nction(){alert((this).text());}); //為每個p元素新增單擊事件
$(“p”).unbind(); //刪除所有p元素上的所有事件
$(“p”).unbind(“click”) //刪除所有p元素上的單擊事件10、幾個實用特效功能
其中toggle()和slidetoggle()方法提供了狀態切換功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。11、幾個有用的jQuery方法
. b r o w s e r . 瀏 覽 器 類 型 : 檢 測 瀏 覽 器 類 型 。 有 效 參 數 : s a f a r i , o p e r a , m s i e , m o z i l l a 。 如 檢 測 是 否 i e : .browser.瀏覽器型別:檢測瀏覽器型別。有效引數:safari, opera, msie, mozilla。如檢測是否ie: .browser.瀏覽器類型:檢測瀏覽器類型。有效參數:safari,opera,msie,mozilla。如檢測是否ie:.browser.isie,是ie瀏覽器則返回true。
$.each(obj, fn):通用的迭代函式。可用於近似地迭代物件和陣列(代替迴圈)。
如
$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: " + n ); });
等價於:
var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
alert(“Item #”+i+”: "+tempArr[ i ]);
}
也可以處理json資料,如
$.each( { name: “John”, lang: “JS” }, function(i, n){ alert( "Name: " + i + “, Value: " + n ); });
結果為:
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN):用一個或多個其他物件來擴充套件一個物件,返回這個被擴充套件的物件。這是jquery實現的繼承方式。
如:
$.extend(settings, options);
//合併settings和options,並將合併結果返回settings中,相當於options繼承setting並將繼承結果儲存在 setting中。
var settings = $.extend({}, defaults, options);
//合併defaults和options,並將合併結果返回到setting中而不覆蓋default內容。
可以有多個引數(合併多項並返回)
. m a p ( a r r a y , f n ) : 數 組 映 射 。 把 一 個 數 組 中 的 項 目 ( 處 理 轉 換 後 ) 保 存 到 到 另 一 個 新 數 組 中 , 並 返 回 生 成 的 新 數 組 。 如 : v a r t e m p A r r = .map(array, fn):陣列對映。把一個陣列中的專案(處理轉換後)儲存到到另一個新陣列中,並返回生成的新陣列。 如: var tempArr= .map(array,fn):數組映射。把一個數組中的項目(處理轉換後)保存到到另一個新數組中,並返回生成的新數組。如:vartempArr=.map( [0,1,2], function(i){ return i + 4; });
tempArr內容為:[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr內容為:[2,3]
. m e r g e ( a r r 1 , a r r 2 ) : 合 並 兩 個 數 組 並 刪 除 其 中 重 復 的 項 目 。 如 : .merge(arr1,arr2):合併兩個陣列並刪除其中重複的專案。 如: .merge(arr1,arr2):合並兩個數組並刪除其中重復的項目。如:.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
. t r i m ( s t r ) : 刪 除 字 符 串 兩 端 的 空 白 字 符 。 如 : .trim(str):刪除字串兩端的空白字元。 如: .trim(str):刪除字符串兩端的空白字符。如:.trim(” hello, how are you? "); //返回"hello,how are you? "12、解決自定義方法或其他類庫與jQuery的衝突
很多時候我們自己定義了 ( i d ) 方 法 來 獲 取 一 個 元 素 , 或 者 其 他 的 一 些 j s 類 庫 如 p r o t o t y p e 也 都 定 義 了 (id)方法來獲取一個元素,或者其他的一些js類庫如prototype也都定義了 (id)方法來獲取一個元素,或者其他的一些js類庫如prototype也都定義了方法,如果同時把這些內容放在一起就會引起變數方法定義衝突,Jquery對此專門提供了方法用於解決此問題。
使用jquery中的jQuery.noConflict();方法即可把變數 的 控 制 權 讓 渡 給 第 一 個 實 現 它 的 那 個 庫 或 之 前 自 定 義 的 的控制權讓渡給第一個實現它的那個庫或之前自定義的 的控制權讓渡給第一個實現它的那個庫或之前自定義的方法。之後應用 Jquery的時候只要將所有的 換 成 j Q u e r y 即 可 , 如 原 來 引 用 對 象 方 法 換成jQuery即可,如原來引用物件方法 換成jQuery即可,如原來引用對象方法("#msg")改為jQuery("#msg")。
如:
jQuery.noConflict();
// 開始使用jQuery
jQuery(“div p”).hide();
// 使用其他庫的 $()
$(“content”).style.display = ‘none’;以上資料從網上轉載而來
Attribute:
$(”p”).addClass(css中定義的樣式型別); 給某個元素新增樣式
$(”img”).attr({src:”test.jpg”,alt:”test Image”}); 給某個元素新增屬性/值,引數是map
$(”img”).attr(”src”,”test.jpg”); 給某個元素新增屬性/值
$(”img”).attr(”title”, function() { return this.src }); 給某個元素新增屬性/值
$(”元素名稱”).html(); 獲得該元素內的內容(元素,文字等)
$(”元素名稱”).html(”new stuff”); 給某元素設定內容
$(”元素名稱”).removeAttr(”屬性名稱”) 給某元素刪除指定的屬性以及該屬性的值
$(”元素名稱”).removeClass(”class”) 給某元素刪除指定的樣式
$(”元素名稱”).text(); 獲得該元素的文字
$(”元素名稱”).text(value); 設定該元素的文字值為value
$(”元素名稱”).toggleClass(class) 當元素存在引數中的樣式的時候取消,如果不存在就設定此樣式
$(”input元素名稱”).val(); 獲取input元素的值
$(”input元素名稱”).val(value); 設定input元素的值為value
Manipulation:
$(”元素名稱”).after(content); 在匹配元素後面新增內容
$(”元素名稱”).append(content); 將content作為元素的內容插入到該元素的後面
$(”元素名稱”).appendTo(content); 在content後接元素
$(”元素名稱”).before(content); 與after方法相反
$(”元素名稱”).clone(布林表示式) 當布林表示式為真時,克隆元素(無參時,當作true處理)
$(”元素名稱”).empty() 將該元素的內容設定為空
$(”元素名稱”).insertAfter(content); 將該元素插入到content之後
$(”元素名稱”).insertBefore(content); 將該元素插入到content之前
$(”元素”).prepend(content); 將content作為該元素的一部分,放到該元素的最前面
$(”元素”).prependTo(content); 將該元素作為content的一部分,放content的最前面
$(”元素”).remove(); 刪除所有的指定元素
$(”元素”).remove(”exp”); 刪除所有含有exp的元素
$(”元素”).wrap(”html”); 用html來包圍該元素
$(”元素”).wrap(element); 用element來包圍該元素
Traversing:
add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings(expr)Core:
$(html).appendTo(”body”) 相當於在body中寫了一段html程式碼
$(elems) 獲得DOM上的某個元素
$(function(){………}); 執行一個函式
$(”div > p”).css(”border”, “1px solid gray”); 查詢所有div的子節點p,新增樣式
$(”input:radio”, document.forms[0]) 在當前頁面的第一個表單中查詢所有的單選按鈕
. e x t e n d ( p r o p ) p r o p 是 一 個 j q u e r y 對 象 , 舉 例 : j Q u e r y . e x t e n d ( m i n : f u n c t i o n ( a , b ) r e t u r n a < b ? a : b ; , m a x : f u n c t i o n ( a , b ) r e t u r n a > b ? a : b ; ) ; j Q u e r y ( e x p r e s s i o n , [ c o n t e x t ] ) — .extend(prop) prop是一個jquery物件, 舉例: jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery( expression, [context] ) — .extend(prop)prop是一個jquery對象,舉例:jQuery.extend(min:function(a,b)returna<b?a:b;,max:function(a,b)returna>b?a:b;);jQuery(expression,[context])—( expression, [context]); 在預設情況下,$()查詢的是當前HTML文件中的DOM元素。each( callback ) 以每一個匹配的元素作為上下文來執行一個函式
舉例:1
$(”span”).click(function){
$(”li”).each(function(){
$(this).toggleClass(”example”);
});
});
舉例:2
$(”button”).click(function () {
$(”div”).each(function (index, domEle) {
// domEle == this
( d o m E l e ) . c s s ( ” b a c k g r o u n d C o l o r ” , “ y e l l o w ” ) ; i f ( (domEle).css(”backgroundColor”, “yellow”); if ( (domEle).css(”backgroundColor”,“yellow”);if((this).is(”#stop”)) {
$(”span”).text(”Stopped at div index #” + index);
return false;
}
});
});jQuery Event:
ready(fn); $(document).ready()注意在body中沒有onload事件,否則該函式不能執行。在每個頁面中可以
有很多個函式被載入執行,按照fn的順序來執行。
bind( type, [data], fn ) 為每一個匹配元素的特定事件(像click)繫結一個或多個事件處理器函式。可能的事件屬性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
keyup, error
one( type, [data], fn ) 為每一個匹配元素的特定事件(像click)繫結一個或多個事件處理器函式。在每個對
象上,這個事件處理函式只會被執行一次。其他規則與bind()函式相同。trigger( type, [data] ) 在每一個匹配的元素上觸發某類事件。
triggerHandler( type, [data] ) 這一特定方法會觸發一個元素上特定的事件(指定一個事件型別),同時取消瀏覽器對此事件的預設行動
unbind( [type], [data] ) 反繫結,從每一個匹配的元素中刪除繫結的事件。
$(”p”).unbind() 移除所有段落上的所有繫結的事件
$(”p”).unbind( “click” ) 移除所有段落上的click事件
hover( over, out ) over,out都是方法, 當滑鼠移動到一個匹配的元素上面時,會觸發指定的第一個函式。當滑鼠移出這個元素時,會觸發指定的第二個函式。
$(”p”).hover(function(){
$(this).addClass(”over”);
},
function(){
$(this).addClass(”out”);
}
);toggle( fn, fn ) 如果點選了一個匹配的元素,則觸發指定的第一個函式,當再次點選同一元素時,則觸發指定的第二個函式。
$(”p”).toggle(function(){
$(this).addClass(”selected”);
},
function(){
$(this).removeClass(”selected”);
}
);元素事件列表說明
注:不帶引數的函式,其引數為可選的 fn。jQuery不支援form元素的reset事件。
事件 描述 支援元素或物件
blur( ) 元素失去焦點 a, input, textarea, button, select, label, map, area
change( ) 使用者改變域的內容 input, textarea, select
click( ) 滑鼠點選某個物件 幾乎所有元素
dblclick( ) 滑鼠雙擊某個物件 幾乎所有元素
error( ) 當載入文件或影像時發生某個錯誤 window, img
focus( ) 元素獲得焦點 a, input, textarea, button, select, label, map, area
keydown( ) 某個鍵盤的鍵被按下 幾乎所有元素
keypress( ) 某個鍵盤的鍵被按下或按住 幾乎所有元素
keyup( ) 某個鍵盤的鍵被鬆開 幾乎所有元素
load( fn ) 某個頁面或影像被完成載入 window, img
mousedown( fn ) 某個滑鼠按鍵被按下 幾乎所有元素
mousemove( fn ) 滑鼠被移動 幾乎所有元素
mouseout( fn ) 滑鼠從某元素移開 幾乎所有元素
mouseover( fn ) 滑鼠被移到某元素之上 幾乎所有元素
mouseup( fn ) 某個滑鼠按鍵被鬆開 幾乎所有元素
resize( fn ) 視窗或框架被調整尺寸 window, iframe, frame
scroll( fn ) 滾動文件的可視部分時 window
select( ) 文字被選定 document, input, textarea
submit( ) 提交按鈕被點選 form
unload( fn ) 使用者退出頁面 windowJQuery Ajax 方法說明:
load( url, [data], [callback] ) 裝入一個遠端HTML內容到一個DOM結點。
$(”#feeds”).load(”feeds.html”); 將feeds.html檔案載入到id為feeds的div中
$(”#feeds”).load(”feeds.php”, {limit: 25}, function(){
alert(”The last 25 entries in the feed have been loaded”);
});jQuery.get( url, [data], [callback] ) 使用GET請求一個頁面。
$.get(”test.cgi”, { name: “John”, time: “2pm” }, function(data){
alert(”Data Loaded: ” + data);
});jQuery.getJSON( url, [data], [callback] ) 使用GET請求JSON資料。
$.getJSON(”test.js”, { name: “John”, time: “2pm” }, function(json){
alert(”JSON Data: ” + json.users[3].name);
});jQuery.getScript( url, [callback] ) 使用GET請求javascript檔案並執行。
$.getScript(”test.js”, function(){
alert(”Script loaded and executed.”);
});
jQuery.post( url, [data], [callback], [type] ) 使用POST請求一個頁面。ajaxComplete( callback ) 當一個AJAX請求結束後,執行一個函式。這是一個Ajax事件
$(”#msg”).ajaxComplete(function(request, settings){
$(this).append(” - Request Complete.
- ”);
});
ajaxError( callback ) 當一個AJAX請求失敗後,執行一個函式。這是一個Ajax事件
$(”#msg”).ajaxError(function(request, settings){
$(this).append(” - Error requesting page ” + settings.url + “
- ”);
});ajaxSend( callback ) 在一個AJAX請求傳送時,執行一個函式。這是一個Ajax事件
$(”#msg”).ajaxSend(function(evt, request, settings){
$(this).append(”<li<Starting request at ” + settings.url- “</li<”);
});
ajaxStart( callback ) 在一個AJAX請求開始但還沒有啟用時,執行一個函式。這是一個Ajax事件
當AJAX請求開始(並還沒有啟用時)顯示loading資訊
$(”#loading”).ajaxStart(function(){
$(this).show();
});ajaxStop( callback ) 當所有的AJAX都停止時,執行一個函式。這是一個Ajax事件
當所有AJAX請求都停止時,隱藏loading資訊。
$(”#loading”).ajaxStop(function(){
$(this).hide();
});ajaxSuccess( callback ) 當一個AJAX請求成功完成後,執行一個函式。這是一個Ajax事件
當AJAX請求成功完成時,顯示資訊。
$(”#msg”).ajaxSuccess(function(evt, request, settings){
$(this).append(” - “</li<”);
- Successful Request!
- ”);
});jQuery.ajaxSetup( options ) 為所有的AJAX請求進行全域性設定。檢視$.ajax函式取得所有選項資訊。
設定預設的全域性AJAX請求選項。
$.ajaxSetup({
url: “/xmlhttp/”,
global: false,
type: “POST”
});
$.ajax({ data: myData });serialize( ) 以名稱和值的方式連線一組input元素。實現了正確表單元素序列
function showValues() {
var str = $(”form”).serialize();
$(”#results”).text(str);
}
$(”:checkbox, :radio”).click(showValues);
$(”select”).change(showValues);
showValues();serializeArray( ) 連線所有的表單和表單元素(類似於.serialize()方法),但是返回一個JSON資料格式。
從form中取得一組值,顯示出來
function showValues() {
var fields = $(”:input”).serializeArray();
alert(fields);
$(”#results”).empty();
jQuery.each(fields, function(i, field){
$(”#results”).append(field.value + ” “);
});
}
$(”:checkbox, :radio”).click(showValues);
$(”select”).change(showValues);
showValues();JQuery Effects 方法說明
show( ) 顯示隱藏的匹配元素。
show( speed, [callback] ) 以優雅的動畫顯示所有匹配的元素,並在顯示完成後可選地觸發一個回撥函式。
hide( ) 隱藏所有的匹配元素。
hide( speed, [callback] ) 以優雅的動畫隱藏所有匹配的元素,並在顯示完成後可選地觸發一個回撥函式
toggle( ) 切換元素的可見狀態。如果元素是可見的,切換為隱藏的;如果元素是隱藏的,
切換為可見的。
slideDown( speed, [callback] ) 通過高度變化(向下增大)來動態地顯示所有匹配的元素,在顯示完成後可選
地觸發一個回撥函式。這個動畫效果只調整元素的高度,可以使匹配的元素以
“滑動”的方式顯示出來。
slideUp( speed, [callback] ) 通過高度變化(向上減小)來動態地隱藏所有匹配的元素,在隱藏完成後可選地
觸發一個回撥函式。這個動畫效果只調整元素的高度,可以使匹配的元素以”滑動”
的方式隱藏起來。
slideToggle( speed, [callback] ) 通過高度變化來切換所有匹配元素的可見性,並在切換完成後可選地觸發一個回
調函式。 這個動畫效果只調整元素的高度,可以使匹配的元素以”滑動”的方式隱
藏或顯示。
fadeIn( speed, [callback] ) 通過不透明度的變化來實現所有匹配元素的淡入效果,並在動畫完成後可選地觸
發一個回撥函式。 這個動畫只調整元素的不透明度,也就是說所有匹配的元素的
高度和寬度不會發生變化。
fadeOut( speed, [callback] ) 通過不透明度的變化來實現所有匹配元素的淡出效果,並在動畫完成後可選地觸
發一個回撥函式。 這個動畫只調整元素的不透明度,也就是說所有匹配的元素的
高度和寬度不會發生變化。
fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以漸進方式調整到指定的不透明度,並在動畫完成
後可選地觸發一個回撥函式。 這個動畫只調整元素的不透明度,也就是說所
有匹配的元素的高度和寬度不會發生變化。
stop( ) 停止所有匹配元素當前正在執行的動畫。如果有動畫處於佇列當中,他們就會立即開始。
queue( ) 取得第一個匹配元素的動畫序列的引用(返回一個內容為函式的陣列)
queue( callback ) 在每一個匹配元素的事件序列的末尾新增一個可執行函式,作為此元素的事件函式
queue( queue ) 以一個新的動畫序列代替所有匹配元素的原動畫序列
dequeue( ) 執行並移除動畫序列前端的動畫
animate( params, [duration], [easing], [callback] ) 用於建立自定義動畫的函式。
animate( params, options ) 建立自定義動畫的另一個方法。作用同上。JQuery Traversing 方法說明
eq( index ) 從匹配的元素集合中取得一個指定位置的元素,index從0開始
filter( expr ) 返回與指定表示式匹配的元素集合,可以使用”,”號分割多個expr,用於實現多個條件篩選
filter( fn ) 利用一個特殊的函式來作為篩選條件移除集合中不匹配的元素。
is( expr ) 用一個表示式來檢查當前選擇的元素集合,如果其中至少有一個元素符合這個給定的
表示式就返回true。
map( callback ) 將jQuery物件中的一組元素利用callback方法轉換其值,然後新增到一個jQuery陣列中。
not( expr ) 從匹配的元素集合中刪除與指定的表示式匹配的元素。
slice( start, [end] ) 從匹配元素集合中取得一個子集,和內建的陣列的slice方法相同。
add( expr ) 把與表示式匹配的元素新增到jQuery物件中。
children( [expr] ) 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。可選的過濾器
將使這個方法只匹配符合的元素(只包括元素節點,不包括文字節點)。
contents( ) 取得一個包含匹配的元素集合中每一個元素的所有子孫節點的集合(只包括元素節點,不
包括文字節點),如果元素為iframe,則取得其中的文件元素
find( expr ) 搜尋所有與指定表示式匹配的元素。
next( [expr] ) 取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。
nextAll( [expr] ) 取得一個包含匹配的元素集合中每一個元素所有的後面同輩元素的元素集合
parent( [expr] ) 取得一個包含著所有匹配元素的唯一父元素的元素集合。
parents( [expr] ) 取得一個包含著所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。
prev( [expr] ) 取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。
prevAll( [expr] ) 取得一個包含匹配的元素集合中每一個元素的之前所有同輩元素的元素集合。
siblings( [expr] ) 取得一個包含匹配的元素集合中每一個元素的所有同輩元素的元素集合。
andSelf( ) 將前一個匹配的元素集合新增到當前的集合中
取得所有div元素和其中的p元素,新增border類屬性。取得所有div元素中的p元素,
新增background類屬性
$(”div”).find(”p”).andSelf().addClass(”border”);
$(”div”).find(”p”).addClass(”background”);
end( ) 結束當前的操作,回到當前操作的前一個操作
找到所有p元素其中的span元素集合,然後返回p元素集合,新增css屬性
$(”p”).find(”span”).end().css(”border”, “2px red solid”);JQuery Selectors 方法說明
基本選擇器
$(”#myDiv”) 匹配唯一的具有此id值的元素
$(”div”) 匹配指定名稱的所有元素
$(”.myClass”) 匹配具有此class樣式值的所有元素
$(”*”) 匹配所有元素
$(”div,span,p.myClass”) 聯合所有匹配的選擇器
層疊選擇器
$(”form input”) 後代選擇器,選擇ancestor的所有子孫節點
$(”#main > ”) 子選擇器,選擇parent的所有子節點
$(”label + input”) 臨選擇器,選擇prev的下一個臨節點
$(”#prev ~ div”) 同胞選擇器,選擇prev的所有同胞節點
基本過濾選擇器
$(”tr:first”) 匹配第一個選擇的元素
$(”tr:last”) 匹配最後一個選擇的元素
$(”input:not(:checked) + span”)從原元素集合中過濾掉匹配selector的所有元素(這裡有是一個臨選擇器)
$(”tr:even”) 匹配集合中偶數位置的所有元素(從0開始)
$(”tr:odd”) 匹配集合中奇數位置的所有元素(從0開始)
$(”td:eq(2)”) 匹配集合中指定位置的元素(從0開始)
$(”td:gt(4)”) 匹配集合中指定位置之後的所有元素(從0開始)
$(”td:gl(4)”) 匹配集合中指定位置之前的所有元素(從0開始)
$(”:header”) 匹配所有標題
$(”div:animated”) 匹配所有正在執行動畫的所有元素
內容過濾選擇器
$(”div:contains(’John’)”) 匹配含有指定文字的所有元素
$(”td:empty”) 匹配所有空元素(只含有文字的元素不算空元素)
$(”div:has§”) 從原元素集合中再次匹配所有至少含有一個selector的所有元素
$(”td:parent”) 匹配所有不為空的元素(含有文字的元素也算)
$(”div:hidden”) 匹配所有隱藏的元素,也包括表單的隱藏域
$(”div:visible”) 匹配所有可見的元素
屬性過濾選擇器
$(”div[id]”) 匹配所有具有指定屬性的元素
$(”input[name=’newsletter’]”) 匹配所有具有指定屬性值的元素
$(”input[name!=’newsletter’]”) 匹配所有不具有指定屬性值的元素
$(”input[name^=’news’]”) 匹配所有指定屬性值以value開頭的元素
( ” i n p u t [ n a m e (”input[name (”input[name=’letter’]”) 匹配所有指定屬性值以value結尾的元素
$(”input[name=’man’]”) 匹配所有指定屬性值含有value字元的元素
( ” i n p u t [ i d ] [ n a m e (”input[id][name (”input[id][name=’man’]”) 匹配同時符合多個選擇器的所有元素
子元素過濾選擇器
$(”ul li:nth-child(2)”),
$(”ul li:nth-child(odd)”), 匹配父元素的第n個子元素
$(”ul li:nth-child(3n + 1)”)$(”div span:first-child”) 匹配父元素的第1個子元素
$(”div span:last-child”) 匹配父元素的最後1個子元素
$(”div button:only-child”) 匹配父元素的唯一1個子元素
表單元素選擇器
$(”:input”) 匹配所有的表單輸入元素,包括所有型別的input, textarea, select 和 button
$(”:text”) 匹配所有型別為text的input元素
$(”:password”) 匹配所有型別為password的input元素
$(”:radio”) 匹配所有型別為radio的input元素
$(”:checkbox”) 匹配所有型別為checkbox的input元素
$(”:submit”) 匹配所有型別為submit的input元素
$(”:image”) 匹配所有型別為image的input元素
$(”:reset”) 匹配所有型別為reset的input元素
$(”:button”) 匹配所有型別為button的input元素
$(”:file”) 匹配所有型別為file的input元素
$(”:hidden”) 匹配所有型別為hidden的input元素或表單的隱藏域
表單元素過濾選擇器
$(”:enabled”) 匹配所有可操作的表單元素
$(”:disabled”) 匹配所有不可操作的表單元素
$(”:checked”) 匹配所有已點選的元素
$(”select option:selected”) 匹配所有已選擇的元素JQuery CSS 方法說明
css( name ) 訪問第一個匹配元素的樣式屬性。
css( properties ) 把一個”名/值對”物件設定為所有匹配元素的樣式屬性。
$(”p”).hover(function () {
$(this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });
}, function () {
var cssObj = {
backgroundColor: “#ddd”,
fontWeight: “”,
color: “rgb(0,40,244)”
}
$(this).css(cssObj);
});
css( name, value ) 在所有匹配的元素中,設定一個樣式屬性的值。
offset( ) 取得匹配的第一個元素相對於當前可視視窗的位置。返回的物件有2個屬性,
top和left,屬性值為整數。這個函式只能用於可見元素。
var p = $(”p:last”);
var offset = p.offset();
p.html( “left: ” + offset.left + “, top: ” + offset.top );
width( ) 取得當前第一匹配的元素的寬度值,
width( val ) 為每個匹配的元素設定指定的寬度值。
height( ) 取得當前第一匹配的元素的高度值,
height( val ) 為每個匹配的元素設定指定的高度值。JQuery Utilities 方法說明
jQuery.browser
.msie 表示ie
jQuery.browser.version 讀取使用者瀏覽器的版本資訊
jQuery.boxModel 檢測使用者瀏覽器針對當前頁的顯示是否基於w3c CSS的盒模型
jQuery.isFunction( obj ) 檢測傳遞的引數是否為function
function stub() { }
var objs = [
function () {},
{ x:15, y:20 },
null,
stub,
“function”
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$(”span:eq( ” + i + “)”).text(isFunc);
});
jQuery.trim( str ) 清除字串兩端的空格,使用正規表示式來清除給定字元兩端的空格
jQuery.each( object, callback ) 一個通用的迭代器,可以用來無縫迭代物件和陣列
jQuery.extend( target, object1, [objectN] ) 擴充套件一個物件,修改原來的物件並返回,這是一個強大的實現繼承的
工具,這種繼承是採用傳值的方法來實現的,而不是JavaScript中的
原型鏈方式。
合併settings和options物件,返回修改後的settings物件
var settings = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
jQuery.extend(settings, options);合併defaults和options物件,defaults物件並沒有被修改。options物件中的值
代替了defaults物件的值傳遞給了empty。var empty = {}
var defaults = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
var settings = $.extend(empty, defaults, options);
jQuery.grep( array, callback, [invert] ) 通過一個篩選函式來去除陣列中的項
$.grep( [0,1,2], function(n,i){
return n > 0;
});
jQuery.makeArray( obj ) 將一個類似陣列的物件轉化為一個真正的陣列
將選取的div元素集合轉化為一個陣列
var arr = jQuery.makeArray(document.getElementsByTagName(”div”));
arr.reverse(); // use an Array method on list of dom elements
$(arr).appendTo(document.body);
jQuery.map( array, callback ) 使用某個方法修改一個陣列中的項,然後返回一個新的陣列
jQuery.inArray( value, array ) 返回value在陣列中的位置,如果沒有找到,則返回-1
jQuery.unique( array ) 刪除陣列中的所有重複元素,返回整理後的陣列
相關文章
- jQuery常用方法總結【三】jQuery
- 遍歷方法 js jquery 我 常用JSjQuery
- JQuery基本知識彙總;JQuery常用方法;淺入瞭解JQueryjQuery
- jquery常用表單&DOM操作方法jQuery
- 常用WebService一覽表Web
- js與jquery常用陣列方法總結JSjQuery陣列
- 常用和不常用埠一覽表收藏
- SQL 常用語句一覽SQL
- JQuery的一些常用事件jQuery事件
- jQuery:一些js常用動效jQueryJS
- 常用的Websocket技術一覽Web
- PostgreSQL常用命令一覽SQL
- jQuery常用apijQueryAPI
- 【jQuery】常用點jQuery
- 12種jQuery效能優化方法解析(常用 轉載)jQuery優化
- 學習jQuery之旅--新手必須知道的常用方法jQuery
- Object()的方法一覽Object
- jQuery中的常用內容總結(一)jQuery
- jQuery常用函式jQuery函式
- Jquery常用類(轉)jQuery
- jQuery的一些小方法jQuery
- javascript基礎(BOM常用物件:navigtor,判斷瀏覽器的常用方法,和區分IE瀏覽器的方法)(三十九)JavaScript物件瀏覽器
- Maven/SBT常用的repositorie一覽表Maven
- jquery的ajax方法在各個瀏覽器使用注意點jQuery瀏覽器
- jQuery的常用小例子jQuery
- jQuery常用的一些知識點總結jQuery
- Dash應用瀏覽器端回撥常用方法總結瀏覽器
- [jQuery]常用正規表示式jQuery
- Jquery常用面試題(總結)jQuery面試題
- jQuery常用的選擇器jQuery
- jquery常用語句總結jQuery
- 常用jquery外掛資料jQuery
- Oracle 常用效能檢視一覽表(10g)Oracle
- jQuery方法wrapAll()jQuery
- jQuery 事件方法jQuery事件
- jQuery 效果方法jQuery
- jQuery AJAX 方法jQuery
- jQuery Callback 方法jQuery