8.1 Connecting jQuery
Finally, we got to the jQuery library. By the time this article was written, it is already obsolete and is almost never used in new projects . But at one time it was very popular, very well documented, and there are a lot of examples on the Internet with its use .
Therefore, if you are writing a small web project and do not want to spend months learning modern frameworks, I recommend that you use the jQuery library.
jQuery is a library, not a framework, which means it doesn't define its own frontend device format. You can include it in absolutely any HTML page and call its functions.
In order to use the thousands of jQuery functions, you just need to include it in your page. You can do it like this:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>Working with jQuery can be divided into two types.
First, you can get a jQuery library object, which is a regular HTML element wrapped in a custom jQuery object.
Secondly, jQuery has several global objects that are not bound to HTML elements. They also need to be used.
Let's start with the first.
8.2 Working with selectors
jQuery uses selectors to work with objects (remember CSS and its classes?). So, in jQuery, if you want to select some object or group of objects, you need to set their selector.
Examples:
| Code | Description | Note | |
|---|---|---|---|
| 1 | $("div") | Selects all objects with a DIV tag | many objects |
| 2 | $("img.#image123") | Selects all objects with IMG tag and ID == image123 | one object |
| 3 | $("#image123") | Selects all objects with ID == image123 | one object |
| 4 | $("div.article") | Selects all objects with a DIV tag that have class article | many objects |
Let's say we want to add event handling to all links onclick, here's how we can do it with jQuery:
$("a").click(function() {
alert("Click");
});Three steps are taken here:
- Gets the object(s) that match the selector
"a". - We create an anonymous function that calls the
alert(). - We set this function as an event handler
clickfor all objects from point 1.
Another good thing about jQuery is that its code is easy to read. It doesn't take much to figure out how everything works. If there is working code, then it's easy enough to understand what it does.
8.3 Working with document elements
Let's look at a few scenarios for working with a document using jQuery.
Get the value of an element (for elements that have values):
var result = $ ("selector").value();Set element value (for elements that have values):
$ ("selector").value(newValue);How to add HTML inside some element?
$ ("selector").html(newHTML);And how to get the HTML that is inside the element?
var html = $ ("selector").html();What if I want to get/add not HTML, but plain text? No surprises here either.
var html = $ ("selector").text();What if I want to get/change the color of an element?
$ ("selector").color("red");If you need to work with styles, then this is also easy to do:
$ ("selector").css("color", "red");How to add a new element?
$ (".container").append($("h3"));