David Walker | 12 July 2012
Secondly as I taught my jQuery course at the start of this week and one of the delegates said he hoped we would be going under the covers into how it worked. I smiled my grin of mad scientist glee and assured him we would. I think that is an important fact in using jQuery or any other library or API if training does not take you deeper than the surface layer your being short changed and convinced that this magical tool will do it all for you.
$('div > p').css('background-color', 'red');
Will work while:
document.querySelectorAll('div > p');
Will not work in IE7 or less.
What jQuery is not is a universal panacea and more adfanced Xpath like selectors such as:
Will not work in older browsers I just tested this on IE6 and the venerable Firefox 3.6 and it exploded in a fit of debugging rage. These newer selectors can not be handled by the older rendering engines.
I spotted a second issues during the update of the jQuery course to jQuery v1.7 noting that some of the very usefull form selectors had been deprecated:
$('#f1 :input').css('background-color', 'red');
Selects all input text areas, so text, passwords and <select> as an example. Its very usefull but there is no CSS3 alternative. It seems better that we should implement a CSS3 approach for a more conistent build and to leverage document.querySelector via jQuery lower down. So:
Could be implemented as:
Both approaches work in IE6 by the way, but start adding more complex Xpath style selectors and it all falls down. We could, and possibly should, but a defensive logical check against browser type and have the deprecated and prefered pattern in place at this time. Yet more and more companies ar emovign away from the requirement to support IE6 + 7 because they can not handle these advanced selectors that modern browser and contemporary develoepers want to use.