springboot中引入jquery无效

最新推荐文章于 2023-02-09 10:59:02 发布

qq_37866023

最新推荐文章于 2023-02-09 10:59:02 发布

阅读量2.4k

点赞数 2

分类专栏： springboot 文章标签： spring

本文链接：https://blog.csdn.net/qq_37866023/article/details/123642469

版权

springboot 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

公式：$（selector）.action()

相关网址
https://jquery.cuishifeng.cn/
jQuery.com
https://www.w3school.com.cn/jquery/jquery_install.asp

spring boot引入jquery时可以通过：

1、本地引用

//放在static/js下
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

2、cdn

<script th:src="@{https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js}"></script>

3、使用thymeleaf引用

<script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>

4、导包

<!-- jquery-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.5.1</version>
        </dependency>
<script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>

踩坑：
springboot中写script脚本无效，原因如下

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                $("p").css("background-color","red");
            });
            $("#alll").click(function (){
                alert("helloworld");
            });
        });
    </script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
<a id="alll" href="">sdsd</a>
</body>
</html>

记得要加 $(document).ready(function(){}）；
不然没效果。
还有，<script>引用尽量在<script>脚本之前，不然会找不到"$"符号

qq_37866023

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
springboot中引入jquery无效

公式：$（selector）.action()相关网址https://jquery.cuishifeng.cn/jQuery.comhttps://www.w3school.com.cn/jquery/jquery_install.aspspring boot引入jquery时可以通过：1、本地引用//放在static/js下<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script&gt
复制链接

扫一扫