本周公司技术讲座轮到我了，准备说说现在流行的jQuery，下面是概要提纲，关键是看custom.js，已上传源码，程序中“//##”是分段用的，大家可以根据每一段取消注释，然后找到相应的id或class名查看效果。
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插件(表格排序)
下载：/Files/BenjaminYao/jquery-starterkit.rar
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.
// });
});
//## 让所有“<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.
// });
});