selector1,selector2,selectorN
概述
将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内
参数
selector1 一个有效的选择器;selector2 另一个有效的选择器;selectorN 任意多个有效选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <title></title> <script> $(document).ready(function() { $("button").click(function() { //selector1,selector2,selectorN选择器 $("#li,p,.main").css("color", "#0000FF"); }); }); </script> <style> .main { color: #FF0000; } </style> </head> <body> <p>第一个段落。</p> <p>第二个段落。</p> <ol> <li id="li">Java</li> <li class="main">C#</li> </ol> <button>点击按钮</button> </body> </html>
ancestor descendant
概述
在给定的祖先元素下匹配所有的后代元素
参数
ancestor 任何有效选择器;descendant 用以匹配元素的选择器,并且它是第一个选择器的后代元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <title></title> <script> $(document).ready(function() { $("button").click(function() { //ancestor descendant选择器 $("div p").css("color", "#0000FF"); $("div ol li[name='java']").css("color","#FF0000"); }); }); </script> </head> <body> <div> <p>第一个段落。</p> <p>第二个段落。</p> <ol> <li name="java">Java</li> <li>C#</li> </ol> </div> <button>点击按钮</button> </body> </html>