Home > Article > Web Front-end > Detailed explanation of using jQuery compound selector method
This time I will bring you a detailed explanation of the method of using jQuery compound selector. What are the precautions when using jQuery compound selector? Here are practical cases, let’s take a look.
Introduction
The compound selector combines multiple selectors (can be ID selector, element selection or are class name selectors) are combined together, and 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 wrapper set in the form of a collection, using jQuery index The handler can get the jQuery objects in the collection.
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: 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 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: How to implement dynamic loading and repeated binding in JS How to use Angular one-way data flow The above is the detailed content of Detailed explanation of using jQuery compound selector method. For more information, please follow other related articles on the PHP Chinese website!$("span,p.myClass");
<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>