jQuery Selectors

One of the important features of jQuery is element selection. In order to do something with elements, manipulate them, and apply jQuery methods to them, we first need to get them. The library provides us with a convenient way to select elements based on selectors. It is enough for us to pass a selector to the jQuery function and we can get the element we need that matches the given selector. For example, if we need to get all the elements of img, then we can use the following expression: $(“img”). In this case, “img” will act as a selector.

Let’s take a look at the basic jQuery selectors that are used to select elements.

Basic jQuery selectors

Selector Pattern Description Example
$(“*”) Selecting all page elements For example, the expression
$("*").css('background-color', 'red')
will color all page elements and the page itself red.
$(“Element”) Select all elements with the given tag name $("img")
selects all elements
img

$("input")

selects all elements
input
$(“#id”) Selecting an element with a given id attribute value $("#btn1")

selects an element whose id value is equal to
btn1
(for example,
<div id="btn1"></div>

)
$(“.class”) Selecting all elements with the given class attribute
value		 $(".redStyle")
selects elements whose class value is equal to
redStyle
(for example,
<div class="redStyle"></div>

)
$(“selector1,selector2,selectorN”) Select all elements that match the specified selectors For example, we have this code: 
<div class="apple"></div>
              <div class="apple"></div>
              <div class="orange"></div> 
              <div class="banana"></div>

then the selector
$(".apple, .orange") will select the elements in bold

Specification of choice

We can use several selectors at once to fine-tune the selection of elements. For example, we have a web page like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
</head>
<body>
<h2>Dictionary</h2>
<table id="tab">
  <tr class="tabhead"><td>
    <p>Word</p></td><td><p>Translation</p>
    </td>
  </tr>
  <tr><td><p>table</p></td><td><p>table</p></td></tr>
  <tr><td><p>apple</p></td><td><p>Apple</p></td></tr>
  </table>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    $("#tab").css('background-color', 'blue');
});
</script>
</body>
</html>

In this case, we use the #tab selector, that is, we select our table, which has id=tab. The expression css(‘background-color’, ‘silver’) sets the color of the element – in this case, silver.

By running this page in a web browser, we get the following picture:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
</head>

<body>
    <h2>Dictionary</h2>
    <table id="tab" class="table table-bordered">
        <tr class="tabhead">
            <td>
                <p>Word</p>
            </td>
            <td>
                <p>Translation</p>
            </td>
        </tr>
        <tr>
            <td>
                <p>table</p>
            </td>
            <td>
                <p>table</p>
            </td>
        </tr>
        <tr>
            <td>
                <p>apple</p>
            </td>
            <td>
                <p>Apple</p>
            </td>
        </tr>
    </table>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            $("#tab").css('background-color', 'blue');
        });
    </script>
</body>

</html>

But we can also use a set of selectors to perform an action in more detail. For example, we want only the first line that has the class=”tabhead” attribute to be colored. Then we can use the following selector: $(“#tab .tabhead”). In this case, the selector will select the element with class=”tabhead” that is in the element with id=”tab”.

At the same time, we can use many different selectors to narrow the selection, for example: $(“div#menu a.redStyle”). For example, this selector can find, for example, such an element:

In this case, we have applied a hierarchical selector, which means that the element with the second selector must be in the element with the first selector. But in addition, we can also apply a number of hierarchical selectors:

Selector Pattern Description Example
parent_selector > child_selector Select all elements that match the second selector and are children of the elements of the first
selector		 For example, to get the link element in the previous example, we can use the
selector$("#menu > a")
selector1 + selector2 Selects elements with the selector ‘selector2’ that are immediately after the elements ‘selector1’.
Both elements must be on the same level.		 For example, we have the following block of links: 
<div id="menu">
      <a href="1.html" class="open">1.html</a>
      <a href="2.html" class="closed">2.html</a>
      <a href="3.html">3.html</a>
      <a href="4.html" class="open">4.html</a>
      <a href="5.html" class="closed">5.html</a>
      <a href="6.html" class="open">6.html</a> 
  </div>

The selector $(".closed + .open")will then select those links that are in bold, since
those elements with the class=”open” attribute come directly after the elements with the
class=”closed” attribute.
selector1 ~ selector2 Selects elements with selector ‘selector2’ that are on the same level as elements with selector
‘selector1’.		 For example, we have the following block of links: 
<div id="menu">
      <a href="1.html" class="open">1.html</a>
      <a href="2.html" class="closed">2.html</a>
      <a href="3.html">3.html</a>
      <a href="4.html" class="open">4.html</a>
      <a href="5.html" class="closed">5.html</a>
      <a href="6.html" class="open">6.html</a> 
  </div>

The selector $(".closed ~ .open")will then select those links that are in bold, since
those elements with the class=”open” attribute are on the same level as the elements with the
class=”closed” attribute.

Attribute selectors

In addition to the basic and hierarchical selectors discussed above, we can use attribute selectors to narrow the search. In this case, jQuery will return elements based on the values ​​and definitions of the specified attributes.

Selector Pattern Description Example
[attr] Selecting all elements with an attr attribute For example, the expression $("a[class]")will select all link elements that have the
attributeclass
[attr=’value’] Selecting all elements whose attr attribute value is equal to value For example, the expression $("a[class='redStyle']")will select all link elements that
have the attributeclass="redStyle"
[attr^=’value’] Select all elements whose attr attribute value starts with the string value For example, the expression $("a[class^='red']")would select link elements that have the
attribute class="redStyle"because the word ‘redStyle’ starts with ‘red’.
[attr$=’value’] Select all elements whose attr attribute value ends with the string value For example, the expression $("a[class$='Style']")would select link elements that have
the attribute class="redStyle"because the word ‘redStyle’ ends in ‘Style’.
[attr~=’value’] Selects all elements whose attr attribute has a list of space-separated values, and one of those
values ​​is equal to value		 For example, an expression $("a[class~='redStyle']")select link elements that can have
the following attribute value class="redStyle closed".
[attr*=’value’] Selection of all elements for which the attr attribute value has the value substring For example, an expression $("a[class*='Style']")select link elements that can have the
following attribute value class="redStyle1".
[attr|=’value’] Selects all elements whose attr attribute value is either value or a hyphen-separated list of values,
and the first value in that list is value		 For example, an expression $("a[class|='red']")select link elements that can have the
following attribute value class="red-freeStyle-closed".

Selectors Context

Above, we used this notation to select an element: $(selector). This expression searched the entire DOM tree for an element matching the selector. However, we can limit the search by applying a search context. The context is a selector within which elements should be selected. For example, we have a web page like this:

<!DOCTYPE html>
<html>
<head>
<title> jQuery</title>
</head>
<body>
<div id="menu">
    <p><a href="1.html" class="open">Link 1</a></p><p><a href="2.html" class="open">Link 2</a></p>
</div>
<p><a href="3.html" class="open">Link 3</a></p>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    $(".open", "div#menu").css('background-color', 'silver');
});
</script>
</body>
</html>

We have three links on the page, they all have the same class defined, but two of them are in a div element and that’s what we want to get. Then we use an expression $(“.open”, “div#menu”)- here the second selector parameter will be the selection context. And the result in this case will be the following page:

It is important not to confuse this expression with a selection by multiple selectors, for example, $(“.open, div#menu “)these are different expressions that will give different results.

Topics

Wordpress Theme Development
SEO For Wordpress Websites
WordPress Solutions
Node.js
TypeScript
React
jQuery
JavaScript
Solutions
HTML5
CSS3
PHP
Blog