DotNet Tutorials Point: November 2017

wrap() method

The wrap() method wraps specified HTML element(s) around each selected element.

Syntax:

$(selector).wrap(wrappingElement,function(index))

Example:-

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("p").wrap("<div></div>");

});

</script>

<style>

div {

background-color: yellow;

}

</style>

</head>

<body>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button>Wrap a div element around each p element</button>

</body>

</html>

The serialize( ) method serializes a set of input elements into a string of data. So we can say thatThe serialize() method creates a URL encoded text string by serializing form values. You can select one or more form elements (like input and/or text area), or the form element itself. The serialized values can be used in the URL query string when making an AJAX request.

Syntax:

$.serialize( )

Example:

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("div").text($("form").serialize());

});

</script>

</head>

<body>

First name: <input type="text" name="FirstName" value="Nitin"><br>

Last name: <input type="text" name="LastName" value="Chauhan"><br>

</form>

<button>Serialize form value</button>

</body>

</html>

serializeArray() method

SerializeArray() method

The serializeArray() method creates an array of objects (name and value) by serializing form values. You can select one or more form elements (like input and/or text area), or the form element itself.

Syntax:

$(selector).serializeArray()

Example:-

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

var x = $("form").serializeArray();

$.each(x, function(i, field){

$("#results").append(field.name + ":" + field.value + " ");

});

</script>

</head>

<body>

First name: <input type="text" name="FirstName" value="Nitin"><br>

Last name: <input type="text" name="LastName" value="Chauhan"><br>

</form>

<button>Serialize form values</button>

</body>

</html>

jQuery Events

All the different visitor's actions that a web page can respond to are called events. An event represents a precise moment when something happens.

Examples:

Moving a mouse over an element
Selecting a radio button
Clicking on an element

Some common DOM events:

click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

.bind()

Attach a handler to an event for the elements.

.blur()

Bind an event handler to the “blur” JavaScript event, or trigger that event on an element.

.change()

Bind an event handler to the “change” JavaScript event, or trigger that event on an element.

.click()

Bind an event handler to the “click” JavaScript event, or trigger that event on an element.

.contextmenu()

Bind an event handler to the “contextmenu” JavaScript event, or trigger that event on an element.

.dblclick()

Bind an event handler to the “dblclick” JavaScript event, or trigger that event on an element.

.delegate()

Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

.die()

Remove event handlers previously attached using .live() from the elements.

.error()

Bind an event handler to the “error” JavaScript event.

event.currentTarget

The current DOM element within the event bubbling phase.

event.data

An optional object of data passed to an event method when the current executing handler is bound.

event.delegateTarget

The element where the currently-called jQuery event handler was attached.

event.isDefaultPrevented()

Returns whether event.preventDefault() was ever called on this event object.

event.isImmediatePropagationStopped()

Returns whether event.stopImmediatePropagation() was ever called on this event object.

event.isPropagationStopped()

Returns whether event.stopPropagation() was ever called on this event object.

event.metaKey

Indicates whether the META key was pressed when the event fired.

event.namespace

The namespace specified when the event was triggered.

event.pageX

The mouse position relative to the left edge of the document.

event.pageY

The mouse position relative to the top edge of the document.

event.preventDefault()

If this method is called, the default action of the event will not be triggered.

event.relatedTarget

The other DOM element involved in the event, if any.

event.result

The last value returned by an event handler that was triggered by this event, unless the value was undefined.

event.stopImmediatePropagation()

Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

event.stopPropagation()

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

event.target

The DOM element that initiated the event.

event.timeStamp

The difference in milliseconds between the time the browser created the event and January 1, 1970.

event.type

Describes the nature of the event.

event.which

For key or mouse events, this property indicates the specific key or button that was pressed.

.focus()

Bind an event handler to the “focus” JavaScript event, or trigger that event on an element.

.focusin()

Bind an event handler to the “focusin” event.

.focusout()

Bind an event handler to the “focusout” JavaScript event.

.hover()

Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

jQuery.holdReady()

Holds or releases the execution of jQuery’s ready event.

jQuery.proxy()

Takes a function and returns a new one that will always have a particular context.

jQuery.ready

A Promise-like object (or “thenable”) that resolves when the document is ready.

.keydown()

Bind an event handler to the “keydown” JavaScript event, or trigger that event on an element.

.keypress()

Bind an event handler to the “keypress” JavaScript event, or trigger that event on an element.

.keyup()

Bind an event handler to the “keyup” JavaScript event, or trigger that event on an element.

.live()

Attach an event handler for all elements which match the current selector, now and in the future.

.load()

Bind an event handler to the “load” JavaScript event.

.mousedown()

Bind an event handler to the “mousedown” JavaScript event, or trigger that event on an element.

.mouseenter()

Bind an event handler to be fired when the mouse enters an element, or trigger that handler on an element.

.mouseleave()

Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

.mousemove()

Bind an event handler to the “mousemove” JavaScript event, or trigger that event on an element.

.mouseout()

Bind an event handler to the “mouseout” JavaScript event, or trigger that event on an element.

.mouseover()

Bind an event handler to the “mouseover” JavaScript event, or trigger that event on an element.

.mouseup()

Bind an event handler to the “mouseup” JavaScript event, or trigger that event on an element.

.off()

Remove an event handler.

.on()

Attach an event handler function for one or more events to the selected elements.

.one()

Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

.ready()

Specify a function to execute when the DOM is fully loaded.

.resize()

Bind an event handler to the “resize” JavaScript event, or trigger that event on an element.

.scroll()

Bind an event handler to the “scroll” JavaScript event, or trigger that event on an element.

.select()

Bind an event handler to the “select” JavaScript event, or trigger that event on an element.

.submit()

Bind an event handler to the “submit” JavaScript event, or trigger that event on an element.

wrap() method

Serialize( ) method

serializeArray() method

jQuery Events