Селекторы и фильтры jQuery. Программный интерфейс или синтаксис jQuery

В прошлых уроках мы разбирали вопрос общих понятий jQuery и способов его подключения.
В этой статье речь пойдёт об применении селекторов в jQuery (CSS и XPath), которые позволяют с лёгкостью и точностью выбрать один или несколько элементов DOM. К каждому селектору будет приведён код, пример применения. Использование jQuery селекторов не вызывает проблем с работой в старый браузерах, например IE 6, так как содержит в себе механизмы работы CSS 1-3.

Структура кода jQuery Знак доллара $ - обозначает использование jQuery , selector - элемент DOM с которым работаем и специальная функция jQuery с её параметрами (например, анимация, развёртывание, перемещение и тд).

Пример jQuery кода

$(selector).function(parameters);

Селекторы в jQuery В данном уроке мы остановимся подробно на вопросе селекторов. Что же это такое?

Селектор (от англ. select - выбирать) - это элементы DOM (объектной модели документа, например, теги или специально размеченные блоки), к которым мы обращаемся с запросом. Данное понятие существует и в JavaScript, и в CSS, и других языках, где нужно выбрать конкретный элемент и поработать с его свойствами.

Идентификаторы (id).

Если Вы хотите поработать с конкретным элементом, и только один раз (в теории, так как на практике некоторые браузеры не побрезгуют повторным использованием идентификатора), то присваиваем ему уникальный id.

Код HTML

#id - выбирает единственный элемент с переданным идентификатором (id). В данном случае special

Код jQuery

$("#special").css("border", "1px solid black");

В дальнейшем буду писать без тегов , надеюсь понятно, что JavaScript надо заключать именно в них. В примере мы выбираем элемент с id special , в данном случае это div. В нём мы используем функцию css и создаём чёрную непрерывную (solid) границу (border) в 1 пиксель.

Классы (class).

.class - выбираем все элементы с указанным классом. Всё правильно, их может быть несколько. Главное, чтобы название класса было одинаковым.

Код HTML

Первый блок
Второй блок
Как видите, элемента (div) два и классы у них одинаковые.

Код jQuery

$(".spec_class").css("border", "1px solid red");
У всех элементов, где значение класса spec_class также создаются такие же границы, как и в прошлом примере, но уже красные.

Элементы (elements).

Выбираются все элемента определённого типа. Это либо body , либо все div , либо все table и так далее.

Код jQuery

$("div").css("border", "1px solid green");
У всех div появится зелёная рамка.

* (все элементы) - выбираем абсолютно все элементы. Даже head и body .

Код jQuery

$("*").css("border", "1px solid blue");
У всех элементов Вашего документа появится синяя рамка.

$("*", document.body).css("border", "2px solid black");
Выбираем все элементы в body и делаем им чёрную границу в 2 пикселя.

По типу: selector1, selector2, ..., selectorN - перечисляем все элементы. Ниже интересный пример совместного использования селекторов.

Код jQuery

$("div, span, p.spec_class").css("border", "1px solid red");
Выбирает все элементы div, span и p, у которых указан класс spec_class. Все селекторы просто указывается через запятую.

Иерархические селекторы в jQueryancestor descendant

Выбирается главный элемент (родительский элемент) и элементы включённые в него (потомки). Рассмотрим на примере ниже родителя form и потомков select .

Код jQuery

$("form select").css("border", "1px dashed black");
У всех элементов select, потомков form будет установлена чёрная пунктирная граница.

parent - child

Теперь выберем всех потомков родителького элемента.

Код jQuery

$("#id > *").css("border", "1px double black");
В начале выбираем всех наследников элемента с идентификатором id , а потом создаём им двойную границу чёрного цвета.

prev и next (предыдущий и следующий)

Указываем элементы, идущие следующими (next) за элементом, обозначенным в качестве предыдущего (prev).

Код jQuery

$("label + input").css("color", "blue").val("Готово!");
Выбираем элементы input, идущие за label. Устанавливаем им свойства CSS - цвет в форме чёрного цвета, а значение (.val) установлено Готово!

