Skip to main content
Ben Nadel at InVision In Real Life (IRL) 2019 (Phoenix, AZ) with: Azeez Olaniran
Ben Nadel at InVision In Real Life (IRL) 2019 (Phoenix, AZ) with: Azeez Olaniran

An Intensive Exploration Of jQuery With Ben Nadel (Video Presentation)

By
Published in — Comments (96)

The following video and slide show is my presentation: An Intensive Exploration Of jQuery With Ben Nadel. The presentation covers most aspects of the very robust feature-set provided by the jQuery library. While I cannot go too in-depth on any one particular topic, I do try to cover and thoroughly demonstrate what I feel are the most important parts of the jquery library. I hope that in this presentation I can at truly get across to you how essential the jQuery library is to optimal web development; I tell you this in all seriousness - I will never start another web development project without jQuery.


  
  
  
 
 Presentation: An Intensive Exploration of jQuery With Ben Nadel.  
 
  
  

The following is a table of contents for the video, An Intensive Exploration Of jQuery With Ben Nadel:

  1. Introduction
  2. What Is jQuery
  3. UI Effects - Pain Free Animation
  4. Why I Didn't Like jQuery At First
  5. jQuery For Developers
  6. Anonymous Methods
  7. $() Factory Method
  8. Wrapping DOM Elements
  9. jQuery Selectors
  10. jQuery Selector Moment of Bliss
  11. Working With The $() Collection
  12. Attributes And Values
  13. Moving Elements Around
  14. Traversing The DOM
  15. Filtering The jQuery Collection
  16. Iterating Over The Stack
  17. jQuery Closures - Awesome Voodoo Magic!
  18. Eventing Binding And Triggering
  19. Custom Event Types
  20. jQuery AJAX
  21. Monitoring AJAX Requests
  22. jQuery Data() Method
  23. Extending jQuery - Plugins And Selectors
  24. jQuery Is Mad Awesome
  25. jQuery Resources
  26. Thank You For Listening

Short link: https://bennadel.com/1492

Reader Comments

39 Comments

Very well done. I've been in love with jQuery since I started looking into it.

I would have to say so far my favorite feature would be the ability to do this:

function show(i){
$('ul.li').eq(i).show().siblings().hide();
}

after I learned how to use it, the ".siblings()" function really rocked my world.

6 Comments

Great job Ben! Was hoping you'd post this. You have a great teaching style. Hope you do more of these in the future.

3 Comments

Great presentation, Ben. I'm only 10 minutes in, but am loving it already. I've done a litle jQuery development, and like you, was pretty "humbugged" out about it being "all UI."

Heresy!

Suffice to say, I'm getting comfortable and watching the rest :)

11 Comments

Good job Ben, I think it's indispensable to get the CF community more in touch with javascript. It's worth noting that most js frameworks are capable of the things you describe in your preso, and as such I always invite people to have a look at several frameworks (jQuery, Ext, Prototype, Dojo, Mootools, etc.) so they can see which one "feels" best for them (and sometimes see what plugins are available). They're fine choices (at least as far as the main ones go), it's usually down to preference.

15,912 Comments

@Thomas,

During the live presentation, someone asked, "Why do you think jQuery has become so popular with ColdFusion developers." I basically said that, well one, its becoming popular everywhere, so we're just part of that revolution. But two, when you try jQuery, there's something that just feels "right" about it. Even if you've tried other Javascript libraries, jQuery feels more natural for some reason. I can't even put my finger on it, it just does.

11 Comments

@Ben,

You're kinda making my point there. hehehe What feels right/more natural to some feels wrong/awkward to others. I personally don't like jQuery as much. I like Prototype and Ext better. And so nobody can say I'm set in my ways, I started with Prototype, then tried jQuery and didn't like it as much so stayed with Prototype. I later tried Ext and liked it, so now that's what I use. Some of my friends also didn't really like jQuery for whatever reason. That's why I say try them all out. As far as the basic features, it's pretty quick to give them a spin and see what feels right/better. Having said that, I don't want anybody to take this as a knock on jQuery. It's an excellent framework.

15,912 Comments

@Thomas,

At the end of the day, you gotta go with what feels best for you, cause at the end of the day, you need to get your work done as efficiently as possible.

2 Comments

Just as a point .. you were referring to 1000 seconds with the delay/speed for the effects.. while it says 1000 it's milliseconds, thus 1000 = 1 second.. but i'm assuming you already know this :)

29 Comments

Great presentation, Ben! It seems like so long ago that we first discovered jQuery. And the engineering under the hood has only improved since then!

