JQuery Example Code: JQuery Tutorial By Ranga Rajesh Kumar

Home » Posts filed under JQuery Tutorial

How to do Encryption and Decryption using JQuery Plugin?

Introduction:

Most of the times, we have give encrypt and decrypt our security in the browser operation.

Description:

In the privous example, we have seen how to create anchor tag dynamically.

In this JQuery example i am going to explain how to do encrypt and decrypt our security data and how to disable and enable button using JQuery.

Here we using third party plug-in for doing encryption and decryption operations.

Code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>

<script>
$(document).ready(function(){
 $('#btnDecryption').attr('disabled','disabled');
 
 $('#btnEncryption').click(function(){
  var encryptionText=$('#txtEncryption').val();
  $('#EncryptionText').text(CryptoJS.AES.encrypt(encryptionText, "/"));
  $('#btnDecryption').removeAttr('disabled');
 });
 
 $('#btnDecryption').click(function(){
  var decryptionText=$('span#EncryptionText').text();
  $('#DecryptionText').text((CryptoJS.AES.decrypt(decryptionText, "/")).toString(CryptoJS.enc.Utf8));
  
 });
});
</script>
</head>
<body>
<b>Welcome to JQueryExampleCode.blogspot.com</b>
<br /><br />
<input type="text" id="txtEncryption" />
<br />
<input type="button" id="btnEncryption" value="Encrypt" />
<br />
<b>Encryption Text:</b> <span id="EncryptionText"> </span> <br />
<input type="button" id="btnDecryption" value="Decrypt" />
<br />
<b>Decryption Text:</b><span id="DecryptionText" style="background-color:yellow"> </span> <br>
</body>
</html>

Video Tutorial:

Output:

JQuery Tutorial 5:Difference Between Document.ready and window.load in JQuery

in JQuery Tutorial - on 05:06 - No comments

Introduction:

Using this JQuery Tutorial we will learn what are differences between the Document.Ready event and window.load event in the JQuery Sample Example.

Description:

In the Previous tutorials we have learnt How to debug javascript or jquery code in Internet Explorer, Mozilla firefox and Google chrome.

In this JQuery Tutorial:

1. Document.Ready event will fire when ever DOM is loaded.
2. Window.load event will fire after loading all assets of the web page(Ex: Images, IFrames and others).

For more information

Output of below example:

Please look on below example first DOM loaded pop up will come, after that window loaded pop up will come{After complete image is loaded in the webpage.}.

Sample program:

<!DOCTYPE>

<html>
<head>
    <title>Differences between</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
        //first DOM will load 
            $('document').ready(function() {
                alert('DOM loaded');
            });
        //in this program, after image will load this event will fire. 
            $(window).load(function() {
                alert("window loaded");
            });
        </script>
</head>
<body>
     <img src="http://static4.businessinsider.com/image/5384c698ecad04a913dfdb95/google-made-the-tiniest-change-to-its-corporate-logo--see-if-you-can-even-spot-it.jpg" />
</body>
</html>

Output Video:

JQuery Tutorial 4: What is CDN or Content Distribution Network?

in JQuery Tutorial - on 00:05 - No comments

Introduction:

Using this JQuery Video Tutorial I have explained what is CDN or Content Distribution Network.

Description:

In the Previous tutorials we have learnt How to debug javascript or jquery code in Internet Explorer, Mozilla firefox and Google chrome.

Please watch below video about content distribution network in depth.

JQuery Tutorial 3:How to debug JQuery Code in Internet Explorer or IE

in JQuery Tutorial - on 00:03 - No comments

Introduction:

Using this JQuery Example we will learn How to debug JQuery code in the Internet Explorer.

Description:

In the Previous tutorials we have learnt How to debug java script or jQuery code in Mozilla firefox and Google chrome.

Debug javascript code in IE bit tricky. Please watch my below video.

JQuery Tutorial 2: How to debug JQuery Code in Mozilla Firefox Browser

in JQuery Tutorial - on 00:01 - No comments

Introduction:

Using this JQuery Tutorial, we will learn how to debug javascript code in the Mozilla firefox browser.

Description:

In the Previous tutorials we have learnt How to debug javascript or jquery code in Internet Explorer and Google chrome.

Please watch below JQuery Example video:

JQuery Tutorial 1: How to debug JQuery Code in the Google Chrome Browser

in JQuery Tutorial - on 23:57 - No comments

Introduction:

Using this JQuery Tutorial, we will learn how to debug Javascript or JQuery code in the Google Chrome browser.

Description:

In the Previous tutorials we have learnt How to debug javascript or jquery code in Internet Explorer and Mozilla firefox

Please watch Below video:

jQuery Tutorial - 83 - scrollTop(Video Tutorial)

in JQuery Tutorial , JQuery Video Tutorial - on 02:11 - No comments

How to add text to div or division using jquery

in JQuery Examples , JQuery Keywords , JQuery Samples , JQuery Tutorial , JQuery tutorials - on 06:03 - No comments

In the previous example, we have seen how to add anchor tag to body using JQuery AppendTo Keyword. In the example we are going to see, how to append text to existing division.

Main Code:

   $("<div class='NewClass'>Im new box by appendTo</div>").appendTo('#NewContent');

Complete Code:

<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>

<div id='NewContent' style="color:Green"></div>
<script type="text/javascript">

   $("<div class='NewClass'>Im new box by appendTo</div>").appendTo('#NewContent');
</script>
</body>
</html>

Output:

How to add text to div using jquery

JQuery and Javascript Best Practices

in Javascript Lessions , Javascript Tutorial , Javascript Tutorials , JQuery Tutorial , JQuery tutorials - on 01:20 - No comments

Best Practices

Lesson Introduction
JavaScript Best Practices
JavaScript Best Practices Reviewed
jQuery Best Practices
jQuery Best Practices Reviewed
Code Organization
Code Organization Reviewed
Do Not Treat jQuery as a Black Box

JQuery Plugin Basics and Advance Tutorial

in JQuery Plugins , JQuery Plugins Tutorial , JQuery Tutorial , JQuery tutorials - on 01:13 - No comments

JQuery Plugin Basics and Advance Tutorial

Lesson Introduction
How to Create a Basic Plugin
How to Create a Basic Plugin Reviewed
Finding and Evaluating Plugins
Creating a Plugin Using the Alsup Pattern
Creating a Plugin Using the Alsup Pattern Exercise Reviewed
Writing Stateful Plugins with the jQuery UI Widget Factory
Make a Table Sortable (Optional)
Make a Table Sortable Exercise Reviewed

JQuery Ajax Tutorial or Lession

in JQuery AJAX , JQuery AJAX Tutorial , JQuery Tutorial , JQuery tutorials - on 01:10 - No comments

JQuery Ajax Tutorial

Lesson Introduction
Key Concepts
jQuery Ajax-Related Methods
jQuery Ajax-Related Methods Reviewed
Ajax and Forms
Working with JSON
Working with JSON Reviewed
Ajax Events
Load External Content
Load Content Using JSON
Load Exercises Reviewed

JQuery Custom Events Tutorial

in JQuery Custom Events , JQuery Custom Events Tutorial , JQuery Tutorial , JQuery tutorials - on 01:16 - No comments

JQuery Custom Events

Lesson Introduction
About Custom Events
About Custom Events Reviewed
Custom Events
Review of Custom Events Exercise
Conclusion

JQuery Effects Tutorial

in JQuery Effects , JQuery Tutorial , JQuery tutorials - on 01:06 - No comments

JQuery Effects

Lesson Introduction
Built-in Effects
Built-in Effects Reviewed
Limitations on Effects
Queuing of Effects with Other Operations
Queuing of Effects with Other Operations Reviewed
Callbacks - Doing Something When an Effect is Done
Custom Effects with $.fn.animate
Custom Effects with $.fn.animate Reviewed
Managing Effects
Reveal Hidden Text
Create Dropdown Menus
Effects Exercises 6 & 7 Reviewed
Create a Slideshow

Difference between window.onload and ready event in the JQuery

in JQuery Basics , JQuery Tutorial , JQuery tutorials - on 00:55 - No comments

Introduction:

Using this JQuery tutorial, we will learn what is the difference between window.load and document.ready event in the JQuery.

Description:

JQuery code fires DOM is ready to be traversed and manipulated. But for some of the situations, we need to wait for complete window and resources must be load. In that situations we have to use the load() event with JQuery.

Please go through below JQuery Example. If you run below code u will get homepage as silver code after clicking on alert you will get background color as green.

Main code:

                  $(document).ready(function () {
                      $(document.body).css('background-color', 'silver');
                  });

                  $(window).load(function () {
                      alert('this will alert after all the window resources completly loaded');
                      $(document.body).css("background-color", "green");
                  });

Complete Code:

