属性

所有的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. [CF442B] Andrey and Problem (概率dp)

    题目链接:http://codeforces.com/problemset/problem/442/B 题目大意:有n个人,第i个人出一道题的概率是pi,现在选出一个子集,使得这些人恰好出一个题的概率 ...

  2. IIS7 IIS7.5 IIS8.5 HTTP 错误 500.19 – Internal Server Error解决方案小记

    今天配置IIS(win8.1 IIS8.5)的web.config出现如下错误: HTTP 错误 500.19 – Internal Server Error无法访问请求的页面,因为该页的相关配置数据 ...

  3. js添加广告模块，随页面移动而移动

    实现如下的效果,一般用于广告, 这是通过运动来实现的,大家可以先自己写写,再看看和小编我写的是不是同一个思想 <style> #div1{ width:100px; height:100p ...

  4. jsp与Servlet

  5. Mac后台开发MNMP(nginx , mysql, php)标配

    mysql安装: 方法:1.原始方法,下载压缩文件,解压,安装,配置            2.dmp文件安装            3.brew安装 这里使用brew安装:      a.brew ...

  6. C++学习基础七——深复制与浅复制

    一.深复制与浅复制基本知识 深复制和浅复制,又称为深拷贝和浅拷贝. 深复制和浅复制的区别如下图1所示: 图1 图1表示的是,定义一个类CDemo,包含int a和char *str两个成员变量, 当深 ...

  7. ASP.NET 操作Cookie详解 增加，修改，删除

    ASP.NET 操作Cookie详解 增加,修改,删除 Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密).定义于RFC2109.它 ...

  8. 26、首先通过javascript包的异步加载来学习echarts包的结构

    1.在这里先写一写前言,今天在公司搞定了一个对于滚动条进行定位的case,明天开始做TestManagement. 首先大家先来一起看一看流行的javascript文件的加载方式,这里采用别人博客上的 ...

  9. Centos下MySQL使用总结

    转载于CentOS中文站:http://www.centoscn.com/CentOS/Intermediate/2013/0817/1334.html 一.MySQL安装 Centos下安装mysq ...

  10. UVa 10055 - Hashmat the Brave Warrior

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=94&page=s ...