關於jquery中的選擇器的概念和各個選擇器的用法及功能

關於jquery中的選擇器的概念和各個選擇器的用法及功能

 

概念:選擇器允許您對元素組或單個元素進行操作,在 jQuery 中, 對事件處理, 遍歷 DOM 和 Ajax 操作都依賴於選擇器

 

選擇器的分類:基本、層次、簡單、內容、可見性、屬性、子元素、表單

表單對象屬性

 

一、基本選擇器(5種):

1、id選擇器:

用法:$("#id")

功能:用於搜索的,通過元素的 id 屬性中給定的值進行搜索

2、element

     用法:$("div");

功能:一個用於搜索的元素。指向 DOM 節點的標籤名。

3、.class

     用法:$(".myClass");

功能:一個用以搜索的類。一個元素可以有多個類,只要有一個符合就能被匹配到。

4、*

     用法:$("*")

     功能:匹配所有元素。多用於結合上下文來搜索。

 

5、selector1、selector2、selectorn

     用法:$("div,span,p.myClass")

功能:將每一個選擇器匹配到的元素合併後一起返回。你可以指定任意多個選擇器,並將匹配到的元素合併到一個結果內。

描述:selector1是一個有效的選擇器,selector2是另一個有效的選擇器,selectorn是任意多個有效的選擇器。

 

二、層級選擇器

1、ancestordescendant

    用法:$("form input")

功能:在給定的祖先元素下匹配所有的後代元素

2、parent> child

用法:$("form > input")
功能:在給定的父元素下匹配所有的子元素
  3、prev + next
用法:$("label + input")
功能:匹配所有緊接在 prev 元素後的 next 元素
  4、prev ~ siblings
用法:$("form ~ input")
功能:匹配 prev 元素之後的所有 siblings 元素
三、簡單選擇器
   1、:first
用法:$('li').first()
功能:獲取匹配的第一個元素
 
   2、:last
      用法:$('li').last()
功能:獲取匹配的最後一個元素
 
   3、:not
      用法:$("input:not(:checked)")
功能:去除所有與給定選擇器匹配的元素,用於篩選的選擇器
 
   4、:even
      用法:$("tr:even")
功能:匹配所有索引值爲偶數的元素,從 0 開始計數。即查找表格的1、3、5...行(即索引值0、2、4...)
   
5、:odd
      用法:$("tr:odd")
功能:匹配所有索引值爲奇數的元素,從 0 開始計數。即查找表格的2、4、6行(即索引值1、3、5...)
 
   6、:eq
      用法:$(“tr:eq(1)”)
功能:匹配一個給定索引值的元素(eq(1)是指查找第二行)
   
   7、:gt
      用法:$("tr:gt(0)")
      功能:匹配所有大於給定索引值的元素
 
   8、:lt
      用法:$("tr:lt(0)")
      功能:匹配所有小於給定索引值的元素
 
   9、:header
      用法:$(":header").css("background", "#EEE");
功能:匹配如 h1, h2, h3之類的標題元素
 
   10、::animated
      用法:$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
功能:匹配所有正在執行動畫效果的元素 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章