PDA

View Full Version : jQuery Tutorial


jcrox
10-24-11, 10:10 PM
The best thing about jQuery... cross-browser compatibility!!! No more if(IE) BS!!!

The first thing you need to do is include it in your html and there's 2 ways to do that.

Here's the jquery file downloaded to my js directory for local use and renamed to jquery.js

<html>
<head>
<script type='text/javascript' src='js/jquery.js'></script>
</head>
<body>
<div id='container1'>
<input type='text' id='textField1' value='value1' />
<span class='hiddenField'>Hidden Value</span>
</div>
</body>
</html>

Here's using a hosted version (from Google in this case):

<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
</head>
<body>
<div id='container1'>
<input type='text' id='textField1' value='value1' />
<span class='hiddenField'>Hidden Value</span>
</div>
</body>
</html>

Example 1 - Selection

If you're familiar with javascript then you've surely typed out code that looks something like this:

var textVal = document.getElementById('textField1').value();

Here's the jQuery version:

var textVal = $("#textField1").val();

Some more selection examples...
var hiddenVal = $(".hiddenField").html();

Notice how the selectors use the css standard class and id identifiers for element selection.

You use the same syntax to change the values passing the new value as an argument...

Change the value of textField1 from 'value1' to 'newValue'
$("#textField1").val("newValue");

Change 'Hidden Value' to 'New Hidden Value'
$(".hiddenField").html("New Hidden Value");

jcrox
10-24-11, 10:21 PM
Now, lets add the 'hiddenField' class to the input field and change it's value...

$("#textField1").addClass("hiddenField").val("outofsite");

Remove the class from the span element and change the value....

$(".hiddenField").removeClass("hiddenField").html("Now you see me");



more to come later...

alexpjhone
12-24-11, 02:09 PM
from where we can get free jquery code for free and how do we know how to apply it ?

jcrox
12-27-11, 10:59 PM
from where we can get free jquery code for free and how do we know how to apply it ?

Download here:

http://blog.jquery.com/2011/06/30/jquery-162-released/

read the first post