Using jQuery to cache DOM elements
<p>I'm struggling with naming conventions, and I'd like to come up with a convention for any variables that are cache variables for DOM elements.</p>

<p>So far, I've progressed to using this:</p>

<pre><code>window.x = $('#x');
</code></pre>

<p>Now of course, that puts it into the global scope, but according to my convention, that's ok.</p>

<p>But the problem with that is that looking at window.x doesn't convey to me that it's a cache variable of $('#x').  So now what I'd like to experiment with is using a jQuery plugin technique to store these values.  Something like:</p>

<pre><code>;(function($, window, undefined) {
    $.fn.x = function() {
        return $('#x');
    }
})(jQuery, window);
</code></pre>

<p>That way, I can reference $x.val() and it will immediately convey to me that $x is a cache of the $('#x') DOM element.</p>

<p>Q: How would I create a plugin called x that is the return value of the $('#x') selector?
Am I doing it right?  Now, you might say (in your best Office Space voice over) "This is a horrible idea", but I'm just experimenting.</p>
