Monday, December 15th, 2008
Extending jQuery selectors with JavaScript
JAVASCRIPT:
-
-
// Flag images upon load:
-
$('img').load(function(){
-
$(this).data('loaded',true);
-
});
-
-
// Extend expr:
-
$.extend($.expr[':'],{
-
loaded: function(a) {
-
return $(a).data('loaded');
-
}
-
});
-
-
// Example of usage:
-
alert( 'Images loaded so far: ' + $('img:loaded').size() );
-
This code is one example of how you can extend the selector experience in jQuery with simple JavaScript code.
James Padolsey takes us through this in a lot of detail, showing other examples including a simple "if the element is inline" selector, as well as well as tying into jQuery's "data" functionality.
3.9 rating from 44 votes
Looking through his posts, James Padolsey is one very bright 18-year old.
You know what would be great? If CSS had this kind of extensibility built in so that you could roll your own selectors then use them in CSS instead of just within Javascript.