Статьи

Руководство для начинающих по выбору DOM с помощью jQuery

Октябрь 26, 2018

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

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

Давайте начнем.

Введение в идентификаторы, классы и атрибуты данных

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

ID — используется как уникальный идентификатор в документе. Поэтому мы не должны использовать один и тот же идентификатор для нескольких элементов, даже если это возможно. Как правило, мы используем ID элемента для выбора элементов с помощью jQuery.

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

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

Практические сценарии использования идентификаторов, классов и атрибутов данных

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

Сценарий 1. Выбор уникального элемента в документе.

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

$(“#elementID”).val();

При использовании этого метода важно предотвратить дублирование элементов с одинаковым идентификатором.

Сценарий 2. Выбор нескольких элементов с использованием классов.

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

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

 <table>
	<tr><td>Mark</td><td><input type=’button’ class=’user_data’ value=’Delete’ /></td></tr>
	<tr><td>John</td><td><input type=’button’  class=’user_data’  value=’Delete’ /></td></tr>
	<tr><td>Mike</td><td><input type=’button’ class=’user_data’  value=’Delete’  /></td></tr>
</table>

Теперь у нас есть несколько экземпляров похожих элементов и, следовательно, мы не можем использовать ID для фильтрации точной записи. Давайте посмотрим, как мы можем фильтровать строки, используя данный класс CSS. 

 var rows = $(“.user_data”);

В предыдущем коде переменная rowsuser_data Теперь давайте посмотрим, как удалить строку при нажатии кнопки с помощью селектора классов. 

 $(“.user_data”).click(function(){
	$(this).parent().parent().remove();
});

В этом методе мы просматриваем все соответствующие элементы и выполняем функции для текущего элемента, используя объект $(this) Это наиболее широко используемый метод для работы с несколькими элементами.

Теперь давайте посмотрим на некоторые распространенные ошибки начинающих разработчиков в таких сценариях.

  • Использование идентификаторов вместо классов

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

  • Использование имени класса вместо объекта $ (this)

    Еще одна ошибка, допущенная многими начинающими разработчиками, заключается в отсутствии знаний о контексте и использовании текущего объекта. При обходе нескольких элементов мы можем использовать jQuery $(this) Многие разработчики используют имя класса в цикле и, следовательно, не получают желаемых результатов. Поэтому никогда не используйте имя класса в цикле, как показано в следующем коде. 

 $(“.user_data”).click(function(){
		$(“.user_data”).parent().parent().remove();
});

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

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

Сценарий 3 — Выбор элементов с использованием нескольких классов

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

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

 <ul>
	<li class=’role-developer role-designer’ >Mark</li>
<li class=’role-developer ’ >Simon</li>
<li class=’role-developer role-manager’ >Kevin</li>
</ul>

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

 var selected_users = $('.role-developer.role-designer');

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

 var selected_users = $('.role-developer .role-designer');

Теперь код будет искать дизайнеров, у которых есть родительский элемент с именем developer. Так что привыкните к разнице между двумя реализациями и используйте ее с умом. Точно так же мы можем смешивать идентификаторы и классы, используя эту технику.

Сценарий 4 — Выбор элементов с использованием атрибутов данных

HTML5 ввел пользовательские атрибуты данных, где мы можем определять данные, связанные с элементами HTML. Эти атрибуты данных имеют определенный набор соглашений и считаются частными данными. Так что теперь мы можем хранить данные, относящиеся к любому элементу, используя атрибуты данных вместо того, чтобы делать несколько AJAX-запросов к серверу. Давайте посмотрим, как мы можем реализовать Сценарий 2 с пользовательскими атрибутами данных вместо классов CSS. 

 $( "input[data-type=’user_data’]" ).click(function(){
    $(this).parent().parent().remove();
});

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

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

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

 <ul>
	<li data-email=’[email protected]’   data-type=’userdata’ >Mark</li>
	<li data-email=’[email protected]’  data-type=’userdata’ >Kevin</li>
	<li data-email=’[email protected]’ data-type=’userdata’ >Peter</li>
</ul>

Выбор элементов, которые имеют «Gmail» в их электронной почте 

 $( "input[data-email *=’gmail’]" );

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

 $( "input[data-email $=’.uk’]" );

Выбор элементов с недействительными электронными письмами без знака «@» 

 $( "input[data-email !=’@’]" );

Как видите, атрибуты данных эффективны при работе с данными, относящимися к элементам HTML, а jQuery обеспечивает всестороннюю поддержку со своими встроенными функциями. Вы можете найти полную ссылку на селектор атрибутов по адресу http://api.jquery.com/category/selectors/attribute-selectors/ .

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

Это похоже на то, что мы обсуждали в сценарии 3 с некоторыми расширенными функциями. Использование CSS-классов для обслуживания нескольких значений данных может быть сложным в сложных сценариях. Итак, давайте посмотрим, как мы можем использовать несколько атрибутов данных для выбора. 

 $( "input[data-type=’userdata’][data-email !=’@’]" );

Здесь мы можем проверить наличие нескольких атрибутов данных, а также выбор путем частичного поиска значений. Теперь вы должны понимать разницу между классами CSS и атрибутами данных для выбора элементов. Атрибуты данных обеспечивают организованный способ обработки данных элемента.

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

Заворачивать

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

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

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

35
Share: