jQuery: Selectors

This entry is part 5 of 33 in the series jQuery Tutorial

JQuery selectors, together with handling of events in a page, are probably the most important components of jQuery.

The core of the jQuery library allows you to find DOM elements using CSS selector syntax and run methods on that collection.

The format of the jQuery selector is:

$(selector).html()

jQuery selectors can be based on:

  1. The HTML elements such as p, h1, h2, div.
  2. The id as in the demo id used in the earlier example.
  3. Class

An example selector based in a HTML element:

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(function () {
            $('p').html('Document is ready and loaded');
        });
    </script>
</head>
<body>
<p>I will be changed</p>
<h4>I will not be changed</h4>
<p>I will be changed</p>
</body>
</html>

Try The Code

An example based in class:

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(function () {
            $('.demo_class').html('Document is ready and loaded');
        });
    </script>
</head>
<body>
<p class='demo_class'>I will be changed</p>
<h4 class='demo_class'>I will be changed</h4>
<p>I will not be changed</p>
</body>
</html>
Try The Code
Series Navigation<< jQuery: Document.ready vs windows.load
jQuery: More selectors >>

Leave a comment

Leave a Reply