選擇器(Selector)

傳統JavaScript找出指定的Html Element困難

javascript coding過程中,首要取得指定的Html Element,以利後續的取值、控制、加工等等動作. 但傳統Element取得方式上, 只有getElementsByTagName/getElementById/getElementsByName三個function. 在只能依賴Tag Name/ Id/ Name三個因素去找出元件的情況下,或者取出所有Element後一一找出目標Element.

jQuery提供簡潔的Select方法.

jQuery在這找到指定的Html Element方式,提供非常豐富的選擇方式,可以在簡潔的語法上快速找到所需Element.不只加速javascript開發速度,而且也增加了code的可讀性.

// 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)');