1. 程式人生 > >JQuery 學習筆記--01

JQuery 學習筆記--01

隱藏 mat 不包含 rst 基本選擇器 多重 title back first

1. JQuery 基本選擇器

express description remarks
$("#idName") id選擇器
$(".className") 類選擇器
$("tagName") 標簽選擇器
$("*") 通配符選擇器
$("tagName,.className,#idName,...") 群組選擇器

2. 層次選擇器

從父子關系和兄弟關系進行節點的選擇 .

express description remarks
$("a b") 選擇a節點所有的後代節點b
( 包括子節點和孫節點 )
$("a>b") 選擇a節點的所有子節點b
( 只包含子節點, 不包含孫節點 )
$("a+b") 選擇a節點之後的第一個兄弟節點b
$("a~b") 選擇a節點之後的所有兄弟節點b 註意是a節點之後的兄弟節點,
而不是所有的兄弟節點

3. 基本過濾選擇器

從位置的角度來對標簽進行過濾 .

express description remarks
$("tagName:first") 選取tagName元素集合中的第一個元素
$("tagName:last") 選擇tagName元素集合中的最後一個元素
$("tagName:odd") 選擇tagName元素集合中奇數位置的元素
$("tagName:even") 選擇tagName元素集合中偶數位置的元素
$("tagName:eq(1)") 選擇tagName元素集合中第二個元素
( 索引和數組一樣, 從零開始 )
$("tagName:gt(2)") 選擇tagName元素集合中第三個元素往後的元素
( 即tagName下, 位置大於3的元素 )
$("tagName:lt(2)") 選擇tagName元素集合中第三個元素往前的元素
( 即tagName下, 位置小於3的元素 )
$(":header") 選中所有的標題元素
( h1 到 h6 )
$(":animated") 選擇有動畫的元素
$("tagName:not(.one)") 選擇tagName元素集合中class值不是one的元素

4. 內容過濾選擇器

節點值是否為空, 節點上的文本中是否包含指定的字符串, 子元素中的class值是否為指定的值 .

express description remarks
$("tagName:empty") 選擇tagName元素集合中內容為空的元素
( 不是子元素 )
$("tagName:parent") 選擇tagName元素集合中包含子元素的元素
$("tagName:contents(‘abc‘)") 選擇tagName元素集合中內容包含"abc"的元素
( 不是子元素 )
$("tagName:has(.one)") 選擇tagNmae元素集合中class值為one的元素
( 不是子元素, 是tagName元素 )

5. 屬性過濾器 ( 選擇包含指定屬性的元素 )

從節點的屬性來過濾篩選節點:有無屬性,屬性值等於,不等於,包含,是**開頭,是**結尾,多重過濾 .

express description remarks
$("div[id]") 被選中的元素包含id屬性
$("div[id=‘test‘]") 被選中的元素包含id="test"
$("div[title!=‘test‘]") 被選中的元素的title屬性不是"test"
$("div[title^=‘te‘]") 被選中的元素的title屬性值是由"test開始的"
$("div[title$=‘st‘]") 被選中的元素的title屬性是以"test"結尾的
$("div[title*=‘est‘]") 被選中的元素的title屬性值包含"est"
$("div[title*=‘est‘][id]") 被選中的元素的title屬性值包含"est",
且有id屬性

6. 可見性過濾選擇器

根據頁面上的元素是否顯示來選擇節點

express description remarks
$("div:hidden") 選中隱藏的div元素
$("div :hidden") 選中div元素中所有隱藏的元素
( 包括子元素和孫元素 )
$("div:visiable") 選中可見的div元素
$("div :visiable") 選中div中可見的元素
( 包擴子元素和孫子元素 )

JQuery 學習筆記--01