Выбранный элемент select jquery: Работа с select option с помощью JQuery — Вебджем.рф

Содержание

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
3.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

ЧебурашкаКрокодил ГенаШапоклякКрыса Лариса	Выберите герояЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Список множественного выбора	Раскрывающийся список

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

accesskey: Позволяет перейти к списку с помощью некоторого сочетания клавиш.
autofocus: Устанавливает, что список получает фокус после загрузки страницы.
disabled: Блокирует доступ и изменение элемента.
form: Связывает список с формой.
multiple: Позволяет одновременно выбирать сразу несколько элементов списка.
name: Имя элемента для отправки на сервер или обращения через скрипты.
required: Список обязателен для выбора перед отправкой формы.
size: Количество отображаемых строк списка.
tabindex: Определяет последовательность перехода между элементами при нажатии на клавишу Tab

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

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT</title>
 </head>
 <body>  
 
  <form action="select1.php" method="post">
   <p><select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

jQuery примеры — работа с выпадающим списком

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

Работа с выпадающим списком в jQuery
Основными дейсвиями, которые производятся над выпадающим списком является получение выбранного значения, добавление/удаление элементов из списка, изменение их атрибутов.

Рассмотрим эти действия по порядку. Например, у нас есть select с:

<select name=»sel»>
<option value=»0″>zero</option>
<option value=»1″>one</option>
<option value=»2″>two</option>
<option value=»3″>three</option>
</select>

1. Получение значения выбранного элемента

