Как скопировать и применить код из живого демо? - PullRequest
Новая
       39

Как скопировать и применить код из живого демо?

3 голосов
/ 25 апреля 2020

Я недавно увлекся кодированием, и с этой проблемой я сталкиваюсь много раз. И именно тогда я пытаюсь скопировать код из живого демо, такого как это: 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>

1 Ответ

1 голос
/ 25 апреля 2020

Итак, позвольте мне go войти в него шаг за шагом.

Я полагаю, вы знаете, как работает остальной код Поэтому я сосредоточусь только на предоставленном вами теге script.

Вот оно: 

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

Давайте разберемся в нем строка за строкой:

  • строка 1: Содержит три разные части, первая из которых - $ знак, где она существует для определение / доступ jQuery (в этом случае мы доступ к чему-то в DOM). Вторая часть - это селектор для «запроса (или поиска)» HTML элементов (в этом случае мы собираемся найти тег HTML с именем input). Наконец, третья часть состоит из действия jQuery (), выполняемого над элементом, которое является действием keyup (событие keyup отправляется элементу, когда пользователь отпускает клавишу на клавиатуре, для получения дополнительной информации о это вы можете прочитать это ). Кроме того, мы должны действовать как-то в нашем действии keyup, поэтому нам нужно добавить в него функцию точно так же, как предоставленный вами код.

  • строка 2: В пределах предоставленного Функция у нас есть некоторые действия, поэтому в этой точной строке мы делаем две вещи. Во-первых, получить запрашиваемое значение элемента с этим фрагментом кода $(this).val(), где первая часть обращается к элементу this, который в нашем случае является действительным input (но я настоятельно рекомендую прочитать подробнее о this здесь ) и далее мы получаем его значение с val() (метод val() в основном используется для получения значений элементов формы, таких как input, select и textarea. При вызове пустой коллекции возвращается undefined.). В другой части уравнения мы получили var tvalue (var - оператор, который объявляет переменную в области функций или глобально, поэтому мы получили переменную в области функций tvalue здесь), где она будет undefined поскольку вычисляется правая часть нашего уравнения, то заполняется фактическим значением нашего ввода .

  • строка 3: Это удивительная часть всего кода, который мы получили здесь console.log(tvalue), console сам по себе не является javascript функцией, функцией или чем-то еще , (где мы видели некоторые места, которые он представит это как функция в javascript, но это действительно не так) это API-интерфейс браузера , предоставляющий javascript и браузер для связи. Таким образом, у каждого браузера есть консоль, которую вы можете использовать, когда вы вызываете такую ​​вещь, она будет доступна только в консоли инструментов разработчика вашего браузера или в каком-то странном месте, например, в терминале IDE (фактически, когда вы используете SSR, вы найдете журнал в терминале IDE. ). Поэтому, как сказал @Gabriele Petrioli, вы можете прочитать инструкцию для доступа к консоли различных браузеров по этой ссылке . Поэтому всякий раз, когда вы вызываете его, вы должны искать результаты в основном в консоли браузера.

    ПРИМЕЧАНИЕ: К объекту console можно получить доступ из любого глобального объекта. Window при просмотре областей и WorkerGlobalScope как указано c вариантов в рабочих через консоль свойств. Он отображается как Window.console, и на него можно ссылаться просто console. Вы можете узнать больше о консоли здесь .

  • строка 4: Она точно такая же, как и предыдущая keyup, но она вызовет keyup событие в самый первый раз.

...