台灣最大裝潢接案平台
輕鬆接案網
清潔公司專精高難度抓漏工程,近30年經驗
快速找出問題所在,品質絕佳。

首頁  •  tw 論壇 • 新手討論     • 

[問題]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



     共 1 人回應  選擇頁數 【第1 頁】 

    姓名:
    佈告內容: