Краткий обзор jQuery

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

Библиотека jQuery предназначена прежде всего для удобного поиска и манипулирования элементами на веб-странице. При нахождении определенного элемента с помощью jQuery можно повесить на него обработчики событий, анимировать, скрыть или, наоборот, отобразить, создать для элемента интерактивное взаимодействие с пользователем, изменить его стили и т.д. И даже если вы не работали раньше с jQuery, ее освоение не составит особых трудностей. Для более подробного ознакомления с данной библиотекой можно обратиться к руководству Изучаем jQuery. Здесь же я представлю краткий обзор возможностей библиотеки.

Функция jQuery

Функция jQuery позволяет использовать всю мощь библиотеки jQuery. Данная функция (jQuery) в качестве псевдонима имеет знак $ (так как символ $ легко набрать на клавиатуре, и он представляет действительное имя функции, которое можно употреблять в JavaScript). Поэтому следующие записи функции jQuery будут идентичны:

jQuery(document).ready(function(){
  // здесь код анонимной функции
});
$(function(){
  // здесь код анонимной функции
});
$(document).ready(function(){
  // здесь код анонимной функции
});

Все три вышеописанных случая идентичны и срабатывают сразу после загрузки веб-страницы. Весь остальной функционал помещается внутрь функции jQuery. И поскольку данная функция осуществляет выборку и модификацию элементов, то для нее иногда необходимо, чтобы вся веб-страница была уже загружена. Поэтому скрипт данной функции или ссылку на файл скрипта помещают обычно в самый низ веб-страницы.

Селекторы jQuery

Для выборки из структуры страницы нужных элементов используются селекторы.

Основные селекторы jQuery

Шаблон селектора

Значение

Пример

$("Element")

Выбирает все элементы с данным именем тега

$("p") выбирает все теги p.
$("ul") выбирает все элементы ul

$("#id")

Выбирает элемент с определенным значением id

Так, в следующем коде:

<div id="box1"></div>
<div id="box2"></div>

селектор $("#box1") выбирает элемент, помеченный жирным

$(".className")

Выбирает все элементы с определенным значением атрибута class

Допустим, у нас следующий код:

<div class="apple"></div>
<div class="apple"></div>
<div class="orange"></div>
<div class="banana"></div>

то селектор $(".apple") выбирает все элементы, помеченные жирным

$("selector1,selector2,selectorN")

Выбирает элементы, которые соответствуют данным селекторам

Если у нас следующий код:

<div class="apple"></div>
<div class="apple"></div>
<div class="orange"></div>
<div class="banana"></div>

то селектор $(".apple, .orange") выберет элементы, выделенные жирным

Например:

$(function () {
    $(".results").css("top", "20px");
});

Сначала мы получаем элемент, у которого class имеет значение results (<div class="results"></div>), а потом с помощью функции css устанавливаем определенное значение для его свойства top. Причем если у нас на странице несколько элементов, у которых class="results", то селектор вернет весь набор из этих элементов. И к каждому из элементов данного набора будет применено преобразование.

Выше в таблице показан лишь небольшой базовый список селекторов. Полный же список селекторов вы можете найти на сайте Селекторы CSS

Фильтры jQuery

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

Фильтр

Значение

:eq(n)

Выбирает n-й элемент выборки (нумерация начинается с нуля)

:even

Выбирает элементы с четными номерами

:odd

Выбирает элементы с нечетными номерами

:first

Выбирает первый элемент выборки

:last

Выбирает последний элемент выборки

:gt(n)

Выбирает все элементы с номером, большим n

:lt(n)

Выбирает все элементы с номером, меньшим n

:header

Выбирает все заголовки (h1, h2, h3)

:not(селектор)

Выбирает все элементы, которые не соответствуют селектору, указанному в скобках

Например, если у нас на странице несколько элементов, у которых class="results", а нам надо выбрать только первый, то мы можем применить следующие выражения: $(".results:first") или $(".results:eq(0)")

Специальный род фильтров - фильтры контента обеспечивают доступ к элементам, имеющим определенное содержимое:

Фильтр

Значение

:contains('content')

Получает все элементы, которые содержат content

:has('селектор')

Получает все элементы, которые содержат хотя бы один дочерний элемент, соответствующий селектору

:empty

Получает все элементы, которые не имеют дочерних элементов

:first-child

Получает все элементы, которые являются первыми дочерними элементами в своих родителях

:last-child

Получает все элементы, которые являются последними дочерними элементами в своих родителях

:nth-child(n)

