How to use compound selectors in jQuery

This time I will show you how to use compound selectors in jQuery, and what are the precautions when using compound selectors in jQuery. The following is a practical case, let's take a look.

1 Introduction

The compound selector combines multiple selectors (can be ID selector, element selection or class name selector). The two selectors are separated by a comma ",", as long as they match Any filter condition will be matched, and a jQuery wrapper set in the form of a collection will be returned. The jQuery objects in the collection can be obtained using the jQuery indexer.

Selectors with multiple matching conditions do not match elements that meet the matching conditions of these selectors at the same time. Instead, the elements matched by each selector are combined and returned together.
The usage of compound selector is as follows:

$(" selector1,selector2,selectorN");

selector1: It is a valid selector, which can be an ID selector, an elementless selector or a class name selector, etc.

selector2: It is another valid selector, which can be an ID selector, an elementless selector or a class name selector, etc.

selectorN: (optional) is any number of selectors, which can be ID selectors, elementless selectors, or class name selectors.

For example, to query all tags in a document and the

tag using the css class myClass, you can use the following jQuery code:

$("span,p.myClass");

二 Application

Add 3 different elements to the page and set styles uniformly. Use a compound selector to filter

elements and elements whose id attribute value is span and add new styles to them.

三码

<script></script>
<p>p元素</p>
<p>p元素</p>
<span>ID为span的元素</span>
<input>
<script>
$(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>

## I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Other related articles on the Chinese website!

Recommended reading:

Detailed explanation of vue calculated properties

##How Vue uses CDN to optimize first screen loading

How to package Vue projects by environment

Vue novice tutorial

The above is the detailed content of How to use compound selectors in jQuery. For more information, please follow other related articles on the PHP Chinese website!