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

更常见的情况是以name来选择链接,你可能需要选择一个有特点href属性的链接,这在不同的浏览器下对href的理解可能会不一致,所以我们的部分匹配("*=")的方式来代替完全匹配("="):

$(document).ready(function() { $("a[@href*=https://www.jb51.net/content/gallery]").click(function() { // do something with all links that point somewhere to /content/gallery }); });

到现在为止,选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素,比如一个FAQ的页面,答案首先会隐藏,当问题点击时,答案显示出来,jQuery代码如下:

$(document).ready(function() { $('#faq').find('dd').hide().end().find('dt').click(function() { var answer = $(this).next(); 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(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('')); } ); }); });

这段代码生成了5个链接,并将它们追加到id为"rating"容器中,当其中一个链接被点击时,该链接标明的分数就会以rating参数形式发送到rate.php,然后,结果将以XML形式会从服务器端传回来,添加到容器中,替代这些链接。

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjdxjj.html