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"）。
## 在点击事件中的，我们用 $（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
易网时代-编程资源站