JQuery Plugin basic 1

From CoderLearner
Jump to: navigation, search

Description

This is a very basic jQuery plugin, it just assigns the color to the text.

Syntax

  • PLUGIN_NAME is the plugin name.
jQuery.fn.myfirstPlugin = function() {
                    this.css('color', 'blue');
                    return this;
 };

jQuery.fn.PLUGIN_NAME = function() {}

Example 1

<!DOCTYPE html>
<html>
    <head>
        <title>jquery plugin 1</title>
        <script 
            type="text/javascript" 
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script>


            $().ready(function() {
                jQuery.fn.myfirstPlugin = function() {
                    this.css('color', 'blue');
                    return this;
                };


                $('.test_300').myfirstPlugin();
                $('.test_400').myfirstPlugin();
                
            });
        </script>
    </head>
    <body>
        <p class="test_300">God blesses you</p>
        <div class="test_400">You blesses yourself</div>
    </body>
</html>

Result

Change the both text to have the blue color.