加入客源網
每天多接2個客戶,做生意就是這麼簡單
搬家公司居家清潔請找
易祺清潔公司

首頁  •  j2h 論壇 • 程式設計討論     • 

[JQuery] 選擇器(Selector)

房東:傑仔
發表時間:2012-01-11
[檢舉]
































































































































































核  心 (Core)
類型 函式 說明 回傳值
jQuery()函式 jQuery( selector, [ context ] ) 藉由指定的選擇器字串(selector),找到相符的元素 jQuery物件
jQuery( element ) 將DOM物件封裝成jQuery物件 jQuery物件
jQuery( elementArray ) 將DOM物件陣列封裝成jQuery物件 jQuery物件
jQuery( jQuery object ) 複製jQuery物件 jQuery物件
jQuery( html, [ ownerDocument ] ) 藉由指定HTML字串動態產生DOM元素 jQuery物件
jQuery( html, props ) 藉由指定單一HTML元素的字串及屬性、事件、方法,動態產生DOM元素 jQuery物件
jQuery( callback ) 繫結一個函式,於DOM被載入完成時執行該函式 jQuery物件
jQuery物件存取器 jQuery.each( collection, callback(indexInArray, valueOfElement) ) 迭代(Iterator)函式,可以依序對匹配的物件或陣列進行處理,具有索引值(0 ~ length -1),可以用this來表示目前處理到的DOM物件 jQuery物件
.eq() 取得已匹配的集合中,指定位置的jQuery物件 jQuery物件
.get( [ index ] ) 取得已匹配的集合中,指定位置的DOM物件或陣列 DOM物件或陣列
.index() 取得已匹配的物件中的第一個物件在其同輩元素中的位置 Number
.index( selector ) 在已匹配的物件中的取得與指定jQuery物件相同物件的位置 Number
.index( element ) 在已匹配的物件中的取得與指定DOM物件相同物件的位置 Number
.length 取得匹配到的元素數量 Number
Data Cache .data( key, value ) 以key和value成對的資料與配對的元素關聯 jQuery物件
.data( obj ) 以物件型式記錄key和value,並與配對的元素關聯 jQuery物件
.data( key ) 回傳與配對元素相關聯,且Key值相符合的物件 Javascript物件
.data( ) 回傳與配對元素相關聯的物件,該物件包含全部Key和Value的資料 Javascript物件
jQuery.data( element, key, value ) 將以key和value成對的資料與指定的DOM元素關聯 jQuery物件
jQuery.data( element, key ) 回傳與指定元素相關聯,且Key值相符合的物件 Javascript物件
jQuery.data( element ) 回傳與配對元素相關聯的物件,該物件包含全部Key和Value的資料 Javascript物件
.removeData() 移除先前儲存在配對元素上的資料 jQuery物件
jQuery.removeData( element, [ name ] ) 移除先前儲存在指定DOM元素上的資料 jQuery物件
Pligins jQuery.extend( [ deep ], target, object1, [ objectN ] ) 將Ojbect1~ObjectN的內容擴充到target Javascript物件
jQuery.fn.extend( object ) 擴充jQuery的元素集合,以提供新的方法 jQuery物件
Interoperability jQuery.noConflict() 釋出jQuery對$變數的控制權 jQuery物件
jQuery.noConflict( removeAll ) 完整釋放jQuery對$變數的控制權 jQuery物件

Δ 回到最上方
































































































































































































































































































