$(‘#sel option:selected’).val()

2. Получить текст выбранного элемента

$(‘#sel option:selected’).html();

3. Добавить элемент в конец списка

$(‘#sel’).append( $(‘<option value=»4″>four</option>’) );

4. Добавить элемент в начало списка

$(‘#sel’).prepend( $(‘<option value=»-1″>minus</option>’) );

5. Вставить элемент после заданного элемента (после второго)

$(‘#sel option:nth-child(2)’).after($(‘<option value=»7″>inserted</option>’));

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

$(‘#sel option:selected’).remove();

7. Очистить select

$(‘#sel’).empty();

8. Сделать элемент выбранным (последний)

$(‘#sel option:last’).attr(‘selected’, ‘selected’);

9. Сделать элемент недоступным (первый)

$(‘#sel option:nth-child(3)’).attr(‘disabled’, ‘disabled’);

10. И немного экзотики 🙂 Изменить цвет текста всех элементов, кроме выбранного

$(‘#sel :not(option:selected)’).css(‘color’, ‘red’);

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

Компонент переключения контента построен 3 способами: jQuery, JS, CSS

Не так давно мой друг создал компонент пользовательского интерфейса для изменения содержимого страницы на основе текущего выбора элемента <select> . Ее код работал, но, будучи новичком в JavaScript, она создала компонент в jQuery и попросила меня помочь оптимизировать его.

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

 <div> <select name="choose"> <option value="nul" selected>Make a Selection</option> <option value="opt1">Option 1</option> <option value="opt2">Option 2</option> <option value="opt3">Option 3</option> </select> </div> <section> <div> <h3>Option 1 Content</h3> <p> ... </p> </div> </section> <section> <div> <h3>Option 2 Content</h3> <p> ... </p> </div> </section> <section> <div> <h3>Option 3 Content</h3> <p> ... </p> </div> </section>

Немного оптимизировав его, вот jQuery, который мы использовали для переключения состояния отображения выбранного блока контента.

 $(function() { $('.jqueryOptions').hide(); $('#choose').change(function() { $('.jqueryOptions').slideUp(); $('.jqueryOptions').removeClass('current-opt'); $("." + $(this).val()).slideDown(); $("." + $(this).val()).addClass('current-opt'); }); });

Так что здесь происходит?

Вышеприведенная функция jQuery ищет все блоки содержимого, имеющие класс jqueryOptions, и скрывает их по умолчанию.

Затем, когда пользователь изменяет выбранную опцию входных данных select (которая имеет идентификатор «выбирать»), функция закрывает любые потенциально открытые блоки содержимого с помощью метода

.slideUp() а затем открывает выбранную опцию с помощью slideDown() . Он делает это, беря значение выбранной опции (обозначается как this ) и ссылаясь на элемент с именем класса, которое соответствует значению в «this».

Так:

 <option value="opt1">Option 1</option>

Спички:

 <section> ... </section>

И вот демо:

Или посмотрите демонстрацию работающей полной страницы здесь .

Это было не слишком сложно, а?

Так почему бы не оставить это на этом?

Проблема с решением jQuery состоит в том, что мы включили jQuery (сжатый 98 КБ) только для этого небольшого количества функциональности. Мы могли бы сделать лучше.

Не изменяя разметку, давайте посмотрим, как мы можем создать такой же эффект, сначала используя ванильный JavaScript, а затем используя только CSS.

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

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

К этому есть некоторые дополнительные части, которые будут объяснены в коде, но это три основных момента этого скрипта, которые мы должны помнить. Один из которых, скрывая контент по умолчанию, мы можем установить по умолчанию с помощью CSS, так что это один вычеркнутый. Два, чтобы пойти.

Создание версии JavaScript Vanilla

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

 var selectInput = document.getElementById('choose'), panels = document.querySelectorAll('.options'), currentSelect, i;

Теперь у нас есть переменные для легкого доступа к нашему вводу select ( selectInput ), различным панелям содержимого ( panels ), местозаполнителю для текущего выделения и итератору.

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

Начиная с последней маркировки сначала, мы должны убедиться, что любой контент, который был просмотрен, будет скрыт при выборе новой опции. Для этого мы создадим свою собственную функцию:

 function clearShow() { for ( i = 0; i < panels.length; i++ ) { panels[i].classList.remove('show'); } }

Функция clearShow() делает несколько вещей. Во-первых, он берет нашу переменную Panel (которая представляет собой список всех узлов на странице с классом «options») и выполняет итерацию по каждому (три в нашем случае) и удаляет класс «show» из всех них.

Класс «show» — это то, что делает контент видимым на нашей странице.

Теперь, когда у нас есть способ удалить класс «show» из каждого блока контента, нам нужен способ добавить «show» на выбранную панель.

 function addShow(showThis) { var el = document.getElementsByClassName(showThis); for ( i = 0; i < el.length; i++ ) { el[i].classList.add('show'); } }

Функция addShow() получает аргумент с именем showThis и добавляет класс «show» к узлу панели, который имеет класс, соответствующий текущему значению входных данных select . Теперь нам все еще нужен еще один фрагмент для передачи значения addShow() в addShow() .

 function vUpdate() { currentSelect = selectInput.value; clearShow(); addShow(currentSelect); } selectInput.addEventListener('change', vUpdate);

Функция vUpdate() выполняется всякий раз, когда выбранный вход обновляется (обнаруживается через событие change ). Поэтому, когда vUpdate() запускается, он делает следующее:

Захватывает текущее значение selectInput и сохраняет его в переменной currentSelect .
Выполняет функцию clearShow чтобы удалить любые следы .show с панелей.
Выполняет addShow() , передавая currentSelect для завершения недостающего фрагмента этой функции
Назначает .show панели с классом, который соответствует текущему значению выбранного входа.

Вы можете проверить демо ниже, чтобы увидеть все это в действии:

Или вы можете проверить полную страницу демо здесь .

Но прежде чем мы продолжим … Если вы выбрали опцию из выбранного входа и затем обновили страницу, значение ввода может остаться, но соответствующая панель не отображается.

Мы можем исправить это, добавив следующее:

 if (selectInput.value !== 'nul') { currentSelect = selectInput.value; addShow(currentSelect); }

Эта конструкция if проверит, является ли значение selectInput чем-то отличным от nul . Если это так, то значение текущего выбора addShow() функцию addShow() , которая addShow() при перезагрузке страницы. Удобно, чтобы исправить тот редкий случай, когда страница обновлялась, а элемент select отображал значение, но соответствующий контент не отображался.

И, наконец, в случае, если вам требуется поддержка Internet Explorer 9 или ниже, мы не можем использовать classList() . Чтобы обойти это, вот функции для добавления и удаления классов из элемента. Вышеприведенные демонстрации CodePen используют эти функции:

 function addClass(elm, newClass) { elm.className += ' ' + newClass; } function removeClass(elm, deleteClass) { elm.className = elm.className.replace(new RegExp("\\b" + deleteClass + "\\b", 'g'), '').trim();  }

Это можно сделать только с помощью CSS?

Имея множество компонентов, которые я делаю, я хотел бы попытаться понять, насколько близко я могу их воспроизвести в чистом CSS-решении. Однако, если решения jQuery и vanilla JavaScript могут основываться на одной и той же разметке, необходимо изменить только решение CSS.

Самым большим и самым важным изменением по сравнению с предыдущими версиями является то, что select должен быть полностью заменен. Если в предыдущих примерах использовалось значение элемента select для изменения отображаемой панели содержимого, один только CSS не знает об этих изменениях значений и, следовательно, не может использовать разные значения для переключения различных цепочек селектора.

Элемент select будет просто необходимо воссоздать, и для этого мы будем использовать так называемый «флажок / переключатель радиокнопок».

Вот разметка для нашего нового «элемента select ».

 <input type='checkbox' /> <input type='radio' name='opts' /> <input type='radio' name='opts' /> <input type='radio' name='opts' /> <header> <div> <p> Choose an Option </p> <div> <label for="open_close"> ... </label> <ul> <li> <label for="opt1">Option 1</label> </li> <li> <label for="opt2">Option 2</label> </li> <li> <label for="opt3">Option 3</label> </li> </ul> </div> </div> </header>

То, что сделано здесь, в основном представляет собой воссоздание элемента select насколько это позволяют HTML и CSS, без помощи JavaScript. Входные данные над заголовком действуют как элементы управления для привязок стиля для панелей select и содержимого на сайте. И новый неупорядоченный список и метки становятся нашим новым элементом select .

Метки для opt1, opt2 и opt3 изменяют проверенное состояние переключателей с соответствующими идентификаторами. В CSS, в зависимости от того, какая радиокнопка выбрана, соответствующая панель настраивается для отображения с использованием общего селектора родного брата.

 #opt1:checked ~ main .opt1, #opt2:checked ~ main .opt2, #opt3:checked ~ main .opt3 { display: block; height: 100%; overflow: visible; visibility: visible; }

Существует множество мелких деталей для репликации элемента select , которые зависят от соответствующей переключаемой кнопки и общего селекторного элемента CSS. Для получения дополнительной информации об общем селекторе братьев и сестер и других полезных вещах, которые вы можете сделать только с помощью CSS, вам следует ознакомиться с моими статьями « Как это можно сделать с помощью CSS?». и CSS Morphing Menu .

В этих статьях я не расскажу о некоторых более сложных аспектах воссоздания элемента select .

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

Чтобы устранить этот недостаток UX, я добавил <input type="checkbox" /> . Теперь элемент select и текущий контент могут быть открыты одновременно. Недостатком здесь является то, что элемент select не закрывается при щелчке опции, а закрывается только при повторном нажатии. Не идеально. Однако я чувствовал, что это был лучший опыт, чем тот, о котором я упоминал ранее. Чтобы привлечь внимание к элементу select нужно щелкнуть снова, чтобы закрыть, я изменил стрелку вниз на X при открытии элемента:

 #open_close:checked ~ .header-base .select-area .select-options { opacity: 1; visibility: visible; } #open_close:checked ~ .header-base .select-area:after { border: none; content: 'X'; top: -24px; }

Еще одна особенность истинных элементов select я хотел воссоздать, заключалась в том, что при выборе новой опции текст основного элемента select изменяется на эту опцию. Используя псевдоэлемент :before , этот текст может меняться в зависимости от того, какая радиокнопка выбрана:

 .input-select:before { content: 'Make a Selection'; } #opt1:checked ~ .header-base .input-select:before { content: 'Option 1'; } #opt2:checked ~ .header-base .input-select:before { content: 'Option 2'; } #opt3:checked ~ .header-base .input-select:before { content: 'Option 3'; }

Вы можете увидеть выше и многое другое в действии, просмотрев исходный код демонстрационной версии CodePen только для CSS:

А вот и полная версия страницы .

В заключение кратко изложу плюсы и минусы…

Мы только что рассмотрели три различных способа создания аналогичного интерфейса с использованием jQuery, затем с использованием ванильного JavaScript, а затем снова с использованием только CSS. У каждой техники есть свои плюсы и минусы.

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

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

Решение Vanilla JavaScript , использующее CSS-преобразования и переходы, очень близко к решению jQuery. Сокращенный до 486 байт — очевидно, намного меньше, чем альтернатива jQuery.

Недостатком этого решения является то, что некоторые из используемых JavaScript поддерживаются не во всех браузерах, и для поддержки этих браузеров вам потребуется написать дополнительные обходные функции (как я это сделал).

Решение только для CSS отлично подходит для тех, кто хочет экспериментировать с CSS или для тех, кто недостаточно знаком с JavaScript. Однако для правильной работы требуется довольно много повторяющихся CSS-кодов, зависящих от разметки, и это может отрицательно повлиять на доступность сайта, поскольку вы должны использовать элементы так, как они не предназначены для использования.

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

Селекторы jQuery

Селекторы jQuery выбирают элементы веб-страницы, а методы выполняют операции с этими элементами.

Чтобы выбрать элементы, нужно передать селектор функции $(), например, $("img:odd"). Данный селектор будет применен ко всему дереву DOM, и чтобы ограничить процедуру отбора элементов, можно указать определенный фрагмент дерева DOM — $("img:odd", "div#slideshow"). Таким образом будут выбраны все четные картинки из блока с id=slideshow.

Для более точного выбора элементов селекторы можно комбинировать, например, следующая запись позволит выбрать все флажки полей формы, которые были выделены пользователем — $("input[type=checkbox][checked]").

А с помощью этой комбинации селекторов $("input:checkbox:checked:enabled") можно выбрать только активные и отмеченные флажки полей формы.

Также, допускается объединять несколько селекторов в одно выражение, разделяя селекторы запятой — $("p,span"), что позволит отобрать все элементы <p> и <span>.

Таблица 1. Селекторы jQuery
Селектор	Описание, пример
Элемента	Выбирает все элементы данного типа на странице, например, `$("div")`.
Элемент1 элемент2	Выбирает все элементы2, вложенные непосредственно в элемент1, например, `$("p img")`.
Класса	Выбирает все элементы заданного класса, например, `$(".sidebar")`.
Идентификатора	Выбирает элемент с указанным идентификатором, например, `$("#main")`.
Элемент класс	Выбирает из элементов данного типа только те элементы, которым назначен указанный класс, например, `$("p.first")`.
Потомка	Выбирает все указанные элементы выбранного селектора, например, `$(".sidebar a")`.
Дочерние	Выбирает элементы, соответствующие второму селектору, которые содержатся непосредственно внутри первого селектора, являющиеся дочерними по отношению к нему, например, `$("body > p")`.
Сестринские	Выбирает элементы, соответствующие второму селектору, идущие непосредственно за первым элементом, являющимся для него сестринским, например, `$("h3 + p")`.
Сестринские	Выбирает элементы, соответствующие второму селектору, являющиеся сестринскими по отношению к первому элементу и расположенные после него, например, `$("h3 ~ p")`.=’http://’]»).
Выбирает все элементы, заканчивающиеся на определенное значение, например, `$("a[href$='.pdf']")`.
Выбирает все элементы, содержащие в любом месте определенное значение, например, `$("a[target*='blank']")`.
`:even`	Выбирает элементы по четным значениям индекса 0, 2, 4…, т.е. выбирает 1, 3, 5… элементы, например, `$("li:even")`.
`:odd`	Выбирает элементы по нечетным значениям индекса, т.е. выбирает 0, 2, 4… элементы.
`:first`	Выбирает только один элемент, первый из подходящих, например, `$("p:first")`.
`:last`	Выбирает только один элемент, последний из подходящих.
`:first-child`	Выбирает элементы, которые являются первыми дочерними элементами своих родителей.
`:last-child`	Выбирает элементы, которые являются последними дочерними элементами своих родителей.
`:only-child`	Выбирает элементы, являющиеся единственными дочерними элементами своих родителей.
`:nth-child(n)`	Выбирает элементы, которые являются n-дочерними элементами своих родителей.
`:nth-child(Xn+Y)`	Выбирает n-элемент, порядковый номер которого рассчитывается по формуле в круглых скобках.
`:nth-of-type(n)`	Выбирает элементы, являющиеся n-ми дочерними элементами данного типа для своих родителей.
`:parent`	Выбирает непустые элементы, которые имеют вложенные (дочерние) элементы, а также содержащие текст.
`:eq(n)`	Выбирает элементы с индексом `n`, при этом индексы отсчитываются от нуля.
`:gt(n)`	Выбирает все элементы, индекс которых больше `n`, индексы отсчитываются от нуля.
`:lt(n)`	Выбирает все элементы, расположенные перед n-элементом, не включая n-элемент.
`:not(селектор)`	Позволяет выбрать элемент, не соответствующий данному типу селектора, например, `$("a:not(.link)")`, `$("a:not([href$='.pdf'])")`.
`:has(селектор)`	Выбирает элементы, которые содержат внутри себя указанный селектор, например, элементы списка, содержащие внутри себя ссылки: `$("li:has(a)")`.
`:contains(текст)`	Выбирает элементы, которые содержат указанный в скобках текст, например, `$("a:contains(Скачать)")`.
`:hidden`	Выбирает скрытые элементы, для которых установлено значение `display: none;`, а также элементы форм со значением `type="hidden"` например, `$("ul:hidden").show()` — делает скрытые элементы видимыми.
`:visible`	Выбирает видимые элементы, к видимым элементам относятся элементы, размеры которых больше нуля, а также элементы со значением `visibility: hidden` и `opacity: 0`.
`:active`	Выбирает элемент, который активизирован пользователем, например, с помощью щелчка мыши.
`:checked`	Выбирает только отмеченные флажки или радиокнопки.
`:focus`	Выбирает элемент, находящийся в фокусе.
`:hover`	Выбирает элемент, на который наведен указатель мыши.
`:disabled`	Выбирает неактивные элементы (форм).
`:enabled`	Выбирает активные элементы (форм).
`:empty`	Выбирает элементы, не содержащие дочерних элементов.
`:target`	Выбирает элементы, на которые ссылается идентификатор фрагмента в url-адресе.
`:animated`	Выбирает все анимируемые в данный момент элементы.
`:button`	Выбирает все кнопки `input[type=submit]`, `input[type=reset]`, `input[type=button]`, `button`.
`:checkbox`	Выбирает элементы-флажки `input[type=checkbox]`.
`:file`	Выбирает элементы типа `file`, `input[type=file]`.
`:header`	Выбирает элементы-заголовки от `h2` до `h6`.
`:image`	Выбирает изображения в элементах форм `input[type=image]`.
`:input`	Выбирает элементы форм `input, select, textarea, button`.
`:password`	Выбирает элементы ввода пароля `input[type=password]`.
`:radio`	Выбирает радиокнопки `input[type=radio]`.
`:reset`	Выбирает кнопки сброса `input[type=reset]`, `button[type=reset]`.
`:selected`	Выбирает выделенные элементы `option`.
`:submit`	Выбирает кнопки отправки формы `input[type=submit]`, `button[type=submit]`.
`:text`	Выбирает элементы ввода текста`input[type=text]`.

Прокачиваем навыки отладки с помощью инструментов разработчика Chrome (часть 2) — CSS-LIVE

Перевод статьи Improve Your Debugging Skills with Chrome DevTools (Part 2) с сайта telerik.com для css-live.ru, автор — Питер Милчев

В этой статье мы рассмотрим продвинутые функции отладчика Chrome, закрепив навыки, полученные в первой части.

Вы научились проверять сгенерированный HTML и применённые стили? Уже смело можете отлаживать JavaScript в браузере? Надеюсь, поскольку в этой серии мы рассмотрим продвинутые функции отладчика Chrome, закрепив навыки, полученные в первой части.

Освоив новые навыки, мы поэкспериментируем с базовыми примерами Kendo UI, а в конце статьи возьмём реальный пример jQuery Grid, чтобы отточить на нем свежеприобретенные знания.

В этой статье:

Умное автодополнение

Умное автодополнение — известная функция в IDE, помогающая эффективнее писать код. В Chrome 68 разработчики DevTools включили аналогичные функции в консоль. А именно: упреждающее вычисление, автодополнение после выполнения функции и подсказки для аргументов.

Давайте рассмотрим эти возможности на примере следующей функции:


function test(yourValue) {
  return {
    value: yourValue,
    multiplied: yourValue * 3
  };
}

Упреждающее вычисление

Вот что отобразится в консоли отладчика Chrome с включённым упреждающим вычислением:

Таким образом можно вычислять выражения в коде в консоли, если у этих выражений нет побочных эффектов (когда выполнение кода не только возвращает значение, но и делает ещё что-то). Подробнее о побочных эффектах можно узнать из вопроса «JavaScript-замыкания и побочные эффекты простым языком?» на StackOverflow

Совет: такое же вычисление происходит, когда вы открываете вкладку «Исходники» (Source) в режиме отладки и наводите на выражение или выделяете его.

Автодополнение после выполнения функции

Эта возможность зависит от упреждающего вычисления, поэтому у него то же ограничение — автодополнение недоступно, если у функции есть какие-либо побочные эффекты.

Совет: сохраните результат функции в переменной (см. «Автодополнение IntelliSense для объектов на стороне клиента») и для проверки результата выполните функцию в консоли.

Затем используйте API консоли и сохраните выражение в переменной как var lastEvaluatedExpression = $_;.

Подсказки для аргументов

Эта возможность предоставляет всплывающее окно с отображением подходящих аргументов, которые можно передать, когда вы пишите код для вызова функции в консоли или раскрываете ее скобки или наводите на них курсор мыши.

Лёгкое обращение к выбранным элементам и выполненным выражениям

В предыдущем разделе я не пояснил, что делает переменная $_. Это не магия, а часть встроенного API командной строки. Отладчик Chrome присваивает объекты и выражения списку предопределенных переменных. Например, при вычислении выражения 40+2 получится 42. И, допустим, мне лень запоминать, как называлась переменная или что это было за выражение, а тем более ждать 7.5 миллионов лет, пока компьютер высчитывает этот ответ. С отладчиком Chrome теперь достаточно переменной $_.

API командной строки в отладчике Chrome сохраняет объекты и результаты выражения в предопределённые переменные. Консоль предоставляет ещё и такие полезные сокращения: $0, $1, $2, $3 и $4. $0 ссылается на последний выбранный элемент в панели «Элементы», $1 — на предыдущий, и так далее. Это может оказаться полезным, когда нужно получить ссылку на DOM-элемент, предоставляющий компонент или виджет, и вам нужно быстро проверить его доступные части.

Давайте поупражняемся с этим на примере PanelBar для Kendo UI, где мы обратимся к первому элементу, скроем его, а после покажем снова.

Совет: отладчик Chrome может подсказать вам, как оптимизировать изменения HTML и DOM, которые происходят в вашем приложении (см. «Молниеносное отображение списка в Angular»)

Просматривать всплывающие подсказки бывает нелегко, поскольку они исчезают через какое-то время. С другими автоматически скрываемыми элементами — вроде тех, что отображаются при взаимодействии с юзером (к примеру, клик мышью или перетаскивание) — та же история. Чтобы их отловить, я часто прибегал ко всяким ухищрениям, придумывая жуткий код, который будет на них ссылаться. Встречайте setTimeout() и debugger.

setTimeout() нужен для выполнения определённой логики через заданное время. А ещё он меняет порядок выполнения функций. Это пригодится при выполнении функции после быстрой анимации (см. «Почему setTimeout(fn, 0) иногда полезен?»)

Разобравшись, как работает setTimeout(), мы можем объединить его мощь с оператором debugger, и тогда можно будет активировать режим отладки, когда автоматически скрываемый элемент виден, и не бояться, что он тотчас же исчезнет.

На анимации ниже показано, как можно просмотреть всплывающую подсказку, вызывая setTimeout(function(){debugger; }, 3000) в консоли:

На иллюстрации выше представлены API рисования и виджет jQuery Tooltip из Kendo UI

Совет: чтобы вывести в лог элементы, на которые в данный момент перешёл фокус, вставьте следующий код консоль: window.focusedelement; setInterval(function(){ if(window.focusedElement != document.activeElement){window.focusedElement = document.activeElement; console.log(document.activeElement)}})

Для отмены повторения с интервалом можно перезагрузить страницу или использовать clearInterval():

Давайте рассмотрим другие способы прервать выполнение скрипта на странице и проверить текущие значения переменных.

Точки останова по изменению DOM

Они прерывают выполнение скрипта, если у выбранного элемента в DOM меняется структура, атрибут или он удаляется с помощью JavaScript. Чтобы включить/выключить эту возможность, кликните правой кнопкой по элементу в панели «Элементы», наведите на пункт «Остановить» (Break) в контекстном меню и выберете «модификации поддерева» (subtree modifications), «модификации атрибута» (attribute modifications) или «удаление узла» (node removal).

Точки остановка для XHR/Fetch

Они прерывают выполнение скрипта, если адрес запрошенного ресурса содержит строку, на которую настроена точка останова. Чтобы включить/выключить эту возможность: разверните область «Точки останова для XHR» (XHR Breakpoints) в панели «Исходники», кликните на кнопку «Добавить точку останова» (Add breakpoint) и введите нужную часть URL.

Точки останова для обработчиков событий

Они прерывают выполнение скрипта при срабатывании событий мыши, клавиатуры, устройства, анимации и так далее. Чтобы включить/выключить эту возможность: разверните область «Точки останова для обработчиков событий» (Event Listeners Breakpoints) во вкладке «Исходники» и отметьте нужные (категории) события.

Точки останова для исключений

Они прерывают выполнение скрипта, когда выбрасываются обработанные или необработанные исключения. Чтобы включить/выключить эту возможность: нажмите кнопку «Пауза при исключении» (Pause on Exception) во вкладке «Исходники»; когда эта кнопка включена, появляется добавочная опция «Пауза при обработанных исключениях» (Pause on caught exceptions).

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

Нажмите на кнопку «Продолжить» (Continue), чтобы показать раскрывающийся список и выберите кнопку «Продолжить без прерывания» (Continue without interruption).
Нажмите F12, чтобы быстро закрыть отладчик Chrome.

Во вкладке «Исходники» стоит упомянуть еще несколько областей.

Вкладка «Выражения для отслеживания» (Watch expressions): позволяет отслеживать значения переменных и выражений в разные моменты времени.
Раздел «Стек вызовов» (Call Stack) показывает путь выполнения, который привёл код к этой точке останова в обратном хронологическом порядке.
Панель «Область видимости» (Scope): показывает, какие локальные и глобальные переменные определены в данный момент.

Контексты выполнения в отладчике Chrome

Вы когда-нибудь сталкивались с ошибкой ReferenceError (говорящей, что функция не определена) при попытке выполнить уже объявленную функцию в консоли браузера? Вы не одиноки, это частый случай.

К примеру, такую ошибку можно поймать, когда страница со скриптом загружаеся в <iframe>, поэтому находится в другом контексте выполнения. Вкратце, контекст выполнения похож на область видимости, и у каждой страницы, <iframe> или расширения браузера есть свой контекст выполнения. Между разными контекстами можно переключаться с помощью раскрывающегося списка в консоли:

Немного соображений насчёт контекста выполнения:

Когда вы просматриваете какой-либо элемент, в качестве контекста выполнения автоматически выбирается страница, содержащая этот элемент
Чтобы получить логи из всех контекстов в консоли, уберите галочку «Только выбранный контекст» (Selected context only) в настройках консоли.
С правой стороны есть ссылка на файл, выполнивший функцию, которая отвечает за запись в логе.

Эти контексты хорошо видны в «песочнице» по Kendo UI, в которой мы сейчас потестируем вышеприведенные советы.

Пример: компонент jQuery Grid из Kendo UI

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

Задача: используйте JavaScript для изменения фона плавающего элемента, созданного при перетаскивании заголовка в этом примере из «песочницы» на основе демо компонента jQuery Grid из Kendo UI.

Пробуйте сделать это сами, но если не выйдет, воспользуйтесь следующими советами:

К этому моменту вы должны быть уже на «ты» с отладчиком Chrome — никакая магия CLI, автоматически скрывающиеся элементы или сложные сценарии отладки не могут помешать вам. Мы здорово овладели всем этим и одолели тёмную сторону. Кроме шуток, надеюсь, что эта статья была полезной и ответила хотя бы на один сложный вопрос — дайте знать. А что насчёт ваших советов и приёмов? Пожалуйста, поделитесь ими (потому что вам не всё равно) в комментариях ниже.

P.S. Это тоже может быть интересно:

CSS-селектор :not. Полезные примеры

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

Например:

p:not(.classy) { color: red; }

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

Пример 1. Элемент без класса

Селектор :not может быть крайне полезен, когда нам нужно застилить контент сгенерированный пользователем (нет возможности расставить в нем классы), или когда у нас контента очень много и расставлять в нем классы слишком трудоёмко.

Например, мы хотим на сайте сделать красивые буллиты для ненумерованных списков ul li. Мы пишем код:

ul li {  }

В результате, наши красивые буллиты появляются не только в контенте, но и, например, в навигации, где тоже используются ul li.

Мы ограничиваем область действия селектора:

.content ul li {  }

Навигацию мы спасли, но ненужные буллиты всё еще вылазят на слайдерах, списках новостей и других конструкциях внутри .content, где тоже используются ul li.

Далее у нас варианты:

1) обнулить мешающие стили в слайдерах и других местах. Но это противоречит «DRY» и является одним из признаков «вонючего» кода. К тому же не решает проблему раз и навсегда: добавите, например, аккордеон и списки в нем снова придется обнулять.

2) пойти от обратного и ставить класс всем спискам, которые нужно стилизовать:

.textlist li {  }

Это добавляет лишней работы по расстановке классов в контенте. Иногда имеет смысл, но лишнюю работу никто не любит.

3) стилизовать только те ul li, у которых нет никаких классов вообще:

ul:not([class]) li {  }

Победа! Нам не нужно делать дополнительную работу по расстановке классов в контенте. А на слайдерах, аккордеонах и прочих конструкциях, которые не должны выглядеть как списки, но используют их в своей разметке, в 99% случаев уже будут свои классы, и наши стили их не затронут.

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

Пример 2. Изменение внешнего вида всех элементов, кроме наведенного

Пример

Такой эффект можно реализовать без :not путем перезаписи значений. И это будет работать в бо́льшем количестве браузеров.


ul:hover li {
  opacity:0.5;
}
ul:hover li:hover {
  opacity:1;
}

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


ul:hover li:not(:hover) {
  opacity:0.5;
}

Пример 3. Меню с разделителями между элементами

Пример

Как и в предыдущем примере, желаемого можно добиться несколькими способами.

Через перезапись свойств. Но тут два правила вместо одного, что не есть «DRY».

.menu-item:after {
  content: ' | ';
}
.menu-item:last-child:after {
  content: none;
}

Через :nth-last-child(). Одно правило, но тяжело читается.

.menu-item:nth-last-child(n+2):after {
  content: ' | ';
}

Через :not() — самая короткая и понятная запись.

.menu-item:not(:last-child):after {
  content: ' | ';
}

Пример 4. Debug css

Удобно для отладки и самоконтроля искать/подсвечивать картинки без alt, label без for и другие ошибки.


img:not([alt]),
label:not([for]),
input[type=submit]:not([value]) {
  outline:2px solid red;
}


ul > *:not(li),
ol > *:not(li),
dl > *:not(dt):not(dd) {
  outline:2px solid red;
}

Пример 5. Поля форм

Раньше текстовых полей форм было не много. Достаточно было написать:

select,
textarea,
[type="text"],
[type="password"] {
    
}

С появлением новых типов полей в HTML5 этот список увеличился:

select,
textarea,
[type="text"],
[type="password"],
[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="number"],
[type="search"],
[type="tel"],
[type="time"],
[type="url"],
[type="month"],
[type="week"] {
  
}

Вместо перечисления 14 типов инпутов можно исключить 8 из них:

select,
textarea,
[type]:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) {
  
}

Ладно, этот пример не очень красив, и я рекомендую всё же первый вариант с перечислением, он работает с IE8+, а второй вариант с IE9+.

Поддержка

Следует заметить, что согласно спецификации в скобках селектора :not() может стоять только простой селектор и в скобках нельзя использовать сам селектор :not(). Если нужно исключить несколько элементов, :not() можно повторить несолько раз, как в примере 5.

Если очень нужны CSS3-селекторы в браузерах, которые их не поддерживают, можно использовать полифил selectivizr.

HTMLSelectElement.selectedOptions — веб-API | MDN

  var selectedCollection = HTMLSelectElement.selectedOptions;

Значение

HTMLCollection , в котором перечислены все выбранные в данный момент HTMLOptionElement , который является дочерним элементом HTMLSelectElement или HTMLOptGroupElement в пределах , может быть частью результатов, но группы вариантов не включены в список.

Если в настоящее время не выбраны никакие параметры, коллекция пуста и возвращает длина из 0.

В этом примере используется элемент

Элемент :

.  
 
 Изменение CSS при выборе демонстрации цвета  В этом примере, чтобы объяснить, как вы можете получить значение select с помощью jQuery, когда вы выбираете цвет из раскрывающегося списка, он будет применяться как цвет фона тела.
 Сначала см. Демонстрацию, за которой следует небольшое объяснение:
 Посмотреть онлайн-демонстрацию и код  При событии выбора изменения раскрывающегося списка выполняется следующий код jQuery: 
 $ ("# jqueryselect"). Change (function () {
 var selectedcolor = $ ('# jqueryselect'). Val ();
 $ ("body"). Css ("background -цвет ", selectedcolor);
});
 
 Если переменной присваивается выбранное значение из раскрывающегося списка, а в следующей строке используется символ $.css, в котором используется селектор тела, а цвет фона изменяется на тот, который выбран в раскрывающемся списке.
 Точно так же вы можете использовать div, абзац, диапазон, списки или другие элементы вместо селектора тела для выполнения аналогичного или другого действия.
 Пример получения выбранного значения и выполнения действия в таблице HTML  В этом примере я создал таблицу HTML с классом CSS при загрузке демонстрационной страницы. Вы можете увидеть раскрывающийся список с различными вариантами, чтобы выбрать тему для таблицы.
 Как только вы выберете тему, она будет применена к этой таблице. Сначала проверьте онлайн, а затем я объясню, что делается ниже:
 Посмотреть онлайн-демонстрацию и код  Опять же, при изменении раскрывающегося списка значение выбранной опции присваивается переменной. Значение этой переменной используется в методе $ .addClass jQuery. До этого метод removeClass удалял существующий класс в таблице HTML, после чего выполнялся метод addClass для применения выбранного класса.
 Используется этот код jQuery, который помещается непосредственно над тегом : 
 $ ("# selecttheme"). Change (function () {
 var themetbl = $ ('# selecttheme'). Val ();
 $ ("# tbl"). RemoveClass () .addClass (themetbl);
});
 
 Таблица «themes» CSS создается и помещается внутри тега