JQuery Selectors

The jQuery object - $() or jQuery()

jQuery selectors start with the dollar sign ($) or the keyword jQuery followed by open and close parentheses. For the purposes of the course, the variant with the dollar sign $() will be used. With the jQuery function, elements can be selected in three ways within a given document:

Tag selector – $('p') – selects all paragraphs in the document
ID selector - $('#idName') – selects only the element that contains the specified identifier in the document
Class selector - $('.class-name') – selects all elements with the specified class in the document All these selectors can be used individually or in combination with other selectors. If you wanted to cover multiple elements at once, the elements would be separated by commas in the $() function within quotes.

$('p, #idName, .className');

In the following example, a tag selector is applied. The said selector selects all paragraphs within the document and changes their background color and text color using the .css() method, which you will learn more about in the following lessons.

<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery selector</title>
    <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js">
   </script>
 
    <script type="text/javascript">
      $(document).ready(function() {
         $("p").css({
         "background-color": "black",
         "color":"white"
         });
      });
    </script>
  </head>
 
  <body>
    <div>
      <p class="class-name">First paragraph.</p>
      <p id="idName">Second paragraph.</p>
      <p>Third paragraph.</p>
    </div>
  </body>
</html>

JQuery Attributes

One of the most fundamental components that you can manipulate with jQuery are element properties and attributes.

Most of these attributes are available through JavaScript via DOM properties, some of the most common are:

className – retrieves class attribute
tagName – retrieves tag attribute
id – retrieves id attribute
href – retrieves href attribute
title – retrieves title attribute
rel – retrieves rel attribute
src – retrieves src attribute

In the following example, the tag name is img, and the names id, src, alt, class and title represent the attributes of the element, each of which consists of a name and a value.

<img id="Image" src="image.gif" alt="Image" class="image" title="This is an image" />

jQuery provides a way to easily manipulate and access these attributes, and allows for changing them.

22.2.1. Fetching attributes

By applying the attr() method, it is possible to fetch the attribute value by passing the attribute name within the quotes.

$("h1").attr("title");

In the following example, the title attribute of the <h1> element is fetched using the attr() method and inserted into a <div> with the identifier myID using the .text() method.

<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery attributes</title>
    <script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js">
   </script>
 
    <script type="text/javascript">
      $(document).ready(function() {
         var title = $("h1").attr("title");
         $("#myID").text(title);
      });
    </script>
  </head>
 
  <body>
    <div>
      <h1 title="Text from the title attribute">Title</h1>
      <div id="myID"></div>
    </div>
  </body>
</html>

22.2.2. Setting attribute values

The attr() method is also used when it is necessary to set the value of an attribute by passing the attribute name as the first parameter, and the attribute value as the second.

$("#myId").attr("title", "My title attribute");

In the following example, the title attribute of the <div> element with the identifier #myId is changed to the value "My title attribute".

<html>
  <head>
    <title>jQuery attributes</title>
    <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
 
    <script type="text/javascript">
      $(document).ready(function() {
         $("#mojID").attr("title", "My title attribute");
      });
    </script>
  </head>
 
  <body>
      <div id="mojID" title="title elementa">
      </div>
  </body>
</html>

Using the attr() method, it is also possible to fetch and/or change multiple attributes at the same time as follows.

$('img').attr({
   title : 'My title',
   src: '/images/image-1.jpg',
   alt: 'My image'
});

As seen in the example, when it is necessary to fetch multiple attributes at the same time, curly brackets are also written within regular parentheses, and within them the attributes and their values are written, separated by a comma.

Working with classes

With jQuery, it is possible to dynamically add classes to elements. The addClass() method is used for this functionality. The addClass() method is most commonly used to dynamically add CSS styles, for example, on a mouse click over a certain element.

Within the method, it is possible to specify one or more classes separated by space.

$('p').addClass('first-class second-class n-class');

In the following example, the "invert" class is dynamically added to the <p> element after the DOM is ready. The class contains styles for coloring the text in white and the background in black.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Dynamic styling addition</title>
    <script type="text/javascript"  
src="http://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>


    <script type="text/javascript">
      $(document).ready(function() {
         $("p").addClass("invert");
      });
    </script>
    <style>
      .invert { color:white; background: black; }
    </style>
  </head>
 
  <body>
    <p>Paragraph of text</p>
  </body>
</html>

Here is a list of useful and frequently used methods in the jQuery library for attribute manipulation:

attr(attribute): Fetches attribute values
attr(attribute, value): Sets attribute values
hasClass(class-name): Checks if a specific element has a specified class and returns true if the class exists on the element
addClass(class-name): Adds all classes specified in the method from the element
removeClass(class-name): Removes all classes specified in the method from the element
toggleClass(class-name): Adds the specified class if it does not exist and removes it if it does
html(): Fetches all the HTML content of the specified element
html(value): Sets all the HTML content in the specified elements
text(): Fetches the text of the specified elements
text(value): Sets the text of the specified elements
val(): Fetches the value of the <input> field
val(value): Sets the value of the <input> field