Detailed explanation of the use of jQuery [selector1][selector2][selectorN] selector-JS Tutorial-php.cn

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

黄舟

Release： 2017-06-23 13:56:09

Original

1691 people have browsed it

Overview

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

Parameters

selector1Selector

Copy after login

Attribute selector

selector2Selector

Copy after login

Another attribute selector to further narrow the scope

selectorNSelector

Copy after login

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

Copy after login

jQuery Code:

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

Copy after login

Result:

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

Copy after login

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>

Copy after login

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>

Copy after login

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!