Question

这是html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="hello.js"></script>
    <title>Title</title>
</head>
<body>
  <form action="#">
    <p>Name:<input type="text"/></p>
    <p>Password:<input type="text"/></p>
    <p><input id= "newsletter_button"type="button" value="CLICK ME"/></p>

  </form>

</body>
</html>

这是JavaScript：

$(":text").focusin(function () {
  $(this).css("background-color", "red");
});
$(":text").blur(function() {
  $(this).css("background-color", "#fff");
});

hello.js和index.html在同一个文件中。我认为jQuery存在一些问题。

Answer 1

将你的hello.js放在</body>之前的末尾或用

包装

$(document).ready(function(){
$(":text").focusin(function () {
  $(this).css("background-color", "red");
});
$(":text").blur(function() {
  $(this).css("background-color", "#fff");
});
});

它的作用是在加载完整页面后执行代码。否则，如果你把它放在＆＃34;：text＆＃34;之前加载DOM对象时会遇到DOM对象未定义的错误。

你还有一个标记错误

<p><input id= "newsletter_button"type="button" value="CLICK ME"/></p>

在键入之前放置一个空格：

<p><input id= "newsletter_button" type="button" value="CLICK ME"/></p>

我的JavaScript无效

1 个答案: