Working with jQuery

You have now seen (only) one example of how jQuery can be used to manipulate an HTML page. There are a lot more things we can do, and that will require some more basics of JavaScript and jQuery.

jQuery Selectors

In the last example, we saw this code fragment and said that it affected every <p> on the page.

jQuery('p').…

The string 'p' given to the jQuery function is a selector (or jQuery selector to be more specific). In this case, it selects all paragraphs exactly like the CSS selector p does. (Remember CSS Selectors?)

p { … }

This is not an accident: jQuery selectors were designed to work like CSS selectors because most developers already know how to use CSS selectors and find them easy to work with.

For example, you can select the element from a page with id="special" like this:

jQuery('#special').…

That is probably the most useful jQuery selector, since you often want to modify a specific element, and we know that id values must be unique (otherwise the page won't validate). Thus, selecting by id gives us an easy way to grab a particular element.

There are some differences between CSS selectors and jQuery selectors, but for now you can safely assume they are the same. (The differences are mostly that jQuery extends things so you can specify things in jQuery that won't work in CSS.)

If you really want all of the details, you can look at the jQuery Selector Reference, but for now, the basics are probably enough.

jQuery Objects

We can now use the jQuery(…) function to select various parts of the page. After calling the function, what it gives back is a jQuery object. As mentioned in Variables and Functions, objects in JavaScript can contain other stuff: numbers, strings, functions, etc.

This is the first object we have actually worked with: jQuery('p') is an object with a bunch of stuff in it.

To get at the stuff inside an object, we use the dot (.), so jQuery('p').click refers to something named click in that object. We know that click is in there because it's in the jQuery documentation, which also says that it's a function we can call.

Here is a closer look at the parts of the jQuery statement above, and why it does what it does:

jQuery: The main jQuery function that we use to access the library's functionality.
jQuery('p'): A jQuery object representing all paragraphs on the page.
jQuery('p').click: A function that operates on all everything in the jQuery object (in this case, all paragraphs).
jQuery('p').click(say_hello): Calling that function gives us a statement that actually does something: it connects the say_hello function to the click event of everything in that jQuery object.

There are many other things in each jQuery object, and we will work with some as the course goes on.

Modifying the Page

After we select some part(s) of the page with the jQuery function, there are lots of things we can do with the result. So far, we have only seen one thing: connect a function to the “click” event.

There is another function in jQuery objects called html that can be used to modify the contents of the page. Let's look at another complete page example to see it work. Here is an HTML page that we can work with:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Manipulating HTML with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="manipulate-page.js"></script>
</head>
<body>
<h1>Manipulating HTML with jQuery</h1>
<p id="changeme">This paragraph is in the .html file.</p>
</body>
</html>

And here is a JavaScript file manipulate-page.js that it references with its <script> element:

p_click = function() {
  jQuery('#changeme').html('Somebody clicked me.')
}
h1_hover = function() {
  jQuery('#changeme').html('Mouse <em>over</em> the &lt;h1&gt;.')
}
setup = function() {
  jQuery('#changeme').click(p_click)
  jQuery('h1').mouseover(h1_hover)
}
jQuery(document).ready(setup)

The last line here does the same thing as before: calls the setup function when the page is finished loading. The setup function connects two events to two functions:

When the element with id="changeme" is clicked, call the p_click function.
When any <h1> (there's only one) have the mouse pointer move over it (a “mouseover” event), call the h1_hover function.

When either of those events occur, the corresponding function (p_click or h1_hover) is called. They select the paragraph with jQuery('#changeme').

Then the html function is used to change the contents of that paragraph. The string given to html is used to replace the contents for the (first) element selected by the jQuery call. After the functions run, the page will look as if we had these in the original HTML (respectively):

We can combine these ideas any way we want. We can now:

Select various parts of the page with jQuery selectors.
Attach functions to events on those parts of the page.
Replace the HTML contents of elements on the page.

Just this gives us many ways to introduce interesting behaviour into our pages. We will see more things JavaScript and jQuery can do later.