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

【问题标题】：How to copy and apply code from a live demo?如何从现场演示中复制和应用代码？
【发布时间】：2020-04-25 19:40:25
【问题描述】：

我最近开始接触编码，有一个问题我经常遇到。那就是我试图从现场演示中复制代码时，例如：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>

【问题讨论】：

如何在 HTML 中放置 JavaScript 代码？您收到任何错误消息吗？
我无法重现您的问题。您可以为此创建一个small demo，看看您是否可以在那里重现该问题？你能详细说明你尝试或做过的事情吗？
它对我来说很好用。你的实际问题是什么？如果您在查看keyup 的结果时遇到问题，您应该比以前更好地了解开发工具
您不应该看到脚本代码。具体代码，在控制台中输出一些文本。因此，您需要在浏览器中打开开发者控制台，您会在输入时看到那里的消息。见javascript.info/devtools
我认为您将开发人员工具与网站本身混淆了。控制台是你用来开发和诊断代码的东西。要向用户显示内容，您需要使用 HTML 创建用户界面。

标签： javascript jquery jsfiddle codepen

【解决方案1】：

所以让我一步一步来。

我假设您知道代码的其余部分是如何工作的。所以我只关注你提供的script标签。

这里是：

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

让我们逐行进入：

第 1 行： 它包含三个不同的部分，其中第一个是 $ 符号，用于定义/访问 jQuery（在这种情况下，我们'正在访问 DOM 中的某些内容）。第二部分是“查询（或查找）”HTML 元素的选择器（在本例中，我们将查找名称为 input 的 HTML 标记）。最后，第三部分包括要在元素上执行的 jQuery action()，这是一个 keyup 操作（当用户在键盘上释放一个键时，keyup 事件被发送到一个元素，有关它的更多信息你可以阅读this)。此外，我们应该在我们的 keyup 操作中执行一些操作，因此我们需要向其中添加一个函数，就像您提供的代码一样。
第 2 行： 在提供的函数中，我们执行了一些操作，因此在这一行中，我们正在做两件事。首先是使用这段代码$(this).val() 获取查询的元素值，其中第一部分是访问this 元素，在我们的例子中这是实际的input（但我强烈建议阅读more about this here) 下面我们用val()获取它的值（val()方法主要用于获取@987654336等表单元素的值@、select 和 textarea。当在空集合上调用时，它返回 undefined。）。在等式的另一边，我们得到var tvalue（var 是声明函数作用域或全局作用域变量的语句，所以我们在这里得到函数作用域变量tvalue）它将是@987654343 @ 因为我们等式的右边被求值了，所以它将填充我们输入的实际值。
第 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 事件。

【讨论】：

非常感谢您详细解释@SMAKKS。我现在一切都清楚了:)
@TheAuthor 如果您有任何其他问题，请告诉我。