множественный селектор
Описание: Выбирает объединенные результаты всех указанных селекторов.
-
версия добавлена: 1.0jQuery( "selector1, selector2, selectorN" )
selector1: Любой допустимый селектор.
selector2: Другой допустимый селектор.
selectorN: Любое количество других допустимых селекторов.
Можно указать любое количество селекторов для объединения в единый результат. Этот комбинирующий оператор множественного выражения является эффективным способом выбора различных элементов. Порядок элементов DOM в возвращаемом объекте jQuery может не совпадать с порядком в документе.
Альтернативой этому оператору является метод .add().
Примеры:
Находит элементы, соответствующие любому из этих трех селекторов.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>multiple demo</title>
<style>
div, span, p {
width: 126px;
height: 60px;
float: left;
padding: 3px;
margin: 2px;
background-color: #eee;
font-size: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<div>div</div>
<p class="myClass">p class="myClass"</p>
<p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
<script>
$( "div, span, p.myClass" ).css( "border", "3px solid red" );
</script>
</body>
</html> Демо:
Показать порядок в объекте jQuery.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>multiple demo</title>
<style>
b {
color: red;
font-size: 16px;
display: block;
clear:left;
}
div, span, p {
width: 40px;
height: 40px;
float: left;
margin: 10px;
background-color: blue;
padding: 3px;
color: white;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<span>span</span>
<p>p</p>
<p>p</p>
<div>div</div>
<span>span</span>
<p>p</p>
<div>div</div>
<b></b>
<script>
var list = $( "div, p, span" )
.map( function() {
return this.tagName;
})
.get()
.join( ", " );
$( "b" ).append( document.createTextNode( list ) );
</script>
</body>
</html> 
