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

现在我们再做个复杂一点的,当把鼠标放在li对象上面和移开时进行样式切换,但只在list的最后一个element上生效。

$(document).ready(function() { $("#orderedlist li:last").hover(function() { $(this).addClass("green"); }, function() { $(this).removeClass("green"); }); });

还有大量的类似的CSSXPath例子,更多的例子和列表可以在这里找到。(译者Keel注:入门看此文,修行在个人,要想在入门之后懂更多,所以这段话的几个链接迟早是要必看的!不会又要翻译吧...^_^!)

每一个onXXX事件都有效,如onclick,onchange,onsubmit等,都有jQuery等价表示方法(译者Keel注:jQuery不喜欢onXXX,所以都改成了XXX,去掉了on)其他的一些事件,如ready和hover,也提供了相应的方法。

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

用这些选择器和事件你已经可以做很多的事情了,但这里有一个更强的好东东!

$(document).ready(function() { $("#orderedlist").find("li").each(function(i) { $(this).html( $(this).html() + " BAM! " + i ); }); });

find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li"). each()一样迭代了所有的li,并可以在此基础上作更多的处理。 大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字,并将之设置为li的html文本。(译者Keel注:从这个例子可以看到.html()方法是获取对象的html代码,而.html('xxx')是设置'xxx'为对象的html代码)

另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法,想像一个在你用AJAX方式成功提交后的reset:

$(document).ready(function() { // use this to reset a single form $("#reset").click(function() { $("#form")[0].reset(); }); });

(译者Keel注:这里作者将form的id也写成了form,源文件有<form>,这是非常不好的写法,你可以将这个ID改成form1或者testForm,然后用$("#form1")或者$("#testForm")来表示它,再进行测试。)

这个代码选择了所有ID为"form"的元素,并在其第一个上call了一个reset()。如果你有一个以上的form,你可以这样做:

$(document).ready(function() { // use this to reset several forms at once $("#reset").click(function() { $("form").each(function() { this.reset(); }); }); });

(译者Keel注:请注意一定要亲自将这些代码写在custom.js中并在starterkit.html上测试效果才能有所体会!必要时要观察starterkit.html的html代码)

这样你在点击Reset链接后,就选择了文档中所有的form元素,并对它们都执行了一次reset()。

还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list,你想要选择所有的没有ul子元素的li元素。

$(document).ready(function() { $("li").not("[ul]").css("border", "1px solid black"); });

这个代码选择了所有的li元素,然后去除了没有ul子元素的li元素。刷新浏览器后,所有的li元素都有了一个边框,只有ul子元素的那个li元素例外。

(译者Keel注:请注意体会方便之极的css()方法,并再次提醒请务必实际测试观察效果,比方说换个CSS样式呢?再加一个CSS样式呢?像这样:$("li").not("[ul]").css("border", "1px solid black").css("color","red");)

上面代码中的[expression] 语法是从XPath而来,可以在子元素和属性(elements and attributes)上用作过滤器,比如你可能想选择所有的带有name属性的链接:

$(document).ready(function() { $("a[@name]").background("#eee"); });

这个代码给所有带有name属性的链接加了一个背景色。(译者Keel注:这个颜色太不明显了,建议写成$("a[@name]").background("red");)

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

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