10）Thymeleaf 标记选择器语法

川长思鸟来 2022-04-11 03:55 280阅读 0赞

**目录**

标记选择器语法

基本语法使用

高级属性选择功能

jQuery式选择器

多值类匹配

--------------------

# 标记选择器语法    #

官网地址：[https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html\#appendix-c-dom-selector-syntax][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:

1.  /x ：表示名为 x 的当前节点的直接⼦节点。
2.  //x ：表示任何深度的名为 x 的当前节点的⼦节点。
3.  x\[@z=“v”\] ：表示属性 z 的值为 “v”的节点 x
4.  x\[@z1="v1" and @z2="v2"\] ：表示属性 z1 的值为 "V1"，且属性 z2 的值为“v2”的节点 x
5.  x\[i\] ：表示元素 x 位于其同辈元素之中的第 i 个元素
6.  x\[@z =“v”\] \[i\] ：表示属性 z 的值为“v”的元素 x，在所有兄弟节点中取第 i 个元素

But more concise syntax can also be used(但也可以使用更简洁的语法)：

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

----------公共页面-------------
    
    <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分隔

----------------公共页面------------------------
    
    <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'\]**

-------------公共页面-------------------------
    
    <header th:fragment="commonHeader">
        <h2>护龙山庄3</h2>
    </header>
    
    -------------引用页面-------------------------
    
    <header th:replace="commons/commons::%commonHeader"></header>
    //实际中通常不会多此一举加上 %，而是直接省略如下
    <header th:replace="commons/commons::commonHeader"></header>

# 多值类匹配 #

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

----------------------公共页面------------------------
    
    <header th:fragment="commonHeader" class="one tow three">
        <h2>护龙山庄0</h2>
    </header>
    
    ----------------------引用页面------------------------
    <header th:replace="commons/commons::[class='tow']"></header>

[https_www.thymeleaf.org_doc_tutorials_2.1_usingthymeleaf.html_appendix-c-dom-selector-syntax]: https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#appendix-c-dom-selector-syntax