Creating a jQuery PlugIn

Location
Foo
Foo0
Foo1

What is happening:

is modifed by a design time jQuery PlugIn and adds "[" and the attribute of the href [page.html] and ")" to the anchor contents description

it is then modified by a jQuery PlugIn runtime(DOM) callback that adds the location of the href "(http://www.WhereOninterNetWork.com/page.html)" to the anchor contents description

that is <href="page.html"> is *not* the same as this.href

Next every <div> has its color set to orange, finally a named <div> has its color set to cyan on red

A named div [ <div id="#div1"> ] whose color changes to cyan and background red via jQuery Plugin

The three jQuery PlugIn's

$("TAG").showLinkDesigntime();
$("TAG").showLinkRuntime();
$("TAG").greenify({ color: "orange" });
$("#Id").greenify({ color: "cyan", backgroundColor: "red" });

are listed below and called inside the function

$(document).ready(function () { });

<head>											
<script type="text/javascript">
    (function ($) {
        $.fn.showLinkRuntime = function () {
            return this.filter("a").append(function () {
                return " (" + this.href + ")";
            });
        };
    }(jQuery));

    (function ($) {

        $.fn.greenify = function (options) {

            // This is the easiest way to have default options.

            var settings = $.extend({
                // These are the defaults.
                color: "#556b2f",
                backgroundColor: "white"
            }, options);

            // Greenify the collection based on the settings variable.
            return this.css({
                color: settings.color,
                backgroundColor: settings.backgroundColor

            });
        };

    }(jQuery));

</script>
	
<script type="text/javascript">
    (function ($) {
        $.fn.showLinkDesigntime = function () {
            return this.filter("a").each(
                function () {
                    $(this).append(" (" + $(this).attr("href") + ")");

                });
        };

    }(jQuery));

    $(document).ready(function () {

        $("a").showLinkDesigntime();
        $("a").showLinkRuntime();
        $("div").greenify({ color: "orange" });
        $("#div1").greenify({ color: "cyan", backgroundColor: "red" });

    });
</script>

</head>

<body>

<a href="page.html">Foo</a>	 <br/>
<a href="page0.html">Foo0</a> <br/>
<a href="page1.html">Foo1</a> <br/>
</body>