JQuery Selectors

JQuery selectors act upon HTML elements and manipulate them. JQuery selectors can change the inner text of HTML elements. They can also alter the CSS associated with the HTML elements and can react to events as well. In JQuery, the $() factory function is used to select the html elements. This function takes element to select as parameter. For

How JQuery Selectors Work

Following are the three ways in which JQuery Selector, select elements.

  • By Name: For instance, $(‘h1’) will select all h1 headings in webpage
  • By Class: For instance, $(‘.class-name’) will select all elements with class ‘class-name’
  • By ID:For instance, $(‘#id-name’) will select all elements with class ‘id-name’

The following example demonstrates the usage of JQuery selectors for selecting elements by name.

<!DOCTYPE html>
<html>
<head>
    
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
            $('h1').css("background-color", "blue");
            $('h1').css("color", "white");
            $('p').css("background-color", "red");
         });
      </script>

    
</head>
    
<body>
    
    <h1>This is white text with blue background</h1>
    <p>This is a paragraph with red background</p>
    
</body>

</html>

Download Code
Run Code

In the above code, the JQuery selector selects h1 tag and changes its background color to blue while foreground color to white. You can see that properties like background-color and color, which exist in actual CSS are used here for changing the style. The selector also changes the background color of all paragraphs to red.

The last example showed how elements names are used for selection. This example demonstrates the usage of element class and id for element selection in JQuery.

<!DOCTYPE html>
<html>
<head>
    
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
            $('.blue').css("background-color", "blue");
            $('.blue').css("color", "white");
            $('#red').css("background-color", "red");
         });
      </script>
    
</head>
    
<body>
    
    <h1 class="blue">This is white text with blue background</h1>
    <p id="red">This is a paragraph with red background</p>
    
</body>

</html>

Download Code
Run Code

In the above example, the h1 element has a class of blue, while paragraphs have an id of red. The background color and fore color of all the elements with class blue has been changed to blue and white respectively. Similarly, the background color of all the elements with class red is changed to red.

This article explained how selectors select HTML elements. The next article will explain how JQuery can select and manipulate attribute values in HTML.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .