Примеры jQuery

В статье приведены примеры использования jQuery, которые использовались в предыдущих статьях - все в одном месте!

Селекторы jQuery

$("p").hide()
Демонстрирует jQuery метод hide(), скрывающий все <p> элементы.

$("#test").hide()
Демонстрирует jQuery метод hide(), скрывающий элемент с id = "test".

$(".test").hide()
Демонстрирует jQuery метод hide(), скрывающий все элементы с классом = "test".

$(this).hide()
Демонстрирует jQuery метод hide(), скрывающий текущий элемент HTML.


События jQuery

jQuery click()
Демонстрирует jQuery событие click().

jQuery dblclick()
Демонстрирует jQuery событие dblclick().

jQuery mouseenter()
Демонстрирует jQuery событие mouseenter().

jQuery mouseleave()
Демонстрирует jQuery событие mouseleave().

jQuery mousedown()
Демонстрирует jQuery событие mousedown().

jQuery mouseup()
Демонстрирует jQuery событие mouseup().

jQuery hover()
Демонстрирует jQuery событие hover().

jQuery focus() и blur()
Демонстрирует jQuery события focus() и blur().


jQuery Скрыть/Показать

jQuery hide()
Демонстрирует jQuery метод hide().

jQuery hide() и show()
Демонстрирует jQuery методы hide() и show().

jQuery toggle()
jQuery toggle() переключает между hide() и show().

jQuery hide()
Другая демонстрация hide(). Как скрыть части текста.


jQuery Исчезновение

Постепенное появление jQuery
Демонстрирует jQuery метод fadeIn().

Постепенное исчезновение jQuery
Демонстрирует jQuery метод fadeOut().

jQuery fadeToggle()
Демонстрирует jQuery метод fadeToggle().

jQuery fadeTo()
Демонстрирует jQuery метод fadeTo().


Скольжение jQuery

jQuery slideDown()
Демонстрирует jQuery метод slideDown().

jQuery slideUp()
Демонстрирует jQuery метод slideUp().

jQuery slideToggle()
Демонстрирует jQuery метод slideToggle().


Анимация jQuery

jQuery animate()
Демонстрирует простое использование jQuery метода animate().

jQuery animate() - управление несколькими свойствами CSS
Демонстрирует, как можно управлять несколькими свойствами CSS с jQuery методом animate().

jQuery animate() - использующий относительные значения
Демонстрирует, что можно использовать относительные значения в jQuery animate().

Анимация jQuery - использование предопределенных значений
Демонстрирует, что можно использовать предопределенные значения "hide", "show", "toggle" в jQuery методе animate().

jQuery animate()
Демонстрирует использование jQuery метода (несколько вызовов animate() друг за другом).

jQuery animate()
Еще одна демонстрация использования jQuery метода animate() (несколько вызовов animate() друг после друга).


Остановка Анимации jQuery

jQuery остановка скольжения
Демонстрирует jQuery метод stop().

jQuery остановка анимации (с параметрами)
Демонстрирует jQuery метод stop().


HTML jQuery Получение Содержимого и Атрибутов

jQuery text() и html() - Получение контента
Получение контента с jQuery методами text() и html().

jQuery val() - Получение контента
Получите значение поля формы с jQuery методом val().

jQuery attr() - Получение значения атрибута
Получите значение атрибута с jQuery методом attr().


HTML jQuery Установка Контента и Атрибутов

jQuery методы text(), html() и val() - Установка Контента
Установка Контента с jQuery методами text(), html() и val().

jQuery text() и html() - Установка контента с функцией обратного вызова
Установка контента + использование функции обратного вызова в text() и html().

jQuery attr() - Установка значения атрибута
Установка значения атрибута с jQuery методом attr().

jQuery attr() - Установка нескольких значений атрибутов
Установите многократные значения атрибутов с jQuery методом attr().

jQuery attr() - Установка значения атрибута с функцией обратного вызова
Установка значения атрибута + использование функции обратного вызова внутри attr().


HTML jQuery Добавление Элементов/Содержимого

jQuery append()
Вставка контента в конец выбранных элементов HTML.

jQuery prepend()
Вставка контента в начало выбранных элементов HTML.

jQuery append() - Вставка несколько новых элементов
Создайте новые элементы с текстом/HTML, jQuery и JavaScript/DOM. Затем добавьте новые элементы к тексту.

jQuery after() и before()
Вставка контента после и перед выбранными элементами HTML.

jQuery after() - Вставка несколько новых элементов
Создайте новые элементы с текстом/HTML, jQuery и JavaScript/DOM. Затем вставьте новые элементы после выбранного элемента.


HTML jQuery Удаление Элементов/Содержимого

jQuery remove()
Удалите выбранный элемент(ы).

jQuery empty()
Удалите все дочерние элементы выбранного элемента(ов).

jQuery remove() - с параметром
Фильтруйте элементы, которые будут удалены


jQuery Получение и Установка Классов CSS

jQuery addClass()
Добавьте атрибуты классов различным элементам.

jQuery addClass() - Несколько классов
Укажите несколько классов в методе addClass().

jQuery removeClass()
Удалите определенный атрибут класса из различных элементов.

jQuery toggleClass()
Переключайтесь между добавлением/удалением классов для выбранных элементов.


jQuery Метод css()

jQuery css() - возвращает свойство CSS
Возвратите значение указанного свойства CSS из ПЕРВОГО сопоставленного элемента.

jQuery css() - установите свойство CSS
Установите указанное свойство CSS для ВСЕХ сопоставленных элементов.

jQuery css() - установка CSS свойств
Установите несколько свойств CSS для ВСЕХ сопоставленных элементов.


Измерения jQuery

jQuery - получение ширины и высоты
Возвратите ширину и высоту указанного элемента.

jQuery - Методы innerWidth()/innerHeight
Получение внутренней ширины и высоты указанного элемента.

jQuery - методы outerWidth() и outerHeight()
Возвратите внешнюю ширину и высоту указанного элемента.

jQuery - методы outerWidth(true) и outerHeight(true)
Возвратите внешнюю ширину и высоту указанного элемента (включая поля).

jQuery - получение ширины и высоты документа и окна
Возвратите ширину и высоту документа (HTML) и окна (области просмотра браузера).

jQuery - методы width() и height()
Устанавливают ширину и высоту указанного элемента.


jQuery Обход Предков

jQuery parent()
Демонстрирует jQuery метод parent().

jQuery parents()
Демонстрирует jQuery метод parents().

jQuery parentsUntil()
Демонстрирует jQuery метод parentsUntil().


jQuery Обход Потомков

jQuery children()
Демонстрирует jQuery метод children().

jQuery find()
Демонстрирует jQuery метод find().


jQuery Обход Одноуровневых Элементов

jQuery siblings()
Демонстрирует jQuery метод siblings().

jQuery затем()
Демонстрирует jQuery метод next().

jQuery nextAll()
Демонстрирует jQuery метод nextAll().

jQuery nextUntil()
Демонстрирует jQuery метод nextUntil().


jQuery AJAX Метод load()

jQuery load()
Загрузите содержимое файла в элемент <div>.

jQuery()
Загрузите содержимое определенного элемента в файле в элемент <div>.

jQuery load() - с обратным вызовом
Используйте jQuery метод load() с функцией обратного вызова.


jQuery AJAX Методы get() и post()

jQuery get()
Используйте метод $.get(), чтобы извлечь данные из файла на сервере.

jQuery post()
Используйте метод $.post(), чтобы послать некоторые данные наряду с запросом.

Далее: jQuery Mobile

Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)