jQuery学习

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

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

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

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

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

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

下载初学者包:jQuery Starterkit

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

[cce_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.
});
//郁闷 不知道为什么我的排序插件就是弄不出来  难道排序插件跟上面的代码有冲突?
});
[/cce_js]

总结:

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

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

大量的类似的CSSXPath例子,更多的例子和列表可以在这里找到

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

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

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

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注