jQuery 教學

dd 

https://www.fooish.com/jquery/selectors.html

jQuery 的程式碼長怎樣？

$('p.neat').addClass('ohmy').show('slow');

jQuery 的基本操作概念 (Coding basics)

jQuery 程式碼由 $ (或jQuery) 開始 → 後面會接著圓刮號「()」→ 而圓刮號裡面的參數是你想叫 jQuery 幫你找什麼 (取得哪個(些)元素) → 接著是你想叫 jQuery 執行什麼動作 (或處理事件)。例如：

// 選取 id 為 el 的元素，並綁定 onclick 事件
// 叫jQuery將其CSS的背景顏色屬性改成灰色
$('#el').click(function() {
  $('#el').css('background-color', 'green');
});   

串接 (Chaining)

在 jQuery 中，幾乎所有成員都會返回自己執行後的結果 - 也是一個 jQuery 物件，因此你可以連續地使用函數 (Chaining)。以下我們用一個範例來說明 Chaining 是怎麼一回事：

$('#el').css('color', 'blue').css('background-color', 'red');

上面這段程式碼由兩段函式組成：

// 先將文字改成藍色
$('#el').css('color', 'blue');
// 再將背景顏色改為紅色
$('#el').css('background-color', 'red');

Value - Getter/Setter

val，一個很常用到的方法，用來取得和設定表單元素的 value 值：

.val() // get
.val(value) // set

例如，取得表單元素的值：

// 取得下拉選單 (select box) 的值
$('select.foo').val();

// 取得 checkbox 欄位的選取值
$('input:checkbox:checked').val();

// 取得 radio 欄位的選取值
$('input:radio[name=bar]:checked').val();

例如，設定表單元素的值：

// HTML
<input type="text">
// 設定欄位值
$('input').val('Hello World!');
// 設定後的結果
<input type="text" value="Hello World!">

過濾元素 (Filtering)

jQuery 有提供一些函數幫助我們方便的「濾出」我們要的目標元素：

取得第 index 個元素 (index 從 0 開始)

.eq( index )

例如，取得匹配的第 3 個元素

$('p').eq(2);

相較於 .get(index) 得到的是 DOM 物件；.eq(index) 則是 jQuery 物件。

依表達式條件來查訪元素 (Finding)

.find(selector)

.find() 跟 .children() 有點像，差別在 .children() 只會找下一層的元素而已。

例如，我們想取得段落下的 span 元素：

// HTML
<p><span>Hello</span> World</p>

// jQuery
$('p').find('span');
// 得到的結果
[<span>Hello</span>]

https://www.fooish.com/jquery/traversing.html

jQuery 事件處理 (Events)

jQuery 的事件處理函式大都提供兩種用途，一種是呼叫帶有參數的函式 - 綁定事件處理函式；另一種則是呼叫不帶有參數的函式 - 觸發該事件。

帶有參數，例如，綁定所有段落觸發 click 事件時，將背景顏色改為藍色：

$('p').click(function() {
  $(this).css('background-color', 'blue');
});

不帶有參數，例如，觸發所有段落的 click 事件：

$('p').click();

$(document).ready(function() {})

最後，但是很重要也很常用的。jQuery 中，大部分的操作都基於 HTML DOM，所以我們必須確定頁面文件已經完全下載好才開始執行你的程式，jQuery 提供下面這個函式來處理 DOM ready 事件 (DOMContentLoaded)：

$(document).ready(function() {
  // 這裡放你要執行的程式碼
});

你也可以這樣寫：

$(function() {
  // 這裡放你要執行的程式碼
});

https://www.fooish.com/jquery/events.html

jQuery.ajax(url [, settings])

這是 jQuery 最底層的 Ajax 物件，而上面提到的都是由 $.ajax() 包成的簡單應用 ($.get, $.post 等)。$.ajax() 只有一個參數，一個包含初始化及處理 Ajax request 的 key/value pairs 物件，詳細參數選項 settings 如下所列：

例如，儲存資料到 Server，並通知使用者已儲存：

$.ajax({
  type: 'POST',
  url: 'some.php',
  data: {name: 'John', location: 'Boston'},
  success: function(msg) {
    alert('Data Saved: ' + msg);
  }
});

https://www.fooish.com/jquery/ajax.html

你還可以在 data-* 屬性裡使用 JSON 語法

如果 data attribute 的值是 { 或 [ 開頭，jQuery 會自動幫你當 JSON 來解析成 JavaScript Object/Array。

例如

// HTML
<div data-options='{"name":"John"}'></div>
// jQuery
$('div').data('options').name === 'John';

.data(key, value)

除了使用 HTML data-* 屬性，jQuery 也讓我們可以很彈性的綁定任意資料到特定元素上面。

$('#foo').data('foo', 52);
$('#foo').data('bar', {myType: 'test', count: 40});
$('#foo').data({baz: [1, 2, 3]});

$('#foo').data('foo'); // 52
// 也可以一次拿元素上面綁定的所有資料
$('#foo').data(); // {foo: 52, bar: {myType: 'test', count: 40}, baz: [1, 2, 3]}

66