<html>
<head>
    <title></title>
              <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
              <script type="text/javascript">
                  $(document).ready(function () {
                      $(document.body).css('background-color', 'silver');
                  });

                  $(window).load(function () {
                      alert('this will alert after all the window resources completly loaded');
                      $(document.body).css("background-color", "green");
                  });
              
              </script>
</head>
<body>

</body>
</html>

Output:

Before window load:

After window load:

After window load in JQuery

JQuery Append Keyword Example Code

in JQuery Keywords , JQuery Tutorial , JQuery tutorials - on 05:35 - No comments

Using this JQuery Append Keyword, we can able to Add the element to the existing DOM element with the deleting the previous content.

    <script type="text/javascript">
        $('#ranga').append("<b>jqueryexamplecode.blogspot.com</b>");
   </script>

Complete Code:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <title></title>

</head>
<body>
<div id="ranga"> <b>Ranga Rajesh Kumar -</b></div>

    <script type="text/javascript">
        $('#ranga').append("<b>jqueryexamplecode.blogspot.com</b>");
   </script>

</body>
</html>

Output:

JQuery Append Keyword Example Code

JQuery attr() Method Example Code

in JQuery Keywords , JQuery Tutorial , JQuery tutorials - on 05:26 - No comments

Using JQuery attr() method, we can able to add the attribute the DOM element. In the below example i have added the href attribute to the existing anchor tag.

Sample Code:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <title></title>

</head>
<body>
<a>Ranga</a>

    <script type="text/javascript">
        jQuery('a').text('JQueryExampleCode.blogspot.com').attr("href", "http://jqueryexamplecode.blogspot.com");
    </script>
</body>
</html>

Output:

JQuery attr() Method Example Code

JQuery Events and Event Handlers Tutorial

in JQuery Events , JQuery Tutorial , JQuery tutorials - on 01:04 - No comments

Events and Event Handlers

Lesson Introduction
Connecting Events to Elements
Connecting Events to Elements Reviewed
Inside the Event Handling Function
Triggering Event Handlers
Triggering Event Handlers Reviewed
Increasing Performance with Event Delegation
Event Helpers
Create an Input Hint
Create an Input Hint Reviewed
Add Tabbed Navigation

jQuery Basic Tutorial or concepts

in JQuery Basics , JQuery Tutorial , JQuery tutorials - on 00:57 - No comments

jQuery Basic Tutorial

Lesson Introduction
Introducing jQuery
Using $(document).ready()
Including and Using jQuery
Selecting Elements
Selecting
Selecting Elements Reviewed
Working with Selections
CSS, Styling, and Dimensions
Traversing
Traversing Reviewed
Traversing
Manipulating the DOM
Manipulating
Manipulating the DOM Reviewed

JQuery Ready() function syntax and usage

in JQuery Basics , JQuery Core , JQuery Examples , JQuery Tutorial , JQuery tutorials - on 22:37 - No comments

JQuery fires the custom event called ready(), whenever DOM is loaded and ready for manipulation.

If you want to execute any kind of events, what should work from this ready() handler only.

There are different ways are there for using ready function in the JQuery. Here i am discussing three ways.

Way 1

        // Standard.
        jQuery(document).ready(function () { alert('DOM Ready!'); });

Way 2

        jQuery(function () { alert('Using this syntax also DOM is ready'); });

Way 3

        jQuery(function ($) {
            alert('Here also DOM is loaded');
        });

Output:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        // Standard.
        jQuery(document).ready(function () { alert('jqueryexamplecode.blogspot.com'); });

        jQuery(function () { alert('Using this syntax also DOM is ready'); });

        jQuery(function ($) {
            alert('Here also DOM is loaded');
        });
    </script>
</head>
<body>
</body>
</html>

Output:

JQuery Ready() function syntax and usage

If you know any other ways, you can write in the comments section.

When to load CSS Files while working with JQuery?

in JQuery Interview Questions , JQuery Tutorial , JQuery tutorials - on 01:00 - No comments

JQuery is recommending to load all CSS files before firing ready event.

Introduction:

Description:

Code:

Video Tutorial:

Output:

Introduction:

Description:

Output of below example:

Sample program:

Introduction:

Description:

Introduction:

Description:

Introduction:

Description:

Introduction:

Description:

Best Practices

JQuery Plugin Basics and Advance Tutorial

JQuery Ajax Tutorial

JQuery Custom Events

JQuery Effects

Introduction:

Description:

Main code:

Complete Code:

Output:

Events and Event Handlers

jQuery Basic Tutorial

Complete posts

Free EMail Subscription

Popular Posts

Categories