JQuery Callback Functions & Get,Set Attributes

JQuery Call back functions

A call-back function is executed after the current animation is 100% finished.

 

JQuery Call-back functions

JavaScript statements are execute line by line. However, with animations, the next line of code can be run ever though the animation is not finished .This can create errors.

To prevent this you can create a call-back function.

A call back function is executed after the current animation (effect) is finished.

 

JQuery call back Example

Typical syntax:$(selector).hide(speed, call back)

The call-back parameter is a function to be executed after the hide effect is completed

 

Example with Call back

$(“p”),hide(1000.function(){

alert(“The paragraph is now hidden”);

});

Without a callbackparameter, the alert box is displayed before the hide effect is completed.

 

Example without Call back

$(“p”),hide(1000);

alert(“The paragraph is now hidden”);

 

JQuery –DOM Attributes

Some of the most basic components we can manipulate when it comes to DOM elements are the properties and attributes assigned to those elements.

Most of these attributes are available through Javascript as DOM node properties. Some of the more common properties are:

className

tagName

id

href

title

rel

src

Consider the following HTML mark-up for an image element:

<img id =”myImage” src=”image.gif” alt=”An image” class=”someclass” title=”This is an image”/>

In this elements mark up ,the tag name is img , and the mark-up for id,src,alt,class, and title represents the element’s attributes, each of which consists of a name and a value.

JQuery gives the means to easily to manipulate an element’s attributes and gives us access to the element so that we can also change its properties.

 

Get attribute Value

The attr() method can be used to either fetch the value of an attribute from the first element in the matched set pr set attribute values on to all matched elements.

 

Example

Following is a sample example which fetches title attribute of <em> tag and set <div id =”divid”> value with the same value:

<html>

<head>

<title> the title</title>

<script type=”text/javascrpit” src=”/jquery/jquery-1.3.2.min.js”></script>

$(document).ready(function(){

var title=$(“em”).attr(“title”);

$(“#divid”).tect(title);

});

</script>

</head>

<body>

<div>

<em title =”Bold and Brave”> This is first paragraph.</em>

<p id=”myid”>This is second paragraph</p>

<div id =”divid”></div>

</div>

</body>

</html>

 

 

Set Attribute Value

The attr(name,value) method can be used to set the named attribute onto all elements in the wrapped set using the passed value.

 

Example

Following is a simple example which set src attribute of an image tag to a correct location:

<html>

<head>

<title> The title</title>

<script type=”text/javascript” src=”/jquery/jquery-1.3.2.min.js”></script>

<script type=”text/javascript” language=”javascript”>

$(document).ready(function(){

$(“#myimg”).attr(“src”,”/images/jquery.jgp”);

});

</script>

</head>

<body>

<div><img id=”myimg” src=”/wongpath.jpg” alt=”Sample image”/>

</div>

</body>

</html>