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

Вступ в Cheatsheet JQuery

Jquery - це міжплатформна бібліотека javascript, яка зберігається в основному намірі полегшити веб-розробку кодування. Це підтверджене твердження, що введення Jquery досить скоротило довжину кодів javascript. Тому навіть декілька рядкових кодів JavaScript можна легко досягти за допомогою невеликого блоку або навіть одного рядка оператора JQuery.

У цій статті JQuery Cheatsheet ми обговоримо, що таке Jquery і PTP цього фреймворку:

У Інтернеті є численні веб-сайти, і ринок включає широкий спектр мов, які забезпечують побудову цих веб-сайтів та онлайн-продуктів. Деякі з відомих такі:

HTML, CSS
Javascript та JQuery для сценарію закінчення клієнта
PHP для сценарію закінчення сервера
MYSQL для запиту баз даних
тощо.

Переваги використання фреймворку JQuery перед іншими,

Вона включає в себе величезну спільноту і цілу масу плагінів, що вводяться в неї.
Легкий
потужні ланцюгові можливості
Коротка документація та навчальні посібники
Можливість легко розробляти компоненти Ajax
Це можливість зробити код простим та багаторазовим
Зручний для веб-переглядачів

Основний зміст і синтаксис шпаргалки JQuery:

Включити: Включення Jquery до поточного сценарію виконання

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

У селекторі виберіть компоненти HTML

$(Selector).action() Дія, що виконується на вибраному компоненті

Визначає використання JQuery

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

елементи тегівелементи тегів

Селектор	ОПИС
$ ("*")	Вибирає всі елементи HTML
$ ("P.demo")	Вибирає елементи тегів
$ (": Кнопка")	Вибирає кнопку та елементи введення
$ ("Tr: рівний")	Вибирає парне
$ ("Tr: непарний")	Вибирає непарне
$ ("Span: parent")	Вибирає елементи, з якими пов'язаний дочірній елемент
$ ("(Href)")	Виділяє всі елементи з атрибутами href
$ (": Вхід")	Виділяє всі елементи форми

Чит-лист для подій Jquery: Подія - це якась дія на веб-сторінці.

Мишачі події	Метод подій миші	Події на клавіатурі	Метод події на клавіатурі	Форма подій	Форма Метод події
введіть мишу	.mouseenter ()	натискання клавіші	.keypress ()	змінити	.change ()
Подвійне клацання	.dblclick ()	Клавіш	.keydown ()	фокус	.фокус ()
клацніть	.click ()	Клавіатура	.keyup ()	розмиття	.blur ()
залишити мишу	.mouseleave ()	Події браузера	Метод події браузера	Документи подій	Документи методів події
миша вниз	.mousedown ()	Помилка населення	.error ()	розвантажувати	.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"); ));

Слайд: slideDown (), slideUp (), slideToggle ()

slideDown () Дисплей з переміщеними елементами ковзного руху
slideToggle () Відображає або приховує переміщені елементи ковзання
slideUp () Приховує переміщення елементів, що ковзають

Безкоштовні поради та підказки використання Cheat sheet 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) Додавання відключеного атрибута до входу дозволяє зберігати поле введення вимкнено, поки не заповнюються певні відносні поля.

Наприклад:

$('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, входить до числа найкращих інструментів розробки веб-сторінок на ринку. його легкі та ефективні ланцюгові можливості досить просто зробили веб-кодування легко для розробників.