prev ~ siblings

Теперь работаем с сестринскими элементами. Выюираем всех сестёр, следующих за предыдущим элементом (prev).

Код jQuery

$("#prev ~ div").css("border", "3px groove blue");
Ищем все элементы div, которые являются сестринскими по отношению друг к другу и следуют сразу за элементом с идентификатором #prev. Обратите внимание, что в примере не будут отобраны элементы span, поскольку отбор идет только для элементов div.

Базовые фильтры:first

Будет выбран первый элемент с указанным селектором.

Код jQuery

$("tr:first").css("font-style", "bold");
В первой строке (tr) в таблице текст будет выделен полужирным (bold).

Теперь будем выбирать последний элемент с указанным селектором.

Код jQuery

$("tr:last").css({backgroundColor: "yellow",fontWeight: "bolder"});
Находим последнюю строчку (tr) в таблице и красим фон в жёлтый цвет и также устанавливаем жирный шрифт (bolder).

:not(selector)

Используя отрицание отфильтровывает элементы. Выбираем все input, в которых не стоит флажка (checkbox), а также span, следующие за ними

Код jQuery

$("input:not(:checked) + span").css("background-color", "yellow");
Значение чекбоксов при этом не меняется.

Внимание! Интересный пример , который применяет каждый второй в своей практике. Как выбрать чётный или нечётный элементы? Нужно затем, чтобы строки в тексте или даже коде делать читаемыми. Стартовое значение 0.

Код jQuery

$("tr:even").css("background-color", "#с1с1с1");
Отбираем чётные строки в таблице. Выделена будет первая, третья и тд строки. Внимание! Отсчёт идёт по индексам, а в них первая строка имеет значение 0. Далее отбираются строки с индексами 0, 2, 4 и т.д.).

Теперь выбираем нечётные элементы. Считается значение индекса, начиная с 0. Соответственно будут выбраны значения 1,3,5,7 и тд. Это соответствует 2,4,6 и тд строчкам, так как их отсчёт идёт по факту, с первой.

Код jQuery

$("tr:odd").css("background-color", "#с1с1с1");
Фон нечётных строк окрашиваем в серый.

:eq(index)

Выбираем конкретный индекс элемента. В примере покрасим только одну строку таблицы.

Код jQuery

$("td:eq(2)").css("color", "blue");
Выбираем по индексу элемент 2. Напоминаю, это будет 3-я строка, так как тэо будет третий по счёт индекс (0,1,2).

:gt(index)

Теперь выбираем значения индекса, которые больше указанного в селекторе.

Код jQuery

$("td:gt(4)").css("text-decoration", "line-through");
Выбираем строки в таблице, индекс элемента которых больше 4, то есть их индекс равен 5,6 и тд. Это соответствует 6, 7 и тд встречающимся элементам, в нашем случае строкам таблицы.

:lt(index)

Теперь выбираем значения индекса, которые меньше указанного в селекторе.

Код jQuery

$("td:lt(3)").css("color", "red");
Выбираются все элементы td с индексом мНапример ищем все элементы TD, с индексом меньше 3. Поскольку отсчёт, ещё раз напоминаю, ведётся с нуля, то это строки таблицы (td) 1,2,3.

Будут выбраны все элементы, которые являются заголовками (h1,h2,h3 и тд)

Код jQuery

$(":header").css({ background:"#c1c1c1", color:"#0085cc" });
Для всех заголовков (элементов h) мы установим синий шрифт и светло-сервый фон.

:animated

Будут отобраны все элементы, являющиеся в тот момент анимированными.

Код HTML

Сделать первый div красным
Код jQuery

$("#run").click(function(){
$("div:animated").toggleClass("colored");
});
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
Здесь пример немного посложнее. После клика по кнопке меняем цвет анимированного элемента (div). С не анимированными элементами изменений не происходит.

Рассмотрим простой пример работы селекторов в jQuery. Файл полностью готов к работе, достаточно просто скопировать код целиком в созданный html-файл. Бибилотека в примере подключается с сервера Google, поэтому для корректной работы файла потребуется подключение к интернету. Под кодом есть Демо-версия для просмотра.

jQuery

#polosa1{ position: relative; background:white; width: 200px; height: 50px; border-top: solid 1px #000; }
#polosa2{ position: relative; background:blue; width: 200px; height: 50px; }
#polosa3{ position: relative; background:red; width: 200px; height: 50px; border-bottom: solid 1px #000; }

function addFlag1(){
$("div:eq(0)").css("background", "white");
$("div:eq(1)").css("background", "green");
$("div:eq(2)").css("background", "red");
}
function addFlag2(){
$("#polosa1, #polosa3").css("background", "red");
$("#polosa2").css("background", "white");
}
function addFlag3(){
$("div").css("background", "red");
}

Пример работы селекторов jQuery

Флаг Болгарии
Флаг Австрии
Флаг СССР

Демонстрация Скачать исходники
Спасибо за внимание! Удачи в начинаниях!

JQuery HTML — это библиотека, предназначенная чтобы «писать меньше, а делать больше «. Это не язык программирования, а инструмент, используемый для того, чтобы упростить реализацию общих задач JavaScript .

JQuery имеет дополнительное преимущество — кроссбраузерную совместимость . Можете быть уверены, что ваш код будет интерпретироваться в любом современном браузере.

Сравнив написание простой программы «Hello, World! » с помощью JavaScript и jQuery , можно увидеть разницу между ними.

JavaScript

document.getElementById("demo").innerHTML = "Hello, World!";

JQuery

$("#demo").html("Hello, World!");

Этот короткий пример иллюстрирует, как с помощью jQuery можно получить тот же результат, что и с помощью стандартного JavaScript , но более кратко.

Цели

Данное руководство не предполагает наличие базовых познаний в jQuery , оно охватывает следующие темы:

• Как установить jQuery в веб-проекте;
• Определение важных концепций веб-разработки, таких как API , DOM и CDN ;
• Общие селекторы, события и эффекты jQuery ;
• Примеры для проверки концепций, изученных в рамках этой статьи.

Настройка jQuery

JQuery — это файл JavaScript , на который вы будете ссылаться в документе. Как подключить JQuery в HTML :

• Скачать локальную копию;
• Добавить ссылку на файл через сеть доставки контента (CDN ).

Примечание. Сеть доставки контента (CDN ) представляет собой систему из нескольких серверов, которые предоставляют пользователю веб-контент в зависимости от его географического положения. Когда вы добавляете ссылку на файл jQuery через CDN , он будет предоставлен пользователю быстрее и эффективнее, чем в случае его размещения на собственном сервере.

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

Создадим небольшой веб-проект. Он будет состоять из файла style.css , scripts.js и основного файла index.html .

Задайте основную HTML-разметку и сохраните ее в index.html .

Index.html

jQuery Demo

Index.html

jQuery Demo

Скрипт JavaScript (scripts.js ) должен подключаться в документе ниже библиотеки jQuery или он не будет работать.

Примечание. Если вы загрузили локальную копию jQuery, сохраните ее в папке js/ и подключите через ссылку js/jquery.min.js.

Библиотека jQuery добавлена в HTML , и у нас есть полный доступ к API jQuery .

Использование jQuery

jQuery используется для соединения с элементами HTML в браузере через DOM .

Объектная модель документа (DOM ) — это метод, с помощью которого JavaScript (и jQuery ) взаимодействуют с HTML в браузере. Чтобы увидеть, что собой представляет DOM , в браузере кликните правой кнопкой мыши на текущей веб-странице и выберите пункт «Просмотреть код «. В результате откроется панель «Инструментов для разработчиков «. HTML-код , который вы увидите в ней, это и есть DOM .

Каждый элемент HTML считается узлом DOM — объектом, к которому может обратиться JavaScript . Эти объекты имеют древовидную структуру, в которой элемент является ближайшим к корню, а каждый — ветвью дерева. JavaScript может добавлять, удалять и изменять любые из этих элементов.

Если вы снова кликните правой кнопкой мыши и выберете пункт «Просмотреть исходный код », то увидите необработанный HTML . Сначала вы можете путаться в понятиях DOM и исходный HTML-код , но это разные вещи. Исходный код страницы точно соответствует тому, что написано в HTML-файле . Он статичен и неизменен, на него не действует JavaScript . В свою очередь DOM — динамичен и может меняться.

Внешний слой DOM , который обертывает весь узел , является объектом документа. Чтобы использовать на странице jQuery , нужно убедиться, что документ «готов ».

Создайте в папке js/ файл scripts.js и добавьте в него следующий код:

js/scripts.js

Весь код jQuery , вставленный в HTML , будет обернут в указанный выше код. Он будет работать только после того, как DOM будет готов для выполнения кода JavaScript . Даже не смотря на то, что в некоторых случаях JavaScript не загружается, пока элементы не будут отображены, включение этого блока считается лучшей практикой.

Чтобы запустить скрипт «Hello, World !» и вывести текст в браузере с помощью jQuery , сначала создадим пустой элемент абзаца, к которому применен идентификатор demo .

Index.html

... ...

JQuery вызывается и обозначается знаком доллара ($) . Мы обращаемся к DOM с помощью jQuery , используя синтаксис CSS , и применяем действие с помощью method :

$("selector").method();

Так как идентификатор в CSS обозначается символом (#) , мы получаем доступ к идентификатору demo с помощью селектора #demo . html() — метод, который изменяет HTML-разметку внутри элемента.

Теперь мы поместим программу «Hello, World! » внутрь оболочки jQuery ready() . Добавьте эту строку в существующую функцию в файле scripts.js :

js/scripts.js

$(document).ready(function() { $("#demo").html("Hello, World!"); });

После сохранения изменений можно открыть в браузере файл index.html . Если все работает правильно, то вы увидите надпись «Hello, World! »

Кликните правой кнопкой мыши по надписи «Hello, World! » и выберите пункт «Просмотреть код «. Теперь в DOM отображается

Hello, World!

. Если вы просмотрите исходный код страницы, то увидите только , исходный HTML-код, который мы написали.

Селекторы

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

Чтобы получить доступ к селектору, используйте символ $ , за которым следуют круглые скобки () .

$("селектор")

Строки с двойными кавычками являются предпочтительными (согласно руководству jQuery ). Хотя часто используются и строки с одиночными кавычками.

Ниже приведен краткий обзор часто используемых селекторов.

• $(«*») — подстановочный знак : выбирает каждый элемент на странице;
• $(this) — текущий : выбирает текущий элемент, управляемый в данный момент внутри функции;
• $(«p») — тег : выбирает все экземпляры тега

  ;

• $(«.example») — класс : выбирает все элементы, к которым применяется класс example ;
• $(«#example») — идентификатор : выбирает один экземпляр с уникальным идентификатором example ;
• $(«») — атрибут : выбирает все элементы, в атрибуте type которых задано значение text ;
• $(«p:first-of-type») — псевдоэлемент : выбирает первый элемент

  .

При подключении JQuery к HTML вы будете иметь дело с классами и идентификаторами. Классы используются, когда нужно выбрать несколько элементов, а идентификаторы — когда только один.

События jQuery

В примере «Hello, World! » код запускался, когда страница загружена и документ готов, поэтому в нем не требовалось вмешательство пользователя. В этом случае мы могли бы написать текст непосредственно в HTML , без jQuery . Но нужно будет использовать jQuery , если мы хотим, чтобы текст отображался на странице после клика мыши.

Вернитесь к файлу index.html и добавьте в него элемент . Мы будем использовать эту кнопку для отслеживания события клика.

index.html

... Click me

Мы используем метод click() для вызова функции, содержащей код «Hello, World! ».

js/scripts.js

$(document).ready(function() { $("#trigger").click(); });

Иидентификатор элемента — trigger , мы выбираем его с помощью $(«#trigger») . Добавив click() , мы отслеживаем событие клика. Далее мы вызываем функцию, которая содержит наш код внутри метода click() .

function() { $("#demo").html("Hello, World!"); }

Вот полный код JQuery HTML элемента.

js/scripts.js

$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); });

