26. What is the use of .animate() function in jQuery?
Answer:
The .animate() function changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.
It performs a custom animation of a set of CSS properties.
Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element.
Syntax:
(selector).animate({styles},speed,easing,callback)
Parameters,
styles: It specifies one or more CSS properties/values to animate. Properties that can be animated: backgroundPositionX, backgroundPositionY, borderWidth, margin, padding, fontSize etc.
speed: It specifies the speed of the animation. Default value is 400 milliseconds. Possible values are: milliseconds (like 100, 1000, 5000, etc), slow, fast.
Easing: It specifies the speed of the element in different points of the animation. Default value is "swing". Possible values are: swing, linear.
1. swing: It moves slower at the beginning/end, but faster in the middle.
2. linear: It moves in a constant speed.
Callback: It specifies a function to be executed after the animation completes.
27. What is meant by deep copy?
Answer:
Deep copy means copy the object properties recursively into the new object.
It copies all fields, and makes copies of dynamically allocated memory pointed to by the fields.
It occurs when an object is copied along with the objects to which it refers.
The .clone() method performs a deep copy of the set of matched elements, which means that it copies the matched elements as well as their descendant elements and text nodes.
Deep copy creates a deep copy of the set of matched elements.
The $.extend method is used from jQuery to perform deep copy in JavaScript object.
Syntax:
$.extend(deepCopy, target, object1, [objectN] )
deepCopy: This parameter is used to perform deep copy. It indicates first argument as true.
target: To copy everything into.
target1 … targetn: To copy from.
Here are some points about Deep copy that should be considered,
- Deep copy copies the object properties recursively.
- Original and copied object do not share properties.
- Change in copied object does not reflect in original object and vice versa.
- All primitive data types in JavaScript performs deep copy by default. Boolean, Null, Undefined, Number, String etc. are primitive data types in JavaScript.
Example:
var original = {"p1" : "P1", "p2" : "P2"};
console.log(JSON.stringify(original)); // {"p1" : "P1", "p2" : "P2"}
var deepCopy = $.extend(true, {}, original);
console.log(JSON.stringify(deepCopy)); // {"p1" : "P1", "p2" : "P2"}
deepCopy.p1 = "ChangedP1";
console.log(JSON.stringify(original)); // {"p1" : "P1", "p2" : "P2"}
console.log(JSON.stringify(deepCopy)); // {"p1" : "ChangedP1", "p2" : "P2"}
28. What do you know about .promise() method in jQuery?
Answer:
The .promise() method returns a promise object to observe when all the actions of a certain type bound to the collection, queued or not, have finished.
This method returns a dynamically generated promise.
Syntax:
.promise( [type ] [, target ] )
The .promise() method takes two arguments:
1. type: By default, type is "fx", which means that the returned promise is resolved when all animations of the selected elements have finished.
2. target: If a target object is specified, .promise() will attach to it and then return this object rather than create a new one.
29. What is the difference between .remove() and .detach()?
Answer:
| .detach() | .remove() |
|---|
| The .detach() method removes the selected elements, including all text and child nodes. However, it keeps data and events. This method also keeps a copy of the removed elements, which allows them to be reinserted at a later time. | The .remove() method removes the selected elements, including all text and child nodes. This method also removes the data and events of the selected elements. |
| The .detach() method is used when removed elements are to be reinserted into the DOM at a later time. | The .remove() method is useful when you want to remove the element itself, as well as everything inside it. In addition to this, all bound events and jQuery data associated with the elements are removed. |
30. What do know about prop() and attr() method in jQuery?
Answer:
prop() method:
The prop() method sets or returns properties and values of the selected elements.
In prop(), the return property value returns the value of the FIRST matched element and the set property value sets one or more property/value pairs for the set of matched elements.
This method should be used to retrieve property values, e.g. DOM properties (like tagName, nodeName, defaultChecked) or your own custom made properties.
Syntax:
1. Return the value of a property:
$(selector).prop(property)
2. Set the property and value:
$(selector).prop(property,value)
3. Set property and value using a function:
$(selector).prop(property,function(index,currentvalue))
4. Set multiple properties and values:
$(selector).prop({property:value, property:value,...})
Parameters,
property: It specifies the name of the property.
value: It specifies the value of the property.
function(index,currentvalue): It specifies a function that returns the property value to set.
index: It receives the index position of the element in the set
currentvalue: It receives the current property value of selected elements.
attr() method:
The attr() method sets or returns attributes and values of the selected elements.
In attr() method, the return attribute value returns the value of the first matched element and the set attribute value sets one or more attribute/value pairs for the set of matched elements.
Syntax:
1. Return the value of an attribute:
$(selector).attr(attribute)
2. Set the attribute and value:
$(selector).attr(attribute,value)
3. Set attribute and value using a function:
$(selector).attr(attribute,function(index,currentvalue))
4. Set multiple attributes and values:
$(selector).attr({attribute:value, attribute:value,...})
Parameters,
attribute: It specifies the name of the attribute.
value: it specifies the value of the attribute.
function(index, currentvalue): It specifies a function that returns the attribute value to set.
Index: It receives the index position of the element in the set.
currentvalue: It receives the current attribute value of selected elements.gogo
