jQuery: More selectors

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

For a beginner in jQuery programming, you will probably find that the 3 methods based on HTML elements, IDs and classes mentioned in the earlier post will be sufficed.

For a more thorough treatment of jQuery selectors, you can refer to this guide.

Nonetheless, we will go ahead and list down some common selectors.

ExampleDescription
$('*')Selects all elements
$('#demo_id')Selects elements with id='demo_id'
$('.demo_class')Selects all elements with class='demo_class'
$('p')All <p> elements
$('ul li:first')This selector gets only the first <li> element of the <ul>
$('li:not(.myclass)')Selects all elements matched by <li> that do not have class='myclass'.

 

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

jQuery: Document ready event

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

In this simple jQuery program, we have a document ready event.

$(document).ready()

The $ tells us that document is a jQuery object and it accesses a jQuery method called ready().

This ready() method is a way to check that the document we are accessing has all its elements (h1, body, p, span etc) loaded.

For example, we need to ensure that <h1> is ready before changing the text wrapped inside the heading tags.

Ready() is only one of the jQuery methods and this method is associated with document object.

Its been said that this document ready method is so common that the jQuery team develops a shorter method to write it.

$(function(){})

Look also at how we update <h4> using a jQuery method.  This line here will execute after the document is fully loaded.

$('#demo').html('Document is ready and loaded');

 

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(function () {
            $('#demo').html('Document is ready and loaded');
        });
    </script>
</head>
<body>
<h4 id='demo'>Document Not Ready</h4>
</body>
</html>
Try The Code