jquery是一種js物件。裡面封裝了一些方法,但是jquery物件不能直接使用js方法,js物件不能直接使用jquery方法。
jquery物件類似於js物件的集合,就是存在形式是以特殊陣列的形式:
$("#hk")[0]
$("#hk").get(0)
兩種方式可以將jquery物件轉換成為dom物件
$(document.getElementById("hk"))
通過使用$()包含dom物件的方式可以將dom物件轉化為jquery物件
jquery物件的優勢是:乾的少做的多,在操作dom上面很強大
但是單純使用jquery往往難以達到我們的效果,我們應該學會jquery與js配合使用。
獲取節點:選擇器:
基本選擇器:
id選擇器:#id 例子:$("#fom1")
標籤選擇器:element 例子:$("p")
類選擇器: .class 例子:$(".div1")
全域性選擇器:* 匹配body範圍內的所有元素 例子:$("*")
選擇器的交集和並集:
交集:直接緊靠在一起 例如:$(".in1[name='username']")
並集:使用逗號隔開 例如:$("#form1","span")
層級選擇器:
後代(就是該元素下的元素,不一定是子級也可能是孫子級): 結構(選擇器1 選擇器2):找出選擇器1範圍內的符合選擇器2元素的集合 例如:$("#form1 [name='username']")
parent > child 在給定父元素的情況下返回所有匹配的子元素 例如:$("#form input")
prev+next 返回prev選擇器後面的(緊挨著下一個)複合next選擇器的集合 $("label + input")
prev~Siblings 返回prev選擇器後面的所有複合選擇器Siblings的兄弟元素 $("form ~ input")
基礎選擇器(和其他選擇器一起使用,基於其他選擇器的):
:first 選定的第一個元素 $("input:first")
:last 選定的最後一個元素 $("input:last")
:not(selector) 不被後面選擇器選中的值
:even 偶數下標
:odd 奇數下標
:eq(n) 指定下標n
:gt(n) 大於n下標
:lt(n) 小於n下標
:header 匹配標題元素(例如h1,h2,h3...)
:animated 匹配正在執行動畫的元素
內容選擇器:
:contains(text) 匹配包含給定文字的元素
:empty 匹配不包含子元素的元素(文字元素也是子元素)
:has(selector) 匹配含有匹配器匹配元素的元素
:parent 匹配含有子元素或者文字元素的元素
可見性:
:hidden 匹配所有不可見的元素
:visible 匹配所有可見的元素
子元素:
:nth-child(n) 匹配父元素下第n個子元素,與:eq(n)的區別是它的n是從1開始的
:first-child
:last-child
:only-child 如果該元素是父元素下唯一的一個子元素,將會被匹配,指的是唯一的一個元素節點
屬性選擇器:
[attribute=value]
[attribute!=value]
[attribute^=value] ^是開始的意思,表示屬性值是value開始的
[attribute$=value] $是結尾的意思
[attribute*=value] *表示屬性值能夠匹配value的元素
表單選擇器:
:password 匹配所有密碼框
:radio 匹配所有單選按鈕
:checkbox 匹配所有複選框
:submit 匹配所有提交按鈕
:image 匹配所有影象域
:reset 匹配所有重置按鈕
:button 匹配所有按鈕
:file 檔案域
:hidden 不可見元素
:text 所有的單行文字框
:input 匹配所有 input, textarea, select 和 button 元素
表單物件屬性:
:enable
:disable
:checked
:selected