товары

JQuery, что это такое и что мы можем сделать с библиотекой JavaScript

jQuery — это быстрая, легкая и многофункциональная библиотека JavaScript, основанная на принципе «Пиши меньше, делай больше» . API-интерфейсы JQuery упрощают управление и обслуживание HTML-документов, управление событиями, добавление анимационных эффектов на веб-страницу. Он совместим со всеми основными браузерами, такими как Chrome, Firefox, Safari, Edge.

Создание приложения на основе Ajax становится очень простым и быстрым с помощью jQuery.

Первоначально jQuery был создан Джоном Резигом в начале 2006 года. В настоящее время проект jQuery поддерживается и поддерживается распределенной группой разработчиков как проект с открытым исходным кодом.

Вы можете сэкономить много времени и усилий с помощью jQuery. Так что добавьте этот сайт в избранное и продолжайте читать

Что вы можете сделать с jQuery

Есть много других вещей, которые вы можете сделать с помощью jQuery.

  • Вы можете легко выбирать элементы HTML-страницы для чтения или изменения атрибутов;
  • Вы можете легко создавать эффекты, такие как отображение или скрытие элементов, переходов, прокрутки и т. д.;
  • Вы можете легко создавать сложные CSS-анимации с меньшим количеством строк кода;
  • Вы можете легко манипулировать элементами DOM и их атрибутами;
  • Вы можете легко реализовать Ajax для обеспечения асинхронного обмена данными между клиентом и сервером;
  • Вы можете легко пройтись по всему дереву DOM, чтобы найти любой элемент;
  • Вы можете легко выполнять несколько действий над элементом с помощью одной строки кода;
  • Вы можете легко получить или установить размер элементов HTML.

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

Преимущества использования jQuery

Есть несколько преимуществ, почему стоит выбрать использование jQuery:

  • Сэкономьте много времени: вы можете сэкономить много времени и усилий, используя встроенные эффекты и селекторы jQuery и сосредоточившись на других аспектах разработки;
  • Упростите стандартные задачи JavaScript — jQuery значительно упрощает стандартные задачи JavaScript. Теперь вы можете легко создавать многофункциональные и интерактивные веб-страницы с меньшим количеством строк кода. Типичным примером является реализация Ajax для обновления содержимого страницы без его обновления;
  • Простота: jQuery очень прост в использовании. Любой, у кого есть базовые практические знания HTML, CSS и JavaScript, может начать разработку с помощью jQuery;
  • Совместим со всеми браузерами: jQuery был создан с учетом современных браузеров и совместим со всеми основными современными браузерами, такими как Chrome, Firefox, Safari, Edge;
  • Абсолютно бесплатно. И самое приятное то, что его можно загрузить и использовать совершенно бесплатно.

скачать jquery

Для начала давайте сначала загрузим копию jQuery, а затем включим ее в наш проект. Для загрузки доступны две версии jQuery: сотргезза e не сжатый .

Несжатый файл лучше подходит для разработки или отладки; в то время как уменьшенный и сжатый файл рекомендуется для производства, поскольку он экономит полосу пропускания и повышает производительность из-за меньшего размера файла.

Мы можем скачать jQuery отсюда: https://jquery.com/download/

Как только вы загрузите файл jQuery, вы увидите, что он имеет расширение js, то есть это файл JavaScript. На самом деле JQuery — это не что иное, как библиотека JavaScript, поэтому вы можете включить файл jQuery в HTML-документ с помощью элемента точно так же, как вы включаете обычные файлы JavaScript.

<head>
    <title>Simple HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Не забывайте всегда включать файл jQuery перед пользовательскими скриптами; в противном случае API-интерфейсы jQuery будут недоступны, когда ваш код jQuery попытается получить к ним доступ.

Как вы могли заметить, мы пропустили атрибут в предыдущем примере. type="text/javascript" внутри тега . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiзавершено в HTML5 и во всех современных браузерах.

jQuery из CDN

В качестве альтернативы вы можете встроить jQuery в свой документ с помощью свободно доступных ссылок CDN (сети доставки контента), если не хотите загружать файл.

CDN могут обеспечить преимущество в производительности за счет сокращения времени загрузки, поскольку они размещают jQuery на нескольких серверах по всему миру, и когда пользователь запрашивает файл, он будет обслуживаться с ближайшего сервера.

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

В этом случае вам нужно будет написать:

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

В дополнение к CDN, предоставленному проектом jquery, вы можете включить jQuery через Google e Microsoft CDN.

