JQuery Video Tutorial Pt 2

JQuery Ajax TutorialWow, did the last JQuery Video Tutorial generate a lot of emails! I’m glad you guys and gals are interested in JQuery. Yes I will cover everything there is to know about the JQuery Framework in this tutorial.

If you missed the past tutorial it is here JQuery Video Tutorial.

In this video I’ll answer many of the questions I received such as:

  • How to  add multiple CSS styles with JQuery
  • What are all of the other JQuery selection options
  • How to assign events with JQuery
  • Explain JQuery animations
  • How to change element values with JQuery

And, a bunch of other things.

Leave your questions and comments below. All of the code follows the video. Use it how ever you’d like.

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>

 

<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() {

 

$(“h4:first”).css(“background-color”, “yellow”);

 

$(“p:last”).css({“background-color”: “purple”, “color”: “white”});

 

$(“p span:first-child”).css(“background-color”, “orange”);

 

$(“div p:last-child”).css(“background-color”, “cyan”);

 

$(“div p:last-child”).css(“background-color”, “cyan”);

 

$(“div:nth-child(1)”).css(“background-color”, “pink”);

 

$(“span:eq(2)”).css(“background-color”, “purple”); // These are 0 based

 

$(“h4:gt(1)”).css(“background-color”, “green”); // All h4 after index 1

 

$(“h4:lt(2)”).css(“background-color”, “olive”); // All h4 before index 2

 

$(‘#clickToHide’).click(function() {

$(‘#clickToHide’).hide(); });

 

$(‘#bringItBack’).click(function() {

if ($(‘#clickToHide’).is(‘:visible’)) {

$(‘#clickToHide’).hide();

$(this).val(‘Bring Back’);

// This changes the value on the button

}

else {

$(‘#clickToHide’).show();

$(this).val(‘Delete Text’);

// This changes the value on the button

}

});

// You can also replace hide & show with fadeIn or fadeOut

// Also you can use slideDown & slideUp

// You can play with the speed by giving values in milliseconds or slow // fast, or normal ex. fadeIn(1000) or fadeOut(slow)

 

 

});

 

</script>

<noscript>

<h3>This site requires JavaScript</h3>

</noscript>

</head>

 

<body>

 

<div id=”firstDiv”>

<h4>First Header</h4>

<p id=”firstPara”>First paragraph in first div<span> First Span</span></p>

<p>Second paragraph in first div</p>

<p>Third paragraph in first div</p>

</div>

 

<div id=”secondDiv”>

<h4>Second Header</h4>

<p>First paragraph in second div<span> Second Span</span></p>

<p>Second paragraph in second div</p>

<p>Third paragraph in first div</p>

</div>

 

<div id=”thirdDiv”>

<h4>Third Header</h4>

<p>First paragraph in third div<span> Third Span</span></p>

<p>Second paragraph in third div</p>

<p>Third paragraph in first div</p>

</div>

 

<span id=”clickToHide”>Click to hide me</span>

 

<input type=”button” id=”bringItBack” value=”Bring Back” />

 

</body>

</html>

 

6 Responses to “JQuery Video Tutorial Pt 2”

  1. leslie says:

    Hi,
    I am trying to duplicate your code and makes notes but nothing is working. I get an error message right off the bat on the $(“document”).ready function. I have gone back through several time trying to figure out what the issue is and can’t seem to find it and all I am doing is just copying and pasting your code.

    Help!!

    Thanks,
    Leslie

    • admin says:

      I’m sorry about that. If you replace the backquotes with regular quotes with a quick find replace check the code will work. That was an old security feature that I used to use. Sorry about the inconvenience

  2. paul izzo says:

    Please
    Where is the code for video #3?
    Thanks

  3. Gadadhar Singha says:

    Thanks for this simple and beautiful tutorial.

Leave a Reply

Your email address will not be published.

Google+