選 擇 器 (Selector)
類型 函式 說明 回傳值
基礎選擇器 jQuery(\'*\') 批配所有的元素 Array<Element(s)>
jQuery(\'.class\') 批配所有具有與指定類別相同的類別的元素 Array<Element(s)>
jQuery(\'element\') 批配所有與指定標籤(Tag)相同的元素 Array<Element(s)>
.hide() 隱藏批配的元素,如果批配的元素已隱藏,則不做任何動作 jQuery物件
.hide( duration, [ callback ] ) 隱藏批配的元素,元素的高、寬、透明度會依指定的速度變化 jQuery物件
jQuery(\'#id\') 批配與指定id具相同的id的元素,只會批配單一元素 jQuery物件
jQuery(\'selector1, selector2, selectorN\') 同時批配多個條件,只要符合其中之一,即算批配 Array<Element(s)>
.show() 顯示批配的元素 jQuery物件
.show( duration, [ callback ] ) 顯示批配的元素,元素的高、寬、透明度會依指定的速度變化 jQuery物件
.toggle( handler(eventObject), handler(eventObject), [ handler(eventObject) ] ) 對批配的元素繫結2個或多個事件處理函式(Handler),在每次點擊時依序執行 jQuery物件
.toggle( duration, [ callback ] ) 批配元素狀態為顯示時,則切換成隱藏,隱藏時切換成顯示 jQuery物件
.toggle( showOrHide ) 依據參數決定顯示或隱藏元素 jQuery物件
階層選擇器 jQuery(\'parent > child\') 批配指定父元素的全部子元素 Array<Element(s)>
jQuery(\'ancestor descendant\') 批配指定元素的全部子孫元素 Array<Element(s)>
jQuery(\'prev + next\') 批配符合選擇器next的元素且該元素前方需緊接符合選擇器prev的元素 Array<Element(s)>
jQuery(\'prev ~ siblings\') 批配符合選擇器prev的兄弟元素,且該元素必需位於prev元素之後,且符合選擇器siblings的元素 Array<Element(s)>
基本過濾器 jQuery(\':animated\') 選取批配元素中選擇器執行時正在執行動畫的元素 Array<Element(s)>
jQuery(\':eq(index)\') 選取批配元素中第index個元素,若無指定是什麼元素,則批配整個HTML Array<Element(s)>
jQuery(\':even\') 選取批配元素中全部奇數元素,若無指定批配條件,則批配整個HTML Array<Element(s)>
jQuery(\':first\') 選取批配元素中第一個元素 Array<Element(s)>
jQuery(\':gt(index)\') 選取批配元素中索引值大於index的元素(不含索引值等於index的元素),索引值由0開始計數,無視階層關係 Array<Element(s)>
jQuery(\':header\') 選取批配元素中全部header元素(Ex: h1, h2, h3,...) Array<Element(s)>
jQuery(\':last\') 選取批配元素中的最後一個元素 Array<Element(s)>
jQuery(\':lt(index)\') 選取批配元素中索引值小於index的元素(不含索引值等於index的元素),索引值由0開始計數,無視階層關係 Array<Element(s)>
jQuery(\':not(selector)\') 選取批配元素中不符合selector的元素 Array<Element(s)>
jQuery(\':odd\') 選取批配元素中全部偶數元素,若無指定批配條件,則批配整個HTML Array<Element(s)>
內容過濾器 jQuery(\':contains(text)\') 選取批配元素中包含指定字串的元素 Array<Element(s)>
jQuery(\':empty\') 選取批配元素中沒有子元素的元素 Array<Element(s)>
jQuery(\':has(selector)\') 選取批配元素中符合selector的元素 Array<Element(s)>
jQuery(\':parent\') 選取批配元素中含有子元素或文字節點的元素 Array<Element(s)>
可見性過濾器 jQuery(\':hidden\') 選取批配元素中目前正隱藏的元素 Array<Element(s)>
jQuery(\':visible\') 選取批配元素中目前沒有隱藏的元素 Array<Element(s)>
屬性過濾器 jQuery(\'[attribute|=value]\') 選取批配元素的指定屬性,其值和value相等,或是其值以value開頭且緊接連字符號(-) Array<Element(s)>
jQuery(\'[attribute*=value]\') 選取批配元素的指定屬性,其值包含子字串value Array<Element(s)>
jQuery(\'[attribute~=value]\') 選取批配元素的指定屬性,其值為value,或以空白字元分隔的值其中之一與value相等 Array<Element(s)>
jQuery(\'[attribute$=value]\') 選取批配元素的指定屬性,其值以value為字尾 Array<Element(s)>
jQuery(\'[attribute=value]\') 選取批配元素的指定屬性,其值與value相等 Array<Element(s)>
jQuery(\'[attribute!=value]\') 選取批配元素的指定屬性,其值與value不相等 Array<Element(s)>
jQuery(\'[attribute^=value]\') 選取批配元素的指定屬性,其值以value開頭 Array<Element(s)>
jQuery(\'[attribute]\') 選取批配元素中含有指定屬性的元素(不管其值為何) Array<Element(s)>
jQuery(\'[attributeFilter1][attributeFilter2] [attributeFilterN]\') 選取批配元素中同時批配多個屬性選擇器的元素 Array<Element(s)>
子元素過濾器 jQuery(\':first-child\') 選取批配元素中為其父元素第一個子元素的元素 Array<Element(s)>
jQuery(\':last-child\') 選取批配元素中為其父元素最後一個子元素的元素 Array<Element(s)>
jQuery(\':nth-child(index/even/odd/equation)\') 選取批配元素中為其父元素第index個子元素的元素 Array<Element(s)>
jQuery(\':only-child\') 選取批配元素中為其父元素唯一子元素的元素 Array<Element(s)>
表單元素過濾器 jQuery(\':button\') 選取批配元素中所有button元素或type值為button的元素 Array<Element(s)>
jQuery(\':checkbox\') 選取批配元素中所有type值為checkbox的元素 Array<Element(s)>
jQuery(\':checked\') 選取批配的checkbox及radio button元素中所有checked的元素 Array<Element(s)>
jQuery(\':disabled\') 選取批配的元素中所有disabled的元素 Array<Element(s)>
jQuery(\':enabled\') 選取批配的元素中所有enabled的元素 Array<Element(s)>
jQuery(\':image\') 選取批配的input元素中所有type值為image的元素 Array<Element(s)>
jQuery(\':password\') 選取批配的input元素中所有type值為password的元素 Array<Element(s)>
jQuery(\':radio\') 選取批配的元素中所有type值為radio的元素 Array<Element(s)>
jQuery(\':reset\') 選取批配的元素中所有type值為reset的元素 Array<Element(s)>
jQuery(\':reset\') 選取批配的元素中所有type值為reset的元素 Array<Element(s)>
jQuery(\':selected\') 選取批配的元素中被選取的元素 Array<Element(s)>
jQuery(\':submit \') 選取批配的input或button元素中所有type值為submit的元素 Array<Element(s)>
jQuery(\':text\') 選取批配的input元素中所有type值為text的元素 Array<Element(s)>

Δ 回到最上方



















































































































屬 性 (Attribute)
類型 函式 說明 回傳值
一般屬性 .attr( attributeName ) 取得批配的第一個元素中指定屬性的值 String
.attr( attributeName, value ) 對所有批配的元素,使用指定的value設定指定屬性attributeName之值 jQuery物件
.attr( map ) 對所有批配的元素,使用Map指定屬性和值,可以一次指定多個屬性 jQuery物件
.attr( attributeName, function(index, attr) ) 對所有批配的元素,使用函式的回傳值設定指定屬性attributeName之值 jQuery物件
.removeAttr() 對全部批配的元素移除指定的屬性 jQuery物件
.val() 取得批配的第一個元素中value屬性的值 jQuery物件
.val( value ) 對所有批配的元素,使用指定的value設定其value屬性之值 jQuery物件
.val( function(index, value) ) 對所有批配的元素,使用函式的回傳值設定value屬性之值 jQuery物件
HTML .html( ) 在匹配的元素中,取得第一個元素的HTML並回傳 String
.html( htmlString ) 用htmlString設定每個匹配元素之HTML jQuery物件
.html( function(index, oldhtml) ) 對所有批配的元素,使用函式的回傳值設定其HTML jQuery物件
類別屬性 .addClass( className ) 將指定class新增給批配的各個元素 jQuery物件
.addClass( function(index, class) ) 將指定函式的回傳值新增給批配的各個元素的class屬性 jQuery物件
.hasClass( className ) 判斷批配的元素中是否含有指定的類別 Boolean
.removeClass( [ className ] ) 若批配的元素中含有指定類別,則將之移除。可一次移除單一類別、多個類別或全部類別。 jQuery物件
.removeClass( function(index, class) ) 將指定函式的回傳值由批配的各個元素的class屬性中移除 jQuery物件
.toggleClass( className ) 如果批配的元素的class屬性中已設定className,則將之移除;尚未設定className則設定之 jQuery物件
.toggleClass( className, switch ) 如果switch值為true且批配的元素中的class屬性尚未設定className則設定之;如果switch值為false且批配的元素中的class屬性已設定className則移除之 jQuery物件
.toggleClass( function(index, class), [ switch ] ) 如果switch值為true且批配的元素中的class屬性尚未設定函式回傳之className則設定之;如果switch值為false且批配的元素中的class屬性已設定函式回傳之className則移除之 jQuery物件

Δ 回到最上方



































































































































































































尋 訪 (Traversing)
類型 函式 說明 回傳值
過濾器 .eq( index ) 取得已匹配的集合中,指定位置的jQuery物件 jQuery物件
.filter( selector ) 在已批配的元素中,選取符合selector過濾器的元素 jQuery物件
.filter( function(index) ) 對已批配的元素,依照函式所回傳的boolean值決定是否選取 jQuery物件
.first() 選取批配元素中第一個元素 jQuery物件
.has( selector ) 選取批配元素中有子孫元素符合selector的元素 jQuery物件
.has( contained ) 選取批配元素中有子孫元素符合DOM元素contained的元素 jQuery物件
.is( selector ) 判斷已批配的元素中是否存在符合selector的元素 jQuery物件
.last() 選取批配元素中最後一個元素 jQuery物件
.map( callback(index, domElement) ) 依據批配的元素合併成一個jQuery物件 jQuery物件
.not( selector ) 在已批配的元素中,移除符合選擇器的元素 jQuery物件
.not( elements ) 在已批配的元素中,移除指定的DOM元素 jQuery物件
.not( function(index) ) 將符合selector選擇器的元素新增到已批配的集合 jQuery物件
.slice( start, [ end ] ) 在已批配的元素集合中,依指定的位置批配成子集合 jQuery物件
串接 .add( selector ) 取得已匹配的集合中,指定位置的jQuery物件 jQuery物件
.add( elements ) 將指定的DOM元素新增到已批配的集合 jQuery物件
.add( html ) 將指定的HTML元素新增到已批配的集合 jQuery物件
.add( selector, context ) 將指定範圍內符合selector選擇器的元素新增到已批配的集合 jQuery物件
.andSelf() 將目前批配的結果與上次批配的結果合成一個集合 jQuery物件
.contents() 取得已批配元素的子元素及其文字節點 jQuery物件
.end() 結束最近一次的過濾操作,並回傳上一次批配的元素 jQuery物件
樹的追蹤 .children( [ selector ] ) 取得各個已批配元素的子元素,可以配合選擇器篩選 jQuery物件
.closest( selector, [ context ] ) 取得目前元素的祖先元素且第一個符合Selector的元素 jQuery物件
.closest( selectors, [ context ] ) 取得目前元素的祖先元素且第一個符合選擇器陣列中各Selector的元素 jQuery物件
.find( selector ) 對已批配集合的子孫元素進行篩選 jQuery物件
.next( [ selector ] ) 對已批配元素的下一個兄弟元素進行篩選,若符合則回傳該兄弟元素 jQuery物件
.nextAll( [ selector ] ) 對位於已批配元素之後的兄弟元素進行篩選 jQuery物件
.nextUntil( [ selector ] ) 對位於已批配元素之後的兄弟元素進行篩選,直到遇到第一個符合selector的元素 jQuery物件
.offsetParent() 在已批配的元素中,找尋其最近一個有設定position屬性的祖先元素 jQuery物件
.parent( [ selector ] ) 取得已批配元素的父元素,該父元素需符合selector jQuery物件
.parents( [ selector ] ) 取得已批配元素的祖先元素,該祖先元素需符合selector jQuery物件
.parentsUntil( [ selector ] ) 延著DOM Tree取得已批配元素的祖先元素,直到遇到第一個符合selector的祖先 jQuery物件
.prev( [ selector ] ) 已批配元素的上一個兄弟元素進行篩選,若符合則回傳該兄弟元素 jQuery物件
.prevAll( [ selector ] ) 對位於已批配元素之前的兄弟元素進行篩選 jQuery物件
.prevUntil( [ selector ] ) 對位於已批配元素之前的兄弟元素進行篩選,直到遇到第一個符合selector的元素 jQuery物件
.siblings( [ selector ] ) 對已批配元素的兄弟元素進行篩選 jQuery物件

Δ 回到最上方






















操 作 (Manipulation)
類型 函式 說明 回傳值
類別屬性 .addClass( className ) 將指定class新增給批配的各個元素 jQuery物件
.addClass( function(index, class) ) 將指定函式的回傳值新增給批配的各個元素的class



  • 贊助網站       

    廣利不動產-新板特區指名度最高、值得您信賴的好房仲
    您的托付,廣利用心為您服務
    廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
    完整房訊,房屋、店面熱門精選物件,廣利不動產 優質仲介,房屋租賃、買賣資訊透明,交易真安心!

  • 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 : Test Image
    $("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");




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

    姓名:
    佈告內容: