Interactive front-end web development starts with Javascript, and Jquery offers you a simple way to achieve a lot of common javascript tasks. With this article, I’ll hope to teach you the fundamentals of JQuery!
What is JQuery?
JQuery is a JavaScript file that you include in your web pages, and it will let you find elements using CSS-style selectors, and then you can do some things to them using jQuery methods.
<body>
<div id="page">
<h1 id="header">Header</h1>
</div>
<script src="jquery-1.0.js"></script>
<script>
$('#header').on('click', function() {
$(this).hide();
});
</script>
</body>
This simple JQuery code selects the header with the header’s ID and adds an eventListener; if someone clicks this header, it will hide.
In JQuery we use $() as a shortcut for the JQuery() function.
Checking if a page is ready
JQuery has a ready() function to check if your page is ready to work with.
$(document).ready(function(){
//IF READY THIS WILL BE EXECUTED
});
Getting the element content
In JQuery we use the .HTML() and .text() methods to retrieve and update content of those elements.
#tech #jquery-guide #javascript #programming #2020
