核 心 (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物件 |
Δ 回到最上方
Δ 回到最上方
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)');
|
@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");
|
共 2 人回應 選擇頁數 【第1 頁】
|