If you haven't already, you might want to take a look at Slideshare (http://www.slideshare.net). I see it used for slides in presentations by front-end developers at Yahoo, Google, and Mozilla - including jQuery's John Resig.

55 Comments

I like in Slide 4 when you say "Someone" showed you jQuery and you thought it was lame. I don't know who did that, but they were definitely lame! Morons like that probably showed you CSS too and you thought that was lame at first too. Probably showed you Flex before it was popular! Those kinds of people irk me to no end.

Man, if I could get my hands on THAT guy, I would teach him a thing or two. Give him whatfore!

By the way, the next thing you don't like yet, but you will is ExtJS. It's for business applications.

42 Comments

@Ben

I agree that you have to use what you are comfortable with, but at the same time you do need to at least try to get comfortable with what a majority of the community is using. The only reason that I say that is because there are times when you will leave a project and others will have to come in behind you. If you are using some obscure library (not to say that jQuery, prototype or mootools are) you have created a bigger issue than there needed to be.

15,912 Comments

@Glen,

When I talked about my initial response, I said it was a "fear response," not a legitimate one :) jQuery is awesome, and yes, your advice is always much appreciated.

@Brandon,

That is a good point. If you are jumping in and out of projects, having the same library understanding creates a common language and methodology.

6 Comments

Ben,

I started watching the presentation last night and then finished it the first thing this morning. Great job! I'm a newbie to jquery and even to java script. Of course I jumped into it with the jqGrid plugin and I've managed to create a subgrid in a grid without really understanding what the code was doing. Your presentation help bring some light where there was only darkness. Like most folks I don't get to start at the edge of the pool, but get thrown right into the middle of the deep end. You've given me a life preserver so at least I'm keeping my head above the murky water.

Thanks again, Jim

167 Comments

Holy s-word Ben.

That was maybe the most effective, comprehensive, well-architected presentation I've ever even seen. You literally took people foreign to jQuery from beginner to intermediate knowledge in under 2 hours, with a primer on plug ins and a pretty good overview of the voodoo of closures!

So impressive. Thanks a million, on behalf of the world.

167 Comments

Also, it wouldn't hurt to post a link where folks can donate to "The Ben Nadel Educational Fund" to cover the cost of your Camtasia license and all of the extra bandwidth you're going to need when you start doing video blogs 24/7 instead of textual, hint.

Also, since Camtasia lets you do record a sub-selection of your screen it doesn't hurt to position your IDE/slideshow/browser chromelessly around a 640x480 portion of the screen to cut down the filesize dramatically. That resolution is usually enough for good code visibility and audio isn't affected obv. I noticed your blow was down for a while last night, I'm assuming because of 8 million people watching that video at the same time.

167 Comments

Blog. That was the most ridiculous typo probably in history (judged by the distance between the intended letter (g) and the typed letter (w). That'll teach me to try to author comments while conversing on a telephone.

15,912 Comments

@Jim, @David,

Thank you guys so much for the kind words. That really means a whole lot to me! Really, you have no idea.

@David,

I will play around with the 800x600 next time. I thought about going that way, but it just seemed so small. The size I did was actually a sub-section of my screen (I have a huge monitor). But, the live presentation was done on an 800x600 and it went find. Good feedback.

1 Comments

Amazing tutorial, I love jQuery, but there is alot of boring stuff about it out there. This tutorial really makes me realize how strong it actually is. Thanks so much!

1 Comments

WOW! Great presentation! As a professional educator, may I say you have a rare gift. There are a lot of people in the world who understand a subject well, but have little talent when it comes to communication that knowledge. You obviously have both. Even though I had only a modest knowledge of programing in general and none of jQuery, I found your presentation both understandable and engaging. The only thing I would change (if indeed your authorware has this option) would be to include a pause button so viewers could stop and digest the information every so often (your explanation of closures was great, but afterward I needed a break, so some kind of mental-Tums!). Thank you.

2 Comments

Hi Ben - Brilliant presentation from what I have seen so far - any chance of making it available as a download? The length creates problems for me watching on line in one go. Cheers, Bruce

15,912 Comments

@Fred,

Thank you so much for the kind words. Coming from an actual teacher, what you say has serious weight and is very meaningful to me.

@Bruce,

I can look into figuring that out.

3 Comments

Superb video Ben, your presentation style is very clear and easy to follow. Seems you're a natural?

I've already got an off-line version by the way - looked in my browser cache (I use Opera) found a huge file (134Mb), changed the extension to .flv - plays back in any media player that includes FLV playback!

Hope you don't mind?

2 Comments

OK - so I've been trying to capture a copy using both Firefox and Opera on a work PC running Vista which I'm not familiar with. Can anyone tell me where the cache for Opera or Firefox could be on this machine?
cheers
Bruce

1 Comments

This is by far the best video presentation on JQuery I have seen on the internet; and I have searched far and wide, high and low.

3 Comments

Hi Ben me again. Just watched this for the third time (I have a copy on local). There's a lot to take in (nearly 2 hours) but each viewing makes things clearer.

Was wondering if your presentation material (html/cfm) is available anywhere? The code examples (demos) you show would be good to study in more detail?

It looks as though you've done these materials on some fancy server-side thing, so maybe it's not straight-forward for you to just zip-up and offer as a download?

1 Comments

Amazing.

Really opened my eyes to the power of jQuery, and demonstrated the possibilities excellently with good clear easy to understand English.

Thank you Ben.

15,912 Comments

@Trevor,

Glad you liked it. jQuery is really awesome. I seriously never start a web application project without it! It's as essential as the keyboard in front of me.

4 Comments

I personally use only plain javascript when short scripts are required, but when it get too tedious to write it "pure js" then I use JQuery - fantastic for animations and ajax calls.
Very nice site you have done, have you done all the design by yourself? I'm impressed (wish I had the photoshop skills you have).

15,912 Comments

@Marko,

Nothing wrong with some plain old Javascript :) Of course, when you include jQuery in every site, the need for it becomes less. Although, even in the callback methods, I still find myself using the THIS object rather than wrapping it in $() every time... depends on what I need to do.