Первая веб-страница на основе jQuery

Увидев цели библиотеки jQuery и способы ее включения в документ, пришло время применить jQuery на практике.

Теперь давайте выполним простую операцию jQuery, изменив цвет текста заголовка с предварительно заданного цвета.defiот черного до зеленого цвета.

<head>
    <title>My First jQuery Web Page</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "#00ff00");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

В коде мы выполнили простую операцию jQuery, изменив цвет заголовка, т.е. элемента используя селектор элемента jQuery и метод css(), когда документ готов, известный как событие готовности документа. 

Синтаксис JQuery

Оператор jQuery обычно начинается со знака доллара ( $) и заканчивается точкой с запятой ( ;).

В jQuery знак доллара ( $) — это просто псевдоним для jQuery. Рассмотрим следующий пример кода, демонстрирующий простейший оператор jQuery.

<script>
    $(document).ready(function(){

        alert("Hello I'm a JQuery sign");
    });
</script>

В примере просто отображается предупреждающее сообщение «Hello I'm a JQuery sign» пользователю. Давайте посмотрим на некоторые особенности:

  • Элемент <script>: jQuery — это просто библиотека JavaScript, код jQuery можно разместить внутри элемента. <script>, или вы можете поместить его во внешний файл JavaScript;
  • Линия $(document).ready(handler); называется готовым событием. Где это находится handler это функция, которая передается методу для выполнения, как только документ будет готов, т.е. когда иерархия DOM будет полностью построена.

Метод jQuery ready() обычно он используется с анонимной функцией. Таким образом, приведенный выше пример также можно записать в сокращенной записи следующим образом:

<script>
    $(function(){
        alert("Hello I'm a JQuery sign");
    });
</script>

Селекторы

Внутри функции вы можете написать операторы jQuery для выполнения любого действия в соответствии с базовым синтаксисом, например:

$(selector).action();

Голубь $(selector) он в основном выбирает элементы HTML из дерева DOM, чтобы ими можно было манипулировать и action() применить некоторые действия к выбранным элементам, например изменить значение свойства CSS или задать содержимое элемента и т. д.

Теперь давайте посмотрим на другой пример, который задает текст абзаца:

<head>
    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

Пример jQuery относится к селектору p, и это выделяет все абзацы, то метод text() установите текстовое содержимое абзаца с помощью «Hello World!».

Текст абзаца в предыдущем примере автоматически заменяется, когда документ готов. Но давайте посмотрим, как это сделать, если вы хотите выполнить действие перед запуском кода jQuery, чтобы заменить текст абзаца. 

Рассмотрим последний пример:


<head>

    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
    <button type="button">Replace Text</button>
</body>
</html>

В этом примере текст абзаца заменяется только тогда, когда происходит событие щелчка на кнопке "Replace Text“, что просто означает, когда пользователь нажимает эту кнопку.

Выбор предметов по ID

Вы можете использовать селектор идентификаторов, чтобы выбрать один элемент с уникальным идентификатором на странице.

Например, следующий код jQuery выберет и выделит элемент с атрибутом ID. id="markid", когда документ будет готов.

<script>
$(document).ready(function(){
    // Highlight element with id markid
    $("#markid").css("background", "grey");
});
</script>
Выбор элементов с именем класса

Селектор класса можно использовать для выбора элементов определенного класса.

Например, следующий код jQuery будет выбирать и выделять элементы с атрибутом класса class="markclass", когда документ будет готов.

<script>
$(document).ready(function(){
    // Highlight elements with class markclass
    $(".markclass").css("background", "grey");
});
</script>
Выбор предметов по названию

Селектор элементов можно использовать для выбора элементов по имени элемента.

Например, следующий код jQuery выберет и выделит весь абзац, т. е. элементы "<p>" документа, когда он будет готов.

Инновационный бюллетень
Не пропустите самые важные новости об инновациях. Зарегистрируйтесь, чтобы получать их по электронной почте.
<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "grey");
});
</script>
Выбор элементов по атрибуту

Вы можете использовать селектор атрибутов, чтобы выбрать элемент на основе одного из его атрибутов HTML, например атрибута ссылки. targetили атрибут ввода typeИ т.д..

Например, следующий код jQuery выберет и выделит все вводимые тексты, такие как элементы "<input>" con type="text", когда документ будет готов.

<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "grey");
});
</script>
Выбор элемента с помощью составного селектора CSS

Вы также можете комбинировать селекторы CSS, чтобы сделать свой выбор еще более точным.

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