Сохраните файл scripts.js и обновите в браузере index.html . Теперь, когда вы нажимаете кнопку, появляется текст «Hello, World! «.

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

• click() — клик : происходит при одиночном клике мыши;
• hover() — наведение курсора : происходит при наведении указателя мыши на элемент;
• submit() — отправка : происходит при отправке данных формы;
• scroll() — прокрутка : происходит при прокрутке страницы или элемента;
• keydown() — нажатие клавиши : происходит при нажатии на клавишу на клавиатуре.

Чтобы вывести элементы с помощью анимации или убрать их, когда пользователь прокручивает страницу, используется метод scroll() .

Чтобы выйти из меню с помощью клавиши ESC , используется метод keydown() . Чтобы создать выпадающее меню или с помощью JQuery добавить HTML в div , используется метод click() .

Эффекты jQuery

Эффекты jQuery позволяют добавлять анимацию и образом управлять элементами на странице.

В JavaScript символ доллара обычно встречается в объявлениях переменных и вызовах функций. Позвольте убедить вас, что здесь не кроется ничего таинственного, ведь это всего лишь имя переменной (идентификатор). В этом нет ничего странного. Например, безумно популярный JavaScript-фреймворк, о котором я уже писал (What is jQuery?) использует знак доллара для получения доступа к главному объекту jQuery.

Во многих компилируемых и интерпретируемых языках переменные рассматриваются как идентификаторы. Каждый язык имеет свой синтаксис, будь то C, C++, PHP, Java или JavaScript. И синтаксис каждого языка подчиняется определённому набору правил. Например, в JavaScript правила объявления переменных заключаются в том, что каждый идентификатор должен начинаться с буквы латинского алфавита, символа доллара ($) или подчёркивания (_) и не может начинаться с цифр (от 0 до 9) и прочих символов, таких как знаки препинания. Оба упомянутых символа ($ и _) нестандартны и могут встречаться и в остальной части идентификатора. Так, например, имя переменной, заданное пятью знаками доллара подряд: $$$$$ (или также любым числом подчёркиваний) абсолютно приемлемо, поскольку подчиняется правилам синтаксиса языка JavaScript. Это простое требование языка JavaScript, с которым программисты должны смириться. Поверьте, для этого есть весьма веские причины.

В некотором коде жил да был глобальный объект функции, чьим именем был простой знак $. Такой стиль кода (отсутствие ключевого слова var) опытными программистами признан нежелательным, мы стараемся не использовать глобальные переменные в JavaScript, если, конечно, не пытаемся схитрить. Как бы то ни было, суть в том, что эта функция могла бы быть названа почти как угодно: a, z или даже _.

// Пример корректных идентификаторов var A = function() { alert("функция A была вызвана"); } var $ = function() { alert("функция $ была вызвана"); } var _ = function() { alert("функция _ была вызвана"); }

Более того, в JavaScript версий 1.5 и выше, помимо знака доллара и символа подчёркивания, вы можете использовать в идентификаторах символы кодировок ISO 8859-1 и Unicode, например Ø. Вы можете удивиться, но разрешено использовать даже Unicode-последовательности вида uXXXX, где XXXX - число, например 0024. Unicode-символ u0024 эквивалентен - угадайте, чему? … Знаку доллара. И вы можете даже вызвать функцию, заданную идентификатором u0024, используя для ссылки знак доллара! Конечно, не стоит использовать это повсеместно только потому, что такое возможно. Я полагаю, что это нежелательная практика, многие программисты могут быть осведомлены хуже, чем вы, и из-за таких «фишек» код будет казаться им запутанным и нечитаемым.