1 Comments

Thanks Ben for doing and sharing this. I am in love with jQuery, it's bad my boyfriend is a jealous type :)

34 Comments

Need I say WOW!

It looks really amazing so far.... I'm trying it out now as we speak... (Fingers Crossed) Also how do you get Adobe ColdFusion Certified? Is it worth it? How much does it cost?

15,912 Comments

@Jody,

I think the test was like $150 or something. You just have to sign up to take it at a testing center. I can't remember where I found the list of testing locations (they are not Adobe specific - just general testing centers that host it). I think it was worth it because it really got me to look into things I had not previously explored.

1 Comments

Amazing work Ben. Best tutorial i've every watched, took a while to get through but it covered so much. Thanks for sharing your knowledge. Praise be to jQuery!!

1 Comments

Thank you for this! You definitely helped build my knowledge of jQuery (I've only been using it for about a week now); especially to do with the closure stuff you mentioned.

2 Comments

Awesome presentation!!! I've used jQuery before and I loved it right away. But I never got the chance to learn all the possibilities of it. Thanks for the Video and the inspiration.

greez, Timo

PS: I blogged an article about your presentation on my website.

1 Comments

Ben... this is by far the most educational and easy-to-watch jQuery video/tutorial/introduction I've come across. I'm a designer who started to learn dev by necessity a few years ago, and began working in JS just recently, and jQuery very shortly thereafter.

I was already amazed by jQuery's ability to make working in JS faster and easier, just as it's said to be, but your video has really opened my eyes.

Thank you! Not only that, but I plan to spend a lot more time learning new tricks as I continue to scan thru your blog. Thanks Ben, your obvious enthusiasm and excitement for your field not only shows, but is contagious as well. Kudos!

Cheers,
Lelando

15,912 Comments

@Lelando,

Wow, that's awesome! It's great to hear the perspective from a designer and know that it's making sense. Trust me, the more you play with jQuery, the more you're going to love it.

1 Comments

Hey I guess the video is down. Is there anyway you can upload to youtube or vimeo or some other service? Greatly appreciated.

15,912 Comments

@Billy,

The site may have been down for some reason - it seems to work now. It's hosting up on S3 so it should be pretty stable (assuming the video HTML page serves up).

It's not the best streaming - you might need to give it a minute to start depending on your connection.

1 Comments

Ben, I must say that you have done incredible job with this video. I'm new to jQuery and started reading about it today only. Somehow I reached to your blog but believe me I never felt so easy with any new technology as I'm feeling about jQuery now.

I'm not able to locate the download link of your demo application/s which you shown in the video. Can you share that with me? I would probably do some hands-on that.

Thanks,
Rohit

15,912 Comments

@Haansi, @Rohit,

Thanks guys - I'm really glad you liked the video. I don't have a download link directly (I'm relatively new to creating such large videos). If you look at the source of the video page, you can probably just grab the video SRC value from the HTML markup.

@LV,

Thanks!

1 Comments

In slide 6 when you refer to anonymous methods, I think the term is "late binding". This is a fantastic introduction to jQuery though. Thanks for you hard work and expertise, Ben!

81 Comments

@Elliott,

"Anonymous method" was the right term for what that slide was trying to show. Methods that don't have a name are anonymous. The example shown was an onload type of function (specifically, "document ready"). But it could just as easily have been done with a named function:

function myNamedFunc ()
{alert("I have a name!");}

$(myNamedFunction);

That too would have been late binding (execution time binding of an event handler), but it wouldn't have been an anonymous method.

Ben was trying to show the "(function(){something})" syntax. That's what jQuery makes heavy use of, to avoid cluttering up the namespace with function names that would are going to be used only once anyway.

If you really like late binding, even later than Windows DLLs and Unix SOs, check out Objective C. You don't so much call a method as pass a message to it, like Smalltalk. So you can add and remove objects at execution time, as if it were an interpreted language, such as JavaScript. A compiled language with the freedom of an interpreted language! Awesome!

1 Comments

Love this video. I'm doing alot of ajaxy event driven stuff at the moment with jquery, this video is really informative and acts as a really good refresher on the jQuery api as well.

This is as useful (if not more) than the paid for peepcode series on the subject.

Thanks a lot Ben

15,912 Comments

@Elliott, @Steve,

Oh man, I tried Objective-C for about a week (when curious about iPhone development). All that allocation and deallocation of memory is enough to drive a man insane :) Thank goodness for garbage collecting on the server!

@Steve,

Glad you like it my man. If you have any suggestions on other topics, feel free to drop me a line.

13 Comments

@Ben,

I honestly don't think you need any more praise with regards to your great work with making this video - but i thought i would give you some anyway :)

I am a very recent convert to jQuery, and like you i think I cant go back. The Ajaxy stuff seems way to simple.

Thanks alot dude.

ps.
I wonder what jQuery would be like if implemented for Java itself...

15,912 Comments

@Richard,

Ha ha, thanks :) I agree, the AJAX stuff in jQuery is just really easy to use. And, what's great is that you can always fall back on the $.ajax() method if you need more control. Glad that you're enjoying the language; I started using it a while back and am still very much in love with it.

