jQuery универсальный селектор *

Определение и применение

jQuery универсальный селектор * выбирает все элементы в документе (включая <html>, <head> и <body>).

Если селектор * используется вместе с другим элементом, то он выбирает все дочерние элементы внутри указанного элемента (выступает в роли селектора потомков). Обращаю Ваше внимание, что в этом случае в некоторых браузерах выборка может происходить очень медленно.

jQuery синтаксис:

JavaScript

$("*")

Добавлен в версии jQuery

1.0

Селектор в CSS

CSS универсальный селектор *.

Пример использования

Универсальный селектор * — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<h2>Универсальный селектор *</h2>
<p>Пример использования универсального селектора с использованием jQuery.</p>

main.js

JavaScript

$(document).ready(function () {
    $('*').css('border', '2px solid orange')
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

Рассмотрим следующий пример в котором мы с помощью универсального селектора * выберем все дочерние (вложенные) элементы тега <ul> (маркированный список) и зададим им стиль для нижней границы (CSS свойство border-bottom):

Универсальный селектор * — пример 2

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<h2>Универсальный селектор *</h2>
<p>Пример использования универсального селектора с использованием jQuery.</p>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

main.js

JavaScript

$(document).ready(function () {
    $('ul *').css('border-bottom', '2px solid blue')
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}