下面是一个类似的例子,与上节中我们所用的CSS ID选择器不同,这里使用了CSS类选择器。HTML如下所示:
<p class="intro">Welcome to the World of Widgets.</p>
<p class="intro">Widgets are available in many sizes.</p>
我们的CSS如下所:
.intro {
background-color: blue;
}
下面的也可以工作,它是一个更加具体的规则:
p.intro {
background-color: blue;
}
下面是对应的jQuery代码:
$(".intro").css("background-color", "blue").fadeIn("slow");
或
$("p.intro").css("background-color", "blue").fadeIn("slow");
在上面的第一个例子中,你让jQuery查找具有info类的任何HTML元素,而第二个例子则有点细微的不同。这里你在所有的段落标签中,查找具有info类的元素。注意后者的速度稍微快了一点,这是因为使用p.intro将查找的范围限制在了段落标签中,从而查找的HTML就少了许多。
提示 在CSS中,“.”是一个类选择器,在同一文档中可以重复出现;而“#”是一个唯一的ID选择器,在同一页面只能出现一次。
现在你对jQuery的工作原理应该有些了解了,让我们实际的看一下如何在Drupal中使用它。
老葛的Drupal培训班 Think in Drupal