jQuery教學 - 常用函式

文章已搬家，請點擊前往👈

REDIRECT_MODE = 1;

1. 核心(Core)

1.1 $(something)

依據參數產生或取得jQuery物件

$(selector) 依據selector規則取得Elements，例如

$('#my-element') $(element) 將原生的DOM物件轉為jQuery物件，例如

var element = document.getElementById('my-element'); element = $(element); $(html) 建立Element，例如

$(' Test ');

1.2 選擇器(Selectors)

jQuery除了可以利用CSS選擇器的規則找到網頁元素，還可以用其他特別的規則選取，這邊只介紹最常用的標準CSS選擇器規則。

1.2-1 ID選擇器(ID Selector)

使用井號(#)開頭。

$('#my-id')

對應到HTML

This is id selector.

1.2-2 類別選擇器(Class Selector)

使用點(.)開頭。

$('.my-class')

對應到HTML

This is class selector.

1.2-3 型態選擇器(Type Selector)

使用HTML的標籤

$('div')

對應到HTML

This is type selector.

1.2-4 後代選擇器(Descendant selectors)

使用空白表示階層關係

$('.my-class div')

對應到HTML

This is descendant selector.

將取得內部的DIV元素

1.2-5 屬性選擇器(Attribute Selector)

使用中括號包夾

$('[type=text]')

對應到HTML

1.2-6 OR

使用逗號(,)隔開

$('#my-id, .my-class')

對應到HTML

This is id selector. This is class selector.

1.2-7 AND

接多個選擇器連接在一起即表示要網頁元素須同時滿足所有規格

$('.my-class.my-class2')

對應到HTML

This is class selector.

型態應該寫在最前面

$('div.my-class.my-class2')

2. 歷遍(Traversal)

.find(selector)

尋找Elements下的Elements，以下範例使用此HTML，紅色框線為選取的結果：

$('#body').find('h1.red');

.filter(selector)

從目前的結果過濾Elements

$('#body h1');

$('#body h1').filter('.red');

.children([selector])

取得Element下的子Elements

$('#body').children();

$('#body').children('.red');

.first()

取得目前結果的第一個Element

$('#body').children().first();

.last()

取得目前結果的最後一個Element

$('#body').children().last();

.eq(index)

從目前結果取得指定位置的元素

$('#body').children().eq(1);

.parent([selector])

取得父Element

$('#body div h1').parent();

$('#body div h1').parent('#body');

.parents([selector])

取得所有祖先Elements

$('#body div h1').parents();

$('#body div h1').parents('#body');

.closet(selector)

取得包含自己與祖先Elements中，最先符合條件的Element

$('#body div h1').closet('div');

$('#body div h1').closet('h1');

.has(selector)

過濾出目前結果中，子Elements中有符合選擇器的項目

$('div').has('div');

.each(handler)

將目前結果逐一送至Handler函式執行處理

$('li').each(function(index, element) { // do something // $(this) is also element });

.map(handler)

將目前結果逐一送至Handler函式執行處理，並回傳陣列結果

var ids = $('li').map(function(index, element) { return $('li').attr('id'); });

3. CSS

.hasClass(className)

判斷是否有class

Item

element.hasClass('active'); // true

.addClass(className)

加入class

element.addClass('active');

Item => Item

.removeClass(className)

移除class

element.removeClass('active');

Item => Item

.toggleClass(className)

加入或移除class

element.toggleClass('active');

Item Item

.css(propertyName) .css(propertyName, value)

取得或設定css style

var color = element.css('color'); element.css('color', 'red');

Item => Item

也可以多筆設定

element.css({ 'color': 'red', 'background-color': 'green' });

Item => Item

.width() .width(value)

取得或設定寬度

var width = element.width(); element.width(100);

Item => Item

.height() .height(value)

取得或設定高度

var height = element.height(); element.height(100);

Item => Item

4. 效果(Effects)

.show() .hide()

顯示或隱藏Element

element.hide();

Item => Item

element.show();

Item => Item

.fadeIn([duration] [, complete]) .fadeOut([duration] [, complete])

淡入或淡出Element

element.fadeIn(1000); element.fadeOut(1000, function() { $(this).remove(); });

5. 屬性(Attributes)

.attr(attributeName) .attr(attributeName, value)

取得或設定屬性

var id = element.attr('id'); element.attr('id', 'myid');

Item => Item

.removeAttr(attributeName)

移除屬性

element.removeAttr('id');

Item => Item

6. 操作(Manipulation)

.text() .text(value)

取得或設定文字內容

var text = element.text(); element.text(' Html tag will not work. ');

Item => &lt;b&gt;Html tag will not work.&lt;/b&gt;

.html() .html(value)

取得或設定HTML內容

var html = element.html(); element.html(' Html tag will work. ');

Item => Html tag will work.

.val() .val(value)

取得或設定表單元件值

var val = element.val(); element.val('username');

=>

.append(element) .appendTo(parentElement)

加入Element在最後面，以下範例使用此HTML

A B

$('#wrapper').append(' C '); $(' C ').appendTo('#wrapper');

結果

A B C

prepend(element) .prependTo(parentElement)

加入Element在最前面

$('#wrapper').prepend(' C '); $(' C ').prependTo('#wrapper');

結果

C A B

.after(element) .insertAfter(siblingElement)

插入Element到後面

$('.inner').after(' C '); $(' C ').insertAfter('.inner');

結果

A C B C

.before(element) .insertBefore(siblingElement)

插入Element到前面

$('.inner').before(' C '); $(' C ').insertBefore('.inner');

結果

C A C B

.replaceWith(element) .replaceAll(targetElement)

取代Element

$('.inner').replaceWith(' C '); $(' C ').replaceAll('.inner');

結果

C C

.wrap(element)

包住Element

$('.inner').wrap(' ');

結果

A B

.wrapInner(element)

包住Element內容物

$('.inner').wrapInner(' ');

結果

A B

.wrapAll(element)

包住所有Elements

$('.inner').wrapAll (' ');

結果

A B

.unwrap()

移除外層Element

$('.inner').unwrap();

結果

A B

.remove()

移除Element

$('.inner').remove();

結果

.clone()

複製Element

$('.inner').clone();

7. 事件(Events)

.ready(handler)

綁定載入完成之事件，通常用於綁定整個網頁載入的事件

$(document).ready(function() { // ... }); // 等於 $(function() { // ... });

.bind(eventType, handler)

綁定事件

$('.btn').bind('click', clickFunction);

.unbind([eventType] [, handler])

移除事件綁定

$('.btn').unbind('click', clickFunction); // 移除特定Handler $('.btn').unbind('click'); // 移除所有click事件的Handler $('.btn').unbind(); // 移除所有事件

.on(eventType [, selector], handler)

綁定事件，可透過選擇器使用事件代理(delegate)

$('.btn').on('click', clickFunction); // 與bind相同 $('body').on('click', '.btn', clickFunction); // 代理

.off([eventType] [, selector] [, handler])

移除事件，可移除代理事件

$('.btn').off('click', clickFunction); // 與unbind相同 $('.btn').off('click'); // 與unbind相同 $('.btn').off(); // 與unbinde相同 $('body').off('click', '.btn', clickFunction); // 移除特定代理事件 $('body').off('click', '.btn'); //移除在.btn上的click代理事件 $('body').off('click', '**'); //移除所有click代理事件

.trigger(eventType)

觸發事件

$('.btn').trigger('click');

.click([handler])

綁定或觸發Click事件

$('.btn').click(clickFunction); // 相當於 $('.btn').bind('click', clickFunction);

$('.btn').click(); // 相當於 $('.btn').trigger('click’);

其他和click類似用法的事件函數

.change() .submit() .mousedown() .mouseup() .mousemove() .mouseover() .mouseout() …

8. AJAX

$.ajax(settings)

執行一個AJAX HTTP Reqeust

Settings

url: 呼叫的URL type: HTTP Method, 例如: GET或POST, 預設為GET data: 要傳送的參數資料 dataType: Server回傳的資料型態, 例如: xml, json, script, or html, 預設是自動判斷 async: 預設是非同步傳送, 設成false可使用同步傳送 cache: 設為false將強制不使用cache資料, 預設為true, dataType為script則為false success: 成功時執行 error: 失敗時執行 complete: 無論成功或失敗最後都執行

範例

$.ajax({ url: 'example.aspx', type: 'GET', data: { param1: 'value1' }, dataType: 'json', async: true, cache: true, success: function(data, textStatus, jqXHR) {

}, error: function(jqXHR, textStatus, errorThrown) {

}, complete: function(jqXHR, textStatus) {

} })

結果會呼叫

GET example.aspx?param1=value1

如果cache設定為false則會呼叫

GET example.aspx?param1=value1&_=1407919336091

$.get( url [, data ] [, success ] [, dataType])

執行一個AJAX HTTP GET Request

$.get('example.aspx', params, 'json', successCallback); // 相當於 $.ajax({ url: 'example.aspx', type: 'GET', data: params, dataType: 'json', success: successCallback });

$.post( url [, data ] [, success ] [, dataType])

執行一個AJAX HTTP POST Request

$.post('example.aspx', params, 'json', successCallback); // 相當於 $.ajax({ url: 'example.aspx', type: 'POST', data: params, dataType: 'json', success: successCallback });

9. 其他

.get(index)

取得原生的DOM物件

$('#body').get(0).id // body

$.extend(target [, object1 ] [, objectN …])

合併多個object屬性到第一個object

$.extend({ option: 'default' }, userOptions);

$.isFunction(obj)

判斷一個物件是否為函式

$.isArray(obj)

判斷一個物件是否為陣列

$.isNumeric(obj)

判斷一個物件是否為數字

$.inArray(value, array)

搜索一個數值在陣列中的索引位置, 找不到就回傳-1

// 使用完全相等比對 $.inArray(10, ["8", "9", "10"]); // -1

-->

小殘的程式光廊

提供一些演算法、資料結構、程式題目的整理與說明，PHP和JavaScript的基本教學和一些程式相關問題與解法。

jQuery教學 - 常用函式

參觀人氣

熱門文章

文章分類

電腦程式 (10)

最新文章

文章搜尋

文章精選