nV News Forums

 
 

nV News Forums (http://www.nvnews.net/vbulletin/index.php)
-   Software Development (http://www.nvnews.net/vbulletin/forumdisplay.php?f=53)
-   -   jQuery Tutorial (http://www.nvnews.net/vbulletin/showthread.php?t=167751)

jcrox 10-24-11 09:10 PM

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");

jcrox 10-24-11 09:21 PM

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

alexpjhone 12-24-11 01:09 PM

Re: jQuery Tutorial
 
from where we can get free jquery code for free and how do we know how to apply it ?

jcrox 12-27-11 09:59 PM

Re: jQuery Tutorial
 
Quote:

Originally Posted by alexpjhone (Post 2513995)
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


All times are GMT -5. The time now is 06:30 PM.

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