JavaScript Vs jQuery : Which is better?

Am sure if you're a developer, at some novice stage of your programming life, you would have wondered about how JavaScript is different from jQuery, and which of the two is more efficient and faster. Your curious doubt has a rather unconvincing answer : none. Well, now it would be my job to convince you.

Javascript:

This is a language which the web browser understands. It was released officially by Microsoft in its IE 3.0 in 1996, at the time when websites were becoming more complex and dynamic. As you would know now, dynamic content (rather flashy content) in websites is the order of the day, and the most popular way to achieve this is using JavaScript. JS is more readable and easier to master in a short span of time.

But initially different browsers interpreted the language in different ways, and developers would spend a lot of their precious time to fix the bugs cased due to that. Hence jQuery was conceived, although in present time, all browsers have begun to implement JS uniformly.

jQuery:

In simple terms, jQuery is a library of JS. In order to make the browsers understand JS in a standard way, developers started building custom frameworks, which simplified HTML document traversing, animation, event handling and AJAX interactions. These frameworks were shared freely in the development world and the concept became so widespread that the birth of jQuery was inevitable. Standard pre-written methods ( .js files) available in the internet are integrated into the project and used by the dynamic content you want to build. Hence jQuery now lets you focus  more on developing the dynamic features and less on cross browser issues. 

Which is better?

Neither. As said, JavaScript forms the basis of jQuery and the two cannot be separated. Most of the times, jQuery uses fewer lines of code, compared to the same features written using JS. However, since jQuery code also interacts with the same DOM methods as JS but in an indirect way, it cannot be said that jQuery is faster than JS.

Most of the effects you require for your project can be achieved easily with jQuery, hence the use of jQuery library today is more than the traditional JS itself. But to understand the client-side scripting from the bottom-up, it would be better to understand the basic working of both JS and jQuery.

A simple animated Back to Top button using jQuery

In lengthy web pages, it is more sensible to have a 'Back to top' button, instead of making the user scroll all the way up again. Below is the code for a simple floating 'Back to top' button using jQuery. You can add an image or you can define a div and style it, and give it the "back-to-top" class.

You can also define the duration in milliseconds in which the page goes to the top and the offset of the document on which the button should appear (and disappear).

HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<button onclick="href='#'"  class="back-to-top">Back to Top</button>

JAVASCRIPT:

<script type="text/javascript">
            // Code to provide functionality for the 'Back to Top' button
            jQuery(document).ready(function () {
                var offset = 220;
                var duration = 500;
                jQuery(window).scroll(function () {
                    if (jQuery(this).scrollTop() > offset) {
                        jQuery('.back-to-top').fadeIn(duration);
                    } else {
                        jQuery('.back-to-top').fadeOut(duration);
                    }
                });

                jQuery('.back-to-top').click(function (event) {
                    event.preventDefault();
                    jQuery('html, body').animate({ scrollTop: 0 }, duration);
                    return false;
                })
            });
        </script>

CSS:

.back-to-top {

   position: fixed;

   bottom: 2em;

   right: 0px;

   text-decoration: none;

   color: #000000; 

   background-color: rgba(235, 235, 235, 0.80);

   font-size: 12px;

   padding: 1em; 

   display: none; 

}

 .back-to-top:hover { 

   background-color: rgba(135, 135, 135, 0.50); 

}

How to split jQuery Datepicker's date into 3 separate fields with Validations.

I will show you how to split the Datepicker of jQuery into 3 separate fields (text and drop down) and give validations to the selected date.

HTML:

<script type="text/javascript" src="js/jquery.datepicker.js"></script>

TEXT FIELDS:

<div class="demo">    

    <p>Date:</p>

    <input id="month" type="text" />

    <input id="day" type="text" />

    <input id="year" type="text"/>

    <input type="hidden" id="datepicker" />   

</div>

Demo: http://jsfiddle.net/gvAbv/277/

DROP DOWN FIELDS:

    

    <div class="demo">

    

    <p>Date:</p>

    <select id="month" name="month">

        <option value="01">January</option> 

        <option value="02">February</option>

        .

        .

        .

        <option value="12">December</option>

    </select>

    <select id="day" name="day">

        <option value="01">1</option>

        <option value="02">2</option>

        .

        .

        .

        <option value="30">30</option>

        <option value="31">31</option>

    </select>

    <select id="year" name="year">

        <option value="2011">2011</option>

        .

        .

        .

        <option value="2015">2015</option>

    </select>

    <input type="hidden" id="datepicker" />

    

</div>

Demo: http://jsfiddle.net/zwwY7/66/

JAVASCRIPT:

$(function() {

    $("#datepicker").datepicker({

         buttonImage: '../../images/icons/calendar.png',

        buttonImageOnly: true,

        showOn: 'button',

         onSelect: function(dateText, inst) {

            $('#year').val(dateText.split('/')[2]);

            $('#month').val(dateText.split('/')[0]);

            $('#day').val(dateText.split('/')[1]);                     

        }

    });

});

VALIDATION:

The Validation plugin lets you apply validations to your fields to prevent a form being submitted with invalid values. Meanwhile the jQuery UI Datepicker plugin lets the user select a date from a pop calendar, ensuring a correct entry. A problem arises if the user can also enter a date manually as they may not provide a valid value. The plugin presented here extends the Validation plugin to allow Datepicker fields to be validated before submission.

Add the jquery.ui.datepicker.validation.js extension to your page, following both the jQuery UI/Datepicker and Validation modules. The current version is 1.0.1 and works with jQuery UI Datepicker version 1.8.6.

A new validation rule is defined (dpDate) that may be added as a class to your datepicker fields or specified in the rules section of the validate settings. As well as checking the text against the current dateFormat, this validator also checks any minDate and maxDate settings and any beforeShowDay callback that might make the date unselectable.

Follow the steps below to include validations.

1. Include the validate plugin in the head section of your page.

<script type="text/javascript" src="js/jquery.ui.datepicker.validation.js"></script>

    2.   Add the dpDate marker class to your datepicker fields or specify dpDate in the rules section of your validate call.

$('#validateForm').validate({ 

 rules: { 

       datepicker: { 

            required: true, 

            dpDate: true 

        }

         }

    }});