Home > Article > Web Front-end > Detailed explanation of the use of jQuery [selector1][selector2][selectorN] selector

Detailed explanation of the use of jQuery [selector1][selector2][selectorN] selector

黄舟Original: 2017-06-23 13:56:091649browse

Overview

CompositeAttribute selector, used when multiple conditions need to be met at the same time.

Parameters

selector1Selector

Attribute selector

selector2Selector

Another attribute selector to further narrow the scope

selectorNSelector

Any multiple attribute selections Tool

Example

Description:

Find all the HTML codes that contain the id attribute and whose name attribute ends with man

<input id="man-news" name="man-news" /> <input name="milkman" /> 
<input id="letterman" name="new-letterman" /> <input name="newmilk" />

jQuery Code:

$("input[id][name$=&#39;man&#39;]")

Result:

[ <input id="letterman" name="new-letterman" /> ]

The elements matched by each selector are combined and returned together.

jQuery( "selector1, selector2, selectorN" )

selector1: Any valid selection

selector2: Other valid selections

selectorN: More Valid options for as long as you like.

You can specify any number of selectors combined into a single result. This multiple expression combination is an efficient way to select different elements. Because they will be in the order they are in the file, the order of the DOM elements in the returned jQuery object may not be the same. Another selector combination is the .add() method.

Example:

Example: Find any element matching the following three selectors.

<!DOCTYPE html>
<html>
<head>
  <style>
 
  div,span,p {
    width: 126px;
    height: 60px;
    float:left;
    padding: 3px;
    margin: 2px;
    background-color: #EEEEEE;
    font-size:14px;
  }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div>div</div>
 
  <p class="myClass">p class="myClass"</p>
  <p class="notMyClass">p class="notMyClass"</p>
  <span>span</span>
<script>$("div,span,p.myClass").css("border","3px solid red");</script>
 
</body>
</html>

Result:

Detailed explanation of the use of jQuery [selector1][selector2][selectorN] selector

##Example: Show the order in the jQuery object.

<!DOCTYPE html>
<html>
<head>
  <style>
  b { color:red; font-size:16px; display:block; clear:left; }
  div,span,p { width: 40px; height: 40px; float:left;
               margin: 10px; background-color: blue;
               padding:3px; color:white;
             }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <span>span</span>
 
  <p>p</p>
  <p>p</p>
  <div>div</div>
  <span>span</span>
 
  <p>p</p>
  <div>div</div>
  <b></b>
<script>
    var list = $("div,p,span").map(function () {
      return this.tagName;
    }).get().join(", ");
    $("b").append(document.createTextNode(list));
</script>
 
</body>
</html>

Result:

Detailed explanation of the use of jQuery [selector1][selector2][selectorN] selector

The above is the detailed content of Detailed explanation of the use of jQuery [selector1][selector2][selectorN] selector. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Solutions to problems with the jquery selector [attribute=value]Next article：Solutions to problems with the jquery selector [attribute=value]

See more

Detailed explanation of the use of jQuery [selector1][selector2][selectorN] selector

Related articles