Home jQuery What is jQuery?

What is jQuery?

11
0

jQuery is one of the most popular and commonly used client-side library to use after Javascript. There’re few differences between JavaScript and jQuery. In this tutorial, I’ll explain all about jQuery library which we use in day-to-day web development.

jQuery Features: What is jQuery?

1. jQuery is a JavaScript Library that designed and developed to simplifies JavaScript programming, client-side scripting, event handling, slider, animation and much more within HTML document on client side.

2. jQuery is greatly powerful to make its slogan “write less, do more” comes true.

3. jQuery is a lightweight JavaScript library and easy to learn.

jQuery Usage and Example

jQuery code is mostly linked within src attribute of HTML <script> tag or written under that tag within webpages to execute and instruct all types of web browsers. The main aim of jQuery is to make it much easier to use JavaScript on your website.

jQuery reduces many lines of JavaScript code to accomplish things in easy and simplified way. jQuery also simplifies DOM manipulation, AJAX calls, Event handling etc.

When a user requests an HTML page with jQuery in it, the script is sent to the browser and it’s up to the browser to do something with it.

Sample Code

Following is the basic example code that is designed for you to get started using jQuery:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>What is jQuery?</title>
    <!--give path in "src" attribute to link jQuery-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        //making hide/show content when page first time loads
        $(document).ready(function () {
            $("#visibleContent").show();
            $("#invisibleContent").hide();
        });
    </script>
</head>
<body>
    <div id="visibleContent" style="display: none;">
        visibleContent: Content inside this div remains invisible on page load
    </div>
    <br />
    <div id="invisibleContent" style="display: none;">
        invisibleContent: Content inside this div remains invisible on page load
    </div>
    <br />
    Other visible page content in body
</body>
</html>
Note: If you don’t have a copy of jQuery, then download it from jQuery.com and store “jquery.min.js” file under the “js” or “root(/)” directory and give appropriate path to src attribute of <script> tag as i have given here.

Sample Result

visibleContent: Content inside this div remains invisible on page load

Other visible page content in body

As you can see in above sample result, we can see the visible content and invisible content won’t be shown in web page. This way we can hide/show any html elements using jquery and also many other real examples I’ve shared in my blog.

Tip: If you are a beginner and don’t have any programming experience at all, you can start with some general HTML, CSS, JavaScript, jQuery examples that will help you to learn the basics.
Previous articleWhat is Javascript?
Next articleIncrease RDP Session Timeout For Remote Server Connection
Hi there, I am Mayank, the man behind Technical Mack. I started AspnetO with a motive to educate people on various programming languages ranging from beginners to expert level. Through this blog, I aim to provide more insightful content.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

2 × 2 =