Detailed explanation of using jQuery's compound selector

This time I will bring you a detailed explanation of the use of jQuery's compound selector. What are the precautions when using jQuery's compound selector? The following is a practical case, let's take a look.

Introduction

The compound selector combines multiple selectors (can be ID selector, element selection or class name selector) Combined together, the two selectors are separated by commas ",". As long as any one of the filter conditions is met, they will be matched. What is returned is a jQuery packaging set in the form of a collection. You can use the jQuery indexer to obtain the items in the collection. jQuery object.

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 method of using the 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 and

tags using the CSS class myClass in a document, you can use the following jQuery code:

$("span,p.myClass");

Second 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.

Three codes

<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>

Four running effects

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

Recommended reading:

vue implements reducing the number of requests to the server

Detailed steps for using JSON to submit data to the server

How vue uses caching

The above is the detailed content of Detailed explanation of using jQuery's compound selector. For more information, please follow other related articles on the PHP Chinese website!