Intro to jQuery
Today I used the JS library jQuery. This library extends the functionality of JS by simplifying DOM selections for HTML documents, along other features.
The first step in using jQuery is to import it into a document. The easiest way to do this is to add the below referrer:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
This enables jQuery functionality in a document. Note that the script should be written in a separate <script> block for jQuery to work.
- Basic jQuery Syntax
- Basic jQuery Selectors
Basic jQuery Syntax:
All jQuery commands start with:
$("element").function;
Additionally functions can be defined within jQuery commands:
$(function(){code...}
Commands support multiple methods for querying:
jQuery methods such as .parent(), children(), .next/prev(), .siblings(). Additionally, leading colon :element to select all nodes.
Or regular JS syntax: parent>child, upper lower, #id, .class, $(opposite).
The below commands selects the child element ‘CHILD_OF_OBJECT_A’ from ‘OBJECT_A’:
$("OBJECT_A").children("CHILD_OF_OBJECT_A").function);
There is also a .css function that appends CSS commands to the selected objects.
$("OBJECT_A").css("font-size","20px").css("background-color","yellow");
.nextElementSibling has it’s equivalent in jQuery:
$("OBJECT_A").next().function;
Along with targeted sibling selections:
$("OBJECT_A").siblings("li");
Finally, jQuery commands can be used to select and assign an object to a variable:
var cobj6 = $(".obj6");
jQuery Selectors:
Expands on DOM selections by adding selection functionality:
Selector for odd-numbered objects:
$("object:odd")
Selector for even-numbered objects:
$("object:even")
Selector for firstt object(of multiple):
$("object:first")
Selector for last object(of multiple):
$("object:last")
Selector for object at index N:
$("object:eq(N)")
Selector for objects less than index N:
$("object:lt(N)")
Selector for objects greater than index N:
$("object:gt(N)")
-gonkgonk