jQuery中的复合选择器如何使用

这次给大家带来jQuery中的复合选择器如何使用，使用jQuery中复合选择器的注意事项有哪些，下面就是实战案例，一起来看一下。

本文实例讲述了jQuery中复合选择器简单用法。分享给大家供大家参考，具体如下：

一 介绍

复合选择器将多个选择器（可以是ID选择器、元素选择或是类名选择器）组合在一起，两个选择器之间以逗号“，”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的jQuery包装集，利用jQuery索引器可以取得集合中的jQuery对象。

多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个选择器匹配的元素合并后一起返回。
复合选择器的使用方法如下：

$(" selector1,selector2,selectorN");

selector1：为一个有效的选择器，可以是ID选择器、无素选择器或是类名选择器等。

selector2：为另一个有效的选择器，可以是ID选择器、无素选择器或是类名选择器等。

selectorN：（可选择）为任意多个选择器，可以是ID选择器、无素选择器或是类名选择器等。

例如，要查询文档中的全部的<span>标记和使用CSS类myClass的<p>标记，可以使用下面的jQuery代码：

$("span,p.myClass");

二 应用

在页面添加3种不同元素并统一设置样式。使用复合选择器筛选<p>元素和id属性值为span的元素，并为它们添加新的样式。

三 代码

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<p class="default">p元素</p>
<p class="default">p元素</p>
<span class="default" id="span">ID为span的元素</span>
<input type="button" value="为p元素和ID为span的元素换肤" />
<script type="text/javascript">
$(document).ready(
function()
{
  $("input[type=button]").click(
  function() //绑定按钮的单击事件
  {
    var myClass = $("p,#span");   //选取DOM元素
    myClass.css("background-color","#C50210");  //为选取的DOM元素设置背景颜色
    myClass.css("color","#FFF");  //为选取的DOM元素设置文字颜色
  });
});
</script>

四 运行效果

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

Angular的单向数据流使用详解

vuejs项目打包后可能会出现的问题有哪些

怎样使用VUE减少对服务器的请求次数

以上就是jQuery中的复合选择器如何使用的详细内容，更多请关注其它相关文章！