<script>
$(document).ready(function(){
    // Highlight only paragraph elements with class mark
    $("p.mark").css("background", "yellow");
  
    // Highlight only span elements inside the element with ID mark
    $("#mark span").css("background", "yellow");
  
    // Highlight li elements inside the ul elements
    $("ul li").css("background", "red");
  
    // Highlight li elements only inside the ul element with id mark
    $("ul#mark li").css("background", "yellow");
  
    // Highlight li elements inside all the ul element with class mark
    $("ul.mark li").css("background", "green");
  
    // Highlight all anchor elements with target blank
    $('a[target="_blank"]').css("background", "yellow");
});
</script>
Пользовательский селектор jQuery

В дополнение к селекторам definiti, jQuery предоставляет собственный селектор для дальнейшего расширения возможностей выбора элементов на странице.

<script>
$(document).ready(function(){
    // Highlight table rows appearing at odd places
    $("tr:odd").css("background", "yellow");
  
    // Highlight table rows appearing at even places
    $("tr:even").css("background", "orange");
  
    // Highlight first paragraph element
    $("p:first").css("background", "red");
  
    // Highlight last paragraph element
    $("p:last").css("background", "green");
  
    // Highlight all input elements with type text inside a form
    $("form :text").css("background", "purple");
  
    // Highlight all input elements with type password inside a form
    $("form :password").css("background", "blue");
  
    // Highlight all input elements with type submit inside a form
    $("form :submit").css("background", "violet");
});
</script>

Мероприятия

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

jQuery улучшает базовые механизмы обработки событий, предлагая методы обработки событий для большинства собственных событий браузера, некоторые из этих методов ready(), click(), keypress(), focus(), blur(), change()И т.д..

<script>
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

В целом события можно разделить на четыре основные группы: 

  • события мыши,
  • события клавиатуры,
  • модуль событий ред.
  • события документа/окна. 

События мыши

Событие мыши запускается, когда пользователь щелкает элемент, перемещает указатель мыши и т. д.

Вот некоторые часто используемые методы jQuery для обработки событий мыши.

Метод click()

Метод click() прикрепите функцию обработчика событий к выбранным элементам для события «click“. Связанная функция выполняется, когда пользователь щелкает этот элемент. Следующий пример скроет элементы <p> на странице при нажатии.

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>
Метод dblclick()

Метод dblclick() прикрепите функцию обработчика событий к выбранным элементам для события «dblclick“. Связанная функция выполняется, когда пользователь дважды щелкает этот элемент. Следующий пример скроет элементы <p> при двойном щелчке по ним.

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>
Метод hover()

Метод hover() прикрепите одну или две функции обработчика событий к выбранным элементам, которые выполняются, когда указатель мыши перемещается внутри и снаружи элементов. Первая функция запускается, когда пользователь наводит указатель мыши на элемент, а вторая функция запускается, когда пользователь удаляет указатель мыши с этого элемента.

В следующем примере будут выделены элементы <p> когда вы поместите на него курсор, выделение будет удалено, когда вы удалите курсор.

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>
Метод mouseenter()

Метод mouseenter() прикрепите функцию обработчика событий к выбранным элементам, которая выполняется, когда мышь входит в элемент. Следующий пример добавит подсветку класса к элементу <p> при наведении на него курсора.

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>
Метод mouseleave()

Метод mouseleave() прикрепите функцию обработчика событий к выбранным элементам, которая запускается, когда мышь покидает элемент. В следующем примере будет удалено выделение класса из элемента <p> когда вы удаляете курсор из него.

<script>
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>

События клавиатуры

Событие клавиатуры возникает, когда пользователь нажимает или отпускает клавишу на клавиатуре. Давайте рассмотрим некоторые часто используемые методы jQuery для обработки событий клавиатуры.

Метод keypress()

Метод keypress() прикрепляет функцию обработки событий к выбранным элементам (обычно элементам управления формы), которая запускается, когда браузер получает ввод с клавиатуры от пользователя. В следующем примере будет отображаться сообщение при запуске события keypress и сколько раз он срабатывает, когда вы нажимаете клавишу на клавиатуре.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

Событие нажатия клавиши аналогично событию нажатия клавиши, за исключением того, что модификатор и непечатаемые клавиши, такие как Shift, Esc, Backspace или Delete, клавиши со стрелками и т. д. они запускают события нажатия клавиш, но не события нажатия клавиш.

Метод keydown()

