jQuery 入門級學習筆記及源碼
2024-05-06 14:11:47
供稿：網友
jQuery真的很好，有些效果甚至讓我尖叫。而各種插件能實現你喜歡的效果，這種方式為jQuery的流行奠定了基礎，就像那個crocs鞋子似的。jQuery還有一個優點是達到了將行為與結構分開的目的。
內容概要：
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')。
