jquery學習 與DOM,選擇器

2021-06-19 19:51:38 字數 2277 閱讀 4036

dom與jquery

innerhtml--html()

document.getelementbyid("foo").innerhtml-------------$("#foo").html()

dom物件與jquery物件

var variable(dom物件)--------------var  $variable(jquery物件)  區別就是jquery需要在變數前加乙個「$」符號

dom物件轉換成jquery物件

方法:[index]          如:var   cr=$cr[0];---------$cr為jquery物件  

jquery物件轉換成dom物件

方法:$(dom)        如:var   $cr= $(cr);--------cr為dom物件

jquery的根基:選擇器

css選擇器

jquery選擇器函式$()

避免錯誤機制:當所選擇的物件元素不存在時,也不會報錯,傳統的會報錯(getelementbyid("#tt"))

不能用來判斷該元素是否存在

獲取元素的長度來判斷  if($("#tt").length>0)

轉換為dom物件來判斷 if($("#tt")[0])

基本選擇器

通過元素id、class和標籤名來查詢dom元素,如 $("#id"),$(".class"),$("p"),$("div ,span,p")

層次選擇器

通過dom元素之間的層次關係來獲取的有後代元素、子元素、相鄰元素、同輩元素

後代元素:$("ancestor descendant")    選取ancenster裡的所有descendant(後代)元素

子元素   :$("parent>children")             選取parent下的子元素children

相鄰元素:$(""prev+next"")                   選取緊接在pre元素之後的next元素

同輩元素:$("prev~siblings")                選取pre 元素之後的所有siblings元素

$("prev+next")-----------------next()

$("pre~siblings")-------------nextall()---------------siblings()

過濾選擇器

與css偽類選擇器類似,都是以:開頭

基本過濾選擇器:

:first:選取第乙個元素        

:last:選取最後乙個元素

:not(selector):去除所有與給定選擇器匹配的元素  ,如$("input:not(.myclass)")

:even:選取索引是偶數的所有元素,如$("input:even")

:odd:選取索引是奇數的所有元素,如$("input:odd")

:eq(index):選取索引等於index的元素

:gt(index):選取索引大於index的所有元素

:lt(index):選取索引小於index的所有元素

內容過濾選擇器

體現在所包含的子元素或文字內容上

:contains(text):選取含有文字內容為「text」的元素 ,如$("div:contains('我')")

:empty:選取不包含子元素或文字內容的空元素

:has(selector):選取含有選擇器匹配的元素的元素

:parent:選取含有子元素或者文字的元素

可見性過濾選擇器

:hidden:選取所有不可見的元素

:visible:選取所有可見的元素

屬性過濾選擇器

[attribute]:選取擁有此屬性的元素,如$(div[id])

[attribute=value]:選取屬性的值為value的元素,如$div(title=test)

子元素過濾選擇器

:nth-child[index/odd/even] :選取每個父元素下的第index個子元素或者奇偶元素(index從1開始)

:first-child:選取每個父元素下的第乙個子元素

:last-child:選取每個父元素下的最後乙個元素

表單物件屬性過濾選擇器

:enabled:選取所有可用元素

:disabled:選取所有不可用元素

:checked:選取所有被選中的元素,單選框,文字框,$(input:checked)

:selected:選取所有被選中的選項元素,如$("select option:selected")

表單選擇器

jQuery選擇器選擇dom元素

jquery選擇器其實是乙個有些地方比較費解的,如果沒有經過多次實驗的話,很難得出它的每個操作符到底是幹什麼的,很容易出錯,經過我的多次測試,終於對一些比較難理解或容易出錯的選擇操作進行總結,既方便自己將來查詢又方便初學者學習。如果 有不對的還望大家幫我指出來,這裡是乙個相互學習的地方。1.先說說通...

jQuery 選擇器,操作DOM

jquery是乙個輕量級的js庫 選擇器 新增乙個 按鈕,使段落的字型放大 function plus type button value onclick plus p1 利用jquery實現字型的放大 過濾選擇器 表單選擇器 操作dom 增刪節點 樣式操作 addclass 追加樣式 remove...

jquery選擇器和dom選擇器區別

1.jquery選擇器css file loading css visibility visible 2.dom選擇器stylrdocument.getelementbuyid file loading style.visibility visible 因為jquery沒有.css屬性 3.jque...