Posts

Showing posts from March, 2015

How to Create Animated Visual Effects Using jQuery

You can create animated visual effects by setting the CSS visibility property, i.e. making elements appearing and disappearing. Along with making an element appear and disappear, we might reduce the value of its opacity property over the certain period. This king of animated visual effect creates a more pleasing experience for user and jQuery makes them easy. jQuery defines simple methods such as fadeIn() and fadeOut() for basic visual effects. You can also use an animate() method for producing more complex custom animations.  Every animation has a duration that specifies how long the effect should last for. You can specify this as a number of milliseconds or by using a string. The string "fast" means 200ms and the sting "slow" means 600ms. If you specify a duration string that jQuery does not recognize, you will get a default duration of 400ms.  $("#animation").fadeIn(); // It fades an element in over 400ms $("#animation").fadeOut("fast&quo

How to Alter HTML Document Structure using jQuery?

HTML documents are represented as a tree of nodes rather than a linear sequence of characters, insertions, deletions, and replacements are not as simple as they are for strings and arrays. In jQuery there are some methods for making more complex changes to a document. There are number of method in jQuery for inserting and replacing elements, copying elements, wrapping elements and deleting elements. For insertion and replacement of elements in HTML document, you can use the methods append(), prepend() and replacewith().  You can copy HTML elements using clone() method and wrapp the elements using wrap(), wrapInner() and wrapAll() methods. For deletion of the element you can use empty(), reomve() and unwrap() methods.  How to Insert and Replace Elements using jQuery  You can use different methods to insert and replace elements using jQuery, each of the methods takes an argument that specifies the content that is to be inserted into the document.  The inserting can be made into or before

How to Get and Set Element Attributes using jQuery

Some of the simplest and most common, operations on jQuery objects are those that get or set the value of HTML attributes, CSS styles, element content, or element geometry. In this post I am going to describe the methods to get or set HTML element attributes using jQuery. How to Get and Set HTML Attributes using jQuery You can get or set HTML attributes using attr() method in jQuery. The attr() method handles browser incompatibilities and special cases and allows you to use either HTML attributes names or their JavaScript property equivalents. Here are some examples of uses of attr() method for getting or setting HTML attributes. $("form").attr("action"); // It gets the action attribute from the first form. $("#icon").attr("src", "icon.gif"); // It sets the src attributes for image with id icon. $("a").attr("target", "_blank"); // It set the target attributes for all links to load in new windows $("

How to Use jQuery With HTML?

jQuery() is a single global function defined by jQuery library. This function is so frequently used that the library also defines the global symbol $ as a shortcut for it. This single global function with two names is the central query function for jQuery. For example, if you need to ask for the set of all <div> elements in a document, write the following code. var divs=$("div"); The value returned by the jQuery() function represents a set of zero or more DOM elements is known as a jQuery object. jQuery objects define many methods for operating on the sets of elements they represent. How to Obtain jQuery jQuery library is free software. You can download if from http://www.jquery.com . Once you have download the code, you can include it in your web pages with a <script> element as given below. <script src="jquery-1.11.2.min.js"></script> Here the "min" in the filename indicates that this is the minimized version of the library, with