当前位置: 网学 > 编程文档 > Ajax > 正文

jQuery中文入门指南,翻译加实例,jQuery的起点教程

来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 12/10/19
下载{$ArticleTitle}原创论文样式
unction(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(''''));
  } );
 });
});这段代码生成了5个链接,并将它们追加到id为"rating"容器中,当其中一个链接被点击时,该链接标明的分数就会以rating参数形式发送到rate.php,然后,结果将以XML形式会从服务器端传回来,添加到容器中,替代这些链接。

如果你没有一个安装过PHP的webserver,你可以看看这个在线的例子.

不使用javascript实现的例子可以访问 softonic.de 点击 "Kurz bewerten!"

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

(译者Keel注:这个在线实例从国内访问还是比较慢的,点击后要等一会儿才能看到结果,可以考虑对它进行修改,比如加上loading,投票后加上再投票的返回链接等。此外,这个例子中还是有很多需要进一步消化的地方,看不懂的地方请参考API文档。)

一个在使用AJAX载入内容时经常发生的问题是:当载入一个事件句柄到一个HTML文档时,还需要在载入内容上应用这些事件,你不得不在内容加载完成后应用这些事件句柄,为了防止代码重复执行,你可能用到如下一个function:

// lets use the shortcut
$(function() {
 var addClickHandlers = function() {
  $("a.clickMeToLoadContent").click(function() {
   $("#target").load(this.href, addClickHandlers);
  });
 };
 addClickHandlers();
});现在,addClickHandlers只在DOM载入完成后执行一次,这是在用户每次点击具有clickMeToLoadContent 这个样式的链接并且内容加载完成后.

请注意addClickHandlers函数是作为一个局部变量定义的,而不是全局变量(如:function addClickHandlers() {}),这样做是为了防止与其他的全局变量或者函数相冲突.

另一个常见的问题是关于回调(callback)的参数。你可以通过一个额外的参数指定回调的方法,简单的办法是将这个回调方法包含在一个其它的function中:

// get some data
var foobar = ;
// specify handler, it needs data as a paramter
var handler = function(data) {
 
};
// add click handler and pass foobar!
$(''a'').click( function(event) { handler(foobar); } );

// if you need the context of the original handler, use apply:
$(''a'').click( function(event) { handler.apply(this, [foobar]); } );用到简单的AJAX后,我们可以认为已经非常之“web2.0”了,但是到现在为止,我们还缺少一些酷炫的效果。下一节将会谈到这些效果.

本章的相关链接:
jQuery AJAX Module
jQuery API: Contains description and examples for append and all other jQuery methods
ThickBox: A jQuery plugin that uses jQuery to enhance the famous lightbox
Animate me(让我生动起来):使用FX
一些动态的效果可以使用 show() 和 hide()来表现:

$(document).ready(function() {
 $("a").toggle(function() {
  $(".stuff").hide('

  • 下一篇资讯: Jquery设置表格行为
  • 网学推荐

    免费论文

    原创论文

    浏览:
    设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
    版权所有 QQ:3710167 邮箱:3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved
    湘ICP备09003080号