tt
find me:使用选择器和事件
jquery提供两种方式来选择html的elements,第一种是用css和xpath选择器联合起来形成一个字符串来传送到jquery的构造器(如:$(div > ul a));第二种是用jquery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。
为了测试一下这些选择器,我们来试着在我们starterkit.html中选择并修改第一个ordered list.
一开始,我们需要选择这个list本身,这个list有一个id叫“orderedlist”,通常的javascript写法是document.getelementbyid(orderedlist).在jquery中,我们这样做:
$(document).ready(function() {
$(#orderedlist).addclass(red);
});这里将starterkit中的一个css样式red附加到了orderedlist上(译者keel注:参考测试包中的css目录下的core.css,其中定义了red样式)。因此,在你刷新了starterkit.html后,你将会看到第一个有序列表(ordered list )背景色变成了红色,而第二个有序列表没有变化.
现在,让我们添加一些新的样式到list的子节点.
$(document).ready(function() {
$(#orderedlist > li).addclass(blue);
});这样,所有orderedlist中的li都附加了样式blue。
现在我们再做个复杂一点的,当把鼠标放在li对象上面和移开时进行样式切换,但只在list的最后一个element上生效。
$(document).ready(function() {
$(#orderedlist li:last).hover(function() {
$(this).addclass(green);
}, function() {
$(this).removeclass(green);
});
});还有大量的类似的css和xpath例子,更多的例子和列表可以在这里找到。(译者keel注:入门看此文,修行在个人,要想在入门之后懂更多,所以这段话的几个链接迟早是要必看的!不会又要翻译吧...^_^!)
每一个onxxx事件都有效,如onclick,onchange,onsubmit等,都有jquery等价表示方法(译者keel注:jquery不喜欢onxxx,所以都改成了xxx,去掉了on)。
