标记选择器语法

官网地址：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>

10）Thymeleaf 标记选择器语法相关推荐

thymeleaf模板的使用——1，thymeleaf概述|| thymeleaf 的使用方法|| 如何修改Thymeleaf的默认存放地址||Thymeleaf的相关语法
thymeleaf模板的使用 1,thymeleaf概述简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎 ...
CSS样式----标记选择器
一,概念 CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页信息内容分离的一种标记性语言. 二,标记选择器 <style> ...
使用选择器语法查找元素——Selector选择器概述 ——未完待续
使用选择器语法查找元素 jsoup elements对象支持类似于CSS (或jquery)的选择器语法,来实现非常强大和灵活的查找功能. select 方法在Document, Element,或E ...
css 标记选择器,CSS标记选择器
在CSS的3个基本构成中,"对象"是最为重要的,它指定了对哪些网页元素进行设置,在CSS中它有个专有名词:选择器. 选择器是CSS中极为重要的一个概念和思想,所有页面元素都是通过不 ...
[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法...
[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法将画布(canvas)图像保存成本地图片的方法使用HT ...
JQuery选择器语法
JQuery选择器语法: 一.什么是选择器语法: 1.就是DOM对象进行定位的条件,比如根据ID定位,根据标签类型名. 2.jquery中只有三种选择器二.基本选择器: 1.[定位条件]:可以根据I ...
jQueryDom和源生DOM相互的转换、jQuery选择器语法、JQuery层次选择器语法、jQuery属性选择器语法、jQuery伪类选择器语法、
jQuery和源生DOM的转化案例 <body> <p id="test">123</p> <p>456</p> &l ...
thymeleaf中的/*[[@{})}]]*/语法
最近在写折腾李仁密老师个人博客的时候遇到的坑点分享一下在写动态替换评论模块的js的时候发现load请求一直没有发送 ``` $(function () { $("#comment-co ...
python爬虫：scrapy框架xpath和css选择器语法
Xpath基本语法一.常用的路径表达式: 表达式描述实例 nodename 选取nodename节点的所有子节点 //div / 从根节点选取 /div // 选取所有的节点,不考虑他们的位置 ...
前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...

10）Thymeleaf 标记选择器语法