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