JQuery Callback Functions & Get,Set Attributes

Ratings:
(4)
Views: 688
Banner-Img
Share this blog:

 

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>

You liked the article?

Like: 0

Vote for difficulty

Current difficulty (Avg): Medium

EasyMediumHardDifficultExpert
IMPROVE ARTICLEReport Issue

About Author

Authorlogo
Name
TekSlate
Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.