Получает все элементы, которые являются n-ными элементами в своих родителях (нумерация идет с единицы)

:only-child

Получает все элементы, которые являются единственными дочерними элементами в своих родителях

:parent

Получает все элементы, которые имеют, как минимум, один дочерний элемент

Например, если мы хотим получить все элементы, содержащие текст asp.net mvc, мы можем применить следующее выражение: $(':contains("asp.net mvc")')

И завершая обзор фильтров, следует упомянуть о фильтрах форм, которые позволяют получить определенные элементы html-форм:

Фильтр

Значение

button

Получает все элементы button и элементы input с типом button

:checkbox

Получает все элементы checkbox

:checked

Получает все отмеченные элементы checkbox и radio

:disabled

Получает все элементы, которые отключены

:enabled

Получает все элементы, которые включены

:input

Получает все элементы input

:password

Получает все элементы password

:radio

Получает все элементы radio

:reset

Получает все элементы reset

:selected

Получает все отмеченные элементы option

:submit

Получает все элементы input с типом submit

:text

Получает все элементы input с типом text

Мы можем комбинировать в одном выражении несколько селекторов и фильтров: $('.results:odd:has('img')'). В данном случае мы выбираем все нечетные элементы с class="results", которые содержат элементы img, то есть изображения.

События jQuery

jQuery предоставляет специальные методы для распространенных событий, как например, click или submit. Мы можем повесить свои обработчики для событий mouseover (наведение мыши) или keydown(нажатие клавиатуры) на любой элемент веб-страницы.

Например, обработчик нажатия мыши на элемент с id="bg" мог бы выглядеть следующим образом.

$("#bg").mousedown (function (e) {}});

Или для примера обработаем нажатие клавиши:

$(document).keydown(function(e){
	// если нажата клавиша вверх
	 if (e.which==38) 
	 {
		// поднимаем некоторый элемент на 5 пикселей вверх
		var top = parseInt($("#paddleB").css("top"));
		$("#paddleB").css("top", top-5);  
	}
});

Методы jQuery

Как говорилось выше, jQuery выполняет две основные задачи - поиск элементов и их изменение. Если для поиска предназначены селекторы и фильтры, то для манипуляции над элементами используются методы. Эти методы позволяют изменять внешний вид элемента, анимировать его, перемещать в структуре элементов DOM. Это методы довольно многочисленны, поэтому рассмотрим лишь вкратце:

Метод

Описание

addClass('someClass')

Добавляет для выбранного элемента класс someClass

removeClass('someClass')

Удаляет для выбранного элемента класс someClass

toggleClass('someClass')

Переключает для выбранного элемента класс someClass - если его нет, он добавляется, а если он есть - то удаляется

css('свойство', 'значение')

Устанавливает для указанного свойства выбранного элемента указанное значение ($("#paddleB").css("top",25);)

append('новый элемент')

Вставляет внутрь выбранного элемента новый элемент в качестве последнего дочернего ($("#results").append('<li>Новый элемент списка</li>');)

prepend('новый элемент')

Вставляет внутрь выбраного элемента новый элемент в качестве первого дочернего

empty()

Удаляет все дочерние элементы у выбранного элемента

remove()

Удаляет элемент из структуры элементов DOM

attr('атрибут','значение')

Устанавливает для атрибута новое значение

removeAttr('атрибут')

Удаляет атрибут у выбранных элементов

children()

Получает все дочерние элементы у выбранных элементов

parent()

Получает все родительские элементы у выбранных элементов

parent()

Получает все родительские элементы у выбранных элементов

hide()

Скрывает выбранные элементы

show()

Отображает выбранные элементы

toggle()

Скрывает видимые элементы и отображает невидимые

animate()

Анимирует элемент

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

$(function () {
    $("img").mouseover(function () {
        $(this).animate({ height: '+=20', width: '+=20' });
    });
	$("img").mouseout(function () {
        $(this).animate({ height: '-=20', width: '-=20' });
    });
});

Сначала при помощи селектора мы выбираем все элементы img, затем вешаем на них обработчик наведения курсора mouseover. Обработчик события наведения мыши в качестве аргумента принимает анонимную функцию, которая срабатывает при наведении курсора.

В этой функции с помощью ключевого слова this мы получаем элемент, на который мы наводим курсор, а затем с помощью функции animate мы устанавливаем свойства, которые будут анимироваться при наведении курсора.

Подобным образом работаем второй обработчик mouseout. В итоге при наведении курсора изображение увеличится, а при потере изображением фокуса курсора, оно вернется в первоначальные размеры.

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850