Updates from QA Training

Building better jQuery Selectors

One of the first seminars I ever went to on HTML5 had a slide that explained HTML5 was: HTML, CSS and Javascript then javascript got crossed out and it was replaced with the jQuery logo, everyone laughs (IT jokes are only fun to IT people don’t judge us its bad enough we have an aversion to sunlight and outdoor activities).


David Walker | 12 July 2012

One of the first seminars I ever went to on HTML5 had a slide that explained HTML5 was: HTML, CSS and Javascript then javascript got crossed out and it was replaced with the jQuery logo, everyone laughs (IT jokes are only fun to IT people don’t judge us its bad enough we have an aversion to sunlight and outdoor activities).

What struck me then was a two fold issue, that jQuery though amazing in its RAD approach to javascript development is at a high level of abstraction. That means that way too many people, in fact the majority of web devs I ask about this, feel a bit concerned about javascript.

Understandable by the way it is a mad, wonderful and terrifying language that originally got dreamed up in a day. I have spent the last four years wrangling it and have come to both love and hate it in equal measure. So to combat issue one I am currently writing a new Programming in Javascript course that will go live somewhere towards the end of September. It will be a 4-day bottom up serious look at javascript and using it to manipulate html, work with Objects, Prototypes, JSON and AJAX and will suit new programmers and migrating developers alike.

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.

In my last blog about Kung-Fu Javascript Shaolin Monks vs. the CSS3 Ninjas I spoke about document.querySelector(). Any modern web browser can run it and it is faster and much less painful to work with as a Javascript programmer. When you pop a selector into the jQuery $() pattern factory it would like to use this as well. Unlike the document.querySelector() approach jQuery selectors can work all the way down to IE6 for those of you unlucky enough to still need to support it this can be a godsend and some pure CSS3 magic such as:

$('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:

$('p:first-of-type').css('background-color', 'red');

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:

$('#f1 input[type="text"],input[type="password"]').css
('background-color', 'red');

Plus:

$(':radio[name="gender"]').change(function(){

        alert($(this).val());

        });

Could be implemented as:

$('input[name="gender"]').change(function(){

       alert($(this).val());

       });

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.


David-Walker---sq

David Walker

Head of Emerging Technologies

David is a change driven technologist who continually looks to adapt and expand his knowledge and understanding of his field. Over the least eighteen years David has led technology and training companies through emerging fields and technology trends helping them to understand the future and develop business opportunities. As Head of Emerging Technologies he works closely with customers and industry experts to ensure the opportunities and threats of new technology trends designing custom learning solutions to help small and enterprise organisation adapt and make the most of their people - ensuring QA is ready when our customers need to navigate the minefield of the fast moving digital landscape. His passion is in advanced web engineering principals and vendor neutral thick client design/development technologies reflected in his research, analysis and courseware development experience combined with his training delivery skills. As a technologist he is the lead instructor and syllabus author for web development technologies and specialising in Agile, DevOps, and User Experience driven approaches to developing solutions. He has authored courses such as HTML5, Responsive Web Development, User Experience, NodeJS, Javascript and jQuery.
Talk to our learning experts

Talk to our team of learning experts

Every business has different learning needs. QA has over 30 years of experience in combining the highest quality training with the most comprehensive range of learning services, ensuring the very best fit for your organisation.

Get in touch with our learning experts to talk about how we can help.