JQuery Example Code: JQuery tutorials By Ranga Rajesh Kumar

Home » Posts filed under JQuery tutorials

How to add text to div or division using jquery

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.

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

How to append Anchor tag to HTML Body Dynamically using jquery

in JQuery Examples , JQuery Keywords , JQuery Samples , JQuery Tutorial , JQuery tutorials - on 05:57 - 5 comments

Using JQuery we can add anchor tag to body very easily. This can be possible by the AppendTo JQuery Method.

In the below example, i am appending anchor tag to body using jquery. We can also append div to any class or div using this Jquery AppendTo Keyword.

MainCode:

$('<a href="http://jqueryexamplecode.blogspot.com">JQueryExampleCode.blogspot.com</a>').appendTo('body');

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">
    $('<a href="http://jqueryexamplecode.blogspot.com">JQueryExampleCode.blogspot.com</a>').appendTo('body');

   
</script>
</body>
</html>

Output:

How to append Anchor tag to HTML Body Dynamically using jquery

jQuery text() method example code

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

In most of the situations, we will use the JQuery text() method in the coding part. This JQuery text method will show the data from that particular element. This JQuery text method can concatenates the strings found in the elements of a wrapper set.

<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 class="MyClass">
        Ranga
    </div>
    <div class="MyClass">
        Rajesh
    </div>
    <div class="MyClass">
        Kumar -- jqueryexamplecode.blogspot.com
    </div>

    <script type="text/javascript">
        alert($('.MyClass').text());
    </script>
</body>
</html>

Output:

jQuery text() method example

JQuery Coding - Keyword Color Standards

in JQuery Tutorial , JQuery tutorials - on 04:51 - No comments

JQuery color coding standards are like javascript only. we can see this color standard from the Visual studio.

See below image for the reference.

JQuery Coding - Keyword Color Standards

JQuery Plugin Tutorial - My First JQuery Plugin alert tutorial

in JQuery Plugins , JQuery Plugins Tutorial , JQuery Tutorial , JQuery tutorials - on 04:34 - No comments

In this JQuery Tutorial, I am writing my first JQuery Plugin. JQuery plugin code writing is very awesome experience to the Web Developers.

This is the JQuery plugin code. We can keep this code in the separate js file also. Since it is basic tutorial I have included in the html page itself.

    (function($){
        $.fn.MyFirstPlugIn = function () {
            alert('My first plug in alert');
        }
    })(jQuery);

Below example will show the alert message at the time of loading page.

<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">
    (function($){
        $.fn.MyFirstPlugIn = function () {
            alert('My first plug in alert');
        }
    })(jQuery);


    $(document).ready(function () {
            $('#ranga').MyFirstPlugIn();
        });
    </script>
</head>
<body>
<div id="ranga">
http://aspnettutorialonline.blogspot.com/
</div>
</body>
</html>

Output:

JQuery Plugin Tutorial

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 add text to div or division using jquery

JQuery and Javascript Best Practices

Best Practices

JQuery Plugin Basics and Advance Tutorial

JQuery Plugin Basics and Advance Tutorial

JQuery Ajax Tutorial or Lession

JQuery Ajax Tutorial

JQuery Custom Events Tutorial

JQuery Custom Events

JQuery Effects Tutorial

JQuery Effects

Difference between window.onload and ready event in the JQuery

Introduction:

Description:

Main code:

Complete Code:

Output:

JQuery Append Keyword Example Code

JQuery attr() Method Example Code

JQuery Events and Event Handlers Tutorial

Events and Event Handlers

jQuery Basic Tutorial or concepts

jQuery Basic Tutorial

JQuery Ready() function syntax and usage

When to load CSS Files while working with JQuery?

jQuery Core Tutorial

jQuery Core

How to use $ or jQuery keyword differently in JQuery coding

How to append Anchor tag to HTML Body Dynamically using jquery

jQuery text() method example code

JQuery Coding - Keyword Color Standards

JQuery Plugin Tutorial - My First JQuery Plugin alert tutorial

JQuery Tutorial or Lessons

JQuery Tutorial or Lessons

1. JAVASCRIPT Basics

Complete posts

Free EMail Subscription

Popular Posts

Categories