Как добавить код jQuery в HTML-страницу

$(".icon-bg").click(function () {
    $(".btn").toggleClass("active");
    $(".icon-bg").toggleClass("active");
    $(".container").toggleClass("active");
    $(".box-upload").toggleClass("active");
    $(".box-caption").toggleClass("active");
    $(".box-tags").toggleClass("active");
    $(".private").toggleClass("active");
    $(".set-time-limit").toggleClass("active");
    $(".button").toggleClass("active");
});

$(".button").click(function () {
    $(".button-overlay").toggleClass("active");
});

$(".iconmelon").click(function () {
    $(".box-upload-ing").toggleClass("active");
    $(".iconmelon-loaded").toggleClass("active");
});

$(".private").click(function () {
    $(".private-overlay").addClass("active");
    $(".private-overlay-wave").addClass("active");
});

ОТВЕТЫ

Ответ 1

1) Лучшей практикой является создание нового файла javascript, такого как my.js. Сделайте этот файл в папке js в корневом каталоге → js/my.js. 2) В файле my.js добавьте свой код внутри области $(document).ready(function() {}).

$(document).ready(function(){
    $(".icon-bg").click(function () {
        $(".btn").toggleClass("active");
        $(".icon-bg").toggleClass("active");
        $(".container").toggleClass("active");
        $(".box-upload").toggleClass("active");
        $(".box-caption").toggleClass("active");
        $(".box-tags").toggleClass("active");
        $(".private").toggleClass("active");
        $(".set-time-limit").toggleClass("active");
        $(".button").toggleClass("active");
    });

    $(".button").click(function () {
        $(".button-overlay").toggleClass("active");
    });

    $(".iconmelon").click(function () {
        $(".box-upload-ing").toggleClass("active");
        $(".iconmelon-loaded").toggleClass("active");
    });

    $(".private").click(function () {
        $(".private-overlay").addClass("active");
        $(".private-overlay-wave").addClass("active");
    });
});

3) добавьте новый js файл в свой html

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
</head>

Ответ 2

Перед закрывающим тегом body добавьте это (ссылка на библиотеку jQuery). Другие размещенные библиотеки можно найти здесь

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

И это

<script>
  //paste your code here
</script>

Это должно выглядеть примерно так

<body>
 ........
 ........
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script> Your code </script>
</body>

Ответ 3

Я бы порекомендовал назвать скрипт так

...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/js/my.js"></script>
</body>

Файлы js и css должны обрабатываться по-разному

Поместите jquery как первый перед другими JS scripts внизу <BODY>

  • Проблема заключается в том, что они блокируют параллельные загрузки. Спецификация HTTP/1.1 specification предполагает, что браузеры загружают не более двух компонентов параллельно для каждого имени хоста.
  • Поэтому выберите 2 (два) наиболее важных сценария на своей странице, например аналитический и пиксельный сценарий для тегов <head> и позвольте остальным, включая jquery вызываться в нижнем <body>.

Поместите CSS style поверх <HEAD> после других более приоритетных тегов

  • Перемещение таблиц стилей в документ HEAD заставляет страницы загружаться быстрее. Это связано с тем, что размещение таблиц стилей в HEAD позволяет странице отображаться постепенно.
  • Поэтому для листов css лучше поместить их все в <head> но позвольте стилю, который должен быть немедленно отображен, помещаться в теги <style> внутри <HEAD> а остальные - в <body>.

Вы также можете найти другое предложение при тестировании своей страницы, как в Google PageSpeed Insight

Ответ 4

  • Создайте файл для jquery, например uploadfuntion.js.
  • Сохраните этот файл в той же папке, что и веб-сайт или в подпапке.
  • В разделе head вашего паттерна html-страницы: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

а затем ссылку на ваш script например: <script src="uploadfuntion.js"> </script>

4.Необходимо убедиться, что в коде есть элементы, соответствующие селекторам.

Ответ 5

для последней Jquery. Просто:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>