Question

用于在jQuery中查找输入框值的example如下所示。

<!DOCTYPE html>
<html>
<head>
  <style>

  p { color:blue; margin:8px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <input type="text" value="some text"/>
  <p></p>
<script>
    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();
</script>
</body>
</html>

我有两个问题。

为什么脚本在体内？（我尝试将它放在头部标签之间，不工作）。
为什么有两种不同的keyup（）方法，一种是在$（“input”）之后，另一种是在函数之后？

Answer 1

如果您希望它在头脑中运行，您应该使用.ready()或.load()（通常是.ready()）
第二个.keyup()触发事件

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:blue; margin:8px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();
});
</script>
</head>
<body>
  <input type="text" value="some text"/>
  <p></p>
</body>
</html>

http://jsfiddle.net/eqfbY/

准备等待，直到DOM准备好被解析。否则，您正在运行的是按照解析顺序运行的内联脚本。

注意，ready()的简写版本是：

$(function(){
    $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();
});

Answer 2

脚本在头部不起作用，因为当脚本在头部执行时，$("input")尚不存在。

第二个keyup()会触发keyup()事件，但keyup事件无需绑定。

Answer 3

它仅适用于正文的末尾，因为它不在onload / ready事件处理程序中，因此必须在创建标记后执行。顺便说一句，这是错误的做法。
第一个keyup调用向事件处理程序队列添加一个处理程序，第二个执行所有处理程序（因此在这种情况下，一旦加载页面就会得到一个很好的值，而不必先输入内容。）

Answer 4

您的脚本应该包含以下内容：

$(function(){

});

如果您在确定构建DOM之前立即开始使用DOM，您将开始引用尚不存在的元素。把它放在这个函数中是jquery的简写，用于在DOM准备好后执行它。

Answer 5

@robbrit

为什么剧本在体内？（我尝试将它放在头部标签之间，但不起作用）。

Chrome在JS w.r.t函数中有一种不同的处理方式，特别是当你使用jQuery标签或类似的东西使用多个服务器页面时。因此，必须在body标签内定义javascript才能工作。其他浏览器不应该这样。

为什么有两种不同的keyup（）方法，一种是在$（“input”）之后，另一种是在函数之后？

每次调用浏览器时，该函数都会自动执行'keyUp'。第一个关键是指定当Input已经被keyUpped时要做什么，第二个是做keyUp函数。

输入框的val（）的jQuery示例

5 个答案: