| 大小搬家，細心運送大小家具，以客為尊 一通電話，迅速幫你服務，高品質服務您 |  | 專業廣告招牌設計製作，免費廣告諮詢服務 讓公司門面更加亮眼，歡迎來電洽詢 |
| 大小搬家，細心運送大小家具，以客為尊 一通電話，迅速幫你服務，高品質服務您 | | 專業廣告招牌設計製作，免費廣告諮詢服務 讓公司門面更加亮眼，歡迎來電洽詢 |
[問題]jquery |
| 房東：董哥  發表時間：2015-01-07 | [檢舉] |
|
02.選擇器(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)\'); |
租屋網 提供租屋資訊、租屋廣告刊登、房屋託租、房客尋屋、租屋配對、電子地圖、房屋資料上傳 搬家公司 本公司為政府立案專業搬家公司，我們秉持客戶至上，正派經營理念，在大台北縣市一直有口碑 明日黃金屋 買屋、賣屋、租屋、出租、房東租屋刊登、並提供租屋、最專業的服務、最安全親切的交易。 |
| 1 樓住戶：reee 發表時間：2015-01-07 | [檢舉] | |
|
http://blog.kkbruce.net/2012/03/jquery-selectors-1-basics.html#.VK1U2NKUcVc |