JQuery Example Code: JQuery Basics By Ranga Rajesh Kumar

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:

Check box checked and unchecked using JQuery

in JQuery Basics , JQuery Examples - on 06:57 - No comments

By using below code, if we check on one check box, all other check boxes will checked, if we un check all other check boxes will unchecked.

<!DOCTYPE html>

<html>

<head>

    <title></title>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

    <script language="javascript">

        $('document').ready(function() {

            $('#requestAccommodication').bind("click", doOperations);



        });

        var doOperations = (function () {

            debugger;

            if ($('#hai #requestAccommodication').is(':checked')) {

                $("#hai input[type=checkbox]").each(function () {

                    $(this).prop("checked", true);

                });

            } else {

                $("#hai input[type=checkbox]").each(function () {

                    $(this).prop("checked", false);

                });

            }

        });

    </script>

</head>

    <body>

        <div id="hai">

        <input type="checkbox" id="requestAccommodication" /><br />

        <input type='checkbox' name="1" id='isAccommadation_1' />JQuery

        <input type='checkbox' name="2" id='isAccommadation_2' />Example

        <input  type='checkbox' name="3" id='isAccommadation_3' />Code

            </div>

    </body>

</html>

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 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.

jQuery Core Tutorial

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

jQuery Core

Lesson Introduction
$ vs jQuery
$ vs $()
$ vs $()
Utility Methods
Utility Methods Reviewed

How to use $ or jQuery keyword differently in JQuery coding

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

After some days with jquery, i got a doubt like "can we customize $ or jQuery keyword in jquery coding". We can do that using JQuery.

It is very simple to do conversion of $ with your custom name.

Main Code:

              var JQueryExampleCode = $; //(or) jQuery

              JQueryExampleCode(function () {
                  JQueryExampleCode('body').css("background-color", "Silver}");
                  alert('JQueryExampleCode.blogspot.com'); 
              });

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">
              var JQueryExampleCode = $; //(or) jQuery

              JQueryExampleCode(function () {
                  JQueryExampleCode('body').css("background-color", "Silver}");
                  alert('JQueryExampleCode.blogspot.com'); 
              });
          </script>
</head>
<body>
This is body content. 
</body>
</html>

Output:

How to use $ or jQuery keyword differently in JQuery coding

JQuery Tutorial or Lessons

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

JQuery Tutorial or Lessons

I am offering JQuery training with low cost in the Bangalore. I will training in the Weekends only. Training cost will be 2, 000 rupees.

Interested people can send mail to me : dotnetrangarajesh@gmail.com

1. JAVASCRIPT Basics

Lesson Introduction
Syntax Basics
Reserved Words
JS Basics Quiz 1
Operators
Operations on Numbers and Strings
Operations on Numbers and Strings Reviewed
Logical Operators
Comparison Operators
JS Basics Quiz 2
Conditional Codes
Conditional Variable Assignments with the Ternary Operator
Switch Statements
Loops
Arrays
Objects
Objects Reviewed
Functions
JS Basics Quiz 3
Testing Type
Scope
Scope Reviewed
Closures

2. jQuery Basic Concepts

Lesson Introduction
Including 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

3. jQuery Core

Lesson Introduction
$ vs jQuery
$ vs $()
$ vs $()
Utility Methods
Utility Methods Reviewed

4. 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

5. 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

6. Ajax

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

7. Plug ins

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

8. Custom Events

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

9. 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 Example Code

How to do Encryption and Decryption using JQuery Plugin?

Introduction:

Description:

Code:

Video Tutorial:

Output:

Check box checked and unchecked using JQuery

Difference between window.onload and ready event in the JQuery

Introduction:

Description:

Main code:

Complete Code:

Output:

jQuery Basic Tutorial or concepts

jQuery Basic Tutorial

JQuery Ready() function syntax and usage

jQuery Core Tutorial

jQuery Core

How to use $ or jQuery keyword differently in JQuery coding

JQuery Tutorial or Lessons

JQuery Tutorial or Lessons

1. JAVASCRIPT Basics

Complete posts

Free EMail Subscription

Popular Posts

Categories