jQuery 基本概念摘要

Via Sixrevisions, impressivewebs

• Getting Started with jQuery
• jQuery Tutorial for Beginners: Nothing But the Goods

===============
     PART 1
===============

要徹底發揮 jQuery 的威力，通常你要對 CSS 有充足的了解。至少要了解

• Type selectors
• Class selectors
• ID selectors
• Descendant selectors
• Child selectors
• Attribute selectors
• CSS specificity
• The cascade & inheritance

※ 這些應該都是現代前端工程師所必備的知識

The jQuery wrapper

$("li a"); // 這個等同於下面的
jQuery("li a");

jQuery commands

// 加入淡出的特效
$("li a").fadeOut(); // 會淡出所有 li 內的連結
$("li a").fadeIn();  // 又淡入所有 li 內的連結

Chaining commands

$("li a").fadeOut().fadeIn();

Running code when the DOM is ready

// 有了(document).ready，程式碼會在 DOM tree 準備好時立刻執行，
// 而不會痴痴等待圖片或其他媒體全部下載完畢。
$(document).ready(function(){
  $("li a").fadeOut().fadeIn();
});

===============
     PART 2
===============

Selecting Elements in jQuery

$("div"); // selects all HTML div elements
$("#myElement"); // selects one HTML element with ID "myElement"
$(".myClass"); // selects HTML elements with class "myClass"
$("p#myElement"); // selects paragraph elements with ID "myElement"
$("ul li a.navigation"); // selects anchors with class "navigation" that are nested in list items

// jQuery 還支援使用 CSS selectors, 甚至是 CSS3。幾個例子：
$("p > a"); // selects anchors that are direct children of paragraphs
$("input[type=text]"); // selects inputs that have specified type
$("a:first"); // selects the first anchor on the page
$("p:odd"); // selects all odd numbered paragraphs
$("li:first-child"); // every list item that's first child in a list

// jQuery 還允許使用它自身定義的 selectors
$(":animated"); // selects elements currently being animated
$(":button"); // selects any button elements (inputs or buttons)
$(":radio"); // selects radio buttons
$(":checkbox"); // selects checkboxes
$(":checked"); // selects selected checkboxes or radio buttons
$(":header"); // selects header elements (h1, h2, h3, etc.)

Manipulating and Accessing CSS Class Names

// jQuery 讓你可以很輕易地增加、移除、和張合 CSS classes
$("div").addClass("content"); // adds class "content" to all <div> elements
$("div").removeClass("content"); // removes class "content" from all <div> elements
$("div").toggleClass("content"); // toggles the class "content" on all <div> elements (adds it if it doesn't exist, and removes it if it does)

// 還可以用 if 做檢查
if ($("#myElement").hasClass("content")) {
    // do something here
}

Manipulating CSS Styles with jQuery

// 輕易地將元素增添 CSS 樣式
$("p").css("width", "400px"); // adds a width to all paragraphs
$("#myElement").css("color", "blue") // makes text color blue on element #myElement
$("ul").css("border", "solid 1px #ccc") // adds a border to all lists

Adding, Removing, and Appending Elements and Content

// 取得 HTML 內容
var myElementHTML = $("#myElement").html(); // variable contains all HTML (including text) inside #myElement

// 倘若你只想取得裡頭的文字
var myElementHTML = $("#myElement").text(); // variable contains all text (excluding HTML) inside #myElement

// 利用同樣的語法，你也可以改變 HTML 內容
$("#myElement").html("<p>This is the new content.</p>"); // content inside #myElement will be replaced with that specified
$("#myElement").text("This is the new content."); // text content will be replaced with that specified

// append (添加)內容
$("#myElement").append("<p>This is the new content.</p>"); // keeps content intact, and adds the new content to the end
$("p").append("<p>This is the new content.</p>"); // add the same content to all paragraphs

// jQuery 還有 appendTo(), prepend(), prependTo(), before(), insertBefore(), after(), insertAfter() 等類似函式

Dealing with Events in jQuery

// 只有當連結被點選時，function() 裡的程式碼才會啟動
$("a").click(function() {
    // do something here
    // when any anchor is clicked
});
// 其他常見的 events 有：blur, focus, hover, keydown, load, mousemove, resize, scroll, submit, select

Showing and Hiding Elements with jQuery

$("#myElement").hide("slow", function() {
    // do something once the element is hidden
}
 
$("#myElement").show("fast", function() {
    // do something once the element is shown
}
 
$("#myElement").toggle(1000, function() {
    // do something once the element is shown/hidden
}
// 第一個參數指定速度(單位是千分之一秒)，若無指定則立即發生。第二個指令是命令執行完後會呼叫的(optional)函式。

$("#myElement").fadeOut("slow", function() {
    // do something when fade out finished
}
 
$("#myElement").fadeIn("fast", function() {
    // do something when fade in finished
}

$("#myElement").fadeTo(2000, 0.4, function() {
    // do something when fade is finished
}
// 第二個參數，0.4，代表的是透明度(opacity)。

jQuery Animations and Effects

// 將元素 slide up or down
$("#myElement").slideDown("fast", function() {
    // do something when slide down is finished
}
 
$("#myElement").slideUp("slow", function() {
    // do something when slide up is finished
}
 
$("#myElement").slideToggle(1000, function() {
    // do something when slide up/down is finished
}

// 要讓一個元素有動畫效果，jQuery 透過改變 CSS 樣式以達成
$("#myElement").animate(
    {
        opacity: .3,
        width: "500px",
        height: "700px"
    }, 2000, function() {
        // optional callback after animation completes  
    }
);

更多

51+ Best of jQuery Tutorials and Examples (via noupe)