JQuery Video Tutorial

Posted by on Mar 4, 2011 in AJAX What Is It, Web Design | 49 comments

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”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

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

<head>

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

<title>JQuery Ex 1</title>

<style>

table, th, td {

border: 1px solid black;

}

tr.nice td {

background: #FAFAD2;

}

tr.mouseon td {

background: #1E90FF;

}

</style>

<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”); });

});

</script>

<noscript>

<h3>This site requires JavaScript</h3>

</noscript>

</head>

<body>

<div id=”numbers”>

<p>

<h3>The Most Important Numbers</h3>

<table>

<tr>

<th>Number</th>

<th>Why I Care</th>

</tr>

<tr>

<td>2012</td>

<td>Year We All Die</td>

</tr>

<tr>

<td>12-21-12</td>

<td>My Next Birthday</td>

</tr>

<tr>

<td>12-21-12</td>

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

</tr>

</table>

</p>

</div>

<div>

<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>

</ul>

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

<h6>Very Small</h6>

</div>

<div>

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

<h4>Stuff 2</h4>

<h5>Stuff 3</h5>

</div>

</body>

</html>

49 Responses to “JQuery Video Tutorial”

  1. jaxon says:
    March 12, 2011 at 6:08 am

    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.

    jaxon

    Reply
  2. Peter says:
    May 19, 2011 at 4:16 pm

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

    Reply
  3. Genti From Kosovo says:
    July 6, 2011 at 4:29 am

    Good Job :)!

    Reply
  4. Mohit says:
    July 31, 2011 at 5:26 am

    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.

    Reply
  5. mike ritter says:
    September 7, 2011 at 10:50 am

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

    Any idea when the next part will be k4up?

    Reply
    • admin says:
      September 7, 2011 at 5:52 pm

      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.

      Reply
  6. Sai Ram says:
    September 15, 2011 at 11:28 pm

    Thanks dude U got good stuff in there

    Reply
  7. Benjamin says:
    October 3, 2011 at 8:33 pm

    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

    Reply
    • admin says:
      October 4, 2011 at 5:45 pm

      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

      Reply
  8. Anonymous says:
    November 19, 2011 at 9:00 pm

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

    Reply
  9. Naruttam Borah says:
    July 15, 2012 at 1:03 am

    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..

    Reply
  10. Joel Ybanez says:
    July 17, 2012 at 10:27 pm

    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.

    Reply
    • admin says:
      July 18, 2012 at 8:51 am

      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

      Reply
  11. Stavan says:
    February 15, 2013 at 10:15 am

    Awesome Video on jQuery….Cheers…!!!

    Reply
  12. Terry Hulsey says:
    March 31, 2013 at 6:30 pm

    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:
    UTF-8″
    p + h3″
    ~ h4,h5″

    Great tutorial, Derek!

    Reply
  13. Terry Hulsey says:
    March 31, 2013 at 6:34 pm

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

    Reply
  14. BOBBY says:
    June 26, 2013 at 8:19 am

    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

    Reply
  15. bobby says:
    June 27, 2013 at 11:16 am

    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

    Reply
  16. nishant says:
    November 21, 2013 at 11:31 am

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

    Reply
  17. Rishav says:
    April 24, 2014 at 5:22 am

    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.

    Reply

Leave a Reply

Your email address will not be published.

Google+