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