Шпаргалка JQuery - Лучший интерактивный шпаргалка по JQuery | Разработка программного обеспечения 2025

Введение в Cheatsheet JQuery

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

В этой статье CheQheet JQuery мы обсудим, что такое Jquery и PTP этой платформы:

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

HTML, CSS
Javascript и JQuery для скриптов на стороне клиента
PHP для серверной части сценариев
MYSQL для запросов к базе данных
и т.п.

Преимущества использования JQuery Framework по сравнению с другими,

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

Основное содержание и синтаксис шпаргалки JQuery:

Включить: включение Jquery в текущий скрипт выполнения

Синтаксис: Синтаксическая структура JQuery

Селектор выбора компонентов HTML

$(Selector).action() Действие, выполненное на выбранном компоненте

Определяет использование JQuery

Шпаргалка для селекторов Jquery:

элементы тегаэлементы тега

селектор	ОПИСАНИЕ
$ ( «*»)	Выбирает все элементы HTML
$ ( «P.demo»)	Выбирается элементы тега
$ ( «: Кнопка»)	Выбирает кнопку и элементы ввода
$ ( «Тр: даже»)	Выбирает даже
$ ( «Тр: нечетный»)	Выбирает нечетное
$ ( «Диапазон: родитель»)	Выбирает элементы, с которыми связан дочерний элемент
$ ( «(HREF)»)	Выбирает все элементы с атрибутами href
$ ( «: Вход»)	Выбирает все элементы формы

Шпаргалка для событий Jquery. Событие - это какое-то действие на веб-странице. Ниже перечислены ключевые события.

События мыши	Метод мышиного события	События клавиатуры	Метод события клавиатуры	События формы	Метод Event Event
ввод мыши	.mouseenter ()	нажатие клавиши	.нажатие клавиши()	сдача	.сдача()
Двойной клик	.dblclick ()	KeyDown	.keydown ()	фокус	.focus ()
щелчок	.click ()	KeyUp	.keyup ()	пятно	.blur ()
мышь оставить	.mouseleave ()	События браузера	Метод события браузера	События документа	Методы документирования событий
мышь вниз	.mousedown ()	Ошибка населения	.ошибка()	выгрузить	.unload ()
мышь вверх	.mouseup ()	свиток	.scroll ()	нагрузка	.load ()

Пример:

$("p").dblclick(function()( $(this).hide(); ));

Шпаргалка Jquery эффекты:

Основы: .hide (), .show (), .toggle () - Позволяет скрывать, отображать и переключать выбранные элементы.

Пример:

$("p").hide();

Пользовательские: .animate (), .delay (), .dequeue (), .stop ()

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

Пример:

$("element1").animate( ( opacity : 0.50 left: "+=27" )

Fade: fadeTo (), fadeOut (), fadeIn (), fadeToggle ()

fadeIn () Исчезает скрытый элемент
fadeout () позволяет исчезнуть видимому элементу
fadeTo () затухает до заданной непрозрачности
fadeToggle () позволяет элементу переключаться с методами постепенного появления и исчезновения.

Пример:

$("button").click(function() ( $("#div2").fadeOut("slow"); ));

Slide: slideDown (), slideUp (), slideToggle ()

slideDown () Отображение со скользящим движением перекрывающихся элементов
slideToggle () Отображает или скрывает скользящим движением перегруженные элементы
slideUp () Скрывает скользящим движением перегруженные элементы

Бесплатные советы и хитрости использования шпаргалки JQuery

1) Сохраните параметр контекста, который позволяет запускать запуск с более глубокой ветви DOM вместо вызова из корня.

2) Проверьте, существует ли элемент, и затем нажмите вперед для выполнения кода.

Синтаксис:

if($("#element").length) ( // DOM element exists ) else ( //DOM element dont exists )

3) Метод данных jQuerys связывает элементы DOM и данные без изменения DOM.

4) Проверьте, не скрыт ли какой-либо из элементов.

Пример:

if($(element).is(":visible") == "true") ( //The element is Visible )

5) Ведите подсчет непосредственно предшествующих дочерних элементов.

6) Загрузка изображений предварительно оптимизирует производительность выполнения запросов.

7) Лучше проверить, что запрос был успешно загружен, прежде чем он будет выполнен.

Пример:

if (typeof jQuery == 'undefined') ( console.log('jQuery not loaded'); ) else ( console.log('jQuery loaded'); )

8) Неработающие ссылки на изображения можно легко заменить, выполнив приведенный ниже фрагмент кода,

Пример:

$('img').on('error', function () ( if(!$(this).hasClass('broken-image')) ( $(this).prop('src', 'img/broken.png.webp').addClass('broken-image'); ) ));

9) Фрейм всегда должен соответствовать содержанию страницы.

10) Собственные фильтры выбора могут быть добавлены в Jquery. как и все в фильтрах выбора библиотеки, также можно настроить. Добавление объекта $ .expr (':') сделает это.

Пример:

(function($) ( var random = 0 $.expr(':').random = function(a, i, m, r) ( if (i == 0) ( random = Math.floor(Math.random() * r.length); ) return i == random; ); ))(jQuery); // how to utilize this piece of code. $('li:random').addClass('glow');

11) Добавление атрибута disabled к входу позволяет оставить поле ввода отключенным до тех пор, пока не будут заполнены определенные относительные поля.

Пример:

$('input(type="submit")').prop('disabled', true);

12) Убедитесь, что вы определили раздел обработчика ошибок, чтобы обработать возврат ошибок ajax. при появлении ошибки 400 или 500 этот раздел будет автоматически запущен.

Пример:

$(document).on('ajaxError', function (e, xhr, settings, error) ( console.log(error); ));

Шпаргалка JQuery - заключение

Jquery уменьшает дополнительную сложность, которую имеет javascript. с несколькими объектами, связанными с jquery, является одним из лучших инструментов разработки веб-страниц на рынке. его легкие и эффективные возможности создания цепочек позволили разработчикам легко создавать веб-кодирование.