Go Back   nV News Forums > Software Forums > Software Development

Newegg Daily Deals

Reply
 
Thread Tools
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
Old 10-24-11, 09:21 PM   #2
jcrox
Mahna Mahna
 
jcrox's Avatar
 
Join Date: Jul 2006
Location: Madison, Wi
Posts: 6,134
Default Re: jQuery Tutorial

Now, lets add the 'hiddenField' class to the input field and change it's value...

Code:
$("#textField1").addClass("hiddenField").val("outofsite");
Remove the class from the span element and change the value....

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


more to come later...
__________________

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
Old 12-24-11, 01:09 PM   #3
alexpjhone
Registered User
 
Join Date: Dec 2011
Posts: 3
Default Re: jQuery Tutorial

from where we can get free jquery code for free and how do we know how to apply it ?
alexpjhone is offline   Reply With Quote
Old 12-27-11, 09:59 PM   #4
jcrox
Mahna Mahna
 
jcrox's Avatar
 
Join Date: Jul 2006
Location: Madison, Wi
Posts: 6,134
Default Re: jQuery Tutorial

Quote:
Originally Posted by alexpjhone View Post
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
__________________

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
Reply


Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -5. The time now is 11:25 AM.


Powered by vBulletin® Version 3.7.1
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Copyright 1998 - 2014, nV News.