thymeleaf引用javascript

常用标签介绍：

1.简单好理解的几个标签：

关键字	功能	案例
th:id	替换id	<input th:id=" 'xx' + ${user.id}">
th:object	替换对象常用于配合星号表达式	<div th:object="${user}"/>
th:value	属性赋值，替换value	<input th:value="${user.name}"
th:style	替换style设置样式	<input type="text" th:style=" 'background:' + 'red' "/>
th:if	判断为true显示，反之	<div th:if="1==2">1不等于2，文字不显示</div>
th:unless	判断为false显示，反之	<div th:unless="1==2">1不等于2，文字显示</div>
th:href	链接地址	<a th:hred="@{/login}"/>
th:selected	判断为true选中选择框，反之	<option th:selected="${name}==${getName}">
th:src	图片类地址引入	<img th:src="@{/img/logo.jpg}"/>
th:remove	删除属性	<tr th:remove="all">1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。
th:inline	定义js脚本可以使用变量	<script type="text/javascript" th:inline="javascript">

2. th:text和th:utext。

th:text标签用于替换文本，th:utext也使用来替换文本，但是它会解析其中的html代码。例如：

页面效果：

3. th:onclick标签

该标签常用于触发js的方法，但是在thymeleaf中想要传参数使用变量表达式就必须只能在th标签中，所以在需要传参时用th:onclick比原生的onclick要更简单方便。

先定义两个js方法
        function test(msg) {
            alert(msg)
        }
        function test2() {
            alert(2)
        }

在下面的代码中调用的是无参的test2方法：

<input type="button" th:onclick=" 'javascript:test2()' " value="测试2">

1. 在双引号中先打入单引号 th:onclick=" ' ' "
2. 接着输入JavaScript : 方法名。th:onclick=" ' JavaScript:test() ' "

然后是带参数的写法：

<input type="button" th:onclick=" 'javascript:test(\''+${name}+'\')' " value="测试">

1. th:onclick=" ' JavaScript:test() ' "加入参数时需要加入\转义字符表示出参数是加在外层单引号中的。 'javascript:test(\''+${name}+'\')'

4. th:with标签

该标签用于定义局部变量例如：

<div th:with="name2=${name}">
    <h1 th:text="${name2}"></h1>
</div>

注意定义的name2局部变量只能在定义的div块中使用

5. th:each标签：

该标签常用于迭代数组，集合等。

<div th:each="res,iter:${list}">
    <h1 th:text="${res}"></h1>
</div>

res为迭代结果，iter为下标对象，${list}为集合。

下标对象使用方法：

<div th:each="res,iter:${list}">
    <h1 th:text="${iter.count}"></h1>
</div>

下标对象中的字段有：

1. index，当前迭代的索引，从0开始
2. count，当前迭代的索引，从1开始
3. size，总迭代次数
4. current，同res，是当前迭代的值
5. even/odd，判断当前迭代的是奇数还是偶数，布尔属性
6. first/last，判断是不是第一个或者是最后一个，布尔属性

6. th:switch标签

需要配合th:case，和Java中的switch用法相同。

<div th:switch="1">
    <h1 th:case="1">1</h1>
    <h1 th:case="2">2</h1>
    <h1 th:case="3">3</h1>
</div>

当case中的值和switch中的相同时显示，栗子中显示为1

7. th:fragment标签和th:insert，th:replace，th:include标签

在常常会用到的标签中添加配置th:fragment后即可在其他位置调用。
例如：在template/test文件夹下创建一个fragment.html文件代码如下：

<footer th:fragment="copy">
   <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
</footer>

接着在其他文件中进行导入，可以使用三个标签：

th:insert ：保留自己的主标签，保留th:fragment的主标签。
th:replace：不要自己的主标签，保留th:fragment的主标签。
th:include ：保留自己的主标签，不要th:fragment的主标签。

导入代码：
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>

结果：
<div>
    <footer>
       <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
    </footer>  
</div>  
 
<footer>
  <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
</footer>  
 
<div>
  <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
</div>

8.内联语法

1. 文本内联： th:inline=“text”

<p th:inline="text"> [[${name}]]</p>

2. JavaScript脚本内联： th:inline=“javascript”

<script  th:inline="javascript">

/*<![CDATA[*/
    ...
    var name = [[${name}]];
    ...
/*]]>*/

alert(name);

</script>