Метод keydown() прикрепляет функцию обработки событий к выбранным элементам (обычно элементам управления формы), которая выполняется, когда пользователь впервые нажимает клавишу на клавиатуре. В следующем примере будет отображаться сообщение при запуске события keydown и сколько раз он срабатывает, когда вы нажимаете клавишу на клавиатуре.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
Метод keyup()

Метод keyup() прикрепите функцию обработки событий к выбранным элементам (обычно элементам управления формы), которая выполняется, когда пользователь отпускает клавишу на клавиатуре. В следующем примере будет отображаться сообщение при запуске события keyup и сколько раз он срабатывает, когда вы нажимаете и отпускаете клавишу на клавиатуре.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

События формы

Событие формы запускается, когда элемент управления формы получает или теряет фокус, или когда пользователь изменяет значение элемента управления формы, например, ввод текста в поле ввода текста, выбор параметра в поле выбора и т. д. Вот некоторые часто используемые методы jQuery для обработки событий формы.

Метод change()

Метод change() прикрепить функцию обработчика событий к элементам <input> и выполняется при изменении его значения. В следующем примере будет отображаться предупреждающее сообщение при выборе параметра в раскрывающемся списке выбора.

<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>

Для полей щелчка, флажков и переключателей событие срабатывает сразу же, когда пользователь делает выбор мышью, но для ввода текста и текстовой области событие срабатывает после того, как элемент теряет фокус.

Метод focus()

Метод focus() прикрепляет функцию обработчика событий к выбранным элементам (обычно это элементы управления и привязки форм), которые выполняются, когда получают фокус. В следующем примере будет отображаться сообщение, когда ввод текста получает фокус.

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
Метод blur()

Метод blur() прикрепите функцию обработчика событий для формирования таких элементов, как <input><textarea><select> который выполняется, когда он теряет фокус. В следующем примере будет отображаться сообщение, когда ввод текста теряет фокус.

<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
Метод submit()

Метод submit() прикрепить функцию обработчика событий к элементам <form> который запускается, когда пользователь пытается отправить форму. В следующем примере будет отображаться сообщение на основе значения, введенного при попытке отправить форму.

<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
            // Preventing form submission
            event.preventDefault();
        }
    });
});
</script>

События документа/окна

События также запускаются в ситуации, когда страница DOM (объектная модель документа) готова или когда пользователь изменяет размер или прокручивает окно браузера и т. д. Вот некоторые часто используемые методы jQuery для обработки событий такого типа.

Метод ready()

Метод ready() указывает функцию, которая будет выполняться при полной загрузке DOM.

В следующем примере текст абзаца будет заменен, как только иерархия DOM будет полностью построена и готова к работе.

<script>
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
Метод resize()

Метод resize() прикрепите к элементу окна функцию обработчика событий, которая запускается при изменении размера окна браузера.

В следующем примере будет показана текущая ширина и высота окна браузера, когда вы пытаетесь изменить его размер, перетаскивая его углы.

<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
        });
    });
});
</script>
Метод scroll()

Метод scroll() прикрепите функцию обработчика событий к окну или к iframe и прокручиваемые элементы, которые запускаются всякий раз, когда изменяется положение прокрутки элемента.

В следующем примере будет отображаться сообщение при прокрутке окна браузера.

<script>
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script>

Ercole Palmeri

.

Инновационный бюллетень
Не пропустите самые важные новости об инновациях. Зарегистрируйтесь, чтобы получать их по электронной почте.

АРТИКОЛИ recenti

Come contare il numero di caratteri contenuti in un file pubblicato online ?

I caratteri sono i singoli elementi di un testo. Possono essere lettere, punteggiatura segni, numeri, spazi e simboli. Ogni parola…

Март 29 2024

Рынок Smart Lock: опубликован отчет об исследовании рынка

Термин «Рынок Smart Lock» относится к отрасли и экосистеме, связанной с производством, распространением и использованием…

Март 27 2024

Что такое шаблоны проектирования: зачем их использовать, классификация, плюсы и минусы

В разработке программного обеспечения шаблоны проектирования являются оптимальным решением проблем, которые часто возникают при разработке программного обеспечения. Я как…

Март 26 2024

Технологическая эволюция промышленной маркировки

Промышленная маркировка — это широкий термин, охватывающий несколько методов, используемых для создания стойких знаков на поверхности…

Март 25 2024

Читайте «Инновации» на вашем языке

Инновационный бюллетень
Не пропустите самые важные новости об инновациях. Зарегистрируйтесь, чтобы получать их по электронной почте.

Следуйте за нами