PHP, jQuery, Javascript Notes

.serializeArray() – jQuery

The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string. It operates on a jQuery object representing a set of form elements. The .serializeArray() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute. No submit button value is serialized since the form was not submitted using a button. Data from file select elements is not serialized. This method can act on a jQuery object that has selected individual form elements, such as <input><textarea>, and <select>. However, it is typically easier to select the <form> tag itself for serialization. This produces the following data structure (provided that the browser supports console.log):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[
{
name: "a",
value: "1"
},
{
name: "b",
value: "2"
},
{
name: "c",
value: "3"
},
{
name: "d",
value: "4"
},
{
name: "e",
value: "5"
}
]

 

.append() – jQuery

The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use .prepend()). With .append(), the selector expression preceding the method is the container into which the content is inserted. Similar to other content-adding methods such as .prepend() and .before().append() also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.

$(“el”) – - name selector – jQuery

An element to search for – by Name. Refers to the tagName of DOM nodes. JavaScript’s getElementsByTagName() function is called to return the appropriate elements when this expression is used.

$(“#el”) – id selector – jQuery

An ID to search for, specified via the id attribute of an element. For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. Calling jQuery() (or $()) with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element. Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid. If the id contains characters like periods or colons you have to escape those characters with backslashes.

 

jQuery()


Return a collection of matched elements either found in the DOM based on passed argument(s) or created by passing an HTML string.

jQuery( selector [, context ] )Returns: jQuery

Description: Accepts a string containing a CSS selector which is then used to match a set of elements.

In the first formulation listed above, jQuery() — which can also be written as $() — searches through the DOM for any elements that match the provided selector and creates a new jQuery object that references these elements:

1
$( "div.foo" );

If no elements match the provided selector, the new jQuery object is “empty”; that is, it contains no elements and has .lengthproperty of 0.

Selector Context

By default, selectors perform their searches within the DOM starting at the document root. However, an alternate context can be given for the search by using the optional second parameter to the $() function. For example, to do a search within an event handler, the search can be restricted like so:

1
2
3
$( "div.foo" ).click(function() {
$( "span", this ).addClass( "bar" );
});

When the search for the span selector is restricted to the context of this, only spans within the clicked element will get the additional class.

Internally, selector context is implemented with the .find() method, so $( "span", this ) is equivalent to $( this ).find( "span" ).

Using DOM elements

The second and third formulations of this function create a jQuery object using one or more DOM elements that were already selected in some other way. When passing an array, each element must be a DOM element; mixed data is not supported. A jQuery object is created from the array elements in the order they appeared in the array; unlike most other multi-element jQuery operations, the elements are not sorted in DOM order.

A common use of single-DOM-element construction is to call jQuery methods on an element that has been passed to a callback function through the keyword this:

1
2
3
$( "div.foo" ).click(function() {
$( this ).slideUp();
});

This example causes elements to be hidden with a sliding animation when clicked. Because the handler receives the clicked item in the this keyword as a bare DOM element, the element must be passed to the $() function before applying jQuery methods to it.

XML data returned from an Ajax call can be passed to the $() function so individual elements of the XML structure can be retrieved using .find() and other DOM traversal methods.

1
2
3
$.post( "url.xml", function( data ) {
var $child = $( data ).find( "child" );
});

 

When a jQuery object is passed to the $() function, a clone of the object is created. This new jQuery object references the same DOM elements as the initial one.

As of jQuery 1.4, calling the jQuery() method with no arguments returns an empty jQuery set (with a .length property of 0). In previous versions of jQuery, this would return a set containing the document node.

At present, the only operations supported on plain JavaScript objects wrapped in jQuery are: .data(),.prop(),.on().off().trigger() and .triggerHandler(). The use of .data() (or any method requiring .data()) on a plain object will result in a new property on the object called jQuery{randomNumber} (eg. jQuery123456789). Should .trigger( "eventName" ) be used, it will search for an “eventName” property on the object and attempt to execute it after any attached jQuery handlers are executed. It does not check whether the property is a function or not. To avoid this behavior, .triggerHandler( "eventName" ) should be used instead.

The following two tabs change content below.

allenpg

Latest posts by allenpg (see all)