Quick Tip: Dissecting jQuery – Filters
Tutorial Details
- Topic: The jQuery Source
- Estimated Difficulty: Intermediate
- Tutorial Format: 11 Minute Screencast
Download Source Files
Sporadically, over the course of each month, we’ll post a “Dissecting jQuery” video quick tip. The idea behind these is that we’ll take a single chunk of the jQuery source at a time, break it down, and determine exactly what’s going on under the hood, so to speak. Then, with that knowledge, we’ll learn how to better utilize the library in our coding. Today, we’ll review filters.
Video Tut
Premium Members: Download this Video ( Must be logged in)
Subscribe to our YouTube page to watch all of the video tutorials!
jQuery’s Source for the :hidden Filter
jQuery.expr.filters.hidden = function( elem ) {
var width = elem.offsetWidth, height = elem.offsetHeight,
skip = elem.nodeName.toLowerCase() === "tr";
return width === 0 && height === 0 && !skip ?
true :
width > 0 && height > 0 && !skip ?
false :
jQuery.curCSS(elem, "display") === "none";
};
The :visible Filter
Quite cleverly, the :visible filter only needs to call the hidden method, and return the reciprocal.
jQuery.expr.filters.visible = function( elem ) {
return !jQuery.expr.filters.hidden( elem );
};
Hint: Search for
filters:andsetFilters:within the jQuery source code to view a listing of other helpful filters that are available to you.
Harnessing this Knowledge to Extend jQuery
<script>
$('p:first').data('info', 'value'); // populates $'s data object to have something to work with
$.extend(
jQuery.expr[":"], {
block: function(elem) {
return $(elem).css("display") === "block";
},
hasData : function(elem) {
return !$.isEmptyObject( $(elem).data() );
}
}
);
$("p:hasData").text("has data"); // grabs paras that have data attached
$("p:block").text("are block level"); // grabs only paragraphs that have a display of "block"
</script>
Note:
jQuery.expr[':']is simply an alias forjQuery.expr.filters.
Stay tuned. In future episodes, we’ll continue to slice out more chunks of the jQuery source, and dissect them!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Great tutorial. I must say that being a good javascript developer is not in using libraries, but understanting them is most important.
Hey, thanks for this, this looks promising, but please keep this up, don’t abandon it after 2 months :D
thanks Jeff! I’m looking forward to seeing more of these quick tips! the jquery source code can be quite dauting I think, but having you guiding us (me) really helps ;)
I second that,
this looks like a great series tnx
Nice idea to dessect the insides of that framework. That’ll help me to figure out if I should use it or not in my future projects.
It also would be nice to see similar tutorials for other frameworks like Prototype.js and MooTools to compare them.
Very nice, I was curious how to dissect jQuery :)
Dang no more videos on Screenr? Can’t watch these tutorials at work anymore! (youtube blocked)
If the video will be less than 5 minutes, I record on Screenr — otherwise, it won’t fit. :(
I use jquery every day , but I had never used filters.
Fantastic tutorial, Jeffrey. I can think of a number of ways that would come handy. I think many jquery coders rarely or never write extensions to jquery (and if we do use them, it’s through a plugin).
I’m not sure whether that’s a viable option, but an extension that could format an instance of a word or sentence would be very useful (i.e. a simplified version of preg_replace). For example, that’d be useful when you want to format occurrences of ampersands to display them in a italic Baskerville. It’s not a selector just another function.
Anyways great job, I’m looking forward to more of those.
I would like to see WordPress tutorials like this. :)
It’s interesting to see the behind the scenes and have it explained. I know personally I don’t feel strong enough in my knowledge of JavaScript to just going poking around.
Thanks for the tuts!
Great stuff Jeff, very good tutorial for a JQuery beginner like me, not only in the how to use use it, but just as importantly in how to find the relevant pieces within the source file and understand what it’s actually doing.
Very much looking forward to this series, I hope you cover some of the JQuery UI too, that’s losing me at the moment, but probably cos it’s early days..
Hey Darren –
Thx! I honestly probably won’t be covering jQuery UI in this set. I’ll leave that to someone who is much more knowledegable in that area. :)
Love where this is going! Looking forward to future series, particularly the Ajax part. Will you be coving Ajax methods and how to use them?
Great video, I love dissecting other’s code :) it makes me feel more accomplished, like I myself wrote it!
Thanks Jeffrey, love to watch such jquery related tutorials. It is a bit diffucult learn from books.
Great video, really useful for anyone learining!
Hey Jeff,
I’m not quite interested in Nettuts plus tutorials, but want to watch these screencasts. Unluckily, you always put them on Youtube, so I can’t watch, it’s banned here.
I found a download link for premium members, so I signed up for premium membership. Unluckily (again) I don’t find out how to DOWNLOAD, I want the files to be on my desk and watch them. Something big, just open up and keep loading.
It’s noted “download” so shouldn’t I be able to download the fu*%^$ùg video????? Thanks
Hey Abid, Just right-click on the “View Screencast” link (in the Premium section), and choose “Save to Computer.”
Thanks Jeff,
found download links here http://tutsplus.com/plus-content/nettuts/ too.
Between, I got an eye on the premium content and all I can say is I retreat of what I have said earlier.
Thanks, lot of value considering what I have paid and I’m also interested on all tuts sites now :)
What theme are you using for Espresso Jeffrey?
By the way you said you were gonna open it in Textmate. I saw the interface and thought maybe Textmate 2.0 was out. hahaha
It’s called Cappuccino. Haha – yeah, I caught that TextMate blunder when I was editing the video. :)
Do you never sleep? ;)
Hmn function isnt working for me :/
Great !
its very useful for me tnx a lot buddy