jquery动画click没有反应

问题遇到的现象和发生背景

代码别人运行没有问题，我自己运行不知道为什么click毫无反应，不知道哪里有问题。
是在这之前需要做什么配置才会出现动画的效果吗？

用代码块功能插入代码，请勿粘贴截图
html>
<html>

<head>
    <title>Showing and Hiding Elementstitle>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src= "https://code.jquery.com/ui/1.10.4/jquery-ui.js">script>

    <script type="text/javascript">
        $(function() {
            $("#show").click(function() {
                $("#theDiv").show(2000,"swing",function(){
                $(this).text("hello")
                $("#theDiv").hide(1000,function(){
                    $("#theDiv").show(1000,function(){
                        $(this).text("Hello")
                    })
                })
            })
            });
            $("#hide").click(function() {
                $("#theDiv").hide(200,function(){
                    $(".abc").text("hide")
                })
            });
            $("#toggle").click(function() {
                $("#theDiv").toggle("slow",completion);
               
            });
        });
       function completion(){
        $(this).text("Animation complete");}
    script>
    <style type="text/css">
        p,
        span {
            font-size: 16pt;
        }
        
        button {
            margin: 5pt 5pt 0 0;
        }
    style>
head>

<body>
    <h1>Using the show and hide effectsh1>
    <div id="content">

        <p>How r u.p>
        <ul>
            <li><code>show()code>: Reveals the matched elements using an optional animationli>
            <li><code>hide()code>: Hides the matched elements using an optional animationli>
            <li><code>toggle()code>: Toggles the visible state of the matched elements using an optional animationli>
        ul>
        <div id="theDiv" class="box">
        div>
        <button id="show">Showbutton>
        <button id="hide">Hidebutton>
        <button id="toggle">Togglebutton>
    div>
    <div class="abc">abcdiv>
body>

html>
运行结果及报错内容

img

我想要达到的结果

成功做出动画效果，可以hide也可以show

复制你的代码然后看了下，报错如下，错误原因你要引入jQuery包啊！你这个引入的ui包，应该加上这行代码
补充：第一行报错是因为我这里没你的css文件，所以没有样式

  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

img

完整代码如下

<!DOCTYPE html>
<html>

<head>
  <title>Showing and Hiding Elements</title>
  <link rel="stylesheet" href="style.css" />
  <!-- <script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#show").click(function () {
        $("#theDiv").show(2000, "swing", function () {
          $(this).text("hello")
          $("#theDiv").hide(1000, function () {
            $("#theDiv").show(1000, function () {
              $(this).text("Hello")
            })
          })
        })
      });
      $("#hide").click(function () {
        $("#theDiv").hide(200, function () {
          $(".abc").text("hide")
        })
      });
      $("#toggle").click(function () {
        $("#theDiv").toggle("slow", completion);

      });
    });

    function completion() {
      $(this).text("Animation complete");
    }
  </script>
  <style type="text/css">
    p,
    span {
      font-size: 16pt;
    }

    button {
      margin: 5pt 5pt 0 0;
    }
  </style>
</head>

<body>
  <h1>Using the show and hide effects</h1>
  <div id="content">

    <p>How r u.</p>
    <ul>
      <li><code>show()</code>: Reveals the matched elements using an optional animation</li>
      <li><code>hide()</code>: Hides the matched elements using an optional animation</li>
      <li><code>toggle()</code>: Toggles the visible state of the matched elements using an optional animation</li>
    </ul>
    <div id="theDiv" class="box">
    </div>
    <button id="show">Show</button>
    <button id="hide">Hide</button>
    <button id="toggle">Toggle</button>
  </div>
  <div class="abc">abc</div>
</body>

</html>

没引入jq库