Via
Sixrevisions,
impressivewebs
===============
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)
