Difference between jQuery and JavaScript

Followings are major difference between jQuery and JavaScript
  • JavaScript is a scripting language where as jQuery is a library written in JavaScript. That means jQuery is nothing without JavaScript
  • JavaScript is powerful but can be difficult to program where as jQuery is very sort and it is easier to program. That means jQuery is very easy to learn or program.
  • You may face some problem in JavaScript on different browser where as jQuery is browser independent. That means jQuery is a multi-browser supported.
  • Animation with JavaScript too hard for web developer where as animation with jQuery is very easy for developer

In below example we want to get selected radio button value. You see I have to write multiple line of code in JavaScript where as One line code in jQuery and it is too easy for me.

jQuery Code

var selectedDay = $('input[name="week"]:checked').val();

JavaScript Code

var selectedDay = '';
var days = document.getElementsByTagName('input');
for (var n = 0; n < days.length; n++) {
  if (days[n].type == 'radio' && days[n].name == 'week' && days[n].checked) {
    selectedDay = days[n].value;
  }
}

CODE
<!DOCTYPE html>
<html>
<head>
  <title>jQuery With Example</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $('.btnJquery').click(function () {
        var selectedDay = $('input[name="week"]:checked').val();
        alert("By jQuery : " + selectedDay);
      });
    });
  </script>
  <script type="text/javascript">
    function GetSelectedDay() {
      var selectedDay = '';
      var days = document.getElementsByTagName('input');
      for (var n = 0; n < days.length; n++) {
        if (days[n].type == 'radio' && days[n].name == 'week' && days[n].checked) {
          selectedDay = days[n].value;
        }
      }
      alert("By JavaScipt : " + selectedDay);
    };
  </script>
</head>
<body>
  <div class="Container">
    <input type="radio" value="Sunday" name="week" />Sunday<br />
    <input type="radio" value="Monday" name="week" />Monday<br />
    <input type="radio" value="Tuesday" name="week" />Tuesday<br />
    <input type="radio" value="Wednesday" name="week" />Wednesday<br />
    <input type="radio" value="Thursday" name="week" />Thursday<br />
    <input type="radio" value="Friday" name="week" />Friday<br />
    <input type="radio" value="Saturday" name="week" />Saturday<br /><br />
    <button type="button" class="btnJquery">Get By Jquery</button>
    <button type="button" class="btnJavaScipt" onclick="GetSelectedDay()">Get By JavaScript</button>
    <p>Please select a week day after that click on these button.</p>
  </div>
</body>
</html>
DISPLAY
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

Please select a week day after that click on these button.

1 comment :

  1. very nice article you shared.
    if you want to know the technologies updates,visit below site.
    dot net and latest technologies Tutorials

    ReplyDelete