jQuery Tutorial for Beginners with Example

random

jQuery Tutorial for Beginners with Example

Introduction

In this step by step jQuery tutorial, I will explain what is jQuery and How to start using jQuery and jQuery CDN.

What is jQuery

jQuery is not a language, but it is a well written JavaScript code. jQuery is a fastcross-browser JavaScript library that simplify the client-side scripting, event handling, animation, and AJAX interactions for rapid web development. In order to work with jQuery, you should aware of the basics of JavaScript, HTML and CSS.
jquery tutorial for beginners with example,jquery cdn,jquery tutorial,jquery ajax,jquery examples,jquery tutorial step by step,ajax jquery tutorial,difference between jquery javascript
jquery tutorial step by step
It is free, open source software Dual-licensed under the MIT License and the GNU General Public License. Microsoft has integrated jQuery officially into its IDE Visual Studio 2010 and jQuery intellisense is available in Visual Studio 2010 now.


Why jQuery?
jQuery is a very compact and well written code so there are following advantages of using jQuery :-
  • It improves the performance of web applications
  • It helps to develop most browser compatible web page
  • Simple and cleaner code, no need to write several lines of codes to achieve complex functionality
  • It helps to implement UI related critical functionality without writing hundreds of lines of codes
  • It is light weight and fast as compare to Java Script
  • It is extensible – jQuery can be extended to implement customized behaviour

How to Use jQuery?
jQuery usually comes as a single JavaScript file containing everything comes out of the box with jQuery. It can be included within a web page using the following mark-up:-

<script type="text/javascript" src="jQuery-1.11.3-min.js"></script>

jQuery CDN
CDN Stands for Content Distribution Network or also called Content Delivery Network is a system of distributed servers (network) that deliver webpages and other Web content to a user based on the geographic locations of the user, the origin of the webpage and a content delivery server. There are two leading CDNs available that host jQuery files. 

Microsoft AJAX CDN
<script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script> 

Google CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Why to Load jQuery File from CDN?
The benefits are as follows:-
  • Faster page load as jQuery file need not be downloaded
  • Saves your bandwidth as jQuery file is not loaded from your server
  • Scalable - generally CDNs place these files on the servers located at different geographical locations of the world so that they load faster so irrespective of from where your user is browsing your page, your application runs well.

How to Load Local jQuery File in Case CDN is Not Available?
Sometimes, it may happen that the CDN you have used to load the jQuery file is not available (it rarely happens, however anything is possible, isn’t it?); in that case you should load your local jQuery file that is available on your server so that all jQuery related functionality still works on your page.

<script type="text/javascript" language="Javascript" 
         src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
    <script type='text/javascript'>//<![CDATA[
        if (typeof jQuery == 'undefined') {
            document.write(unescape("%3Cscript 
         src='/Script/jquery-1.11.3.min.js' type='text/javascript' %3E%3C/script%3E"));
}//]]>
</script>

Difference Between jQuery Javascript
Java Script is a scripting language itself. While jQuery is a library built in the Java Script language that helps users to write some JavaScript code faster (Mainly DOM manipulation, Animation and AJAX).
advantages of using jquery over javascript, using jquery ui, difference between javascript and jquery
difference between javascript and jquery
Use jQuery in ASP.Net
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Vol1.aspx.cs" Inherits="Vol1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Hello jQuery</title>
    <script type="text/javascript" language="Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

asp.net sample application,document ready jquery function call        alert("Hello jQuery");
    });      
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>
</html>

Document ready jQuery function call

jQuery Syntax :- $(document).ready(function(){ code })

If you want an JQuery event on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

$(document) :- It means page on which jQuery code lies.

.ready() :- It means page is loaded and jquery code is ready to be executed.


In this article, I discussed about step by step jQuery tutorial with examples, jQuery CDN and difference between jquery javascript.
jQuery Tutorial for Beginners with Example Reviewed by Ravi Kumar on 6:03 PM Rating: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form

Name

Email *

Message *

Powered by Blogger.