[JQuery] 選擇器(Selector)

• 核心(Core)


• 選擇器(Selector)


• 屬性(Attribute)


• 尋訪(Traversing)


• 操作(Manipulation)


• CSS


• 事件(Event)

Δ 回到最上方

Δ 回到最上方

Δ 回到最上方

Δ 回到最上方

1 樓住戶：jack 發表時間：2012-01-11	[檢舉]

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

2 樓住戶：小啪 發表時間：2012-01-11	[檢舉]

@addClass( class ) // 在節點裡加入class = "selected" // 移除 : removeClass( class ). $("p").addClass("selected") @attr( name ) // 取得 裡的src值 // before : // Result : test.jpg $("img").attr("src"); @attr( properties ) // 將 加入 src="test.jpg" alt="Test Image" // before : // Result : $("img").attr({ src: "test.jpg", alt: "Test Image" }); @attr( key, value ) // 指定物件 的 key 並 設定 value // 將 加入 src = "test.jpg" // before : // Result : $("img").attr("src","test.jpg"); // 將 加入 value = "test.jpg" // before : // Result : $("input").attr("value","test.jpg"); @attr( key, fn ) // 在裡加入 title //title 值 則是用function 回傳 //Before: //Result: $("img").attr("title", function() { return this.src }); //Before : //Result: $("img").attr("title", function(index) { return this.title + (++index); }); @html() // 取得 xxx xxx <= 取得的東西 // Before : xxx // Result : xxx $("div").html() @html( val ) // 改變 xxx 為 new stuff // Before : xxx // Result : new stuff $("div").html("new stuff"); @removeAttr( name ) //移除 // Before : // Result : $("input").removeAttr("disabled") @removeClass( class ) //移除裡的 class // Before : Hello // Result : Hello $("p").removeClass() // Before : Hello // Result : Hello $("p").removeClass("selected") // Before : Hello // Result : Hello $("p").removeClass("selected highlight") @text() //取得裡的字串 // Before : Test Paragraph. Paraparagraph // Result : Test Paragraph.Paraparagraph $("p").text(); @text( val ) //取代內的字串 // Before :Test Paragraph. // Result : Some new text. $("p").text("Some new text."); // Before : Test Paragraph. // Result : Some new text. $("p").text("Some new text.", true); @toggleClass( class ) // 將有 class="selected" 移除 , 如果沒有 class="selected" 則加入 // Before : Hello Hello Again // Result : Hello,Hello Again $("p").toggleClass("selected") @val() // 抓取 INPUT 的 VALUE值 // Before : // Result : "some text" $("input").val(); @val( val ) // 將INPUT 的 VALUE 值 改變為指定 // Before : // Result : $("input").val("test");