Создание приложения на основе Ajax становится очень простым и быстрым с помощью jQuery.
Первоначально jQuery был создан Джоном Резигом в начале 2006 года. В настоящее время проект jQuery поддерживается и поддерживается распределенной группой разработчиков как проект с открытым исходным кодом.
Вы можете сэкономить много времени и усилий с помощью jQuery. Так что добавьте этот сайт в избранное и продолжайте читать
Есть много других вещей, которые вы можете сделать с помощью jQuery.
На этом список не заканчивается, есть много других интересных вещей, которые вы можете делать с помощью jQuery.
Есть несколько преимуществ, почему стоит выбрать использование 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 (сети доставки контента), если не хотите загружать файл.
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, изменив цвет текста заголовка с предварительно заданного цвета.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.
<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
“, что просто означает, когда пользователь нажимает эту кнопку.
Вы можете использовать селектор идентификаторов, чтобы выбрать один элемент с уникальным идентификатором на странице.
Например, следующий код 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, чтобы сделать свой выбор еще более точным.
Например, вы можете комбинировать селектор класса с селектором элементов, чтобы найти в документе элементы, имеющие определенный тип и класс.
<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>
В дополнение к селекторам 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
.
I caratteri sono i singoli elementi di un testo. Possono essere lettere, punteggiatura segni, numeri, spazi e simboli. Ogni parola…
Термин «Рынок Smart Lock» относится к отрасли и экосистеме, связанной с производством, распространением и использованием…
В разработке программного обеспечения шаблоны проектирования являются оптимальным решением проблем, которые часто возникают при разработке программного обеспечения. Я как…
Промышленная маркировка — это широкий термин, охватывающий несколько методов, используемых для создания стойких знаков на поверхности…