多重选择器 (“selector1, selector2, selectorN”)
multiple selector
描述:选择所有的指定选择器的组合结果。
加入于: 1.0
jQuery( "selector1, selector2, selectorN" )selector1: 任何有效的选择器。
selector2: 任何有效的选择器。
selectorN: 根据你的喜好,添加任意个有效的选择器。
你可以指定任何数量的选择器,以组合到一个结果中。多个表达式组合器是一个选择没有共同点的元素的有效的方式。在返回的jQuery对象中的DOM元素的次序可能是不相同的,以它们在document中的次序。对这个组合器的替代方式是使用.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-1.10.2.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-1.10.2.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>
演示结果