JQuery中的API 操作DOM

2021-05-02 18:47:43 字數 3704 閱讀 3401

來源:http://mwga.net.blog.163.com/blog/static/1064567282009314111715160/

1.查詢id為「#」的元素------->$("#元素id")

2.查詢dom中乙個節點;------>$("標籤名稱")

3.查詢某乙個特定的類;------>$(".類名")

4.查詢所有dom標籤元素;----->$("*")

5.查詢dom框架內部的某一給定的祖代元素的後代元素;----->$("祖先元素 後代元素")

6.查詢dom框架內某一父節點下的所有子節點元素;----->$("父節點元素 子節點元素")

7.給某一指定input元素賦值;------>$("input").val("值的內容");

8.匹配所緊接在某一元素後的特定元素;----->$("prev+next"),即查詢所有跟在prev後的next元素;

9.匹配緊接在某一元素後的所有同輩元素;---->$("prev~next"),即查詢所有跟在prev後且與prev同輩的next元素;

10.匹配找到的第乙個元素;-----$("tr:first"),即找到**中第一行;

10.匹配找到的最後乙個元素;-----$("tr:last"),即找到**中最後一行;

11.去除所有與給定選擇器匹配的元素;----->$("input:not(:checked)"),即查詢所有未選中的input元素;(似乎有點問題);

12.匹配所有索引值為偶數的元素,從0開始計數;------>$("tr.even"),即是查詢**中的奇數行;

13.匹配所有索引值為偶數的元素,從0開始計數;------>$("tr. odd"),即是查詢**中的偶數行;

14.匹配乙個給定的索引值的元素,從0開始計數;------->$("tr:eq(1)"),即是查詢**的第二行;

15.匹配所有大於給定索引值的元素,從a0開始計數;----->$("tr:gt(0)"),即是查詢**中第二第三行;

16.匹配所有小於給定索引值的元素,從0開始計數;----->$("tr:lt(2)"),即是查詢**中第一第二行;

17.:header匹配如h1、h2、h3之類的元素;----->$(":header").css("background","#baaaaa");

18..animate執行乙個動畫特效;------>$("元素id號").animate(,1200)

.animate(,"slow")

.animate(,"fast")

.slideup(1000)

.slidedown(2000)

19.匹配包含給定文字的元素;------>$("div:contains('給定元素')"),即查詢所有包含'給定元素'的div元素.

20.匹配所有不包含子元素或者文字的空元素;----->$("td:empty"),即查詢所有列值為空的元素;

21.匹配所有包含子元素或者文字的元素;------>$("td:parent"),即查詢所有列值不為空或者td中含有td的列;

22.匹配含有某所一特定元素的元素;------>$("div:has(p)"),即查詢所有div中含有p標籤的div元素;

23.匹配所有可見元素;-------->$("tr:visible"),即查詢所有可見的tr元素;

24.匹配所的不可見元素,input的type屬性為hidden的話,可會被匹配到;------>$("tr:hidden"),即查詢所有不可見的tr元素;

25.匹配包含給定屬性的元素;------->$("div[id]"),即查詢所有含有id屬性的div元素;

26.匹配給定屬性是某個特定值的元素;-------->$("input[name='newsletter']").attr("checked",true);,即查詢所有name屬性為newsletter的input元素;

27.匹配給定屬性不是包含某個特定值的元素;-------->$("input[name!='newsletter']").attr("checked",true);,即查詢所有name屬性為newsletter的input元素;

28.匹配給定屬性是以某個特定值開始的元素;------->$("input[name^='news']").attr("checked",true);,即查詢所有name屬性以news開頭的input元素;

29.匹配給定屬性是以某個特定值開始的元素;------->$("input[name$='letter']").attr("checked",true);,即查詢所有name屬性以letter結尾的input元素;

30.匹配給定屬性是包含某些值的元素;----->$("input[name*='man']"),即查詢所有name屬性中包含man欄位的input元素;

31.同時滿足多個條件時,使用的復合選擇器;------->$("input[id][name$='man']"),即查詢所有包含id屬性,且name屬性是以man結尾的元素;

32.匹配其父元素下的第n個子或奇偶元素;----->nth-child是1開始的,而eq(index)是從0開始的;

可以使用:

nth-child(even) nth-child(odd) nth-child(3n) nth-child(2) nth-child(3n+1) nth-child(3n+2)

如:$("ul li:nth-child(even)"),即查詢所有ul中li的偶數行;

33.匹配其父下的第乙個元素;------>$("ul li:first-child"),即查詢所有ul下的第乙個li元素;

34.匹配其父下的最後乙個元素;------>$("ul li:last-child"),即查詢所有ul下的最後乙個li元素;

35.如果某個元素是其父元素下的唯一子元素;------>$("ul li:only-child"),即查詢所有ul下的只有乙個li標籤的元素;

36.匹配表單的不同type型別;----->$(":表單型別");如:text,password,radio,checkbox,submit,reset,image,button,file,hidden,input.

37.匹配表單物件屬性;------>$(":對應屬性");如:enabled,disabled,checked,selected.

38.取得匹配元素的某一屬性值;------>$("img").attr("src");即查詢影象的src屬性值;

39.設定匹配元素的某些屬性值;------>$("img").attr();

40.為匹配的元素設定乙個屬性值;------>$("img").attr("屬性名",值);

41.為所有匹配的元素設定乙個計算的屬性值;------>$("img").attr("title",function());

42.為每乙個匹配的元素刪除乙個屬性;------->$("img").removeattr("src");

43.為匹配的元素新增乙個指定的類; ------->$("p").addclass("類名");

44.為匹配的元素刪除乙個指定的類;------->$("p").removeclass("類名");

45.匹配元素,如果存在(不存在),刪除(新增)乙個類;------->$("p").toggleclass("類名");

46.設定每乙個匹配元素的html內容;------->$("div").html("hello again

");47.取得第乙個匹配元素的內容;------>$("div p").html();

48.取得所有匹配元素的內容;------>$("p").text();

jquery 其他api操作

筆記整理,供以後參閱 aaaa bbbb cccc 刪除 size x large color darkred 2.樣式css和屬性attr color size jquery hellojquery hellojquery abcd size x large color darkred 3.htm...

jQuery中的CSS操作

jquery中css的操作 jqury中操作css有直接與間接兩種 直接的又有2種 鍵值對的方式 css property value 鍵值對對映的方式 css 這兩種直接在js中寫css屬性值 間接的有 在css檔案中先定義好要新增或移除的類,然後用.addclass 類名 為物件新增該css類,...

jQuery中的DOM操作

三 jquery中的dom操作 3.2.1 查詢節點 1.查詢元素節點 var li ul li eq 1 獲取裡第2個節點 var li text li.text 獲取第二個元素節點的文字內容 2.查詢屬性節點 var para p 獲取節點 var p text para.attr title ...