加载中...

selector1,selector2,selectorN


概述    multiple selector

返回值:Array<Element(s)>

描述:将每一个选择器匹配到的元素合并后一起返回。

  • V : 1.0jQuery( "selector1, selector2, selectorN" )

    selector1: 任何有效的选择

    selector2: 其他有效的选择

    selectorN: 更多有效的选择只要你喜欢。

您可以指定任何数量的选择器组合成一个单一的结果。这个多个表达组合是一种有效的方法来选择不同的元素。因为他们将按在文件的顺序,DOM元素的顺序在返回的jQuery对象中可能不相同。另一种选择器组合是 .add() 方法。

示例

实例

找到匹配任意一个类的元素。

HTML 代码:
  1. <div>div</div>
  2. <p class="myClass">p class="myClass"</p>
  3. <span>span</span>
  4. <p class="notMyClass">p class="notMyClass"</p>
jQuery 代码:
  1. $("div,span,p.myClass")
结果:
  1. [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

实例

查找任何匹配下面三个选择器的元素。

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>multiple demo</title>
  6. <style>
  7. div, span, p {
  8. width: 126px;
  9. height: 60px;
  10. float: left;
  11. padding: 3px;
  12. margin: 2px;
  13. background-color: #eee;
  14. font-size: 14px;
  15. }
  16. </style>
  17. <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  18. </head>
  19. <body>
  20. <div>div</div>
  21. <p class="myClass">p class="myClass"</p>
  22. <p class="notMyClass">p class="notMyClass"</p>
  23. <span>span</span>
  24. <script>
  25. $( "div, span, p.myClass" ).css( "border", "3px solid red" );
  26. </script>
  27. </body>
  28. </html>

运行一下

实例

Show the order in the jQuery object.

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>multiple demo</title>
  6. <style>
  7. b {
  8. color: red;
  9. font-size: 16px;
  10. display: block;
  11. clear:left;
  12. }
  13. div, span, p {
  14. width: 40px;
  15. height: 40px;
  16. float: left;
  17. margin: 10px;
  18. background-color: blue;
  19. padding: 3px;
  20. color: white;
  21. }
  22. </style>
  23. <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  24. </head>
  25. <body>
  26. <span>span</span>
  27. <p>p</p>
  28. <p>p</p>
  29. <div>div</div>
  30. <span>span</span>
  31. <p>p</p>
  32. <div>div</div>
  33. <b></b>
  34. <script>
  35. var list = $( "div, p, span" )
  36. .map( function() {
  37. return this.tagName;
  38. })
  39. .get()
  40. .join( ", " );
  41. $( "b" ).append( document.createTextNode( list ) );
  42. </script>
  43. </body>
  44. </html>

运行一下


还没有评论.