10 Things I Learned from the jQuery Source
videos

10 Things I Learned from the jQuery Source

on Jun 14th 2010 with 51 comments
Tutorial Details
  • Topic: jQuery
  • Difficulty: Intermediate
  • Completion Time: 1 Hour

It’s jQuery on the big screen. We’ll open the jQuery source and run through how the jQuery object works, covering self-executing anonymous functions as a global abatement technique, several interesting jQuery methods, internal jQuery paradigms, and hidden enhancements. You’ll learn JavaScript techniques you can apply to your own code, as well as the basic workings of jQuery itself.

About Paul

Paul Irish is well-respected in our industry and has contributed to various open source projects that many of us use every day, including:

He’s also one of the hosts of the YayQuery podcast, which (obviously) focuses on the jQuery library. Be sure to subscribe if you’d like to stay up to date on the latest news in jQuery.

YayQuery

Thanks for watching! Did you enjoy the screencast? Let us know if you have any questions.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Html5 and CSS3 aficionado, Google Chrome dev relations, jQuery team member, interaction designer and front-end developer, music snob on @Aurgasm  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Shykel

    A bit crazy, but that’s Paul ;D

    • http://bittrack.it Raspo

      loopsiloopsiloo

      :p

      Very nice screencast btw

  • http://67developer.hu Gergely Ratting

    I have seen a lot of tutorial videos, but I think this was the no.1! You can explain things really good, and in a sort of funny way. Thanks!

  • Felix

    thanks for this, watching right now, very funny.

  • http://www.nicklowman.co.uk Nick Lowman

    Thanks Paul for a brilliant tut. Informative and funny. What more can you ask for.

  • http://80si.com Dennis

    Thanks for explaining jQuery in understandable English ;-) Really liked the idea about stripping jquery even further for only the methods needed. Will give it a try on my next project.

  • Etnas

    Wow!
    What editor is Paul using? The color scheme is awesome!
    And the font??

    • http://paulirish.com Paul Irish

      Using Textmate with the Cobalt theme. Probably Consolas or Inconsolata as the font. :)

      • Marcel

        Nope, it’s Monaco.

  • Paul

    Awesome! Really enjoyed this!

  • http://blog.creative-webdesign.info Andi

    Watching right now!

  • http://www.cbesslabs.com Sebastian Bratu

    Cool! Really cool Paul !

  • http://nspirehq.com Ross

    This has to be one of the best tutorials on NetTutsPlus so far!

  • Ray

    The most entertaining jquery screencast ever

  • http://www.tunetorials.com johnny2bones

    sweet video. i also like the sound effects – weren’t you in Police Academy? (am i dating myself?)

  • http://www.tunetorials.com johnnyagain

    is it just me, or is it not obvious that you have to click and drag on the little ‘elapsed time’ box to fast forward through any already buffered video?

    i use YouTube to show videos on my site, any specific reason why you use Vimeo? just curious and always exploring other video hosting options.

    • http://www.rittencommedia.dk Jimmy Rittenborg

      The HD is in higher quality at vimeo than YouTube (grater for screencasts) .. but it cost some money .. youtube is free :)

    • mike noidea

      vimeo has way much better look&feel

  • http://www.rittencommedia.dk Jimmy Rittenborg

    Thank you Paul for your findings

    So i notiched the part with

    jQuery(‘#pagination a’).text(‘slower’); vs. jQuery(‘#pagination’).find(‘a’).text(‘faster’);

    but what about

    jQuery(‘a’,'#pagination’).text(‘do i sizzle?’); vs. jQuery(‘#pagination’).find(‘a’).text(‘because im not ..ftw’);

    is that also been trown trough the sizzle ?

    • http://paulirish.com Paul Irish

      Hey Jimmy.

      The short of it is that passing a string as a context to jQuery ( like $(‘a’,'#something’) ) is BAD and will likely be deprecated in an upcoming version of jQuery.

      Internally it is translated to $(‘#something’).find(‘a’) so this representation will always be a touch faster. Plus it reads really nicely, don’t it? :)

      • Addisu

        Hi Paul,

        Is there any kind of document that says this usage will be deprecated … ? I realized we used a lot “passing a string as a context to jQuery” of it in our app and that is gonna impact us a lot .

  • http://benstockdesign.com Ben Stock

    Dear Paul,

    You actually look like a normal dude, putting to rest the whole “geek” stereotype that usually is cast on developers, and I thank you for that (all of my friends give me $*** for being interested in web technologies). Not to mention, you actually can make internal stuff understandable. When are you getting a book deal? Crockford’s book is really good, but I have a feeling you could really make something bad ass. Good luck mate.

    • http://paulirish.com Paul Irish

      Web technologies are fucking dope. Stay interested in ‘em.

      Thx for the kind words amigo. At some point I’ll write a book, but in the meantime I’ll probably just make some more videos.

    • Guest

      What..! I smoke … I drink… I go crazy sometimes…but I’m a programmer that wears tight jeans…..use eyeliner..what ever…ppl these days are blind by movies

  • http://www.aediscreative.com Christopher

    Hands Down, this is the most cram packed useful tut on netuts in a long time. The candid approach helped to keep the potentially heavy content easy to digest. I almost felt like I was watching a lecture from an online development class, taught by a knowledgeable, but somewhat unprepared TA.. More of this please!

  • http://www.kengreeff.com Ken Greeff

    Absolute Legend! Awesome video, really interesting… going to check out the rest!

  • flashmac

    Very informative and educational. Made light work of complicated issues and must admit, pleasantly surprised by the amount of knowledge passed on. Great work.. now off to your site to see what other goodies are on show.

    Loving the “Duck Punch”!

  • http://www.robnixondesigns.com Rob

    That was amazingly helpful, Paul. I’ve poked around in the jQuery source, but I’m not proficient enough in Javascript to figure out what the hell I’m looking at on my own. You’ve done us all a huge favor by taking away some of the mystery of jQuery’s “behind-the-scenes” workings, which I believe should make us better jQuery users as well as better Javascript coders. That was probably the longest screencast I’ve ever sat through the entirety of, and I’m definitely going to keep an eye for more. Thanks.

  • http://contrastlogic.com Jason

    Some cool shit, thanks!

  • Eric Steinborn

    Needed more rainbows…

    i love the yayQuery podcast, and you are brilliant and funny. thanks so much for this!

  • http://wildanr05.student.ipb.ac.id/ wildanr05

    reading the comment, can’t wait to watch. another reason to switch my internet provider to a faster one :(

  • must

    Just brilliant, looking forward for more of this stuff :D

  • http://scott.morrisonlive.ca Scott Morrison

    Awesome tutorial! Thanks :)

  • http://www.ronniesan.com RonnieSan

    Very good stuff. A few of the snippets should help me update the Uploadify code.

  • http://onefusedlife.com/ Lasha Krikheli

    Awesome screencast! Looking into the source of jQuery isn’t so intimidating and scary as it used to be, haha.

    I am a jQuery beginning but I plan to really expand my skills with it, especially for mobile development and using libraries like jQTouch for mobile phones, etc.

    I look forward to your other videos, and potentially a book. I will most certainly buy it. :)

  • http://richoid.com Rich Webster

    More like this, please! Funny, useful, and finally answers the “WTF is THIS?” I experience when I read the API.

  • http://www.boylecreations.com Aidan Boyle

    Very nice! Thank you!

  • http://shuogeng.appspot.com Shuo Geng

    The best video I have watched recently. Learn a lot from it. Thanks, Paul.

  • Joao Lopes

    Great work mate.

    Seriously, the cornify is the best function ever. :P

  • http://jqueryninja.blogspot.com Jeff
  • http://datasplash.co.uk Darren

    I can’t tell you how enjoyable that was. Brilliant. So good in fact, that I’m going to watch it again right now.

  • Josey

    That was one bitch’n screencast.
    Seriously, tho. I learned a ton. Paul – You need to cast more.

  • Max

    Cornify ROCKS!

  • 24Sharon

    Hi Paul

    First is a great screencast, and thanks for that

    I have an unconnected simple question, maybe you can answer or either make a webcast for this

    I want make an animation that run exactly together

    For example

    #(“#x”).fadeIn(400);
    #(“#y”).fadeIn(400);

    Of course fadein is not the function that I use and the second statement apply after the first and if the first take 1 second that this 2 function not apply exactly the same time

    What is your idea to make its work?

  • Gabriel

    Hilarious and informative! I even learned from the mouth sound effects you made while typing various characters. I.e., coding can be fun … something I often lose sight of.

    Thank you!

  • http://markandey.com Markandey Singh

    AWESOME !! Thanks Paul

  • http://www.magpielab.com/ London Web Development

    nice one, every web developer should know the basis of the framework and paul given a good example.

  • http://blueco.ir/ طراحی سایت و سئو

    i cant watch this wideo!!!? why? can link me? or email it to fh.analyst@yahoo.com tnx

  • www.isatise.com

    very good thanks

  • Fabrice

    a lot of fun in this video. Excellent approach.

  • Kurt Kemple

    Cornify is the greatest thing ever lol