多重选择器 (“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>
演示结果