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="/lib/jq.js"></script>
<img id="a" src="/public/asteroid.gif">
<img id="r" src="/public/rocket.png">
<script>
$.setupids(); // supplied in the template
a.move();
r.turnto(a);
</script>
Posted by David at October 16, 2011 09:33 AM