fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. If the elements are faded in, it makes them faded out, and if they are faded out, it makes them faded in.$(selector).fadeToggle();
$(selector).fadeToggle(speed,callback);
$(selector).fadeToggle(speed, easing, callback); fadeToggle() effect.delay() method is used to delay the execution of functions in the queue. It is the best method to make a delay between the queued jQuery effects. The jQUery delay () method sets a timer to delay the execution of the next item in the queue.$(selector).delay (speed, queueName) ​
fx" the standard queue effect.html() method is used to change the entire content of the selected elements. It replaces the selected element content with new contents.$(document).ready(function(){
$("button").click(function(){
$("p").html("Hello <b>freetimelearning.com</b>");
});
});​CSS() method is used to get (return)or set style properties or values for selected elements. It facilitates you to get one or more style properties. The jQuery CSS() provides two ways:$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
}); ​$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "violet");
});
}); document.ready() function on the same page. $(document).ready(function() {
$("h1").css("background-color", "red");
});
$(document).ready(function() {
$("p").css("background-color", "blue");
}); serialize() method is used to create a text string in standard URL-encoded notation. It serializes the form values so that its serialized values can be used in the URL query string while making an AJAX request.$(document).ready(function(){
$("button").click(function(){
$("div").text($("form").serialize());
});
});$(selector).animate({params}, [duration], [easing], [callback]) param" defines the CSS properties on which you want to apply the animation.duration" specify how long the animation run. It can be one of the following values : "slow," "fast," "normal" or milliseconds
easing" is the string which specifies the function for the transition.callback" is the function which we want to run once the animation effect is complete.ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time. ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time. body.Onload() event will be called only after the DOM and associated resources like images get loaded, but jQuery's document.ready() event will be called once the DOM is loaded and it does not wait for the resources such as images to be loaded. $ as a name. In jQuery, $ is just an alias for jQuery, so we don’t need to use $. If we have to use a JS library along with jQuery, the control of $ is given to the JS library. To give this control, we use jQuery.noConflict(). It is also used to assign a new name to a variable.var newname = jQuery.noConflict();.ajaxStart() : register the handler to be called when the first Ajax request begins..ajaxStop() : register the handler to be called when all requests are complete..ajaxSuccess() : register the handler to be called when an Ajax request is successfully completed..CSS(‘width’) returns the width value in pixels, whereas width() returns the integer (without the unit values). For example:div{
width: 20cm;
}
$(this).width();
$(this).css(‘width’);bind() : this method registers the event handler directly to the required DOM element.$(“#members a”).bind(“click”, function(f){….});live() : this method attaches the event handler to the root of the document. This means one handler can be used for all events that propagated to the root. The handler is thus attached only once.delegate() : in this method, you can choose where to attach the handler. This is the most efficient and robust method for delegation.$(“#members”).delegate(“ul li a”, “click”, function(f){….}); jquery.length because jquery.size is depreciated.jquery.size() and jquery.length() both returns the number of element in an object.jquery.length() property is faster as compared to jquery.size() method.jquery.length() property prefered compared to size() because it does not have overhead of a function call.jquery.size() is depreciated so we always use jquery.length() instead of jquery.size().$('li').size();
$('li').length;// faster$(“<element>”).map(<function to execute for elements in the object>)jQuery.grep(myArr, function(){}attr() and prop() can be used to set or get an element’s value, however attr() returns the original (default) value whereas prop() returns the most recent (current) value. For example, if a text input had an initial value of ‘Male,’ and later it was changed by the user to ‘female,’ attr() will return the value as ‘Male’ whereas prop() will return the value as ‘female.’ $(document).ready(function() {
$("#div2").html($("#txtBox").prop("readonly")) + '</br>';
$("#div3").html($("#txtBox").attr("readonly"));
}); parent() function returns the parent of the selected element by calling the jQuery parent() function. The siblings() function returns all the siblings of given HTML elements. jQuery.holdReady() function is what we can hold or release the execution of jQuery's ready event. This method should be called before we run the ready event. To delay the ready event, we need to call jQuery.holdReady(true);jQuery.holdReady(false);document.ready() loads .resize() Method attaches window element to an event handler function and this event handler function executes when the resize event occurs.resize() Method Syntax :$(window).resize(function(){
//code that executes when the resize event occurs.
});size, the .min.js gets loaded quickly saving the bandwidth.Console’ menu. The error will be displayed in the console menu if any.console.log() into the code to get the error text, you can also write debugger; in between the code line, due to debugger the script will start in debug mode, pressing F12 into the browser will open console which will debug the code, pressing F10 will read values of the jQuery objects, and this is how we can debug jQuery code.jQuery.data() method aids in attaching any type of data to DOM elements, free from memory leaks. jQuery makes sure that data is removed along with the DOM elements removed via jQuery methods.$('#myDiv').data('keyName', { foo : 'bar'});
$('#myDiv').data('keyName'); // { foo : 'bar'}checked".$(document).ready(function(){
$("input[type='button']").on('click', function(){
var radioValue = $("input[name='gender']:checked").val();
if(radioValue){
alert(radioValue);
}
});
}); regex ([0-9]{10})|(\([0-9]{3}\)\s+[0-9]{3}\-[0-9]{4}) $('p') selects all paragraphs <p> in the document.$('#some id') selects the single element in the document that has an ID of some-id.$('.some-class') selects all elements in the document that have a class of some class.ValidEmail(). Pass the email id as a parameter. Using Regex we can valid the email id. Example shown below.function ValidEmail(EmailID) {
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(EmailID)) {
return true;
}
else {
return false;
}
} $.extend method we can merge the contents of two or more objects into the first object. The syntax is as follow.var obj-0 = $.extend({}, obj-1, obj-2);arr-i & arr-j. During development what I need is I want to merge arr-j values to arr-i. In this case jquery extend method helps.$.extend( arr-i, arr-j );$.extend( true, arr-i, arr-j );map method is used to translate items of an Array or object to new array of items. Let’s take an example.var tempArray = { "name":"RamanaReddy", "age":30, "designation":"UI Developer" };
var realArray = $.makeArray( tempArray )
$.map( realArray, function( val, i ) {
// Do something
});