InCoCreS: July 2010

parseInt() Function, JavaScript

You can use the parseInt(), Function from JavaScript to parse a string / variable or other value and get in return an integer.
In the example below, you will see a practical application of this built in Function.

Syntax:

parseInt("String" or VariableName)

See the example below.

JavaScript, match() Method

The match(), Method from JavaScript it's used to find a match between a String or Regular Expression and a String and returns the matches, (could be an array or just one match, depending on the given instructions and the content of the string), or null if none it's found. In the example below, you'll see a practical application of this Method.

Syntax:

string.match(/RegExp/ or "String")

See the example below.

In this Script the the match() method returns the an array of "o" letter.

toggleClass(), jQuery

The toggleClass(), from jQuery adds or removes the specified class. In the example below, you'll see a practical application.

Syntax:

selector.toggleClass("ClassName")

See the example below.

<head>
<style type='text/css'>
.line{
color:orange;
font-weight:bold;
border:solid 1px green;
}

.alter{
color:white;
font-style:italic;
border:solid 2px blue;
background:orange;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var num=0
$('.line').click(function(){
$(this).toggleClass('alter')

})

})

</script>
</head>

<body>
<p class='line'>Click! This is the first Line...</p>
<p class='line'>Click! This is the second Line..</p>
<p class='line'>Click! This is the third Line..</p>
<p class='line'>Click! This is the fourth Line..</p>
</body>
</html>

Click on of the lines once, twice...and see what happens.

Click! This is the first Line...

Click! This is the second Line..

Click! This is the third Line..

Click! This is the fourth Line..

replace(), JavaScript Method

The replace(), Method from JavaScript has various uses. In the example below, you'll see a practical application of this Method.

Syntax:

string.replace("WhatToReplace","Replacement")

See the example below.

<head>
<style type='text/css'>

</style>

<script type='text/javascript'>
function inlocuiesc(){
tre=document.getElementById('inl').value
var guc=tre.replace(/s/g,"WOW")
document.getElementById('inl').innerHTML=guc

}

</script>
</head>

<body>
<textarea id='inl' cols='32' rows='8'>this frienship is special to us...</textarea><br>
<input type='button' value='Replace' onclick='inlocuiesc()'>
</body>
</html>

When you will click the Replace button, the "s" letter will be replaced by "WOW".

removeAttr(), jQuery

Html Tags can have various Attributes. You can use removeAttr() Method from jQuery to to remove one or more attributes .

Syntax:

$("Selector").removeAttr("AttributeName");

See the example below.

<head>
<style type='text/css'>

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#da').click(function(){
$('a').removeAttr('title')
})

})

</script>
</head>

<body>
<a href='http://interactivefrench.blogspot.com/' title='Learn French Language Free and Interactively'>Free French</a>
<br>
<button type='button' id='da'>Click to Remove Title Attribute</button>
</body>
</html>

By positiong the mouse over the link a description will appear,(Tittle attribute). After you click the button, the description will disappear.

Free French

jQuery, class Selector

You create a Html Tag and with jQuery you can manipulate it.

Syntax:

$(".className").css(propertyName', 'propertyValue');

See the example below.

<html>
<head>
<style type='text/css'>

</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.fer').css('width','220px').css('height','110px')
.css('border','outset 6px red').css('background','green')

})
</script>
</head>

<body>

<div class='fer'>This is a div tag with a class</div><br>
<span>This is a span tag not affected by jQuery</span>
<p>This is a p tag not affected by jQuery</p>
</body>
</html>

This is a div tag with a class

This is a span tag not affected by jQuery

This is a p tag not affected by jQuery

jQuery, element / Html Tag Selector

You create a Html Tag and with jQuery you can manipulate it.

Syntax:

$("element / Html TagName").css(propertyName', 'propertyValue');

See the example below.

<html>
<head>
<style type='text/css'>

</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('div').css('width','220px').css('height','110px')
.css('border','inset 6px aqua')

})
</script>
</head>

<body>

<div>This is a div tag </div><br>
<span>This is a span tag not affected by jQuery</span>
<p>This is a p tag not affected by jQuery</p>
</body>
</html>

This is a div tag

This is a span tag not affected by jQuery
This is a p tag not affected by jQuery

jQuery, id Selector

You create an id for one or more HTML tags and with jQuery you can manipulate it.

Syntax:

$('#idName').css(propertyName', 'propertyValue');

See the example below.

<html>
<head>
<style type='text/css'>

</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#box').css('background','yellow')
.css('border','solid 16px green')

})
</script>
</head>

<body>
<div id='box'>This is a div tag with box id.</div>
<div id='notbox'>This is a div tag with notbox id.</div>

</body>
</html>

This is a div tag with box id.

This is a div tag with notbox id.

jQuery, Multiple Selectors

With jQuery you can specify more than one selector at once and manipulate them as you wish.
Syntax:

$('selector1, selector2,etc.').css('propertyName', 'propertyValue');

See below a Script and a Demo.

<html>
<head>
<style type='text/css'>

</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('div#dx,span.ita').css('background','orange')
.css('border','dotted 2px red')

})
</script>
</head>

<body>

<div>This is a div tag...not affected by the jQuery...</div>
<div id='dx'>This is a div with an id...</div>
<b>This a blod tag...also not affected by the jQuery</b><br>
<span class='ita'>This is span tag...</span>
</body>
</html>

This is a div tag...not affected by the jQuery...

This is a div with an id...

This a blod tag...also not affected by the jQuery

This is span tag...

jQuery, Frist Steps

This tutorial and next ones assumes that you have a previous basic understanding of Html, JavaScript, CSS.

In order to use jQuery you have to load it. To do that you can download it from Here.(version 1.4.2). Please visit http://jquery.com/ for previous and updated versions.
Another way you could use jQuery without storing it onto your computer is to load the CDN jQuery core file from Google or Microsoft.

Please be aware that you can choose to either put your JavaScript or CSS code on the same HTML file or you can create separate files for both JavaScript andd CSS and then link them into your HTML file.

In the next example you will find a basic structure of a HTML document, with sections for both CSS and JavaScript / jQuery code inside Click on the appropriate button to either see the Script or the Demo.

$(document).ready(function(){

HERE GOES jQuery CODE...

}) ;

</script>
</head>

<body>
HERE GOES HTML CODE
</body>
</html>

HERE GOES HTML CODE

When working with jQuery, you will notice that most of the codding goes inside a:

$(document).ready(function(){

HERE GOES jQuery CODE...

}) ;

in order to prevent to run the jQuery Code before the document in fully loaded.