jQuery - Selector選擇器

發表於 | 更新於 | 分類於

jQuery提供簡潔的Select方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
// All Select - 取得所有Element
var allElement = $('*');
// ID Select - 取得符合id='MyId'的Element
var idElement = $('#MyId');
// Class Select - 取得符合class='MyClass'的Elmeent
var classElement = $('.MyClass');
// TagName Select - 取得TagName為table的Element
var tagElement = $('table');
// Children Select - 取得class='UlClass'之下,所有TagName為li的Child Elmeent.
var ulLiElements = $('.UlClass > li');
// Button Select - 取得tagName為button以及type='button'的所有Element
var buttonElements = $(':button');
// Image Select - 取得所有圖片Element
var imageElements = $(':image');
// File Select - 取得所有Input[Type=File] Element
var fileElements = $(':file');
// Password Select - 所有Input[Type=Password] Element
var passwordElements = $(':password');
// Input Select - 所有Input Element
var inputElements = $(':input');
// Radio Select - 所有Radio Element
var radioElements = $(':radio');
// Reset Select - 所有Input[Type=Rest] Element
var resetElements = $(':reset');
// Selected Select - 所有有Selected屬性之 Element
var selectedElements = $(':selected');
// Submit Select - 所有Input[Type=Submit] Element
var submitElements = $(':submit');
// Text Select - 所有Input[Type=Text] Element
var textElements = $(':text');
// Visible Select - 所有Visible Element
var visibleElements = $(':visible');
// Header Select - 所有(H1/H2/H3...) Element
var headerElements = $(':header');
// Hidden Select - 所有隱藏Element
var hiddenElements = $(':hidden');
// 複合條件: Class&Attribute Select - 取得class='MyClass'
// ,且name為'MyName'的所有Element
var myNames = $('.MyClass[name="MyName"]');
// 模糊比對: Class&Attribute Select - 取得class='MyClass',
// 且color包含'red'文字的Element
var myNames = $('.MyClass[color*="red"]');
// 模糊比對2: Class&Attribute Select - 取得class='MyClass'
// ,且lang開頭字串(完整單字)為'en'文字的Element.
// lang='en'(符合),lang='en-UK'(符合),lang='english'(不符合)
var myNames = $('.MyClass[lang|="en"]');
// No Children Select - 取得所有沒有Children的Element
var noChildreList = $(':empty');
// Enabled Element Select - 取得所有Enabled Element/Enabled的Input Element.
var allEnabledElement = $(':enabled');
var inputEnabledElement = $('#id > input:enabled');
// nTh Element Select - 取得第n筆資料的Element.
// 第一筆資料
var firstElement = $('div:first');
// 第3筆資料
var the2Element = $('div:eq(2)');
// 第4筆以後的資料
var gtElement = $('div:gt(3)');
// 第5筆以前的資料
var gtElement = $('div:gt(4)');
// 最後一筆資料
var lastElement = $('div:last');
// 偶數筆資料
var evenElement = $('div:even');
// 奇數筆資料
var evenElement = $('div:odd');
// 第一筆children資料
var lastChildElement = $('div:first-child');
// 最後一筆children資料
var lastChildElement = $('div:last-child');
// parent Select - 取得Parent Element資料
var parentElement = $('div:parent');
// 多屬性Select - 取得title有包含t字眼並且class=MyChildren的Element
var multiAttrElement = $('div[title*=t][class=MyChildren]');
// Multi Selector - 多個Selector一起Select,取得span/div所有element.
var multiSelectorElement = $('div[class=MyChildren],spn[class=MyChildren]');
// 順序性只取頭Select - 取得div class=MyChildren
//  ,並且該Element下一個Element為span且class=MyChildren的Element
var seqSelectElement = $('div[class=MyChildren] + span[class=MyChildren]');
// 順序性之取後續資料 Select - div class='Root'之後
//  ,所有div class='MyChildren'並且與Root同Parent Element皆取出.
var seqSameParentElement = $('div[class=Root] ~ span[class=MyChildren]');
// not() select - 取得class=MyChildren的Element並剃除tagName為span的Element.
var notElement = $('.MyChildren:not(span)');
// only-child select - 取得MyChildren Class為該Parent唯一Children之Element.
var onlyChildrenElement = $('.MyChildren:only-child');
// has select - 取得element內必須child有符合has內的Select條件.
var hasElement = $('.onlyOnChildren:has(.MyChildren)');
0%