|
|
內容概要：
1. 安裝
2. Hello jQuery
3. Find me:使用選擇器和事件
4. Rate me:使用AJAX
5. Animate me(讓我生動起來):使用FX (jQuery FX，jQuery UI后的第二個子庫，強調動畫效果而非UI的外觀模塊，包括對象的消失、出現；顏色、大小、位置變換。)
6. Sort me(將我有序化):使用tablesorter插件(表格排序)
custom.js
復制代碼 代碼如下:
$(document).ready(function() { //## 簡寫方法：(document).ready可以去掉
## 讓所有“<a>”在點擊時填出“hello world”
$("a").click(function() {
alert("Hello world");
});
## id是“orderedlist”增加class名為“red”，在core.css有定義
$("#orderedlist").addClass("red");
## id是“orderedlist”下的最后一個li，鼠標經過時會變色
$("#orderedlist li:last").hover(
function() {
$(this).addClass("green");
},
function() {
$(this).removeClass("green");
}
);
## find() 讓你在已經選擇的element中作條件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li")一樣。each()方法迭代了所有的li，并可以在此基礎上作更多的處理。
## 大部分的方法,如addClass(), 都可以用它們自己的 each() 。在這個例子中, html()用來獲取每個li的html文本, 追加一些文字，并將之設置為li的html文本。
$("#orderedlist").find("li").each(function(i) {
$(this).html($(this).html() + " BAM! " + i);
}
);
## 清空所有的input值
$("#reset").click(function() {
$("input").attr("value", "");
});
## 這個代碼選擇了所有的li元素，然后去除了有ul子元素的li元素。刷新瀏覽器后，所有的li元素都有了一個邊框，只有ul子元素的那個li元素例外。
## 請注意體會方便之極的css()方法，并再次提醒請務必實際測試觀察效果，比方說換個CSS樣式呢？再加一個CSS樣式呢？
$("li").not("[ul]").css("border", "1px solid black").css("color", "red");
## 這個代碼給所有帶有name屬性的鏈接加了一個背景色。[注：在jQuery1.2及以上版本中,@符號應該去除]
$("a[@name]").background("#eee");
## 你可能需要選擇一個有特點href屬性的鏈接，這在不同的瀏覽器下對href的理解可能會不一致，所以我們的部分匹配("*=")的方式來代替完全匹配("=")
$("a[@href*=bot]").click(function() {
alert("hello world 2");
});
## 這里我們用了一些鏈式表達法來減少代碼量，而且看上去更直觀更容易理解。像'#faq' 只選擇了一次，利用end()方法，第一次find()方法會結束(undone)，
## 所以我們可以接著在后面繼續find('dt')，而不需要再寫$('#faq').find('dt')。
## 在點擊事件中的，我們用 $(this).next() 來找到dt下面緊接的一個dd元素，這讓我們可以快速地選擇在被點擊問題下面的答案。
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
## 除了選擇同級別的元素外，你也可以選擇父級的元素。可能你想在用戶鼠標移到文章某段的某個鏈接時，它的父級元素--也就是文章的這一段突出顯示，試試這個：
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
## AJAX第一次嘗試。首先我們需要一些服務器端代碼，這個例子中用到了一個ASPX文件，讀取rating參數然后返回rating總次數和平均數。
// generate markup
var ratingMarkup = [" Please rate: "];
for (var i = 1; i <= 5; i++) {
ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> "; //ratingMarkup是個數組
}
// add markup to container and applier click handlers to anchors
$("#rating").append(ratingMarkup.join('')).find("a").click(function(e) { //用join方法返回一個將數組所有元素用指定符號連在一起的字符串
e.preventDefault(); //該方法將通知 Web 瀏覽器不要執行與事件關聯的默認動作（如果存在這樣的動作）。
// send requests
$.post("rate.ASPx?rating=" + $(this).html(), {}, function(xml) { //這里要用{}占一個位
// format result
var result = [
"Thanks for rating, current average: ",
$("average", xml).text(),
", number of votes: ",
$("count", xml).text()
];
// output result
$("#rating").html(result.join(''));
});
});
## 一些動態的效果可以使用 show() 和 hide()來表現。伸縮效果。
$("a").toggle(function() { //toggle雙向開關
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});
## 可以與 animate()聯合起來創建一些效果,如一個帶漸顯的滑動效果
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
## 使用tablesorter插件(表格排序)
## 幾乎所有的特件都是這樣用的:先include插件的js文件,然后在某些元素上使用插件定義的方法,當然也有一些參數選項是可以配置的
$("#large").tableSorter();
## 這個表格還可以加一些突出顯示的效果，我們可以做這樣一個隔行背景色（斑馬線）效果
$("#large").tableSorter({
stripingRowClass: ['odd', 'even'], // Class names for striping supplyed as a array.
stripRowsOnStartUp: true // Strip rows on tableSorter init.
});
});
jquery-starterkit.rar
JavaScript技術：jQuery 入門級學習筆記及源碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
