Как использовать jQuery в HTML

jQuery - это быстрая и простая библиотека JavaScript, которая может упростить процесс запроса объектов DOM, обработки событий, создания анимации и обработки Ajax запросов. Использование jQuery поможет вам изменить подход к написанию кода JavaScript. Если вам нужно 20 строк кода на JavaScript для запуска функции, jQuery потребуется всего 5 строк, чтобы упростить задачу. Этот пример расскажет вам, как использовать jQuery на html-странице.

1. Установите jQuery на HTML-страницу.

Перед его использованием вам сначала необходимо установить библиотеку jQuery на свою html-страницу. Это очень просто, следуя инструкциям ниже.

Загрузите js-файл библиотеки jQuery со страницы http://jquery.com/download/. Просто щелкните ссылку для загрузки правой кнопкой мыши и выберите пункт меню «Сохранить ссылку как» во всплывающем меню и скачать js файл библиотеки jQuery на свой ПК.

Затем сохраните файл загрузки в локальном каталоге. Я просто сохраняю его в папке lib моего проекта jQuery.

Если вы хотите использовать jQuery js lib на своей html-странице, вам просто нужно создать html-файл и добавить код ниже в разделе заголовка, чтобы включить его.

 

Выше просто включите локальную версию библиотеки jQuery. Вы также можете включить предоставленную Google онлайн-версию библиотеки jQuery, которая может сделать процесс включения js более быстрым и стабильным. И может снизить нагрузку на канал передачи данных вашего сайта. Это рекмонедуемый метод подключения.

 

Теперь вы успешно установили jQuery lib на html-страницу. Вы можете использовать множество функций, представленных на вашей html-странице.

2. Пример jQuery.

Рассмотри два примера использования библиотеки при создании html-страниц

2.1 Пример уведомления jQuery Hello World.

В этом примере будет показано предупреждение, когда документ будет загружен, и отобразится кнопка. Когда вы нажимаете кнопку, появляется всплывающий исходный текст кнопки и устанавливается новый текст для кнопки, а также изменяется текст кнопки и цвет фона.

hello-world-alert.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery Hello World Example</title>
    <script type="text/javascript" src="./lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        /*  jQuery function is the entrance function that jQuery execute.
        *
        *   Below code means when the html document load ready, this is similar to window.onload() = function(){......};
        *
        *   You can also use $(document).ready(function(){......}), $ is an alias of jQuery.
        *
        *   You can even use $(function(){......}) to process document load ready event.
        * */
        jQuery(document).ready(function(){

            // Show an alert popup message.
            alert('Hello World From JQuery.');

            // Get the button object by it's id.
            var button = jQuery('#click_button')

            // When click this button then execute below function.
            button.bind('click', function () {

                // Get button original text.
                const original_text = jQuery(this).text();

                // Alert the text.
                alert('You click the button');

                alert('The original button text is : ' + original_text);

                // Set the button new text. And change the button text and background color.
                jQuery(this).text('Wish you like JQuery :)').css({color:'yellow', background:'blue'});
            })

        });
    </script>
</head>
<body>
<button id="click_button">
    Welcome to JQuery world.
</button>
</body>
</html>

2.2 Пример добавления номера jQuery Hello World.

В этом примере используется jQuery для установки стиля css тега html p. Он также связывает событие перемещения мыши тега div, когда ваша мышь перемещается в внутри тега div, число увеличивается.

 

hello-world-add-number.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery Add Number While Mouse Move</title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
    <script type="text/javascript" src="./lib/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        // This is a global variable that defines the number font size.
        let number_size = 10;
        
        // $(function(){......}) equals to $(document).ready(function(){.....}) and jQuery(document).ready(function(){......})
        $(function(){

            // Set the html p tag style with css method. $ is an alias of jQuery.
            $('p').css({border: '15px solid green', color: 'red', padding: '10px'});

            // Set div css style, the div's id is add_number.
            $('#add_number').css({
                margin: '5 auto',
                backgroundColor: 'blue',
                textAlign: 'left',
                fontSize: '10px'
            })

            // Bind mousemove event to the selected add_number div object.
            // When user mouse move in add_number div then execute the function.
            $('#add_number').bind('mousemove', function(){
                // Get current add_number div text and parse it to integer, default value is 5.
                var current_number = parseInt($(this).text(), 10);

                // Add 1 to the number font size.
                number_size = number_size + 1;

                // Increase 2 for current number.
                current_number = current_number + 2;

                // Set new value for current number in the div text.
                $(this).text(current_number);

                // Set the number font size with css.
                $(this).css({color: 'yellow', fontSize: number_size+'px'})
            });
        });
    </script>
</head>
<body>

<p>Hello World From JQuery!</p>

<div id="add_number">0</div>

</body>
</html>
about-blog
О проекте

Блог посвящен созданию и продвижению сайтов в сети интернет, а также различным техническим и маркетинговым вопросам, которые так или иначе с этим связаны.