#20: Introduction to jQuery

The popular JavaScript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This is a very basic introduction to including jQuery on your web page and getting started writing a few functions.

Links from video:

Make sure to check out Intro to jQuery 2, which expands on these ideas and has it's own demo and downloads.


  1. User Avatar
    Permalink to comment#

    Hi Chris… Good intro about jquery..

  2. User Avatar
    Permalink to comment#

    Hey, Chris! Great intro about JQuery. I just downloaded it yesterday for animation for my photos. I am trying to apply it to my webpage. This tutorial is great insight to JQuery for a novice like me!


  3. User Avatar
    Permalink to comment#

    Hey Chris,

    Thanks for the work… I tried to duplicate these examples to get my feet wet and they only work for me in Safari… Firefox and Camino reject the JS and pretty much don’t do anything at all.

    Do you have any suggestions as to why they wouldn’t work correctly?

  4. User Avatar
    Permalink to comment#

    Awesome Tutorial, dude!:D

  5. User Avatar
    Permalink to comment#

    Your tutorials are really great Chris! the tutorials leave no option of asking any furthur questions :P Thanks! ;)

  6. User Avatar
    Permalink to comment#

    Hello Chris,
    thanx for your nice tutorials. It took me hours with not understanding jQuery in school… With watching your tutorial I have a idea about it now.
    Thanx from Britta (Hamburg, Germany)

  7. User Avatar
    Permalink to comment#

    Chris this is such a great resource! You continue to help me learn new items each time I visit. Please Please Please keep up the amazing work you do.

    Also maybe more jQuery video tuts in the future. Or Even Ajax or Prototype tuts.

  8. User Avatar
    Tiago Pregueiro
    Permalink to comment#

    Here is the source code, which I’ve created while following this great tutorial! Thnks Chris!


  9. User Avatar
    Permalink to comment#

    Great intro for a newbie like me. Really clear. Good job. I’m looking forward to see more of tutorials like this.

  10. User Avatar
    Ahmet basaran
    Permalink to comment#

    Hi Chris,

    Thank you Great intro about JQuery.
    Ahmet BASARAN – Turkey

  11. User Avatar
    Permalink to comment#

    Thank for the intro and advertising :)

  12. User Avatar
    Permalink to comment#

    Thank you for this tutorial. Simple yet clear.

  13. User Avatar

    beatifully done chris

  14. User Avatar
    Permalink to comment#

    Great Great Tutorial

  15. User Avatar
    Permalink to comment#

    this is great help, amazing man, thanks a lot from argentina

  16. User Avatar
    Permalink to comment#

    Hi Chris. A couple of years ago I started to learn HTML and CSS. After that I expanded my skills with ‘mastering’ WordPress. A few weeks ago I decided to learn JavaScript (main focus on jQuery od course) and PHP. The problem is that I couldn’t find good tutorials for the VERY beginner. But guess what; I just found the perfect tutorial for a jQuery beginner. I’m looking forward to watch it again and write the code myself and then I’ll watch screencast #35, which is the second part.

  17. User Avatar
    Permalink to comment#

    Hi Chris! I am having some problem with the newest jQuery js. I copied the whole script and paste it into a js file. I linked the script with my html file and tried the stuff in the video. However, I could not get the effect. Every time i pressed the Action 1 button, nothing happened. What’s going on? Or how could i send you my files so you might be able to help me when you’re free?

  18. User Avatar
    Ken Barlow
    Permalink to comment#

    Great tutorial! Really helped get me started with jQuery!

  19. User Avatar

    awesome. thanks, really helped me get my head around jquery

  20. User Avatar
    Permalink to comment#

    Pal, keep making these videos. I’ve gone from being scared of JQuery to actually beginning to grasp it. Many claps.

  21. User Avatar
    Permalink to comment#

    Once again Chris. This is a nice start after ending up my css tutorial. I have actually seen all the basic examples of w3schools, but still i am not satisfied as i need to learn it as much quickly as possible. Because my next step will be PHP.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.