如何将 jQuery 添加到 html

Question

我试过这个：

<script src="js/jQuery.js"type="text/JavaScript"></script>

然后我尝试在我的按钮上单击 function：

<script>
  $(document).ready(function (){
    function jfn1(){
      $("jbtn").fadetoggle()
    }
  })
</script>

Answer 1

我不确定您要实现什么，但是使用下面的代码，单击带有 class 'jbtn' 的按钮将使其淡出。

 $(document).ready(function (){ $('.jbtn').click(function() { $( this ).fadeToggle(); }); })

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <button class="jbtn">Hey!</button>

Answer 2

欢迎来到 StackOverflow，Chisom。

你所做的只是定义 function，你实际上并没有调用它。 它还需要是“ fadeToggle ”，而不是“ fadetoggle ”。

  /**
   * Define function to fade button in/out
   */
  function jfn1 () {
    $("jbtn").fadeToggle() // "fadeToggle", not "fadetoggle"
  }

  /**
   * On document ready (DOM loaded)
   */
  $(document).ready(function (){
    // Call function on document ready
    jfn1()
  })

这将在加载 DOM 树时调用“fadeToggle”。 如果您想在单击时调用它，它需要如下所示：

  /**
   * On document ready (DOM loaded)
   */
  $(document).ready(function (){
    // On button clicked
    $("jbtn").click(function () {
      // "this" is the function context
      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
      $(this).fadeToggle()  
    });
  })

此外$("jbtn")只会找到看起来像这样的 HTML 元素： <jtbn>...</jtbn> 。 如果您想引用 class ( <HTML_ELEMENT class="jtbn"></HTML_ELEMENT>... )，您应该在其前面加上一个点，如下所示： $(".jbtn") 。

祝你好运！