davidbau.com

Avoiding Selectors for Beginners

I am finding that the jquery syntax of $('#id') is getting in the way of teaching middle-schoolers.

There are two problems: first, the generality of jQuery selectors is an unnecessary concept to know before you even know what a function is. And second, the punctuation is too much for inexperienced typers to type: shift-4 for dollar, shift-9 and shift-0 for smooth parentheses, a choice to decide between single and double quotes, and don't forget shift-3 for the hashmark.

So I am considering giving kids a template that starts all their programs with a call to $.setupids() where idvars is a function defined as follows:

$.setupids = function setupids(prefix) {
  prefix = prefix || '';
  $('[id]').each(function(j, item) {
    window[prefix + item.id] = $('#' + item.id);
  });
};

The idea is that after $.setupids();, every HTML element that has an id of "r" has a corresponding global variable "r = $('#r');" which is the jquery selecting that element (not just the bare element).

<script src="/img/spacer.gif"> 




Posted by David at October 16, 2011 09:33 AM