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.

49 Responses to “JQuery Video Tutorial”

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.

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 🙂

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 ?

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

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

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.