jQuery Events Tutorial

jQuery events are the web-detected actions. jQuery provides a number of event-related methods. These methods are used to create dynamic web pages. METHODS DESCRIPTION click Attaches/Triggers the click event dblclick Attaches/Triggers the double-click event mouseenter Attaches/Triggers the mouseenter event mouseleave Attaches/Triggers the mouseleave event keyup Attaches/Triggers the keyup event keydown Attaches/Triggers the keydown event keypress … Read more

jQuery serializeArray()

Some important features of the jQuery serializeArray() method are: jQuery serializeArray() method creates a JavaScript array of objects. One can select one or more form elements, as it operates on a jQuery collection of forms and form controls. It serializes the form values. Syntax: $ (selector).serializeArray() Example1: <!DOCTYPE html> <html> <head> <script src=”https://code.jquery.com/jquery-1.10.2.js”></script> <script> $(document).ready(function(){ … Read more

jQuery serialize()

Some important features of the jQuery serialize() method are; jQuery serialize() method creates a text string in standard URL-encoded notation. It is used in form controls. It serializes the form values, the serialized values can then be used in the URL query string. Syntax: $ (selector).serialize() Example: <!DOCTYPE html> <html> <head> <script src=”https://code.jquery.com/jquery-1.10.2.js”></script> <script> $(document).ready(function(){ … Read more

jQuery Form

jQuery form is a part of jQuery AJAX methods. AJAX (Asynchronous JavaScript and XML) can be defined as the art of exchanging data with a server which includes loading data in the background and updating only the specific parts of a web page, without reloading the whole page. With AJAX functionality, jQuery provides several methods … Read more

jQuery unwrap()

The jQuery unwrap() method removes the parent element of the selected elements. Syntax: $(selector).unwrap() Example1: <!DOCTYPE html> <html> <head> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script> <script> $(document).ready(function(){ $(“#btn1”).click(function(){ $(“p”).wrap(“<em></em>”); }); $(“#btn2”).click(function(){ $(“p”).unwrap(); }); }); </script> </head> <body> <p>Hello!</p> <p>Nice to see you.</p> <button id=”btn1″>Wrap</button> <button id=”btn2″>Unwrap</button> </body> </html> Example2: <!DOCTYPE html> <html> <head> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script> <script> $(document).ready(function(){ $(“#btn1”).click(function(){ $(“p”).wrapAll(“<div></div>”); … Read more

jQuery wrapAll()

jQuery wrapAll() method wraps the specified HTML elements around all the selected elements. Syntax: $(selector).wrapAll(wrappingElement) Wrapping Element: It is a compulsory parameter. It is used to specify the HTML elements to wrap around the selected elements. It can accept HTML elements, jQuery objects, and DOM elements as a value. Example1: <!DOCTYPE html> <html> <head> <script … Read more

jQuery wrapInner()

jQuery wrapInner() method wraps all the HTML structure around the content of each element of the selected element. Syntax: $(selector).wrapInner(wrappingElement,function(index)) WrappingElement: It is a compulsory parameter. It is used to specify the HTML elements to be wrapped around the content of each selected element. It can accept HTML elements, jQuery objects, and DOM elements as … Read more

jQuery wrap()

jQuery wrap() method wraps the specified HTML elements around each selected element. Syntax: $(selector).wrap(wrappingElement,function(index)) WrappingElement: It is a compulsory parameter. It is used to specify the HTML elements to be wrapped around each selected element. It can accept HTML elements, jQuery objects, and DOM elements as a value. Function: It is an optional function to … Read more

jQuery outerHeight()

jQuery innerHeight() method returns the inner height of the selected element. Border and padding both are included in this method. Syntax: $(selector).outerHeight(includeMargin) includeMargin: This parameter accepts Boolean value to specify whether the margin is to include or not. False: Not to include the margin. True: To include the margin. Example1: <!DOCTYPE html> <html> <head> <script … Read more

jQuery outerWidth()

jQuery outerWidth() method returns the outer width of the selected element. Border and padding both are included in this method. Syntax: $(selector).outerWidth(includeMargin) includeMargin: This parameter accepts Boolean value to specify whether the margin is to include or not. False: Not to include the margin. True: To include the margin. Example1: <!DOCTYPE html> <html> <head> <script … Read more