В следующем примере показано, как отображать и скрывать элементы <div> на основе раскрывающегося списка или выбранного параметра в поле <select> с помощью jQuery-метода change() в сочетании с методами show() и hide(). Блоки <div> в этом примере по умолчанию скрыты с помощью CSS-свойства display, для которого установлено значение none.

Вы можете просто использовать JavaScript-метод window.matchMedia() для обнаружения мобильного устройства на основе медиа-запроса CSS. Это лучший и самый надежный способ обнаружения мобильных устройств. Следующий пример покажет вам, как на самом деле работает этот метод: Метод matchMedia() поддерживается во всех основных современных браузерах, таких как Chrome, Firefox, Internet Explorer (версия 10 и выше) и т. д.

Вы можете использовать селекторы атрибутов CSS, чтобы найти элемент HTML на основе его значения data-attribute с помощью jQuery. Селекторы атрибутов предоставляют очень эффективный способ выбора элементов. Давайте посмотрим на следующий пример, чтобы понять, как это работает:

Чтобы установить CSS-свойство background-image элемента с помощью jQuery-метода CSS(), вам необходимо указать полное значение свойства, используя функциональную нотацию url(). Например, если у вас есть URL-адрес изображения, хранящийся в переменной JavaScript, тогда в методе CSS() вам нужно установить значение примерно так, чтобы оно работало:

Вы можете использовать jQuery-метод click() в сочетании с методом on(), чтобы скрыть раскрывающееся меню, когда пользователь щелкает за пределами элемента триггера. Давайте посмотрим на следующий пример, чтобы понять, как это работает:

Вы можете использовать jQuery-метод delay() для вызова функции после некоторого ожидания. Просто передайте этой функции целое число, чтобы установить временной интервал задержки в миллисекундах. Давайте посмотрим на пример, чтобы понять, как работает этот метод:

Вы можете рассчитать или найти количество слов в строке с помощью JavaScript-метода split(). Этот метод просто разбивает строку на массив подстрок по указанному символу. В следующем примере мы также использовали метод trim() для удаления начальных и конечных пробелов из строки перед подсчетом количества слов.

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

Вы можете привязать событие ввода к текстовому полю input используя метод on(), чтобы обнаруживать любые изменения в нем. В следующем примере будет отображаться введенное значение, когда вы вводите что-то в поле ввода. Обратите внимание, что событие input запускается при вводе с клавиатуры, перетаскивании мышью, автозаполнении и даже копировании и вставке. Но он не сработает, если…

Вы можете использовать JavaScript-метод substring() для удаления первого символа из строки. Типичный пример — удаление символа решетки (#) из идентификатора фрагмента. Давайте посмотрим на пример, чтобы понять, как работает этот метод:

Вы можете использовать jQuery-метод .appendTo() для перемещения одного элемента в другой элемент. Выбранный элемент будет полностью извлечен из своего старого местоположения в DOM и вставлен в конец целевого контейнера. Давайте посмотрим следующий пример:

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