setTimeout vs window.setTimeout
В приведенном выше синтаксисе используется window.setTimeout. Почему?
На самом деле, setTimeout и window.setTimeout – это практически одна и та же функция. Единственная разница заключается в том, что во втором выражении мы используем метод setTimeout как свойство глобального объекта window.
Лично я считаю, что это лишь сильно усложняет код. Если бы мы определили альтернативный метод JavaScript timeout, который может быть найден и возвращен в приоритетном порядке, то столкнулись бы с еще большими проблемами.
В данном руководстве я не хочу связываться с объектом window, но в целом, вы сами решаете, какой синтаксис стоит использовать.
bind(), unbind(), live(), и die()
Знаете ли Вы, что когда добавляется событие по нажатию мыши к элементу, например, так:
Вы в действительности используете оболочку для метода bind()? Чтобы использовать метод bind(), Вам нужно передать тип события в качестве первого параметра и функцию в качестве второго параметра.
Если Вы используете много событий, то можете категоризировать их с помощью именования; просто добавьте точку после имени события и используйте именование.
Вы также можете назначать одну и туже функцию нескольким событиям в одно и тоже время, разделяя их пробелами. Так, чтобы получить эффект всплытия, Вы можете начать следующим образом:
Вы можете передать данные функции, добавляя третий параметр (на второй позиции):
Рано или поздно Вы столкнетесь с ситуацией, когда при вставке элемента в DOM с помощью обработчика событий, обработчик событий, который сделан с помощью bind (или его оболочки), не работает для вставленного элемента. В этом случае Вам нужно использовать метод live() (делегировать). Таким образом добавляется обработчик события добавляется соответствующему вставленному элементу.
Для удаления обработчика событий, созданных методом bind(), используйте метод unbind(). Если ему не передаются никакие параметры, то он удаляет все обработчики. Вы можете передать ему тип события, и он удалить обработчики событий только указанного типа. Чтобы удалить события из нужного пространства имен, добавьте это пространство имен. Если Вы хотите удалить определенную функцию, передайте ее имя как второй параметр.
Вы можете использовать методы bind/unbind анонимно. В этом случае методы будут работать только с именем функции.
Если Вам надо отвязать событие из функции, которая вызвана самим событием, просто передайте методу unbind() объект event.
Вы не можете использовать unbind() для события live. Используйте метод die(). Без параметров он удалит все события live из коллекции элемента. Вы можете также передавать ему тип события или тип и функцию.
Как включить/выключить текстовое поле с помощью jQuery?
Ниже приведен код, основанный на jQuery, который делает то же самое. В этом примере мы использовали функцию prop(). Если вы пользуетесь версией jQuery 1.5 или старше, замените prop() на attr().
Так же, как и в предыдущем примере, у нас есть две кнопки btn_enable и btn_disable, чтобы включать и выключать текстовое поле. Подключим, обработчик событий, используя функцию click(), которая вызывается при загрузке страницы.
В обработчике события мы находим текстовое поле с помощью селектора ID в jQuery, например, $(«#name») и затем вызываем prop(«disabled», false»), чтобы отключить это текстовое поле. Когда пользователь нажимает кнопку «включить», мы устанавливаем свойство disabled в true, вызывая jQuery prop(«disabled», true). Это заново активирует текстовое поле. Помните, что нельзя ввести текст в отключенное поле.
<html> <head> <title>Как включить или выключить текстовое поле с помощью jQuery</title> </head> <body> <h2> Включение и выключение текстового поля, используя jQuery<;/h2> <form id="registration-form"> Введите ваше имя: <input type="text" id="name"> </form> <button id="btn_disable" >Выключить ввод</button> <button id="btn_enable" >Включить ввод</button> <script src="https://code.jquery.com/jquery-1.6.2.min.js"></script> <script> $(document).ready(function() { $("#btn_enable").click(function(){ $("#name").prop("disabled", false); }); $("#btn_disable").click(function(){ $("#name").prop("disabled", true); }); }); </script> </body> </html>
Можете протестировать это, запустив пример у себя в браузере. Только не вызывайте функцию removeProp(), чтобы заново включить кнопку. Она удалит атрибут «disabled» из текстового поля, поэтому нельзя будет снова его отключить в будущем. Вместо этого используйте метод jQuery prop disabled.
Вот скриншот того, как будет выглядеть страница в браузере вроде Edge или Chrome.
В этом примере мы отключили текстовое поле и заново включили его. Для этого можно использовать JavaScript или jQuery.
Пожалуйста, оставляйте свои отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, дизлайки, подписки, отклики!
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. За комментарии, отклики, лайки, дизлайки, подписки низкий вам поклон!
КККонстантин Кондрусинавтор статьи «How to enable/disable an element using jQuery and JavaScript? Example»
queue() / dequeue()
Функции queue() и dequeue() работают с элементом. Очередь — это список анимаций, которые должны быть выполнены для элемента. По умолчанию очередь элемента имеет имя ‘fx’. Давайте посмотрим на пример:
JavaScript
Итак, что здесь происходит? Функция animateBox мы устанавливаем очередь анимаций. Отметим, что последний пункт снова вызывает функцию animateBox, таким образом мы постоянно повторяем очередь. Когда происходит нажатие мыши на li#start, функция вызывается и начинается выполнение очереди анимаций. Когда мы нажимаем на li#reset, текущая анимация завершается, а затем div останавливает анимацию. С помощью jQuery мы устанавливаем очередь под именем ‘fx’ (помните, очередь по умолчанию) на пустой массив; в действительности мы очищаем очередь. А что происходит, когда мы нажимает li#add? Сначала мы вызываем функцию queue элемента div. Данное действие добавляет функцию в конец очереди, а так как мы не задали имя очереди как первый параметр, то использцется ‘fx’. В данной функции мы анимируем div, а затем вызываем функцию dequeue() для элемента div, которая удалаяет данную функцию из очереди. Очередь продолжает выполняться, но функция в ней не присутствует.
Пример использования 2: таблицы
Во втором примере у нас есть таблица, которая отображает информацию о пользователе, скажем, как компонент в панели инструментов. У каждого пользователя есть идентификатор, но вместо того, чтобы показывать его, мы сохраняем его как атрибут data для каждого элемента <tr>.
<table>
<!-- ... -->
<tr data-userid="1">
<td>
<input type="checkbox" data-action="select">
</td>
<td>John Doe</td>
<td>[email protected]</td>
<td>
<button type="button" data-action="edit">Edit</button>
<button type="button" data-action="delete">Delete</button>
</td>
</tr>
</table>
Последний столбец содержит две кнопки для редактирования и удаления пользователя из таблицы. Первая кнопка имеет атрибут data-action edit, а вторая — delete. Когда мы кликаем по любой из них, мы хотим вызвать какое-то действие (например, отправку запроса на сервер), но для этого необходим идентификатор пользователя.
Прослушиватель события клика прикреплен к глобальному объекту окна, поэтому всякий раз, когда пользователь кликает где-нибудь на странице, вызывается функция обратного вызова handleClick.
function handleClick(evt) {
var { action } = evt.target.dataset;
if (action) {
// `action` существует только для кнопок и чек-боксов в таблице.
let userId = getUserId(evt.target);
if (action == "edit") {
alert(`Edit user with ID of ${userId}`);
} else if (action == "delete") {
alert(`Delete user with ID of ${userId}`);
} else if (action == "select") {
alert(`Selected user with ID of ${userId}`);
}
}
}
Если клик происходит где-то еще, кроме одной из этих кнопок, атрибут data-action не существует, следовательно, ничего не происходит. Однако при нажатии любой кнопки будет определено действие (кстати, это называется делегированием события), и на следующем шаге идентификатор пользователя будет получен путем вызова getUserId.
function getUserId(target) {
// `target` - это всегда кнопка или чек-бокс.
return target.closest("").dataset.userid;
}
Эта функция ожидает, что узел DOM является единственным параметром, и при вызове использует его Element.closest для поиска строки таблицы, содержащей нажатую кнопку. Затем он возвращает значение data-userid, которое теперь можно использовать для отправки запроса на сервер.
Выбор элементов по атрибуту
Основные селекторы отлично подходят в случаях, если нужно выбрать все параграфы на странице или элемент, который нужно выбрать имеет класс CSS или ID.
Однако, иногда нужно выбрать определенный элемент, у которого нет класса или ID, и нет возможности просто добавить класс или ID к данному элементу в разметке. Такая ситуация может сложиться при использовании CMS с фиксированным шаблоном HTML или при работе с контентом, созданным пользователем.
В данной ситуации возможно сузить область выбора с помощью атрибута HTML элемента, который надо выбрать. Например, можно выбрать:
- Изображение по атрибуту
- Ссылку по атрибуту
- Все поля формы, которые имеют атрибут
…и так далее.
jQuery имеет много селекторов, которые можно использовать для выбора элементов по атрибуту:
| Селектор | Описание | Пример |
|---|---|---|
| Атрибут | Выбирает элемент(ы), которые содержат определенный атрибут вне зависимости от значения атрибута. | |
| Атрибут равен | Выбирает элемент(ы), которые содержат заданный атрибут с заданным значением. | |
| Атрибут не равен | Выбирает элемент(ы), которые не содержат заданного атрибута или сожержат заданный атрибут, но его значение не соответствует заданному. | |
| Атрибут начинается с | Выбирает элемент(ы), которые содержат заданный атрибут, у которого значение начинается с заданной строки. | |
| Атрибут заканчивается | Выбирает элемент(ы), которые содержат атрибут, у которого значение заканчивается заданной строкой. | |
| Атрибут содержит | Выбирает элемент(ы), который содержит атрибут, у которого значение содержит заданную строку. | |
| Атрибут содержит слово | Выбирает элемент(ы), который содержит атрибут, у которого значение содержит заданное слово. «Слово» — это последовательность символов без пробелов. | |
| Атрибут содержит префикс | Выбирает элемент(ы), который содержит атрибут, у которого значение либо равно заданной строке, либо начинается с заданной строки с последующим дефисом. |
Вы можете комбинировать селекторы атрибутов для сужения области выбора. Например:
// Выбираем только те изображения, которые имеют ширину 300 px и высоту 200 px
var selectedImages = $("img");
Селектор «Атрибут содержит префикс» выглядит неэффективно, но он сделан для обработки атрибутов языка, таких как и .
change()
Метод change() является обработчиком событий, так же как и click() или hover(). Событие change генерируется объектами текстовых полей, полей ввода текста, полями выбора, и происходит оно при изменении значения целевого элемента в отличие от обработчиков событий focusOut() или blur(), которые вызываются, когда элемент теряет фокус ввода вне зависимости от того, изменилось значение или нет.
Событие change() отлично подходит для проверки на стороне клиента. Его лучше использовать вместо blur(), так как Вам не нужно будет повторно проверять те поля, в которых пользователь не менял значения.
Синтаксис функции jQuery .each()
В следующем примере мы выбираем на веб-странице все элементы div и выводим индекс и идентификатор каждого из них. Возможный результат: “div0:header”, “div1:body”, “div2:footer”. В примере используется функция jQuery each(), а не вспомогательная:
// Элементы DOM
$('div').each(function (index, value) {
console.log('div' + index + ':' + $(this).attr('id'));
});
В следующем примере продемонстрировано использование вспомогательной функции. В данном случае объект, для которого выполняется цикл, задается в качестве первого аргумента. В этом примере я покажу, как перебрать массив через цикл с помощью jQuery each function:
// Массивы
var arr = ;
$.each(arr, function (index, value) {
console.log(value);
// Выполнение останавливается после "три"
return (value !== 'три');
});
// Результат: один два три
В последнем jQuery each примере я хочу представить циклы через свойства объекта:
// Объекты
var obj = {
one: 1,
two: 2,
three: 3,
four: 4,
five: 5
};
$.each(obj, function (index, value) {
console.log(value);
});
// Результат: 1 2 3 4 5
Все это сводится к формированию надлежащего обратного вызова. Контекст обратного вызова this будет равен второму аргументу, который является текущим значением. Но поскольку контекст всегда будет объектом, то простые значения должны быть «обернуты». Поэтому строгое равенство между значением и контекстом не может быть задано. Первый аргумент — текущий индекс, который является числом для jQuery each array или строкой (для объектов).
Устаревший способ: использование while-loop
Одним из решений является использование цикла while, который выполняется до тех пор, пока не будет найден родительский узел.
function getParentNode(el, tagName) {
while (el && el.parentNode) {
el = el.parentNode;
if (el && el.tagName == tagName.toUpperCase()) {
return el;
}
}
return null;
}
Используя пример HTML, приведенный выше, это будет выглядеть следующим образом:
var button = document.querySelector("button");
console.log(getParentNode(button, 'div').dataset.id);
// выводит "123"
Это решение далеко не идеально. Представьте, что вы хотите использовать идентификаторы, классы или любой другой тип селектора вместо имени тега. По крайней мере, это позволяет использовать переменное количество дочерних узлов между родительским узлом и нашим источником.
Получаем некоторые элементы
Самое простое, что мы можем делать с jQuery — это получить некоторые элементы и что-то ними выполнить. Если вы знакомы с селекторами CSS, получить произвольные элементы очень легко: вы просто передаёте соответствующий селектор в $().
Важно понимать, что любая сделанная выборка будет содержать только те элементы, которые существовали на странице на момент выбора. Иными словами, если вы пишете var anchors = $( ‘a’ ), а затем позже добавите ещё один элемент на свою страницу, то переменная anchors не будет содержать этот новый элемент
Моя выборка содержит что-нибудь?
Иногда вам требуется что-то сделать, только когда вашему выбору соответствует несколько элементов. Поскольку функция $() всегда возвращает объект jQuery и он всегда истинный, вы должны проверить содержимое вашей выборки, чтобы определить, было ли что-то найдено.
Внимание! Ошибочный код
Мы можем сократить проверку ещё больше, если вспомним, что 0 это ложное значение:
Получение отдельных элементов из выборки
Если вам нужно работать с исходным элементом DOM из выборки, то следует получить доступ к элементу из объекта jQuery. Например, если вы хотите напрямую получить доступ к свойству value элемента <input>, то должны работать с исходным элементом DOM.
Заметьте, что вы не можете вызвать методы jQuery для исходных элементов DOM. Поэтому следующий пример работать не будет:
Если вам требуется работать с одним элементом в выборке и вы хотите использовать методы jQuery для этого элемента, то можете получить новый объект jQuery, содержащий единственный элемент, через .eq(), передавая ему индекс элемента.
Да, и насчет поддержки браузерами…
Как и в случае с любым классным «новым» JavaScript API, необходимо учитывать поддержку браузерами. Хорошая новость заключается в том, что Element.closest — это не новая функция, и она поддерживается во всех основных браузерах в течение достаточно долгого времени, с огромным охватом поддержки в 94%.
Единственный браузер, не предлагающий никакой поддержки — это Internet Explorer (все версии). Если вам нужно поддерживать IE, — лучше использовать подход с использованием jQuery.
Как видите, есть сразу несколько довольно надежных вариантов использования Element.closest. Такие библиотеки, как jQuery, относительно легко использовались нами в прошлом, теперь же можно использовать обычный JavaScript.
Благодаря хорошей поддержке браузерами и простоте в использовании API, я сильно зависим от этого небольшого метода во многих приложениях и пока не разочарован.
Вадим Дворниковавтор-переводчик статьи «Practical Use Cases for JavaScript’s closest() Method»
Фиксация элемента на сайте при прокрутке страницы с остановкой в нужном месте на jQuery
Этот вариант является доработкой вышеуказанного способа. Я много видел сайтов, где в сайдбаре (боковой колонке сайта) фиксируются различные рекламные блоки
Все бы ничего, но при прокрутке страницы до самого низа такие блоки перекрывают футер (низ сайта) и зачастую препятствуют получению немаловажной информации или навигации в нем
Чтобы исправить этот конфуз и удержать блок при достижении указанной области, и существует этот вариант.
Реализация:
Ну и те же стили из второго варианта с небольшим дополнением:
На что здесь стоить обратить внимание?
«.fixed_block» – это элемент, который мы фиксируем при прокрутке. «.fixed_block_position» — класс обертки, а «.fixed_block_stop» – это элемент (граница), достигнув которую элемент остановит свое движение (фиксацию).
Работа с выборкой
После создания объекта jQuery содержащего вашу выборку, вы, вероятно, хотите что-то с ней сделать. Но до этого рассмотрим несколько принципов, которые являются ключевыми для понимания того, что делает jQuery.
Проверка выборки
Мы можем определить, соответствует ли выборка определённому критерию, с помощью метода .is(). Этот метод наиболее часто используется, чтобы предоставить селектор в качестве единственного аргумента. Он возвращает true или false в зависимости от того, соответствует ли выборка селектору:
Вы также можете передать в метод .is() объект jQuery, исходный элемент DOM или даже функцию, если вам нужна комплексная проверка. Смотрите документацию для получения подробной информации.
Получение, установка и неявный перебор
Есть много методов, которые вы можете вызвать после создания выборки. Эти методы, как правило, делятся на две категории: метод чтения (геттер) и устанавливающий метод (сеттер). Методы чтения извлекают фрагмент информации из выборки, а методы установки в некотором роде изменяют выборку. Практически во всех случаях методы чтения оперируют только первым элементом в выборке (.text() является известным исключением); методы установки же работают для всех элементов в выборке используя то, что известно как неявный перебор.
Неявный перебор означает, что jQuery автоматически перебирает все элементы в выборке, когда вы вызываете для выборки устанавливающий метод. Это означает, что если вы хотите сделать что-то для всех элементов в выборке, то не должны вызывать метод для каждого элемента в вашей выборке — просто вызываете метод для самой выборки и jQuery обработает элементы для вас.
Предположим, что вы хотите изменить HTML у всех пунктов списка на странице. Чтобы сделать это мы должны использовать метод .html(), который изменит HTML у всех выбранных пунктов списка.
Вы также можете передать функцию в метод установки jQuery. Возвращаемое значение этой функции используется в качестве нового значения и оно получает два аргумента: индекс элемента в выборке и старое значение, которое вы пытаетесь изменить. Это полезно, когда вам необходима информация о текущем состоянии элемента, чтобы правильно установить новое состояние.
Явный перебор
Иногда задача, которую вы пытаетесь решить, не вписываются ни в один из существующих методов jQuery и тогда вы должны сделать явный перебор выборки с помощью метода .each(). В следующем коде в начало пункта списка мы добавляем тег <b> содержащий индекс элемента списка.
Заметьте, что внутри функции, которую мы передаём в .each(), у нас есть два способа доступа к текущему исходному элементу DOM: через this и через elem. Как обсуждалось в разделе «Основы JavaScript», this — специальное ключевое слово в JavaScript, указатель на объект, который является текущим контекстом функции. В jQuery this почти всегда относится к исходному элементу DOM, с которым функция в данный момент работает. Так, в случае .each(), this относится к текущему элементу в наборе элементов которые мы перебираем.
Цепочки
Одной из самых выгодных частей jQuery является способность «сцеплять» методы вместе. Это означает, что мы можем вызвать набор методов для выборки без её повторения или сохранения выборки в переменной. Мы даже можем сделать новые выборки на основе предыдущих и всё без разрыва цепочки.
Цепочки возможны, потому что каждый устанавливающий метод в jQuery возвращает выборку, с которой он был вызван. Это чрезвычайно мощная особенность и многие библиотеки взяли её на вооружение
Тем не менее, она должна применяться с осторожностью. Большие цепочки могут сделать код чрезвычайно трудным для чтения, изменения и отладки
Нет жёстких правил, насколько длинной должна быть цепочка, но даже для простой цепочки выше, вероятно, следует провести рефакторинг для удобства чтения.
Пример JSON JQuery.each()
У нас могут быть более сложные структуры данных, такие как массивы в массивах, объекты в объектах, массивы в объектах или объекты в массивах. Давайте рассмотрим, как jQuery find each может применяться в подобных сценариях:
var json = ;
$.each(json, function () {
$.each(this, function (name, value) {
console.log(name + '=' + value);
});
});
Результат выполнения кода: red=#f00, green=#0f0, blue=#00f.
Мы обрабатываем структуру с помощью вложенного вызова each(). Внешний вызов обрабатывает массив переменной JSON, внутренний вызов обрабатывает объекты. В этом примере каждый jQuery each element имеет только один ключ. Но с помощью представленного кода может быть присвоено любое количество ключей.
Сопутствующие проблемы и “this”
Код, исполняемый setTimeout, запускается отдельно от функции, которой он был вызван. Из-за этого мы сталкиваемся с определенными проблемами, в качестве решения которых можно использовать ключевое слово this.
var person = {
firstName: "Jim",
introduce: function(){
console.log("Hi, I'm " + this.firstName);
}
};
person.introduce();
// Outputs: Hi, I'm Jim
setTimeout(person.introduce, 50);
// Outputs: Hi, I'm undefined
Причина такого вывода кроется в том, что в первом примере this ведет к объекту person, а во втором примере — указывает на глобальный объект window, у которого отсутствует свойство firstName.
Чтобы избавиться от этой нестыковки, можно воспользоваться несколькими методами:
Принудительно установить значение this
Это можно сделать при помощи bind() – метода, который создает новую функцию, которая при вызове в качестве значения ключа this использует определенное значение. В нашем случае — указанный объект person. Это в результате дает нам:
setTimeout(person.introduce.bind(person), 50);
Примечание: метод bind был представлен в ECMAScript 5, а значит, что он будет работать только в современных браузерах. В других при его применении вы получите ошибку выполнения JavaScript «function timeout error».
Использовать библиотеку
Многие библиотеки включают в себя встроенные функции, необходимые для решения проблемы с this. Например, метод jQuery.proxy(). Он берет функцию и возвращает новую, в которой всегда будет использовать определенный контекст. В нашем случае, контекстом будет:
setTimeout($.proxy(person.introduce, person), 50);
Посмотреть демо
Отключение таймера
Возвращенное значение setTimeout представляет собой числовой id, который можно использовать для отключения таймера при помощи функции clearTimeout():
var timer = setTimeout(myFunction, 3000); clearTimeout(timer);
Давайте посмотрим на нее в действии. В следующем примере, если кликнуть по кнопке «Start countdown», начнется обратный отсчет. После того, как он завершится, котята получат свое. Но если нажать кнопку «Stop countdown», таймер JavaScript timeout будет остановлен и сброшен.
Посмотреть пример
Новый способ: использование Element.closest()
Несмотря на то, что jQuery по-прежнему является допустимым подходом, его добавление в проект только для этого метода является излишним, особенно если вы можете получить то же самое с помощью нативного JavaScript.
И вот тут в игру вступает Element.closest.
var button = document.querySelector("button");
console.log(button.closest("div"));
// выводит HTMLDivElement
Ну вот! Вот как это может быть просто, и без каких-либо библиотек или лишнего кода.
Element.closest() позволяет перемещаться по DOM, пока мы не получим элемент, соответствующий заданному селектору. Замечательно то, что мы можем передать любой селектор, который мы также передали бы Element.querySelectorили Element.querySelectorAll. Это может быть идентификатор, класс, атрибут данных, тег или что-то еще.
element.closest("#my-id"); // да
element.closest(".some-class"); // да
element.closest(":not(article)") // черт побери, да!
Если Element.closest находит родительский узел на основе данного селектора, он возвращает его так же, как document.querySelector. В противном случае, если он не находит родителя, то возвращается null, что упрощает использование с условиями if.
var button = document.querySelector("button");
console.log(button.closest(".i-am-in-the-dom"));
// выводит HTMLElement
console.log(button.closest(".i-am-not-here"));
// выводит null
if (button.closest(".i-am-in-the-dom")) {
console.log("Hello there!");
} else {
console.log(":(");
}
Готовы к нескольким примерам из реальной жизни? Поехали!
Выбор элементов по их положению
Иногда нужно выбрать элемент, про который известно, что он расположен в наборе ранее выбранных элементов. Например, нужно выделить первый параграф, который имеет класс . Для усложнения примера допустим, что нужно выбрать все пункты в списке, который имеет класс , а затем выбрать 5-й пункт из получившегося набора.
jQuery имеет семь селекторов, которые можно использовать для ограничения области поиска на основе позиции элемента:
| Селектор | Описание | Примеры |
|---|---|---|
| Выбирает первый элемент в наборе отобранных элементов. | ||
| Выбирает последний элемент в наборе отобранных элементов. | ||
| Выбирает единственный элемент в наборе отобранных элементов. Выбор элемента осуществляется по последовательному номеру индекса ( = первый элемент, = второй и так далее). | ||
| Выбирает элементы в наборе отобранных элементов, которые расположены перед элементом с заданным индексом. Например, если задан индекс (то есть 3-й элемент), то будут выбраны первые 2 элемента (с индексами 0 и 1). | ||
| Выбираем элементы в наборе отобранных элементов, которые расположены после элемента с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны все элементы после третьего. | ||
| Выбирает все элементы с четными индексами в наборе отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 1-й, 3-й и так далее элементы. | ||
| Выбирает все элементы с нечетными индексами в наборе уже отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 2-й, 4-й и так далее элементы |
Отметим, что данные селекторы не работают также как ,, и так далее. Например, выбирает только пункт списка с классом , который является первым пунктом в соответствующем списке. А находит все пункты списка на странице, которые имеют класс , а затем выбирает первый пункт списка в наборе результата поиска.
В следующем примере выбираются все ячейки в первых двух строках таблицы, которая имеет ID :
var selectedElements = $("table#myTable tr:lt(2) > td");
Включение и отключение кнопки на чистом JavaScript
В этом разделе мы разберем пример кода на чистом JavaScript, который активирует и отключает кнопку. Посмотрите на приведенный ниже фрагмент кода:
<html>
<head>
<script>
function toggleButton()
{
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username && password) {
document.getElementById('submitButton').disabled = false;
} else {
document.getElementById('submitButton').disabled = true;
}
}
</script>
</head>
<body>
<div>
<form action="/submit.php" method="post">
Username:<input type="text" name="username" id="username" onchange="toggleButton()">
Password:<input type="password" name="password" id="password" onchange="toggleButton()">
<input id="submitButton" type="submit" value="Submit" disabled/>
</form>
</div>
</body>
</html>
Данный код создает простейшую форму с двумя полями для ввода текста и кнопкой для отправки введенных данных на сервер
Важно отметить, что во время загрузки страницы кнопка формы находится в отключенном состоянии – для этого в коде по умолчанию используется свойство disabled
После загрузки формы в коде предусмотрено событие onchange, связанное с изменением состояния текстовых полей для ввода имени и пароля пользователя. Как только пользователь введет какие-либо данные в любое из этих полей, событие onchange сработает, и вызовет функцию включения и отключения кнопки toggleButton.
Функция toggleButton проверяет, ввел ли пользователь данные в оба обязательных поля. Если пользователь ввел имя и пароль, функция изменит состояние disabled на false, что в итоге приведет к активации кнопки отправки введенных данных. Если же одно из обязательных полей осталось незаполненным, свойство disabled получает параметр true, и как следствие этого, кнопка остается неактивной.
В приведенном выше примере для создания кнопки используется элемент <input>, но при желании также можно использовать HTML-кнопку <button>, как показано ниже:
<button id="submitButton" disabled/>Submit</button>
Вот так и выглядит активация и отключение кнопки на чистом JavaScript. В следующем разделе мы рассмотрим, как включать и отключать кнопки при работе с библиотекой jQuery.
