You are here

Drupal专业开发指南 第17章 使用一个CSS类选择器

g089h515r806 的头像
Submitted by g089h515r806 on 星期一, 2009-08-24 15:20

 

下面是一个类似的例子,与上节中我们所用的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

Drupal版本: