This 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>
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
Normally when you copy and paste the code WordPress messes up the quotes. If you replace the back quotes with regular quotes everything should work. If not I’ll email it to you. Sorry about that. It’s a security thing. Glad you like the tutorials 🙂
tried everything. deleted all the quotes and it still doesn’t seem to work. tried it in both Aptana and TextWrangler.
deleted all the quotes and replaced them. (-:
I’ll email the script to you. I’m not sure what happened?
Hey there. I’m having the same issue. Can you email me the script too? Thank you and Thank you for the Tuts. These are visually simple. Thanks!
I emailed every file to you. It may have went in your junk box because html attachments normally do. I hope that helps?
This comment thing is getting really skinny!
yeah it does
Hello Sir. Would you be so kind as to send me the code as well. Much appreciated.
I sent you all the code. Check your junk box because sometimes code attachments are sent there. Thanks
i love your training sir, could you please send me the script file as well.
Thank you, but I’m not sure what script you are referring to? The code follows the video and it is exactly what I used in the video
Good Job :)!
Thank you
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.
I’m not sure why you’re having that problem?
My website replaces all of the regular quotes ‘ with backquotes like this ‘ for security reasons. If you do a find and replace to correct this quote issue you should be fine.
I’ll make a zipped archive for all of the code as soon as possible. I have to find it all first 🙂
i’ve got pretty much the same issues here, could you please email me the code also. much obliged sir 🙂
Sorry I didn’t do that ahead of time. All of the code for the whole JQuery / Ajax tutorial is available in a zipped archive on this page http://www.newthinktank.com/videos/web-programming/ajax-and-jquery/
Much better than original. Like your theming of your title pages.
Any idea when the next part will be k4up?
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.
Thanks dude U got good stuff in there
Thank you. I’m glad you found it useful
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
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
You have a very impressive tutorials. Keep it up. You are so generous, I really really apreciate that.
Thank you. I’m glad you like them
you need to be online or have internet connection to make jquery work right? but is there a way to make it work offline?
You don’t need an internet connection to use JQuery. Just download the JQuery framework to your computer instead of attaching to the online version.
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..
Thank you 🙂 I think this is what you are looking for: Cross Browser Menu Tutorial, Cross Browser Horizontal Menu, or Make a WordPress Vertical Menu.
These tutorials work for both WordPress and regular sites. I hope they help. Sorry, my site is so disorganized 🙁
Derek
Thanks Derek for the Cross Browser Horizantal menu.
You’re very welcome 🙂
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.
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
Awesome Video on jQuery….Cheers…!!!
Thank you 🙂
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!
Yes that is an old security feature I used to use in old tutorials. Sorry about that
My JavaScript validator (JSLint, running as a Plugin in Notepad++) found this.
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
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
Check this out PHP file_get_contents
hello admin i copy pasted the code its not working as its in the video plss help……..
What errors are you getting?
hello admin, i m new to jquery.I got plain output .. before beginig with jquery do we have to install something?
You don’t need to install anything. Make sure you do a find and replace to turn the back quotes into normal quotes. This would be if you copy and pasted directly from my site. Sorry that is an old security feature.
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.
Here is a link to all the JQuery code.