概述 multiple selector
返回值:Array<Element(s)>
描述:将每一个选择器匹配到的元素合并后一起返回。
selector1: 任何有效的选择
selector2: 其他有效的选择
selectorN: 更多有效的选择只要你喜欢。
您可以指定任何数量的选择器组合成一个单一的结果。这个多个表达组合是一种有效的方法来选择不同的元素。因为他们将按在文件的顺序,DOM元素的顺序在返回的jQuery对象中可能不相同。另一种选择器组合是 .add() 方法。
示例
找到匹配任意一个类的元素。
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
$("div,span,p.myClass")
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]
查找任何匹配下面三个选择器的元素。
<!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>
Show the order in the jQuery object.
<!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>