Как вы наверняка знаете, JavaScript - объектно-ориентированный язык программирования. Есть несколько различных способов присваивания значения идентификатору. Например, когда мы используем ключевое слово var, JavaScript создаёт переменную в текущей (или локальной) области видимости. Если мы пропустим ключевое слово var, переменная всё равно будет создаваться, но уже в глобальной области видимости программы, что означает, что она будет видима во всём файле.js. И снова хочу напомнить: избегайте глобальных переменных. Я понимаю, что эта статья о знаке доллара, но, если вам всё ещё не очевидно, глобальные переменные напомнят о себе, когда вы столкнётесь с масштабными проектами, различные компоненты которых написаны кем-то другим или разработаны в команде программистов. Итак, если кто-то говорит вам, что использовать глобальные переменные без ключевого слова var – вполне нормально, не верьте – вас обманывают.

И ещё. Поскольку переменные в JavaScript являются объектами, вы можете ссылаться на функции своими переменными. Вы даже можете присвоить «функцию-член» уже существующей функции. Но попытка присвоить функцию объекту, который ещё не существует обречена на провал в JavaScript. Если вы действительно хотите хорошо разобраться, обратите особое внимание на приведённый ниже код.

Теперь, используя полученные знания и не запуская этот код в браузере, можете ли вы сказать, будет ли он работать?

По соглашению, символ доллара ($), подчёркивания (_) и даже некоторые символы ASCII могут использоваться в любом месте идентификатора в JavaScript. В документации Ecma Script (7.6 Identifiers, ECMA-262, 3rd Ed.) сказано: «Символ доллара предназначен для использования только в автоматически сгенерированном коде». Это означает, что мы не должны использовать символ доллара ($) в идентификаторах, кроме тех случаев, когда мы пишем фреймворк. Вот список разрешённых символов, которые могут использоваться в идентификаторах:

IdentifierName::
IdentifierStart
IdentifierName IdentifierPart
IdentifierStart::
UnicodeLetter
$
_
UnicodeEscapeSequence
IdentifierPart::
IdentifierStart
UnicodeCombiningMark
UnicodeDigit
UnicodeConnectorPunctuation
UnicodeEscapeSequence

Цель этой статьи - показать, что символ доллара – всего лишь идентификатор (реализованный популярным фреймворком Prototype и затем подхваченный разработчиками jQuery) и ничего больше. Почему программисты используют его? Ну, это очень удобное имя для функции, имеющей чёткое назначение в коде фреймворка. По этой причине главный объект jQuery, определённый как знак доллара, является синонимом объекта jQuery. В обычном коде мы используем объект jQuery вместо $. Если вы хорошо разбираетесь в jQuery и уделяете пристальное внимание документации, использование синонима $ вместо объекта jQuery нежелательно, хотя, почему-то он очень популярен среди программистов, которые находят это изящным.

Подведём итоги

Разница в использовании символа доллара - смысловая. Это имя идентификатора. С точки зрения психологии, оно выглядит удобно и изящно. Технически же, это всего лишь функция или символьная ссылка на переменную, на самом деле нет никакой разницы в использовании $ или _ или любого другого символа.

Символ $, как сказано в спецификации Ecmascript, разрешён для использования в идентификаторах. Если идентификатор состоит из единственного символа $, он, конечно, выглядит странно, но такая разница видна только человеку. Насколько я знаю, для компилятора было бы всё равно, если бы переменная состояла из любого другого символа, например a или b.

С другой стороны, спецификация Ecmascript сообщает, что символ $ должен использоваться во внутреннем коде, каким является код фреймворка jQuery, просто из удобства. Это значит, что не стоит использовать его в своём коде только потому что это здорово смотрится, но при разработке фреймворка из этого действительно можно извлечь выгоду, так как глобальный объект фреймворка будет выглядеть уникальным и выделяться из остального кода.

Keypress() — устанавливает обработчик ввода символа с клавиатуры, либо, запускает это событие.

Метод имеет три варианта использования.

Keypress(handler)

• eventData — объект содержащий данные, для передачи в обработчик. Должны быть представлены в формате {fName1:value1, fName2:value2, …};
• handler — функция, которая будет установлена в качестве обработчика.

Keypress ()

Вызывает событие keypress , у выбранных элементов страницы.

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

В первых двух вариантах, этот метод является сокращенной версией.on("keypress", handler) , а в третьем — .

