Skip to content

Latest commit

 

History

History
105 lines (83 loc) · 4.98 KB

10.Thymeleaf.md

File metadata and controls

105 lines (83 loc) · 4.98 KB

Thymeleaf 标记选择器语法

标记选择器语法   

官网地址：https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#appendix-c-dom-selector-syntax

  •    Thymeleaf 的标记选择器直接从 Thymeleaf 的解析库（AttoParser）中借⽤。该选择器的语法与 XPath，CSS 和 JQuery 中的选择器具有很⼤的相似性，这使得它们可以⽅便⼤多数⽤户使⽤。 

-     例如，以下选择器将在标记内的每个位置中选择每个类名包含content的<div>标签：

<div th:include="mytemplate :: [//div[@class='content']]">...</div>

基本语法使用

The basic syntax inspired from XPath includes:

/x ：表示名为 x 的当前节点的直接⼦节点。
//x ：表示任何深度的名为 x 的当前节点的⼦节点。
x[@z=“v”] ：表示属性 z 的值为 “v”的节点 x
x[@z1="v1" and @z2="v2"] ：表示属性 z1 的值为 "V1"，且属性 z2 的值为“v2”的节点 x
x[i] ：表示元素 x 位于其同辈元素之中的第 i 个元素
x[@z =“v”] [i] ：表示属性 z 的值为“v”的元素 x，在所有兄弟节点中取第 i 个元素
But more concise syntax can also be used(但也可以使用更简洁的语法)：

x 完全等同于 //x（在任何深度级别搜索标签 x） 只要属性参数设置规范，选择器也可以不加元素名称 / 引⽤。所以 [@class ='oneclass'] 也是⼀个有效的选择器，⽤于查找具有值为 “oneclass” 的类属性的任何元素（标签）。

----------公共页面-------------
<!--定义公共的头部，commonHeader 为模板片段名称-->
<header th:fragment="commonHeader">
    <h2>护龙山庄</h2>
</header>
 
----------引用页面----直接根据标签名称进行选择---------
<header th:replace="commons/commons::header"></header>
高级属性选择功能
Advanced attribute selection features:
  • 1）除了上面使用到的 "="(等于)以外 ，还可以使用其他⽐较运算符如 "!="(不等于)，"^="(以什么开始)，"$="(以什么结尾)。使用过 JQuery 的就知道这些选择器完全与 JQuery 同理。

例如：x[@class ^='section'] 表示 class 属性值以 section 开头的元素 x。

  • 2）属性参数中的 "@" 符可写可不写，@ 是 XPath 风格的写法，不写 @ 是 JQuery 风格的写法，Thymeleaf 两者都支持，所以如下两句完全等价：

x[@z='v']   等价   x[z='v']

  • 3）多属性修饰符 "[...]" 可以使用 "and" 连接多个属性(XPath 风格)，也可以直接使用多个修饰符 "[...]"(JQuery风格)，如下所示完全等价：

x[@z1='v1' and @z2='v2']     //纯 XPath 风格

x[@z1='v1'][@z2='v2']     //XPath 风格+JQuery风格

x[z1='v1' and z2='v2']     //XPath 风格+JQuery风格

x[z1='v1'][z2='v2']     //纯 JQuery分隔

----------------公共页面------------------------
<!--定义公共的头部，commonHeader 为模板片段名称-->
<header th:fragment="commonHeader" name="commonH">
    <h2>护龙山庄2</h2>
</header>
 
----------------引用页面------------------------
<header th:replace="commons/commons::header[name='commonH']"></header>
//纯粹为了演示，实际应用中不会这么多此一举
jQuery式选择器
Direct jQuery-like selectors:

  • 1）x.oneclass 等价于 x[class='oneclass']

  • 2）.oneclass 等价于 [class='oneclass']

  • 3）x#oneid 等价于 x[id='oneid']

  • 4）#oneid 等价于 [id='oneid']

  • 5）x％oneref 表示具有 th:ref =“oneref” 或 th:fragment =“oneref” 属性的 <x> 标签

  • 6）％oneref 表示具有 th:ref =“oneref” 或 th:fragment =“oneref” 属性的任何标签，注意，这实际上等同于简单的oneref，因为可以使⽤引⽤⽽不是元素名称

  • 7）直接选择器和属性选择器可以混合使⽤：a.external[@href ^='https']

-------------公共页面-------------------------
<!--定义公共的头部，commonHeader 为模板片段名称-->
<header th:fragment="commonHeader">
    <h2>护龙山庄3</h2>
</header>
 
-------------引用页面-------------------------
<!--定义公共的头部，commonHeader 为模板片段名称-->
<header th:replace="commons/commons::%commonHeader"></header>
//实际中通常不会多此一举加上 %，而是直接省略如下
<header th:replace="commons/commons::commonHeader"></header>

多值类匹配 标记选择器将类属性理解为多值，因此即使该元素具有多个类值，也允许在该属性上应⽤选择器。 例如，div.two 将匹配上 <div class =“one two three”/> 标签。即只要元素包含了 two 类属性值，则都会匹配上。

----------------------公共页面------------------------
<!--定义公共的头部，commonHeader 为模板片段名称-->
<header th:fragment="commonHeader" class="one tow three">
    <h2>护龙山庄0</h2>
</header>
 
----------------------引用页面------------------------
<header th:replace="commons/commons::[class='tow']"></header>