Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core
Библиотека jQuery предназначена прежде всего для удобного поиска и манипулирования элементами на веб-странице. При нахождении определенного элемента с помощью jQuery можно повесить на него обработчики событий, анимировать, скрыть или, наоборот, отобразить, создать для элемента интерактивное взаимодействие с пользователем, изменить его стили и т.д. И даже если вы не работали раньше с jQuery, ее освоение не составит особых трудностей. Для более подробного ознакомления с данной библиотекой можно обратиться к руководству Изучаем jQuery. Здесь же я представлю краткий обзор возможностей библиотеки.
Функция jQuery
позволяет использовать всю мощь библиотеки jQuery. Данная функция (jQuery
) в качестве псевдонима
имеет знак $
(так как символ $
легко набрать на клавиатуре, и он представляет действительное имя функции, которое
можно употреблять в JavaScript). Поэтому следующие записи функции jQuery
будут идентичны:
jQuery(document).ready(function(){ // здесь код анонимной функции });
$(function(){ // здесь код анонимной функции });
$(document).ready(function(){ // здесь код анонимной функции });
Все три вышеописанных случая идентичны и срабатывают сразу после загрузки веб-страницы. Весь остальной функционал помещается внутрь
функции jQuery
. И поскольку данная функция осуществляет выборку и модификацию элементов, то для нее иногда необходимо, чтобы вся веб-страница была
уже загружена. Поэтому скрипт данной функции или ссылку на файл скрипта помещают обычно в самый низ веб-страницы.
Для выборки из структуры страницы нужных элементов используются селекторы.
Шаблон селектора | Значение | Пример |
$("Element") | Выбирает все элементы с данным именем тега |
|
$("#id") | Выбирает элемент с определенным значением id |
Так, в следующем коде:
<div id="box1"></div>
<div id="box2"></div>
селектор |
$(".className") | Выбирает все элементы с определенным значением атрибута class |
Допустим, у нас следующий код: <div class="apple"></div>
<div class="apple"></div>
<div class="orange"></div>
<div class="banana"></div>
то селектор |
$("selector1,selector2,selectorN") | Выбирает элементы, которые соответствуют данным селекторам |
Если у нас следующий код: <div class="apple"></div>
<div class="apple"></div>
<div class="orange"></div>
<div class="banana"></div>
то селектор |
Например:
$(function () { $(".results").css("top", "20px"); });
Сначала мы получаем элемент, у которого class имеет значение results (<div class="results"></div>
), а потом с помощью функции
css
устанавливаем определенное значение для его свойства top
.
Причем если у нас на странице несколько элементов, у которых class="results"
, то селектор вернет весь набор из этих элементов. И к каждому
из элементов данного набора будет применено преобразование.
Выше в таблице показан лишь небольшой базовый список селекторов. Полный же список селекторов вы можете найти на сайте Селекторы CSS
В дополнение к селекторам применяются фильтры. Можно выделить следующий набор базовых фильтров:
Фильтр | Значение |
: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') | Получает все элементы, которые содержат |
:has('селектор') | Получает все элементы, которые содержат хотя бы один дочерний элемент, соответствующий селектору |
:empty | Получает все элементы, которые не имеют дочерних элементов |
:first-child | Получает все элементы, которые являются первыми дочерними элементами в своих родителях |
:last-child | Получает все элементы, которые являются последними дочерними элементами в своих родителях |
:nth-child(n) | Получает все элементы, которые являются n-ными элементами в своих родителях (нумерация идет с единицы) |
:only-child | Получает все элементы, которые являются единственными дочерними элементами в своих родителях |
:parent | Получает все элементы, которые имеют, как минимум, один дочерний элемент |
Например, если мы хотим получить все элементы, содержащие текст asp.net mvc
, мы можем применить следующее выражение: $(':contains("asp.net mvc")')
И завершая обзор фильтров, следует упомянуть о фильтрах форм, которые позволяют получить определенные элементы html-форм:
Фильтр | Значение |
button | Получает все элементы |
:checkbox | Получает все элементы |
:checked | Получает все отмеченные элементы |
:disabled | Получает все элементы, которые отключены |
:enabled | Получает все элементы, которые включены |
:input | Получает все элементы |
:password | Получает все элементы |
:radio | Получает все элементы |
:reset | Получает все элементы |
:selected | Получает все отмеченные элементы |
:submit | Получает все элементы |
:text | Получает все элементы |
Мы можем комбинировать в одном выражении несколько селекторов и фильтров: $('.results:odd:has('img')')
. В данном случае
мы выбираем все нечетные элементы с class="results"
, которые содержат элементы img
, то есть изображения.
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 выполняет две основные задачи - поиск элементов и их изменение. Если для поиска предназначены селекторы и фильтры, то для манипуляции над элементами используются методы. Эти методы позволяют изменять внешний вид элемента, анимировать его, перемещать в структуре элементов DOM. Это методы довольно многочисленны, поэтому рассмотрим лишь вкратце:
Метод | Описание |
addClass('someClass') | Добавляет для выбранного элемента класс |
removeClass('someClass') | Удаляет для выбранного элемента класс |
toggleClass('someClass') | Переключает для выбранного элемента класс |
css('свойство', 'значение') | Устанавливает для указанного свойства выбранного элемента указанное значение ( |
append('новый элемент') | Вставляет внутрь выбранного элемента новый элемент в качестве последнего дочернего ( |
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
. В итоге при наведении курсора изображение увеличится, а при потере изображением фокуса
курсора, оно вернется в первоначальные размеры.