Событие keypress отправляется элементу, когда пользователь нажимает клавишу на клавиатуре. Это похоже на событие , за исключением того, что модификаторы и непечатаемые клавиши, такие как Shift , Esc и Delete , запускают события смены ключа, но не события keypress . Другие различия между этими двумя событиями могут возникать в зависимости от платформы и браузера.

Событие keypress может быть прикреплено к любому элементу, но сработает только на тех элементах, которые имеют фокус. Список элементов, которые могут получить фокус, варьируются в зависимости от браузера, поэтому надежнее всего будет привязать это событие к элементам формы, так как они всегда могут получить фокус.

Для примера рассмотрим html:

Обработчик события может быть привязан к полю ввода:

$("#target").keypress(function() { alert("Вызвано событие.keypress()"); });

$ ("#target" ) . keypress (function () { alert ("Вызвано событие.keypress()" ) ; } ) ;

При нажатии клавиши в поле ввода мы увидим сообщение «Вызвано событие.keypress()».

Чтобы инициировать событие вручную, примените.keypress() без аргумента:

$("#other").click(function() { $("#target").keypress(); });

$ ("#other" ) . click (function () { $ ("#target" ) . keypress () ; } ) ;

При клике мышью в область с id="other" будет вызвано событие и мы также увидим сообщение.

Если необходимо установить обработчик нажатия клавиши в любом месте страницы (например, для реализации глобальных сочетаний клавиш), то лучше всего прикрепить это поведение к объекту документа. Событие нажатия клавиши «всплывает» по DOM, если не будет явно остановлено.

Код нажатой клавиши

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

Обратите внимание, что методы keydown и keyup определяют нажатую клавишу, а keypress указывает, какой символ был введен. Таким образом,при вводе латинской «a» переменная eventObject.which внутри обработчиков события keydown или keyup будет содержать значение 65, а внутри обработчика keypress — 97. В верхнем регистре «А» сообщается как 65 по всем событиям. Из-за этого различия, обработка специальных нажатий клавиш, таких как клавиши со стрелками, keydown или keyup — лучший выбор.

Дополнительные замечания

Поскольку метод.keypress() является сокращенной версией.on("keypress", handler) , он может быть удален с помощью.off("keypress").

jquery уроки (6)

Я работаю над проектом с довольно большим количеством JQuery. В JQuery есть много значков в любом месте, например

$(document).ready(function () { $("input").wl_File({ url: "/Admin/PolicyInventory/UploadDocuments", onFileError: function (error, fileobj) { $.msg("file is not allowed: " + fileobj.name, { header: error.msg + " Error ", live: 10000 }); } }); ...

Мой вопрос: что означает этот знак доллара? Почему он используется повсюду и как его понять и интерпретировать? Это напоминает мне о страшных днях, когда я изучал Схему в университете, и мне приходилось класть скобки везде, не зная, почему я это делаю.

$ sign является псевдонимом для jQuery . Краткая версия jQuery , меньше механизма записи.

Только для примера: (в jQuery это сложнее)

Var yourFunction = function() { alert("a function"); } window.Myf = yourFunction;

Теперь вы можете позвонить yourFunction как:

Myf(); // definitely a short syntax

Знак доллара - это просто псевдоним для JQuery.

JQuery(document).ready(function(){});

$(document).ready(function(){});

Жесткость и производительность

Когда мы работаем над библиотекой или языком программирования, мы должны обратить внимание на некоторые правила записи. Благодаря jQuery они уже реализовали множество опций. Вы можете использовать $ или вы можете использовать jQuery или можете использовать _

(function (_) { _("#wow").click() })(jQuery);

Или, может быть, вы можете делать фантастические изменения, javascript-идентификаторы являются unicode, поэтому вы можете использовать Ω

(function (Ω) { Ω("#wow").click() })(jQuery);

Но основная идея этого, нажимая один раз на клавиатуру, лучше, чем набирать jQuery

С другой стороны у нас есть производительность... Я просто случайно открыл свой проект и искал $ , я использовал 54 $ в одном файле javascript.

jQuery - 6 байт.

Разница огромная 54 * 5 = 220 байт.