JQuery Video Tutorial

JQuery Ajax TutorialThis is the first part of my JQuery Video Tutorial. I will also cover all of the techniques that go into implementing a dynamic site using Asynchronous JavaScript and XML (AJAX).

It is extremely easy to use AJAX techniques with JQuery. First you must understand that AJAX is not a language, it is just a series of techniques used to dynamically change websites with out page reloads.

If you’d prefer to read about AJAX, here is another article Ajax What is it?

JQuery is just a JavaScript Framework, or function library that will save you a ton of code writing. JQuery also works cross browser, so you won’t care what browser your client uses anymore.

I specifically show you how to do the following in this video:

  • How to link to the JQuery Framework
  • Tons of ways to target specific elements on a web page
  • How to change CSS properties dynamically
  • What is an anonymous function
  • How to execute your JQuery code when a page loads

And, a lot more. The code follows the video. If you have any questions or comments leave them below.

Code From the Video

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”


<html xmlns=”http://www.w3.org/1999/xhtml”>


<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<title>JQuery Ex 1</title>


table, th, td {

border: 1px solid black;


tr.nice td {

background: #FAFAD2;


tr.mouseon td {

background: #1E90FF;



<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js”></script>

<script type=”text/javascript”>

$(“document”).ready(function() {

$(“td”).css(“padding”, “6px 10px”);

$(“.hero”).css(“color”, “red”);

$(“ul li.villian”).css(“background-color”, “yellow”);

$(“h3, th”).css(“background-color”, “orange”);

$(“p + h3”).css(“background-color”, “purple”);

$(“#randstuff ~ h4,h5”).css(“background-color”, “purple”);

$(“#superhumans > *”).css(“font-style”, “italic”);

$(“div:has(h4)”).css(“text-decoration”, “underline”);

$(“div[id]”).css(“border”, “3px solid black”);

$(“li[class=’hero’]”).css(“border”, “2px solid blue”);

$(“li[class^=’v’]”).css(“border”, “2px solid purple”);

$(“li[class$=’wn’]”).css(“border”, “2px solid orange”);

$(“li:contains(‘Richards’)”).css(“background-color”, “cyan”);

$(“#numbers tr:odd”).addClass(“nice”);

$(“#numbers tr”).mouseover(function() { $(this).addClass(“mouseon”); });

$(“#numbers tr”).mouseout(function() { $(this).removeClass(“mouseon”); });




<h3>This site requires JavaScript</h3>




<div id=”numbers”>


<h3>The Most Important Numbers</h3>




<th>Why I Care</th>




<td>Year We All Die</td>




<td>My Next Birthday</td>




<td>The Day We All Die</td>






<h3>The Most Powerful Superhumans</h3>

<ul id=”superhumans”>

<li class=”unknown”>Beyonder</li>

<li class=”villian”>Galactus</li>

<li class=”hero”>Franklin Richards</li>

<li class=”hero”>Reed Richards</li>


<p><h4>Who Do You Think is Most Powerful?</h4></p>

<h6>Very Small</h6>



<h3 id=”randstuff”>Stuff 1</h3>

<h4>Stuff 2</h4>

<h5>Stuff 3</h5>




49 Responses to “JQuery Video Tutorial”

  1. jaxon says:

    thought i would be able to just copy and paste your code into my text editor and play with it but all i get is the html. linked to another jquery library thinking that might be the problem but it isn’t.

    obviously, this is newbie operator error. but what am i doing wrong?

    btw, love the tuts.


  2. Peter says:

    Hello Sir. Would you be so kind as to send me the code as well. Much appreciated.

  3. Genti From Kosovo says:

    Good Job :)!

  4. Mohit says:

    Thank-you so much for making the tutorials, I always wanted to learn JQuery and Ajax for my projects. I’ve followed the tutorials very religiously but there seems to be something wrong. When I launch the code with the browser, the browser only displays the html part and the JQuery stuff doesn’t seem to work in any of the browsers. Is there any other way ?

    & thanks again for the lovely tutorials.

  5. mike ritter says:

    Much better than original. Like your theming of your title pages.

    Any idea when the next part will be k4up?

    • admin says:

      I’m glad you liked it. Yes I’ve gotten better over time with a ton of practice. What are you looking for in regards to additional JQuery tutorials. I use it a lot in my WordPress tutorials.

  6. Sai Ram says:

    Thanks dude U got good stuff in there

  7. Benjamin says:

    This is the coolest and very easy to understand. I’ve been clearly understand and loved jquery now. This is very nice.
    Do you have also jquery with php/mysql tutorial?

    Thank you so much for sharing..
    Btw I liked the “toink” thing! lol

    • admin says:

      I have a bunch of tutorials on wordpress that use PHP and JQuery. Do a search for Ajax to see how I’ve covered that topic as well. I hope that helps

  8. Anonymous says:

    You have a very impressive tutorials. Keep it up. You are so generous, I really really apreciate that.

  9. Naruttam Borah says:

    Hi Derek, your tutorials are awesome and has always helped me whenever I tried to sort out some problems, I hope you will continue providing such wonderful and useful tutorials in future. I am really thankful to you.
    Here I must say that I am new to jquery, and wanted to create a Horizontal Nested Menu using jquery with ul li tags. Also wanted to use accordian, if possible. Could you help me on that..

  10. Joel Ybanez says:

    Hi Derek,

    Awesome tutorial, i can tell you know your code. Hope you will continue teaching us on such a great topics, I am most thankful to you.

    • admin says:

      Thank you 🙂 I’m constantly trying to improve and learn all of the new ways of doing things. Don’t worry, I have tutorials planned years in advance. I’m glad you enjoy them

  11. Stavan says:

    Awesome Video on jQuery….Cheers…!!!

  12. Terry Hulsey says:

    The problem with the Derek’s example is that there are 3 Unicode double quotes in it (unlike the standard curly close double quotes). They appear after these 3 snippets:
    p + h3″
    ~ h4,h5″

    Great tutorial, Derek!

  13. Terry Hulsey says:

    My JavaScript validator (JSLint, running as a Plugin in Notepad++) found this.

  14. BOBBY says:

    say my webpage name is html1 i have a form in which action is to submit to html2
    after submitting form i m redirected to html2 how can i directly use data(paragraphs tables ets ) of html2 in html1
    basically i dont want to use gui of html2 instead i want to create my own gui to display that data
    i mean
    ps: i can’t change code of html2

  15. bobby says:

    i have a webpage html1 in which i m submitting a form to a foreign website html2 after getting redirected html2 displays a particular result i want to display that result at bottom of my original page html1
    remember html2 is not hosted by me and i can’t edit its code

  16. nishant says:

    hello admin i copy pasted the code its not working as its in the video plss help……..

  17. Rishav says:

    I have been going through your’s java & android tutorials they are very helpful. I like to learn jquery and ajax, I am finding difficulty in understanding this technology ,It would be very helpful if u will email me all the codes of jquery and ajax part-wise.

Leave a Reply

Your email address will not be published.