一.選擇器

1.id選擇器 $("#div1") 選中id為div1的元素

2.class 類選擇器 $(".hehe") 選中所有類為hehe的元素 可以是可以一次控制所有的類

3.element 元素選擇器 $("div") 選中所有div元素

4.所有選擇器 $("*") 選中所有元素

5.選擇器多選 $(".hehe,#div1") 選中類為hehe id為div1的元素 多選的都會被選中

6.後代選擇器 $("#div1.hehe1") 選中在id為div1中的後代類為hehe1的元素 注：這個選擇器會選擇後代的所有類為hehe1的元素

7.直系後代選擇器 $("#div1>.hehe1")選中在id為div1中的兒子類為hehe1的元素

8.兄弟選擇器 $(".hehe1+div ") 選中兄弟的下一個 div元素 注：兄弟的下一個元素必須是有效的不然不會有反應

9.弟弟選擇器 $("span~div") 選中span的所有弟弟（div）元素 注：哥哥不算

10.第一、最後選擇器$("div:first/last") 選中元素列表中的第一個/最後一個元素

11.偶數索引選擇器 $("div:even")

12.奇數索引選擇器 $("div:odd")

13.索引值選擇器 $("#div1div:eq(1)")

14.大於索引選擇器 $("#div1div:gt(1)") 也就是第二個之後的元素 不包含

15.小於索引選擇器 $("#div1div:lt(1)") 也就是第二個之前的所有元素 不包含

16.匹配當前獲取焦點的元素 $(':focus')

17. 選中含有所匹配元素的元素選擇器 $("div:has(p)") 選擇div中有p的元素

18.不可見元素選擇器 $("div:hidden") 查詢不可見的div元素

19.可見元素選擇器$("div:visible") 查詢可見的div元素

20.屬性選擇器$("div[index]") 選中所有有index屬性的div元素

21.屬性等於選擇器$("div[index=2]") 選中所有index為2的元素

22.屬性不是等於選擇器 $("div:not([index=2])") 選中所有非index為2的元素 沒有index也要選中

23.複合屬性選擇器$("div[index=2][index=3][index=4]") 只可意會不可言談

24.子元素選擇器 一律使用別的方式

二.屬性操作

1. attr 設定或者獲取元素屬性的值

$(".hehe3").attr("index") 返回元素的屬性 如果傳入一個引數 那麼就返回他的屬性值 如果傳入兩個引數 那麼就給這個屬性賦值 相對應的有賦值就有刪除 $("#div1#div1").removeAttr("index") 就是刪除index屬性 2. prop 設定或者獲取元素屬性的值 用法和attr一樣 不同的是 在使用複選框的時候用 prop 其他事件用attr 3. class 方法 設定元素的類 $("#div1#div1").addClass("divv") 新增divv的類 $("#div1#div1").removeClass("divv") 刪除名為divv的類 如果不傳入引數 就刪除整個 如果傳入引數就刪除相對應的 $("#div1#div1").toggleaClass("divvvv") 檢索類名 如果有就刪除 如果沒有就新增 4. html 獲取元素的html值 $("#div1#divv").html() 如果傳入引數就設定元素的html 如果沒有傳入引數就獲取元素的html 5. text 獲取p元素的文字 $("#div1#divv").text( ) 如果傳入引數就設定text文字 如果沒有傳入引數就獲取p元素的text文字 6. val 獲取文字框的值 $("#div1#divv").val( ) 如果傳入引數就設定文字框的值 如果沒有傳入引數就獲取文字框的值

三.css操作

1.獲取css

$("#divv").css("background-color") 2.設定css $("#divv").css("background-color","yellow") 設定css有很多種方式 傳入兩個引數 第一個引數是屬性 第二個引數為值 傳入一個列表 列表和css中書寫相似不過屬性要雙引號 3.offset 返回盒子相對於視口的相對偏移 返回的是一個物件{"top": 8,"left": 8} 可以通過 .top .left獲取返回的 數值沒有px 4.position 返回盒子相對於父級的相對偏移 返回的是一個物件{"top": 8,"left": 8} 可以通過 .top .left獲取返回的 數值沒有px 5.scrollTop scrollLeft 返回盒子相對於滾動條的相對偏移 返回的 數值沒有px 6.width height 獲取元素寬高 $("#divv").height()$("#divv").width() 返回值沒有px 7. innerWidth innerHeight 獲取元素寬高 包括height width padding 不包括 border margin $("#divv").innerHeight()$("#divv").innerWidth() 8.outerWidth outerHeight 獲取元素寬高 包括 height width padding border 如果傳入引數true 則包括margin 反之不包括

四.文件處理

1. append

$("#div1").appendTo($("#span")) 向div1 下面新增 id為span的元素 2.appendTo 一樣的 就是倒過來 3.prepend $("#div1").prepend($("#span")) 在div1下面的最前面新增 4.prependTo 一樣的 就是倒過來 5.after $("#div1").after($("#span")) 在div1後面新增 6.before $("#div1").before($("#span")) 在div1前面新增 7. insertAfter insertBefore 和 prependTo appendTo 換湯不換藥 8. wrap $(".hehe1").wrap($(".hehe3")) 用 hehe3把hehe1包裹起來 這種方法會每個都包裹一遍 9. unwrap $(".hehe1").unwrap() 移除父元素 10.wrapall $(".hehe1").wrapAll("<a></a>") 用a把所有的hehe1包裹起來 包裹在一起 看起來比較難處理 11. wrapInner $(".hehe1").wrapInner("<a></a>") 用a把hehe1的內容包裹起來 12.replaceWith $(".hehe1").replaceWith("<a></a>") 把hehe1替換成a 13. empty 刪除子節點 所有包括文字節點 相當於 innerHtml = "" 14. remove 刪除匹配到的元素 相當於 outerHtml = "" 15.detach 刪除匹配到的元素 但是事件會被保留下來 點選事件還在 16.clone 複製元素 賦值給其他元素 var xxx = xxx.clone() 如果傳入true 就不僅複製物件而且複製事件 如果傳入false 就僅複製物件 如果複製了兩個節點元素 就返回一個表格 可以通過[0] [1] 取得