-
map( Function callback ) returns jQuery
Translate a set of elements in the jQuery object into another set of values in an array (which may, or may not, be elements).
You could use this to build lists of values, attributes, css values - or even perform special, custom, selector transformations.
This is provided as a convenience method for using <a href='Utilities/jQuery.map'>$.map()</a>.Example:
Build a list of all the values within a form.
$("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") );HTML:
<p><b>Values: </b></p> <form> <input type="text" name="name" value="John"/> <input type="text" name="password" value="password"/> <input type="text" name="url" value="http://ejohn.org/"/> </form>Example:
A contrived example to show some functionality.
var mappedItems = $("li").map(function (index) { var replacement = $("<li>").text($(this).text()).get(0); if (index == 0) { // make the first item all caps $(replacement).text($(replacement).text().toUpperCase()); } else if (index == 1 || index == 3) { // delete the second and fourth items replacement = null; } else if (index == 2) { // make two of the third item and add some text replacement = [replacement,$("<li>").get(0)]; $(replacement[0]).append("<b> - A</b>"); $(replacement[1]).append("Extra <b> - B</b>"); } // replacment will be an dom element, null, // or an array of dom elements return replacement; }); $("#results").append(mappedItems);HTML:
<ul> <li>First</li> <li>Second</li> <li>Third</li> <li>Fourth</li> <li>Fifth</li> </ul> <ul id="results"> </ul> -
mousedown ( Function fn ) returns jQuery
Binds a function to the mousedown event of each matched element.
The mousedown event fires when the pointing device button is pressed over an element. -
mousemove( Function fn ) returns jQuery
Bind a function to the mousemove event of each matched element.
The mousemove event fires when the pointing device is moved while it is over an element. The event handler is passed one variable - the event object. Its .clientX and .clientY properties represent the coordinates of the mouse.Example:
Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window which in this case is the iframe.
$("div").mousemove(function(e){ var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; var clientCoords = "( " + e.clientX + ", " + e.clientY + " )"; $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords); $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords); });HTML:
<p> Try scrolling too. <span>Move the mouse over the div.</span> <span> </span> </p> <div></div> -
mouseout( Function fn ) returns jQuery
Bind a function to the mouseout event of each matched element.
The mouseout event fires when the pointing device is moved away from an element. -
mouseover( Function fn ) returns jQuery
Bind a function to the mouseover event of each matched element.
The mouseout event fires when the pointing device is moved onto an element. -
mouseup( Function fn ) returns jQuery
Bind a function to the mouseup event of each matched element.
The mouseup event fires when the pointing device button is released over an element. -
multiple( Selector selector1, Selector selector2, Selector selectorN ) returns Array<Element>
Matches the combined results of all the specified selectors.
You can specify any number of selectors to combine into a single result. Note order of the dom elements in the jQuery object aren't necessarily identical.Example:
Finds the elements that match any of these three selectors.
$("div,span,p.myClass").css("border","3px solid red");HTML:
<div>div</div> <p class="myClass">p class="myClass"</p> <p class="notMyClass">p class="notMyClass"</p> <span>span</span>Example:
Show the order in the jQuery object.
var list = $("div,p,span").map(function () { return this.tagName; }).get().join(", "); $("b").append(document.createTextNode(list));HTML:
<span>span</span> <p>p</p> <p>p</p> <div>div</div> <span>span</span> <p>p</p> <div>div</div> <b></b>