如何从现场演示中复制和应用代码？

Question

我最近开始编码，有一个问题我遇到了很多时间。那就是当我试图从现场演示中复制代码时，例如：https://www.w3resource.com/jquery-exercises/part1/jquery-practical-exercise-17.php

各种组合我都试过了，还是不行。我复制了所有提供的文本，但是，为什么它不起作用？请帮助我理解如何做到这一点，因为有很多很棒的代码我会尝试，但如果它来自现场演示，比如有一些隐藏代码没有出现在代码中，就无法使它工作。

我是这样尝试的：

<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>How to get the value of a textbox using jQuery</title>
</head>
<body>
<input type="text" value="Input text here">
</body>

<script>
$( "input" )
  .keyup(function() {
    var tvalue = $( this ).val();
    console.log(tvalue);
  })
.keyup();
</script>

</html>

Answer 1

那么让我一步一步来吧。

我假设您知道其余代码的工作原理。所以我将只关注您提供的 script 标签。

这里是：

1 $("input").keyup(function() {
2    var tvalue = $(this).val();
3    console.log(tvalue);
4  }).keyup();

让我们逐行进入：

第 1 行： 它包含三个不同的部分，第一个部分是 $ 标志 define/access jQuery（在本例中，我们正在访问 DOM 中的内容）。第二部分是 "query (or find)" HTML 元素的选择器（在本例中，我们将找到名称为 input 的 HTML 标签）。最后，第三部分包括要在元素上执行的 jQuery action()，这是一个 keyup 操作（当用户释放键盘上的键时，keyup 事件被发送到元素，有关它的更多信息，您可以阅读 this）。此外，我们应该在 keyup 操作中执行一些操作，因此我们需要向其中添加一个函数，就像您提供的代码一样。
第 2 行： 在提供的函数中我们得到了一些动作，所以在这一行中我们做了两件事。首先是使用这段代码 获取查询的元素值 $(this).val() 其中第一部分访问 this 元素，这是实际的 input在我们的例子中（但我强烈建议阅读更多关于 this here） 并且在下面我们得到它的值 和 val() （ val()方法主要用于获取input、select、textarea等表单元素的值，在空集合上调用时，returnsundefined.).在等式的另一边，我们得到 var tvalue （var 是一个声明函数作用域或全局作用域变量的语句，所以我们在这里得到函数作用域变量 tvalue）它将是undefined，因为我们的等式右侧被评估，然后它将填充我们输入的实际值。
第 3 行： 这是我们在此处获得的所有代码中令人惊叹的部分 console.log(tvalue)，console 本身不是 javascript 特性、函数或其他任何东西 ，（我们在某些地方看到它将作为 javascript 中的函数引入，但它确实不是）是浏览器API提供给javascript和浏览器进行通信。所以每个浏览器都有一个控制台供你使用，当你调用这样的东西时，它只能在你的浏览器开发工具控制台或一些奇怪的地方找到，比如 IDE 终端（实际上当你使用 SSR 时，你会发现日志进入 IDE 终端）。正如@Gabriele Petrioli 所说，您可以在 link 中阅读访问不同浏览器控制台的说明。因此，无论何时调用它，您都应该主要在浏览器控制台中查找结果。

注意： console 对象可以从任何全局对象访问。 Window 浏览范围和 WorkerGlobalScope 作为工作人员中的特定变体，通过属性控制台。它公开为 Window.console，可以简单地引用为 console。您可以阅读更多关于控制台 here.
第 4 行： 它与之前的 keyup 完全相同，但它会在第一个事件中触发 keyup 事件时间.

如何从现场演示中复制和应用代码？

How to copy and apply code from a live demo?

javascript

jquery

jsfiddle

codepen