jQuery学习

目录

因为上课的原因 了解到jQuery比较强大 还有ms的asp.net ajax 于是决定开始学习ajax

找到了jQuery的中文入门教程 很不错,讲的东西很多、全面 ,正是我想要的。

开始了第一个著名的Hello world 例子,下载了 Starterkit 、jQuery

修改custom.js 调试出来竟然有错误。仔细看了 下代码 没错啊,怎么出不来呢

百思不得其解,查看错误发现,竟然提示缺少文件 ,再一看根目录,顿时,快要晕了,我竟然没把jQuery.js放在根目录下面,先汗一个。

我们需要一个jQuery的库,最新的下载可以到这里找到

下载初学者包:jQuery Starterkit

下面是在学习中做的笔记 这是我的custom.js

$(document).ready(function() {
// the first time
//hello world 演示点击链接弹出alert
$("a").click(function(){
//alert("Hello World!");
});
//orderedlist附加red样式
//$("#orderedlist").addClass("red");
//orderedlist的子节点添加样式
$("#orderedlist > li").addClass("blue");
//鼠标滑过最后一行 变绿
$("#orderedlist li:last").hover(function(){
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
//给orderlist结点的子节点内容添加内容
$("#orderedlist").find("li").each(function(i){
$(this).html($(this).html()+"BAM"+i);
});
//重置单个表单的内容
//$("#reset").click(function() {
//$("#testform")[0].reset();
//});
// 一次性重置对个表单
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
//选择所有li元素,去除了ul子元素 刷新浏览器后,所有的li元素都有了一个边框,只有ul子元素的那个li元素例外
$("li").not(":has(ul)").css("border", "1px solid black");//原文为$("li").not("[ul]").css("border", "1px solid black");
//css()样式用法 另外一个样式
//$("li").not("[ul]").css("border", "1px solid black").css("color","red");
//给所有带name属性的链接加一个背景色 不是很清楚
$("a[name]").css("background-color","#eee");
//进行部分匹配 href属性=#的发生事件
$("a[href*=#]").click(function() {//由于是部分匹配所以#、#bottom是一样的
//alert("href");
// do something with all links that point somewhere to /content/gallery
});
//选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素,比如一个FAQ的页面,答案首先会隐藏,当问题点击时,答案显示出来
$('#faq').find('dd').hide().end().find('dt').click(function() {//选择所有的dd元素全部隐藏起来 实现dt的点击事件
var answer = $(this).next();//选择下一个元素 找到dt下面紧接的一个dd元素
if (answer.is(':visible')) {
answer.slideUp("slow",function(){//上移弹出
alert("haha up")});
} else {
answer.slideDown("slow",function(){//下移弹出
alert("haha down")});
}
});
//移到文章某段的链接时,它所在的段全用上highlight样式,移走之后又恢复原样
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});//hover(over, out)
//特效 show() hide()函数实现
//$("a").toggle(function() {
//    $(".stuff").hide('slow');
//}, function() {
//    $(".stuff").show('fast');
//});
//特效2
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
//这里还有一些比较好的特效
// generate markup //投票rate
//代码生成了5个链接,并将它们追加到id为"rating"容器中,当其中一个链接被点击时,该链接标明的分数就会以rating参数形式发送到rate.php,然后,结果将以XML形式会从服务器端传回来,添加到容器中,替代这些链接。
var ratingMarkup = ["Please rate: "];
for(var i=1; i <= 5; i++) {
ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
}
// add markup to container and applier click handlers to anchors
$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
e.preventDefault();
// send requests
$.post("rate.php", {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(''));
} );
});
//点击表格的第一行head区域,你可以看到排序的效果,再次点击会按倒过来的顺序进行排列。
//$("#large").tableSorter();
$("#large").tableSorter({
stripingRowClass: ['odd','even'],    // Class names for striping supplyed as a array.
stripRowsOnStartUp: true        // Strip rows on tableSorter init.
});
//郁闷 不知道为什么我的排序插件就是弄不出来  难道排序插件跟上面的代码有冲突?
});

总结:

虽然教程内容比较少,但是花了一个下午的时间 效果不怎么明显 下次再继续学习jQuery的plugin 还有自己插件

很显然 教程只是JQuery中一小小部分 还有很多东西 必须掌握 像css、xpath的语法

大量的类似的CSS和[XPath](http://jquery.com/docs/Base/ /XPath/)例子,更多的例子和列表可以在这里找到

你可以在Visual jQuery找到全部的事件列表,在Events栏目下.

更多的AJAX方法可以从这里 找到,或者看看API文档 下面的AJAX filed under AJAX.

很多不错的效果可以访问interface plugin collection. 这个站点提供了很多demos和文档

关于排序插件的更多例子和文档可以在 tablesorter首页找到.

经常更新的插件列表可以从jQuery官方站 on the jQuery site找到.