Question

我是Javascript的新手，我正在尝试测试以下代码

<html>
  <head>
  <script src="jquery/jquery.min.js">
  </head>
<body>
  <input type="button" value="Click button">
  <script type="text/javascript">
  $(function(){
    $('input')[0].on('click',function(){
      alert('button clicked');
    });  
   });
  </script>
</body>
</html>

但是当我在浏览器中打开这个html文件时，按钮不会显示

Answer 1

脚本标记需要一个结束标记，您已将其省略：

<script src="jquery/jquery.min.js"></script>
                                   ^ close

通过将其保持打开状态，浏览器会将脚本标记后的所有内容视为脚本内容。

您的$('input')[0]也不对。这是获取输入的DOM元素，它没有jQuery包装器，也没有.on()函数。如果您只想匹配第一个输入，那么：

$('input').first().on('click',function(){

Answer 2

问题

必须关闭您错过的脚本块。
使用$('input')代替$('input')[0]，当您使用$('input')[0]时，您会获得没有点击方法的DOM元素。

使用

<html>
  <head>
  <script src="jquery/jquery.min.js"></script>
  </head>
<body>
  <input type="button" value="Click button">
  <script type="text/javascript">
  $(function(){
    $('input').on('click',function(){
      alert('button clicked');
    });  
   });
  </script>
</body>
</html>

Answer 3

为了避免这种混淆，请尝试分开如下，

在HTML中：

<html>
  <head>
  <script src="jquery/jquery.min.js"></script>
  <script src="main.js"></script>
  </head>
 <body>
   <input type="button" value="Click button">
 </body>
</html>

在main.js

中

$(function(){ $('input').on('click',function(){ alert('button clicked'); }); });

Demo

Answer 4

继续开发时，添加<!DOCTYPE html>会更好。

DOM元素不显示

4 个答案: