Jade基础之属性

三月 29, 2016

继续阅读

属性-Attributes

基本属性

我们在编写HTML文件时,肯定要给HTML标签添加属性,那使用Jade如何实现呢?

在官方文档中说“Jade标签看起来就像html标签一样,但是属性值和常规的JavaScript值。”乍一看很就懵了,但其实很简单。在Jade中,在一个标签后边紧跟上一对圆括号,在圆括号中使用表达式赋值。其中表达式的左值(要是不知道左值是什么,就百度吧...),表达式的右值是JavaScript值,如下例:

a(href="google.com")  

生成html后就是:

<a href="google.com"></a>  



而且,除此之外还可以定义变量,然后使用标准的JavaScript表达式给Attributes赋值:

- var x = 1;
body(id=x==1?1:0)  

编译后:

<body id="1"></body>  

其中,在Jade中定义变量使用-开头,后边跟一个空格,之后是JavaScript声明的变量。

如果一个标签有多个属性,使用逗号分隔:

input(id="username",type="text",name="username")  
//甚至可以分开多行来写
input(  
  id="username",
  type="text",
  name="username"
) //和上边效果一样

非转义属性

为了阻止跨站脚本,在默认情况下所有的属性都会被转义,但是如果你真的需要一些特殊字符,比如:“<”或“>”等,可以使用!=替代=

div(escaped="<code>")  
div(unescaped!="<code>")  

对应会生成HTML代码:

<div escaped="&lt;code&gt;"></div>  
<div escaped="<code>"></div>  

布尔属性

Jade可以直接接受truefalse赋值给布尔属性,而且当你缺省赋值时,默认为true

input(type="checkbox",checked)  
input(type="checkbox",checked="true")  
input(type="checkbox",checked="false")  

对应HTML代码:

<input type="checkbox" checked>  
<input type="checkbox" checked>  
<input type="checkbox">  

样式属性

在之前的属性中每个属性只有一个值,但在style属性中会有多个值,比如:<p style="color:red;font-size:17px;"></p>,这个该怎么办呢?
其实很简单,既然Jade支持JavaScript语法赋值,那我们是不是可以把style属性的值看做是一个JavaScript对象呢(也可以称为字典)?答案是:当然可以喽!

p(style={color:red,font-size:17px})  

HTML代码对应为:

<p style="color:red;font-size:17px;"></p>  

字面量声明class属性和id属性

当使用字面量声明class和id属性时,Jade支持使用CSS的类选择器和id选择器的方式,这也是最简单的方法。

a.commit  
a#commit  

对应的HTML为:

<a class="commit">  
<a id="commit">  

而且这种方法还可以声明分类:

a.commit.first  
<a class="commit first"></a>  

而且对于分类,Jade还有另一种声明方法,就是把分类拆分成数组,然后直接使用数组对class属性赋值:

- var classes = ['commit','first'];
a(class=classes)  

生成HTML代码后和字面量赋值效果相同:

<a class="commit first"></a>  

Terry