Thread: jQuery Tutorial
View Single Post
Old 10-24-11, 09:10 PM   #1
jcrox
Mahna Mahna
 
jcrox's Avatar
 
Join Date: Jul 2006
Location: Madison, Wi
Posts: 6,134
Default jQuery Tutorial

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

Code:
<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):

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

Code:
var textVal = document.getElementById('textField1').value();
Here's the jQuery version:

Code:
var textVal = $("#textField1").val();
Some more selection examples...
Code:
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'
Code:
$("#textField1").val("newValue");
Change 'Hidden Value' to 'New Hidden Value'
Code:
$(".hiddenField").html("New Hidden Value");
__________________

Gaming

MSI MPower Z87 | 4770k | CNPS9900MAX-B | 8GB G.Skill 1866 | EVGA GTX760 |ThermalTake 850w | X-Fi Titanium | HAF | Asus PA248Q | Lycosa | Death Adder | Win8 Pro 64

Dev/Backup

MSI GD65 | 2500k | H50 | 8GB G.skill | GTX570 | Ubuntu 13.10

Laptop

17" Inspiron | i5 | 4GB DDR3 | 500GB HDD | Win7 Pro 64

jcrox is offline   Reply With Quote