thenavisapp
Version:
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
1,156 lines (1,087 loc) • 135 kB
HTML
<html
class="js multiplebgs boxshadow cssgradients wf-klavikaweb-i7-active wf-klavikaweb-n7-active wf-sourcecodepro-n4-active wf-sourcecodepro-n7-active wf-active"
lang="en-US"
>
<head data-live-domain="api.jquery.com">
<script type="text/javascript" async="" src="null"></script>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>jQuery() | jQuery API Documentation</title>
<meta name="author" content="jQuery Foundation - jquery.org" />
<meta
name="description"
content="jQuery: The Write Less, Do More, JavaScript Library"
/>
<meta name="viewport" content="width=device-width" />
<link
rel="shortcut icon"
href="http://api.jquery.com/jquery-wp-content/themes/api.jquery.com/i/favicon.ico"
src="null"
/>
<link
rel="stylesheet"
href="http://api.jquery.com/jquery-wp-content/themes/jquery/css/base.css?v=1"
src="null"
/>
<link
rel="stylesheet"
href="http://api.jquery.com/jquery-wp-content/themes/api.jquery.com/style.css"
src="null"
/>
<link rel="pingback" href="http://api.jquery.com/xmlrpc.php" src="null" />
<!--[if lt IE 7
]><link rel="stylesheet" href="css/font-awesome-ie7.min.css"
/><![endif]-->
<script type="text/javascript" async="" src="null"></script>
<script src="null"></script>
<script src="null"></script>
<script>
window.jQuery ||
document.write(
unescape(
'%3Cscript src="http://api.jquery.com/jquery-wp-content/themes/jquery/js/jquery-1.9.1.min.js"%3E%3C/script%3E'
)
);
</script>
<script src="null"></script>
<script src="null"></script>
<script src="null"></script>
<script src="null"></script>
<style type="text/css">
.tk-source-code-pro {
font-family: 'source-code-pro', sans-serif;
}
.tk-klavika-web {
font-family: 'klavika-web', sans-serif;
}
</style>
<link
rel="stylesheet"
href="http://use.typekit.net/c/d4d852/klavika-web:i7:n7,source-code-pro:n4:n7.PYh:F:2,PYg:F:2,Y1M:F:2,Y1P:F:2/d?3bb2a6e53c9684ffdc9a98f2135b2a6250f2340d8ca0853b7df9676f5fa610fe069f9d29c9b5e67ae7b6312a16ff95d3a73356eed53502d6630d88cb0fe9789e0ac2d9a6c14ac282069f97be80efceecd4f5e0e58b889e8649ff22efc0c4063e9f9f87c7a8920dcab32add3496e6b09e6a94141aaaeb81a4bb1d4a09b8a14ac46d7d0dff3bf6532c044b0313c5ed1d7226c76cac5039645b4082ff59a8953c4e06ef9a344cf9265e8de3ed48ac2f34b281583cbaf6f2f580f7709eba9ea284dc14f4722ed0e264d7faa135466fbba043f093297f0efc92bfcb7b3eb8761407436be31d8029117f1a72aa7b8b6319c956c739e1c25b7a993a45"
src="null"
/>
<script>
try {
Typekit.load();
} catch (e) {}
</script>
<link
rel="alternate"
type="application/rss+xml"
title="jQuery API Documentation » Feed"
href="http://api.jquery.com/feed/"
src="null"
/>
<link
rel="alternate"
type="application/rss+xml"
title="jQuery API Documentation » Comments Feed"
href="http://api.jquery.com/comments/feed/"
src="null"
/>
<link
rel="alternate"
type="application/rss+xml"
title="jQuery API Documentation » jQuery() Comments Feed"
href="http://api.jquery.com/jQuery/feed/"
src="null"
/>
<script type="text/javascript" src="null"></script>
<link
rel="EditURI"
type="application/rsd+xml"
title="RSD"
href="http://api.jquery.com/xmlrpc.php?rsd"
src="null"
/>
<link
rel="wlwmanifest"
type="application/wlwmanifest+xml"
href="http://api.jquery.com/wp-includes/wlwmanifest.xml"
src="null"
/>
<link
rel="prev"
title="jQuery.holdReady()"
href="http://api.jquery.com/jQuery.holdReady/"
src="null"
/>
<link
rel="next"
title="jQuery.inArray()"
href="http://api.jquery.com/jQuery.inArray/"
src="null"
/>
<meta name="generator" content="WordPress 3.7" />
<link rel="canonical" href="http://api.jquery.com/jQuery/" src="null" />
<link rel="shortlink" href="http://api.jquery.com/?p=339" src="null" />
</head>
<body
class="api jquery single single-post postid-339 single-format-standard single-author singular"
>
<!--[if lt IE 7]>
<p class="chromeframe">
You are using an outdated browser.
<a href="http://browsehappy.com/">Upgrade your browser today</a>
or
<a href="http://www.google.com/chromeframe/?redirect=true"
>install Google Chrome Frame</a
>
to better experience this site.
</p>
<![endif]-->
<header>
<section id="global-nav">
<nav>
<div class="constrain">
<ul class="projects">
<li class="project jquery">
<a href="http://jquery.com/" title="jQuery" src="null"
>jQuery</a
>
</li>
<li class="project jquery-ui">
<a href="http://jqueryui.com/" title="jQuery UI" src="null"
>jQuery UI</a
>
</li>
<li class="project jquery-mobile">
<a
href="http://jquerymobile.com/"
title="jQuery Mobile"
src="null"
>jQuery Mobile</a
>
</li>
<li class="project sizzlejs">
<a href="http://sizzlejs.com/" title="Sizzle" src="null"
>Sizzle</a
>
</li>
<li class="project qunitjs">
<a href="http://qunitjs.com/" title="QUnit" src="null">QUnit</a>
</li>
</ul>
<ul class="links l_tinynav1">
<li>
<a href="http://plugins.jquery.com/" src="null">Plugins</a>
</li>
<li class="dropdown">
<a href="http://contribute.jquery.org/" src="null"
>Contribute</a
>
<ul>
<li>
<a href="http://contribute.jquery.org/cla/" src="null"
>CLA</a
>
</li>
<li>
<a
href="http://contribute.jquery.org/style-guide/"
src="null"
>Style Guides</a
>
</li>
<li>
<a href="http://contribute.jquery.org/triage/" src="null"
>Bug Triage</a
>
</li>
<li>
<a href="http://contribute.jquery.org/code/" src="null"
>Code</a
>
</li>
<li>
<a
href="http://contribute.jquery.org/documentation/"
src="null"
>Documentation</a
>
</li>
<li>
<a href="http://contribute.jquery.org/web-sites/" src="null"
>Web Sites</a
>
</li>
</ul>
</li>
<li class="dropdown">
<a href="http://events.jquery.org/" src="null">Events</a>
<ul class="wide">
<li>
<a
href="http://www.deque.com/deque-partners-jquery-create-accessibility-summit"
src="null"
>Oct 10-11 | jQuery Accessibility Summit</a
>
</li>
<li>
<a href="http://jquery.itmozg.ru/" src="null"
>Oct 15 | jQuery Russia</a
>
</li>
<li>
<a
href="http://modernweb.com/training/jquery-oct-2013.php"
src="null"
>Oct 15-17 | jQuery Virtual Training</a
>
</li>
<li>
<a href="http://2013.cssdevconf.com/" src="null"
>Oct 21-22 | CSS Dev Conf</a
>
</li>
<li>
<a href="http://javascriptsummit.com/" src="null"
>Nov 19-21 | JavaScript Summit</a
>
</li>
<li>
<a
href="http://events.jquery.org/2014/san-diego/"
src="null"
>Feb 12-13 | jQuery San Diego</a
>
</li>
<li>
<a href="http://www.gentics.com/jquery-europe" src="null"
>Feb 28-Mar 1 | jQuery Europe</a
>
</li>
<li>
<a href="http://jqueryuk.com" src="null"
>May 16 | jQuery UK</a
>
</li>
</ul>
</li>
<li class="dropdown">
<a href="https://jquery.org/support/" src="null">Support</a>
<ul>
<li>
<a href="http://learn.jquery.com/" src="null"
>Learning Center</a
>
</li>
<li>
<a href="http://try.jquery.com/" src="null">Try jQuery</a>
</li>
<li>
<a href="http://irc.jquery.org/" src="null">IRC/Chat</a>
</li>
<li>
<a href="http://forum.jquery.com/" src="null">Forums</a>
</li>
<li>
<a
href="http://stackoverflow.com/tags/jquery/info"
src="null"
>Stack Overflow</a
>
</li>
<li>
<a href="https://jquery.org/support/" src="null"
>Commercial Support</a
>
</li>
</ul>
</li>
<li class="dropdown">
<a href="https://jquery.org/" src="null">jQuery Foundation</a>
<ul>
<li>
<a href="https://jquery.org/join/" src="null">Join</a>
</li>
<li>
<a href="https://jquery.org/members/" src="null">Members</a>
</li>
<li>
<a href="https://jquery.org/team/" src="null">Team</a>
</li>
<li>
<a href="http://brand.jquery.org/" src="null"
>Brand Guide</a
>
</li>
<li>
<a href="https://jquery.org/donate/" src="null">Donate</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</section>
</header>
<div id="container">
<div id="logo-events" class="constrain clearfix">
<h2 class="logo">
<a
href="http://jquery.com/"
title="jQuery API Documentation"
src="null"
>jQuery API Documentation</a
>
</h2>
<aside>
<div id="broadcast">
<a
href="http://engine.adzerk.net/r?e=eyJhdiI6MjIyMzYsImF0IjoxMzE0LCJjbSI6NjM3NjcsImNoIjo4MzY4LCJjciI6MTc4ODcxLCJkaSI6ImZhNDViODgwMzBhOTQxYzNhZmMyZTg0MmIwYzFiZDI1IiwiZG0iOjEsImZjIjoyMjgyOTgsImZsIjoxMTM1MjksImt3IjoidW5kZWZpbmVkIiwibnciOjU0NDksInJmIjoiaHR0cDovL2FwaS5qcXVlcnkuY29tLz9zPWpxdWVyeSIsInJ2IjowLCJwciI6MjE5MzcsInN0Ijo1MzgyOSwidHMiOjEzODU4Mzk5ODgyOTIsInVyIjoiaHR0cDovL2V2ZW50cy5qcXVlcnkub3JnLzIwMTQvc2FuLWRpZWdvLyJ9&s=pUb8fXw8Ar8bGvQszZJHXjkx8Gk"
rel="nofollow"
target="_blank"
title="jQuery San Diego"
src="null"
><img
src="null"
title="jQuery San Diego"
alt="jQuery San Diego"
border="0"
width="400"
height="100" /></a
><img height="0px" width="0px" border="0" src="null" />
</div>
</aside>
</div>
<nav id="main" class="constrain clearfix">
<div class="menu-top-container">
<ul id="menu-top" class="menu l_tinynav2">
<li class="menu-item">
<a href="http://jquery.com/download/" src="null">Download</a>
</li>
<li class="menu-item current">
<a href="http://api.jquery.com/" src="null">API Documentation</a>
</li>
<li class="menu-item">
<a href="http://blog.jquery.com/" src="null">Blog</a>
</li>
<li class="menu-item">
<a href="http://plugins.jquery.com/" src="null">Plugins</a>
</li>
<li class="menu-item">
<a href="http://jquery.com/browser-support/" src="null"
>Browser Support</a
>
</li>
</ul>
<select id="tinynav2" class="tinynav tinynav2"
><option>Navigate...</option
><option value="http://jquery.com/download/">Download</option
><option value="http://api.jquery.com/">API Documentation</option
><option value="http://blog.jquery.com/">Blog</option
><option value="http://plugins.jquery.com/">Plugins</option
><option value="http://jquery.com/browser-support/"
>Browser Support</option
></select
>
</div>
<form method="get" class="searchform" action="http://api.jquery.com/">
<button type="submit" class="icon-search">
<span class="visuallyhidden">search</span>
</button>
<label>
<span class="visuallyhidden">Search jQuery API Documentation</span>
<input type="text" name="s" value="" placeholder="Search" />
</label>
<label>
<span class="visuallyhidden">Search jQuery API Documentation</span>
<input type="radio" name="rad" value="" placeholder="Search" />
</label>
<label>
<span class="visuallyhidden">Search jQuery API Documentation</span>
<input type="radio" name="rad" value="foo" placeholder="Search" />
</label>
</form>
</nav>
<div id="content-wrapper" class="clearfix row">
<div class="content-right twelve columns">
<div id="content">
<article
id="post-339"
class="post-339 post type-post status-publish format-standard hentry category-core category-10 category-14"
>
<header class="entry-header">
<h1 class="entry-title">jQuery()</h1>
<hr />
<div class="entry-meta">
Categories:
<span class="category"
><a
href="http://api.jquery.com/category/core/"
title="View all posts in Core"
src="null"
>Core</a
></span
>
</div>
<!-- .entry-meta -->
</header>
<!-- .entry-header -->
<div class="entry-content">
Return a collection of matched elements either found in the DOM
based on passed argument(s) or created by passing an HTML
string.
<div class="toc">
<h4><span>Contents:</span></h4>
<ul class="toc-list">
<li>
<a href="#jQuery1" src="null"
>jQuery( selector [, context ] )</a
>
<ul>
<li>
<a href="#jQuery-selector-context" src="null"
>jQuery( selector [, context ] )</a
>
</li>
<li>
<a href="#jQuery-element" src="null"
>jQuery( element )</a
>
</li>
<li>
<a href="#jQuery-elementArray" src="null"
>jQuery( elementArray )</a
>
</li>
<li>
<a href="#jQuery-object" src="null"
>jQuery( object )</a
>
</li>
<li>
<a href="#jQuery-jQuery-object" src="null"
>jQuery( jQuery object )</a
>
</li>
<li>
<a href="#jQuery" src="null">jQuery()</a>
</li>
</ul>
</li>
<li>
<a href="#jQuery2" src="null"
>jQuery( html [, ownerDocument ] )</a
>
<ul>
<li>
<a href="#jQuery-html-ownerDocument" src="null"
>jQuery( html [, ownerDocument ] )</a
>
</li>
<li>
<a href="#jQuery-html-attributes" src="null"
>jQuery( html, attributes )</a
>
</li>
</ul>
</li>
<li>
<a href="#jQuery3" src="null">jQuery( callback )</a>
<ul>
<li>
<a href="#jQuery-callback" src="null"
>jQuery( callback )</a
>
</li>
</ul>
</li>
</ul>
</div>
<article id="jQuery1" class="entry method">
<h2 class="section-title">
<span class="name">jQuery( selector [, context ] )</span
><span class="returns"
>Returns:
<a href="http://api.jquery.com/Types/#jQuery" src="null"
>jQuery</a
></span
>
</h2>
<div class="entry-wrapper">
<p class="desc">
<strong>Description: </strong>Accepts a string containing
a CSS selector which is then used to match a set of
elements.
</p>
<ul class="signatures">
<li class="signature">
<h4 class="name">
<span class="version-details"
>version added:
<a href="/category/version/1.0/" src="null"
>1.0</a
></span
><a
id="jQuery-selector-context"
href="#jQuery-selector-context"
src="null"
><span class="icon-link"></span>jQuery( selector [,
context ] )</a
>
</h4>
<ul>
<li>
<div>
<strong>selector</strong>
</div>
<div>
Type:
<a
href="http://api.jquery.com/Types/#Selector"
src="null"
>Selector</a
>
</div>
<div>
A string containing a selector expression
</div>
</li>
<li>
<div>
<strong>context</strong>
</div>
<div>
Type:
<a
href="http://api.jquery.com/Types/#Element"
src="null"
>Element</a
>
or
<a
href="http://api.jquery.com/Types/#jQuery"
src="null"
>jQuery</a
>
</div>
<div>
A DOM Element, Document, or jQuery to use as
context
</div>
</li>
</ul>
</li>
<li class="signature">
<h4 class="name">
<span class="version-details"
>version added:
<a href="/category/version/1.0/" src="null"
>1.0</a
></span
><a
id="jQuery-element"
href="#jQuery-element"
src="null"
><span class="icon-link"></span>jQuery( element )</a
>
</h4>
<ul>
<li>
<div>
<strong>element</strong>
</div>
<div>
Type:
<a
href="http://api.jquery.com/Types/#Element"
src="null"
>Element</a
>
</div>
<div>
A DOM element to wrap in a jQuery object.
</div>
</li>
</ul>
</li>
<li class="signature">
<h4 class="name">
<span class="version-details"
>version added:
<a href="/category/version/1.0/" src="null"
>1.0</a
></span
><a
id="jQuery-elementArray"
href="#jQuery-elementArray"
src="null"
><span class="icon-link"></span>jQuery( elementArray
)</a
>
</h4>
<ul>
<li>
<div>
<strong>elementArray</strong>
</div>
<div>
Type:
<a
href="http://api.jquery.com/Types/#Array"
src="null"
>Array</a
>
</div>
<div>
An array containing a set of DOM elements to wrap
in a jQuery object.
</div>
</li>
</ul>
</li>
<li class="signature">
<h4 class="name">
<span class="version-details"
>version added:
<a href="/category/version/1.0/" src="null"
>1.0</a
></span
><a
id="jQuery-object"
href="#jQuery-object"
src="null"
><span class="icon-link"></span>jQuery( object )</a
>
</h4>
<ul>
<li>
<div>
<strong>object</strong>
</div>
<div>
Type:
<a
href="http://api.jquery.com/Types/#PlainObject"
src="null"
>PlainObject</a
>
</div>
<div>
A plain object to wrap in a jQuery object.
</div>
</li>
</ul>
</li>
<li class="signature">
<h4 class="name">
<span class="version-details"
>version added:
<a href="/category/version/1.0/" src="null"
>1.0</a
></span
><a
id="jQuery-jQuery-object"
href="#jQuery-jQuery-object"
src="null"
><span class="icon-link"></span>jQuery( jQuery
object )</a
>
</h4>
<ul>
<li>
<div>
<strong>jQuery object</strong>
</div>
<div>
Type:
<a
href="http://api.jquery.com/Types/#PlainObject"
src="null"
>PlainObject</a
>
</div>
<div>
An existing jQuery object to clone.
</div>
</li>
</ul>
</li>
<li class="signature">
<h4 class="name">
<span class="version-details"
>version added:
<a href="/category/version/1.4/" src="null"
>1.4</a
></span
><a id="jQuery" href="#jQuery" src="null"
><span class="icon-link"></span>jQuery()</a
>
</h4>
<ul>
<li>
<div class="null-signature">
This signature does not accept any arguments.
</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>
In the first formulation listed above,
<code>jQuery()</code> — which can also be written as
<code>$()</code> — searches through the DOM for any
elements that match the provided selector and creates a
new jQuery object that references these elements:
</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">
1
</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"div.foo"</span> );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
If no elements match the provided selector, the new
jQuery object is "empty"; that is, it contains no
elements and has
<code><a href="/length/" src="null">.length</a></code>
property of 0.
</p>
<h4 id="selector-context">
Selector Context
</h4>
<p>
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
<code>$()</code> function. For example, to do a search
within an event handler, the search can be restricted
like so:
</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">
1
</div>
<div class="line n2">
2
</div>
<div class="line n3">
3
</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"div.foo"</span> ).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $( <span class="string">"span"</span>, <span class="keyword">this</span> ).addClass( <span class="string">"bar"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
When the search for the span selector is restricted to
the context of <code>this</code>, only spans within the
clicked element will get the additional class.
</p>
<p>
Internally, selector context is implemented with the
<code>.find()</code> method, so
<code>$( "span", this )</code>
is equivalent to
<code>$( this ).find( "span" )</code>.
</p>
<h4 id="using-dom-elements">
Using DOM elements
</h4>
<p>
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.
</p>
<p>
<strong>Note:</strong> These formulations are meant to
consume only DOM elements; feeding mixed data to the
elementArray form is particularly discouraged.
</p>
<p>
A common use of this facility is to call jQuery methods
on an element that has been passed to a callback
function through the keyword <code>this</code>:
</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">
1
</div>
<div class="line n2">
2
</div>
<div class="line n3">
3
</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$( <span class="string">"div.foo"</span> ).click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> $( <span class="keyword">this</span> ).slideUp();</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
This example causes elements to be hidden with a sliding
animation when clicked. Because the handler receives the
clicked item in the
<code>this</code> keyword as a bare DOM element, the
element must be passed to the <code>$()</code> function
before applying jQuery methods to it.
</p>
<p>
XML data returned from an Ajax call can be passed to the
<code>$()</code> function so individual elements of the
XML structure can be retrieved using
<code>.find()</code> and other DOM traversal methods.
</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">
1
</div>
<div class="line n2">
2
</div>
<div class="line n3">
3
</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.post( <span class="string">"url.xml"</span>, <span class="keyword">function</span>( data ) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">var</span> $child = $( data ).find( <span class="string">"child"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="cloning-jquery-objects">
Cloning jQuery Objects
</h4>
<p>
When a jQuery object is passed to the
<code>$()</code> function, a clone of the object is
created. This new jQuery object references the same DOM
elements as the initial one.
</p>
<h4 id="returning-empty-set">
Returning an Empty Set
</h4>
<p>
As of jQuery 1.4, calling the
<code>jQuery()</code> method with
<em>no arguments</em> returns an empty jQuery set (with
a
<code><a href="/length/" src="null">.length</a></code>
property of 0). In previous versions of jQuery, this
would return a set containing the document node.
</p>
<h4 id="working-with-plain-objects">
Working With Plain Objects
</h4>
<p>
At present, the only operations supported on plain
JavaScript objects wrapped in jQuery are:
<code>.data()</code
>,<code>.prop()</code>,<code>.on()</code>,
<code>.off()</code>, <code>.trigger()</code> and
<code>.triggerHandler()</code>. The use of
<code>.data()</code> (or any method requiring
<code>.data()</code>) on a plain object will result in a
new property on the object called jQuery{randomNumber}
(eg. jQuery123456789).
</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">
1
</div>
<div class="line n2">
2
</div>
<div class="line n3">
3
</div>
<div class="line n4">
4
</div>
<div class="line n5">
5
</div>
<div class="line n6">
6
</div>
<div class="line n7">
7
</div>
<div class="line n8">
8
</div>
<div class="line n9">
9
</div>
<div class="line n10">
10
</div>
<div class="line n11">
11
</div>
<div class="line n12">
12
</div>
<div class="line n13">
13
</div>
<div class="line n14">
14
</div>
<div class="line n15">
15
</div>
<div class="line n16">
16
</div>
<div class="line n17">
17
</div>
<div class="line n18">
18
</div>
<div class="line n19">
19
</div>
<div class="line n20">
20
</div>
<div class="line n21">
21
</div>
<div class="line n22">
22
</div>
<div class="line n23">
23
</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// Define a plain object</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> foo = { foo: <span class="string">"bar"</span>, hello: <span class="string">"world"</span> };</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Pass it to the jQuery function</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> $foo = $( foo );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Test accessing property values</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> test1 = $foo.prop( <span class="string">"foo"</span> ); <span class="comment">// bar</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Test setting property values</span></code></div></div><div class="container"><div class="line"><code>$foo.prop( <span class="string">"foo"</span>, <span class="string">"foobar"</span> );</code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> test2 = $foo.prop( <span class="string">"foo"</span> ); <span class="comment">// foobar</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Test using .data() as summarized above</span></code></div></div><div class="container"><div class="line"><code>$foo.data( <span class="string">"keyName"</span>, <span class="string">"someValue"</span> );</code></div></div><div class="container"><div class="line"><code>console.log( $foo ); <span class="comment">// will now contain a jQuery{randomNumber} property</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Test binding an event name and triggering</span></code></div></div><div class="container"><div class="line"><code>$foo.on( <span class="string">"eventName"</span>, <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> console.log( <span class="string">"eventName was called"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$foo.trigger( <span class="string">"eventName"</span> ); <span class="comment">// Logs "eventName was called"</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>
Should
<code>.trigger( "eventName" )</code>
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,
<code>.triggerHandler( "eventName" )</code>
should be used instead.
</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">
1
</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$foo.triggerHandler( <span class="string">"eventName"</span> ); <span class="comment">// Also logs "eventName was called"</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<section class="entry-examples" id="entry-examples">
<header><h2>Examples:</h2></header>
<div class="entry-example" id="example-0">
<h4>
Example:
<span class="desc"
>Find all p elements that are children of a div
element and apply a border to them.</span
>
</h4>
<div class="syntaxhighlighter xml">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">
1
</div>
<div class="line n2">
2
</div>
<div class="line n3">
3
</div>
<div class="line n4">
4
</div>
<div class="line n5">
5
</div>
<div class="line n6">
6
</div>
<div class="line n7">
7
</div>
<div class="line n8">
8
</div>
<div class="line n9">
9
</div>
<div class="line n10">
10
</div>
<div class="line n11">
11
</div>
<div class="line n12">
12
</div>
<div class="line n13">
13
</div>
<div class="line n14">
14
</div>
<div class="line n15">
15
</div>
<div class="line n16">
16
</div>
<div class="line n17">
17
</div>
<div class="lin