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

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

来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 12/10/19
下载{$ArticleTitle}原创论文样式
;    if (answer.is('':visible'')) {
             answer.slideUp();
         } else {
             answer.slideDown();
         }
     });
});这里我们用了一些链式表达法来减少代码量,而且看上去更直观更容易理解。像''#faq'' 只选择了一次,利用end()方法,第一次find()方法会结束(undone),所以我们可以接着在后面继续find(''dt''),而不需要再写$(''#faq'').find(''dt'')。

在点击事件中的,我们用 $(this).next() 来找到dt下面紧接的一个dd元素,这让我们可以快速地选择在被点击问题下面的答案

(译者Keel注:这个例子真是太酷了,FAQ中的答案可以收缩!从利用next()的思路到实现这些效果都有很多地方需要我们消化,注意 if (answer.is('':visible''))用法,注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档)

除了选择同级别的元素外,你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时,它的父级元素--也就是文章的这一段突出显示,试试这个:

$(document).ready(function() {
 $("a").hover(function() {
  $(this).parents("p").addClass("highlight");
 }, function() {
  $(this).parents("p").removeClass("highlight");
 });
});测试效果可以看到,移到文章某段的链接时,它所在的段全用上highlight样式,移走之后又恢复原样。

(译者Keel注:highlight是core.css中定义的样式,你也可以改变它,注意这里有第二个function()这是hover方法的特点,请在API文档中查阅hover,上面也有例子说明)
在我们继续之前我们先来看看这一步: jQuery会让代码变得更短从而更容易理解和维护,下面是$(document).ready(callback)的缩写法:

$(function() {
 // code to execute when the DOM is ready
});应用到我们的Hello world例子中,可以这样:

$(function() {
 $("a").click(function() {
  alert("Hello world!");
 });
});现在,我们手上有了这些基础的知识,我们可以更进一步的探索其它方面的东西,就从AJAX开始!

本章的相关链接:
jQuery API documentation
Visual jQuery - A categorized browsable API documentation
jQuery Expressions: CSS
jQuery Expressions: XPath
jQuery Expressions: Custom
jQuery Special Events
jQuery DOM Traversing
Rate me:使用AJAX
在这一部分我们写了一个小小的AJAX应用,它能够rate一些东西(译Keel注:就是对某些东西投票),就像在youtube.com上面看到的一样。

首先我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数。看一下rate.php代码.

虽然这些例子也可以不使用AJAX来实现,但显示我们不会那么做,我们用jQuery生成一个DIV容器,ID是"rating".

$(document).ready(function() {
 // generate markup
 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(f

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

    免费论文

    原创论文

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