span Foo1

What is happening:

<a href="page.html">Foo</a>
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

are listed below and called inside the function
$(document).ready(function () { });

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

    (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



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



    $(document).ready(function () {

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




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