Basic jQuery operation
In order to use jQuery in a web page we must select the HTML elements of that web page to be able to work with them.
To select with jQuery the HTML elements of a web page we will use CSS selectors and jQuery self selectors.
In jQuery we can select the main HTML elements directly, with CSS selectors or modify these elements and their content with identifiers.
Main HTML elements
<body> → web content.<head> → information about the document.<div> → division of web content.<a> → web links.<strong> → bold text.<br> → line breaks.<H1>... <H6> → headings within the content.<img> → image of a website.
CSS selectors that go inside an html tag
- * → The universal selector.
- label →To select a specific label.
- #id → Elements with a given id.
- .class → Elements with a specific class.
- element1 element2 → Elements that are nested inside another element.
- element1 > element2 → Elements that are direct children of a given element.
- element1 + element2 → Element2 follows element1.
Example: <div id="content_1">My content</div>
CSS selectors that modify an html tag
- :hover → To select the element over which I hover the mouse cursor.
- :visited → To select the visited links.
- :first-of-type or :first-child →To select the element of a given type that is the first of that type within the parent or to select the given element that is the first child of a given parent.
- :last-of-type or :last-child → Analogous to the above but referencing the last and not the first.
- :nth-child(pos) or :nth-of-type(pos) → Analogous to the above but specifying the position where the element or child is located as a parameter (pos).
- :required → To select any element of a form that is required.
- ::after → Used to add something (with the content property) after any given element.
- ::before → Used to add something (with the content property) before a given element.
Start jQuery
To start jQuery we must do the following inside a web page, just before the end of the body tag:
<script>
$(document).ready(function(){
});
</script>
Select the entire html document
Using $('*') inside a script we can select the whole html document:
<html>
<head></head>
<body>
.....
<script>
$(document).ready(function(){
$('*');
});
</script>
<!--JQuery Library-->
<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" crossorigin="anonymous"></script>
</body>
</html>
Select a div and insert content into it
In the following example we have a div with id=part1. With jQuery we select that div and insert the html text "This is the Part 1".
<html>
<body>
<div id="part1"></div>
<script>
$(document).ready(function(){
$('#part1').html('This is the Part 1');
});
</script>
<!--JQuery Library-->
<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js" integrity="sha256-ZwqZIVdD3iXNyGHbSYdsmWP//UBokj2FHAxKuSBKDSo=" crossorigin="anonymous"></script>
</body>
</html>
Select the first column of each row in a table
<script>
$(document).ready(function(){
$('table tr td:first-child');
});
</script>
Hide the first element of an ul list in jQuery
<script>
$(document).ready(function(){
$("ul.my-class li:first-child").hide();
});
</script>
Show the third hidden element of a list ul with jQuery
<script>
$(document).ready(function(){
$("ul.my-class li:nth-child(3)").show();
});
</script>
Hide the last column of each row of a table in jQuery
<script>
$(document).ready(function(){
$('td:last-of-type').hide();
});
</script>
Hide an image from a group of images in jQuery
<script>
$(document).ready(function(){
$('img:last-of-type').eq(6).hide();
});
</script>
