Adding jQuery library to Your Web Pages
There are several ways to start using jQuery on your web site. Either you can download the jQuery library from jQuery.com or Include jQuery from a CDN(Content Delivery Network), like Google, Microsoft.
There are two versions of jQuery available in the internet for downloading. You can download it from the official site jQuery.com. The two versions are :
- Production version – this is compressed version since it can be used for your live website.
- Development version – since this is an uncompressed version usually used for testing and development.
You can also include jQuery library in your script tag from a CDN (Content Delivery Network). Both Google and Microsoft host jQuery library. Use one of the following methods (either from Google CDN or Microsoft CDN) to include jQuery library to your website:
One of the big advantage of using the hosted jQuery from Google CDN or Microsoft CDN is that it will provide the library from the server closest to your website when your website accessed by the end user, which leads to better or faster loading time.
Basic syntax of jQuery is: $(selector).action(). The $ sign in the syntax is to define/access jQuery. The (selector) in the syntax is to “query or find ” HTML elements in your HTML document. The jQuery action() to be performed on the selected element(s) in your current HTML document or HTML file.
$(this).hide() – hides the current element of the HTML document.
$(“p”).hide() – hides all <p> elements in your HTML document.
$(“.test”).hide() – hides all elements in your HTML document having attribute class=”test”.
$(“#test”).hide() – hides the element with id=”test” in your HTML document.
Ready Event in HTML Document
As you know the ready event will be fired when your HTML document is fully loaded in the browser. The jQuery methods included in the ready event to perform the actions when your document fully loaded in the browser. The document ready event using jQuery syntax is shown below.
// jQuery actions go here…
jQuery tutorial for hiding the Button
Create a document named jquerytest.php page as shown in the below image and save it in the root folder of php.
<p><h1>Introduction to Jquery: When you click on the button,it will hide<h1></p>
<button>Click Here to hide !!!<button>
Design of the above jQuery code is shown below.
When you click on the button “Click Here to hide !!!”, it will hide and result is as shown below. You can also refer to know more about jQuery.