1. 程式人生 > >JQ中常用的方法

JQ中常用的方法

1,
$().addClass(css中定義的樣式型別) -> 給某個元素新增樣式
$().attr({src:‘test.jpg’,alt:‘test image’}) -> 給某個元素新增屬性/值,引數是map
$().attr(‘src’,‘test.jpg’) -> 給某個元素新增屬性/值
$().attr(‘title’,function(){return this.src}) -> 給某個元素新增屬性/值
$().html() -> 獲得該元素內的內容(元素,文字等)
$().html(‘123’) -> 給某元素設定內容
$().removeAttr(‘屬性名稱’) -> 給某元素刪除指定的屬性以及該屬性的值
$().removeClass(”class”) 給某元素刪除指定的樣式
$().text(); 獲得該元素的文字
$().text(value); 設定該元素的文字值為value
$().toggleClass(class) 當元素存在引數中的樣式的時候取消,如果不存在就設定此樣式
$().val(); 獲取input元素的值
$().val(value); 設定input元素的值為value

2,
$().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來包圍該元素

3,
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

4,
eq( index ) 從匹配的元素集合中取得一個指定位置的元素,index從0開始
filter( expr ) 返回與指定表示式匹配的元素集合,可以使用”,”號分割多個expr,用於實現多個條件篩選
filter( fn ) 利用一個特殊的函式來作為篩選條件移除集合中不匹配的元素。
is( expr ) 用一個表示式來檢查當前選擇的元素集合,如果其中至少有一個元素符合這個給定的表示式就返回true。
not( expr ) 從匹配的元素集合中刪除與指定的表示式匹配的元素。
slice( start, [end] ) 從匹配元素集合中取得一個子集,和內建的陣列的slice方法相同。
dd( 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”);

5,基本選擇器
$(”#myDiv”) 匹配唯一的具有此id值的元素
$(”div”) 匹配指定名稱的所有元素
$(”.myClass”) 匹配具有此class樣式值的所有元素
$(”*”) 匹配所有元素
$(”div,span,p.myClass”) 聯合所有匹配的選擇器

6,層疊選擇器
$(”form input”) 後代選擇器,選擇ancestor的所有子孫節點
$(”#main > *”) 子選擇器,選擇parent的所有子節點
$(”label + input”) 臨選擇器,選擇prev的下一個臨節點
$(”#prev ~ div”) 同胞選擇器,選擇prev的所有同胞節點

7,基本過濾選擇器
$(”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”) 匹配所有正在執行動畫的所有元素

8,內容過濾選擇器
$(”div:contains(’John’)”) 匹配含有指定文字的所有元素
$(”td:empty”) 匹配所有空元素(只含有文字的元素不算空元素)
$(”div:has§”) 從原元素集合中再次匹配所有至少含有一個selector的所有元素
$(”td:parent”) 匹配所有不為空的元素(含有文字的元素也算)
$(”div:hidden”) 匹配所有隱藏的元素,也包括表單的隱藏域
$(”div:visible”) 匹配所有可見的元素

9,屬性過濾選擇器
$(”div[id]”) 匹配所有具有指定屬性的元素
$(”input[name=’newsletter’]”) 匹配所有具有指定屬性值的元素
$(”input[name!=’newsletter’]”) 匹配所有不具有指定屬性值的元素
$(”input[name^=’news’]”) 匹配所有指定屬性值以value開頭的元素
( i n p u t [ n a m e (”input[name =’letter’]”) 匹配所有指定屬性值以value結尾的元素
$(”input[name*=’man’]”) 匹配所有指定屬性值含有value字元的元素
( i n p u t [ i d ] [ n a m e (”input[id][name =’man’]”) 匹配同時符合多個選擇器的所有元素

10,子元素過濾選擇器
$(”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個子元素

11,表單元素選擇器
$(”: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元素或表單的隱藏域

12,表單元素過濾選擇器
$(”:enabled”) 匹配所有可操作的表單元素
$(”:disabled”) 匹配所有不可操作的表單元素
$(”:checked”) 匹配所有已點選的元素
$(”select option:selected”) 匹配所有已選擇的元素