属性

所有的html(5)标签在jade中均支持如下写法。jade中省去了html<>和标签的关闭等写法，并将属性写在括号之中。若存在多个属性，可以将其分为多行。

jade：

a(href='google.com') Google

a(class='button', href='google.com') Google

input(

  type='checkbox'

  name='agreement'

  checked

)

html：

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

<a href="google.com" class="button">Google</a>

<input type="checkbox" name="agreement" checked="checked"/>

对于正常的javascript表达式，jade也可以应付。

jade：

- var authenticated = true

body(class=authenticated ? 'authed' : 'anon')

html：

<body class="authed"></body>

特殊属性

对于某些特殊符号，比如<,>等等，在jade编译生成html后，将会变成&lt;,&gt;，所以对于此类符号采取如下写法。

jade：

div(escaped="<code>")

div(unescaped!="<code>")

html：

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

<div unescaped="<code>"></div>

布尔型属性

某些属性在jade中接受bool值（false的话则在编译后生成的html中无该属性），无初值默认为true。

jade：

input(type='checkbox', checked)

input(type='checkbox', checked=true)

input(type='checkbox', checked=false)

input(type='checkbox', checked=true.toString())

html：

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

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

<input type="checkbox"/>

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

style属性

通过JS可以将style属性封装在一个类中，也可以将style属性的值赋为一个字符串。

jade：

a(style={color: 'red', background: 'green'})

html：

<a style="color:red;background:green"></a>

class属性

class属性支持数组赋值。

jade：

//- 预定义数组后赋值

- var classes = ['foo', 'bar', 'baz']

a(class=classes)

//- 无名数组

a(class=['bing', 'bat'])

//- 多个属性值，可以合并，并且不去重

a.baz(class=classes class=['bing', 'bar'])

html：

<a class="foo bar baz"></a>

<a class="bing bat"></a>

<a class="baz foo bar baz bing bar"></a>

class、id

因为class属性和id属性会经常使用到，所以jade允许简化写法。

对于class可以直接.value表示class="value"，对于id可以直接#value表示id="value"。

因为div也会经常用到，jade允许div可以省去。

jade：

a.button

.content

html：

<a class="button"></a>

<div class="content"></div>

&attributes

&attributes（作用？）可以添加一个对象作为属性（可以为对象变量）的一部分。

jade：

div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})

- var attributes = {'data-foo': 'bar'};

div#foo(data-bar="foo")&attributes(attributes)

html：

<div id="foo" data-bar="foo" data-foo="bar"></div>

<div id="foo" data-bar="foo" data-foo="bar"></div>

因为使用了&attributes的属性不会自动逃逸，所以为了防止cross-site scripting，请保证用户输入合法。

Jade之属性的更多相关文章

  1. Jade模板引擎(一)之Attributes

    目录: Attributes Boolean Attributes Style Attributes Class Attributes &Attributes Attributes jade中 ...

  2. 令人惊叹的Visual Studio Code插件

    vscode是一款开源且优秀的编辑器,接下来让我吐血推荐一下我工作使用过的令人惊叹的Visual Studio Code插件. 代码编辑插件 vscode-color-highlight ------ ...

  3. jqu

    1 /*2 * 说明:3 * 本源代码的中文注释乃Auscarlin呕心沥血所作.旨在促进jQuery的传播以及向广大jQuery爱好者提供一个进阶4 *的途径,以让各位更加深入地了解jQuery,学 ...

  4. jade属性怎么写

    关于元素和标签,可能傻傻分不清楚,什么是元素,什么是标签,举个例子 比如div是一个块状元素,那么尖括号包起来的是标签,他用来标记这个元素,尖括号里面是元素名,元素是由开始和结束标签组成,用来包含内容 ...

  5. Jade模板引擎让你飞

    写在前面:现在jade改名成pug了 一.安装 npm install jade 二.基本使用 1.简单使用 p hello jade! 渲染后: <p>hello jade!</p ...

  6. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  7. Jade 模板引擎使用

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  8. jade模板

    jade 模板使用 npm install jade -g      安装到全局 jade index.jade         导出一个 index.html 压缩后的 jade -P index. ...

  9. nodejs学习篇 (1)webstorm创建nodejs + express + jade 的web 项目

    之前简单了解过nodejs,觉得用nodejs来做个网站也太麻烦了,要自己拼html的字符串返回,这能做网站嘛? 最近看到使用jade模板来开发,觉得挺新奇的,于是试了一把,也了解了一些特性,算是个新 ...

随机推荐

  1. 【原】搭建Samba的简要过程

    1.安装samba yum install samba –y 2.创建用户 useradd admin #先创建系统用户 smbpasswd -a admin #第一次加入需要-a参数,把admin用 ...

  2. ASP.NET Page对象各事件执行顺序（转）

    很久没写 asp.net 的东西了,search 了一下 page 的事件执行顺序,找到如下的东西,仅仅做记录用 Page.PreInit 在页初始化开始时发生 Page.Init 当服务器控件初始化 ...

  3. VBA_Excel_教程：分枝循环结构

    Sub 分枝() tmp = Cells(, ).Value '变量不用定义,当前写代码的Sheet Debug.Print tmp " Then Debug.Print "A&q ...

  4. [转载]Macaca 测试 Android 应用：UIAutomator

    在用macaca进行自动化测试,想试一下移动端测试,看到这篇文章,尝试一下. 前言 用 Macaca 可以快速.便捷地进行安卓 native 的自动化测试,用简洁的 js 语法,写下用例,然后执行 M ...

  5. cocos2d中的可见性检测

    游戏的在进行一次渲染的时候,通常会提交大量的渲染对象给gpu.在这些需要渲染的对象中,并不是所有对象都会出现镜头中,即有一部分对象是不可见的. 通常有两种方式来完成不可见对象的剔除工作: (1)直接交 ...

  6. python函数递归和生成器

    一.什么是递归 如果函数包含了对其自身的调用,该函数就是递归的.递归做为一种算法在程序设计语言中广泛应用,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的 ...

  7. 通过案例对 spark streaming 透彻理解三板斧之二：spark streaming运行机制

    本期内容: 1. Spark Streaming架构 2. Spark Streaming运行机制 Spark大数据分析框架的核心部件: spark Core.spark  Streaming流计算. ...

  8. coroSync packmarker

    CoroSync+Pacemaker实现web高可用 2015-04-12 23:38:19 标签:CoroSync pacemaker 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 ...

  9. openldap加密传输sssd

    http://blog.father.gedow.net/2015/09/29/sssd-ldap-sudo/ yum -y install openldap-clients sssd authcon ...

  10. 【EF学习笔记11】----------查询中常用的扩展方法

    先来看一下我们的表结构: 首先毫无疑问的要创建我们的上下文对象: using (var db = new Entities()) { //执行操作 } Average 平均值: //查询平均分 Con ...