概述 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>