@Steven,

Very cool my man. The ExtJS stuff you've demoed in the past looks really awesome. It's great to see that jQuery and ExtJS can be mutually beneficial.

1 Comments

Awesome presentation, very clear and understandable a great kick start to anyone learning JQuery. Although I have used it for some time I have only touched on the basics, thanks and hope to see other such presentations in the future. Maybe OO Development using JQuery? best practices?

P.S.wish I lived in the US, so little going around on JavaScript and JQuery in the UK in the way of conferences and talks.

1 Comments

in the section 17. jQuery closures, the code

<CODE>
var jThis = $(this)
</CODE>

seems superfluous.

because .each() passes objLink as the second argument to the function.

Other than that, a nice overview.

15,912 Comments

@Quinton,

Glad you liked it my man. jQuery has come a long way since this - but the basics still hold pretty constant.

@Terrence,

The object passed to the each() callback is the same as "this". However, neither of these is the same as $(this), which is a jQuery collection containing the current DOM element context. In other words, assuming I'm remembering correctly, "this" and "objLink" are both DOM node references, not jQuery references (which would be $(this) or $(objLink)).

... it's been a while, so I might be remembering incorrectly.

4 Comments

Fantastic intro to jQuery! I'm curious if there's a place to get one's hands on the page you used to demonstrate selectors. I think that alone could be a great demo for evangelizing for jQuery in the workplace.

1 Comments

Wow. I couldn't leave without saying that was freaking awesome man. Mad props for you and your time. I'm much more confident to use jQuery now. Cheers from NZ!

15,912 Comments

@Matthew,

Glad you liked it. This was one of my first presentations... ever. I guess I never got around to making a zip file of the slides. I can do that.

@Mido,

Thanks my man! This is a bit old, but the basics are still the same. Glad this was able to help out.

1 Comments

This is the most fantastic jQuery video tutorial. This is the video tutorial that made me fell in love with jQuery and JavaScript in general. This is now in top 10 search results on Google! Great Job!

16 Comments

I know this is a bit dated, but as I am just able to start using jQuery in my client's CF site recently, I've found this to be helpful. Good job. Thanks Ben!

15,912 Comments

Thanks guys! Sorry the video is so dated at this point. Maybe one of these days I'll try to create a more up-to-date version!!

2 Comments

Excellent presentation ! I have just started to learn jQuery and done a few video course, yours is by far the best...very easy to follow/understand. You mentioned you may create an updated version soon...please do !

Oh my chickens, this post is old!
I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
— Ben Nadel