jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
Tests performance of improvements to Sizzle.getText() http://bugs.jquery.com/ticket/6863.
The pull request for this enhancement is at https://github.com/jquery/sizzle/pull/59
<div id="bodyContent" style="display:none">
<!-- tagline -->
<div id="siteSub">
From Wikipedia, the free encyclopedia
</div>
<!-- /tagline -->
<!-- subtitle -->
<div id="contentSub">
(Redirected from
<a href="/w/index.php?title=Jquery&redirect=no" title="Jquery">Jquery</a>
)
</div>
<p>
<b>
jQuery
</b>
is a
<a href="/wiki/Cross-browser">cross-browser</a>
<a href="/wiki/JavaScript_library">JavaScript library</a>
designed to simplify the
<a href="/wiki/Client-side_scripting">client-side scripting</a>
of
<a href="/wiki/HTML">HTML</a>
.
<sup id="cite_ref-jquery.com_0-0" class="reference">
<a href="#cite_note-jquery.com-0"><span>[</span>1<span>]</span></a>
</sup>
It was released in January 2006 at
<a href="/wiki/BarCamp">BarCamp</a>
NYC by
<a href="/wiki/John_Resig">John Resig</a>
. Used by over 43% of the 10,000 most visited websites, jQuery is the most popular
<a href="/wiki/JavaScript_library">JavaScript library</a>
in use today.
<sup id="cite_ref-1" class="reference">
<a href="#cite_note-1"><span>[</span>2<span>]</span></a>
</sup>
<sup id="cite_ref-2" class="reference">
<a href="#cite_note-2"><span>[</span>3<span>]</span></a>
</sup>
</p>
<p>
jQuery is
<a href="/wiki/Free_and_open_source_software" title="Free and open source software">free, open source software</a>
,
<a href="/wiki/Dual-licensing" title="Dual-licensing" class="mw-redirect">dual-licensed</a>
under the
<a href="/wiki/MIT_License">MIT License</a>
and the
<a href="/wiki/GNU_General_Public_License#Version_2" title="GNU General Public License">GNU General Public License, Version 2</a>
.
<sup id="cite_ref-3" class="reference">
<a href="#cite_note-3"><span>[</span>4<span>]</span></a>
</sup>
jQuery's syntax is designed to make it easier to navigate a document, select
<a href="/wiki/Document_Object_Model" title="Document Object Model">DOM</a>
elements, create
<a href="/wiki/Animation" title="Animation">animations</a>
, handle
<a href="/wiki/Event_(computing)" title="Event (computing)">events</a>
, and develop
<a href="/wiki/Ajax_(programming)" title="Ajax (programming)">Ajax applications</a>
. jQuery also provides capabilities for developers to create
<a href="/wiki/Plug-in_(computing)" title="Plug-in (computing)">plugins</a>
on top of the JavaScript library. Using these facilities, developers are able to
create
<a href="/wiki/Abstraction_(computer_science)" title="Abstraction (computer science)">abstractions</a>
for low-level interaction and animation, advanced effects and high-level, theme-able
widgets. This contributes to the creation of powerful and dynamic web pages.
</p>
<p>
<a href="/wiki/Microsoft">Microsoft</a>
and
<a href="/wiki/Nokia">Nokia</a>
have announced plans to bundle jQuery on their platforms,
<sup id="cite_ref-2008-09-28_4-0" class="reference">
<a href="#cite_note-2008-09-28-4"><span>[</span>5<span>]</span></a>
</sup>
Microsoft adopting it initially within
<a href="/wiki/Visual_Studio" class="mw-redirect" title="Visual Studio">Visual Studio</a>
<sup id="cite_ref-5" class="reference">
<a href="#cite_note-5"><span>[</span>6<span>]</span></a>
</sup>
for use within Microsoft's
<a href="/wiki/ASP.NET_AJAX">ASP.NET AJAX</a>
framework and
<a href="/wiki/ASP.NET_MVC_Framework">ASP.NET MVC Framework</a>
while Nokia has integrated it into their Web Run-Time widget development platform.
<sup id="cite_ref-6" class="reference">
<a href="#cite_note-6"><span>[</span>7<span>]</span></a>
</sup>
jQuery has also been used in
<a href="/wiki/MediaWiki">MediaWiki</a>
since version 1.16.
<sup id="cite_ref-7" class="reference">
<a href="#cite_note-7"><span>[</span>8<span>]</span></a>
</sup>
</p>
<table id="toc" class="toc">
<tr>
<td>
<div id="toctitle">
<h2>
Contents
</h2>
</div>
<ul>
<li class="toclevel-1 tocsection-1">
<a href="#Features"><span class="tocnumber">1</span> <span class="toctext">Features</span></a>
</li>
<li class="toclevel-1 tocsection-2">
<a href="#Including_the_library"><span class="tocnumber">2</span> <span class="toctext">Including the library</span></a>
</li>
<li class="toclevel-1 tocsection-3">
<a href="#Usage_styles"><span class="tocnumber">3</span> <span class="toctext">Usage styles</span></a>
</li>
<li class="toclevel-1 tocsection-4">
<a href="#jQuery_plug-ins"><span class="tocnumber">4</span> <span class="toctext">jQuery plug-ins</span></a>
</li>
<li class="toclevel-1 tocsection-5">
<a href="#Release_history"><span class="tocnumber">5</span> <span class="toctext">Release history</span></a>
</li>
<li class="toclevel-1 tocsection-6">
<a href="#See_also"><span class="tocnumber">6</span> <span class="toctext">See also</span></a>
</li>
<li class="toclevel-1 tocsection-7">
<a href="#References"><span class="tocnumber">7</span> <span class="toctext">References</span></a>
</li>
<li class="toclevel-1 tocsection-8">
<a href="#Further_reading"><span class="tocnumber">8</span> <span class="toctext">Further reading</span></a>
</li>
<li class="toclevel-1 tocsection-9">
<a href="#External_links"><span class="tocnumber">9</span> <span class="toctext">External links</span></a>
</li>
</ul>
</td>
</tr>
</table>
<h2>
<span class="editsection">
[
<a href="/w/index.php?title=JQuery&action=edit&section=1" title="Edit section: Features">edit</a>
]
</span>
<span class="mw-headline" id="Features">
Features
</span>
</h2>
<p>
jQuery contains the following features:
</p>
<ul>
<li>
<a href="/wiki/Document_Object_Model" title="Document Object Model">DOM</a>
element selections using the cross-browser open source selector engine
<a href="/w/index.php?title=Sizzle_selector_engine&action=edit&redlink=1"
class="new" title="Sizzle selector engine (page does not exist)">Sizzle</a>
, a spin-off out of the jQuery project
<sup id="cite_ref-8" class="reference">
<a href="#cite_note-8"><span>[</span>9<span>]</span></a>
</sup>
</li>
<li>
DOM traversal and modification (including support for CSS 1-3)
</li>
<li>
Events
</li>
<li>
<a href="/wiki/Cascading_Style_Sheets" title="Cascading Style Sheets">CSS</a>
manipulation
</li>
<li>
Effects and animations
</li>
<li>
<a href="/wiki/AJAX_(programming)" title="AJAX (programming)" class="mw-redirect">Ajax</a>
</li>
<li>
<a href="/wiki/Extensibility">Extensibility</a>
through plug-ins
</li>
<li>
Utilities - such as browser version and the
<code lang="jQuery" xml:lang="jQuery">
each
</code>
function.
</li>
<li>
Cross-browser support
</li>
</ul>
<h2>
<span class="editsection">
[
<a href="/w/index.php?title=JQuery&action=edit&section=2" title="Edit section: Including the library">edit</a>
]
</span>
<span class="mw-headline" id="Including_the_library">
Including the library
</span>
</h2>
<p>
The jQuery library is a single JavaScript file, containing all of its common DOM,
event, effects, and Ajax functions. It can be included within a web page by linking
to a local copy, or to one of the many copies available from public servers (such
as Google
<sup id="cite_ref-9" class="reference">
<a href="#cite_note-9"><span>[</span>10<span>]</span></a>
</sup>
or Microsoft
<a href="/wiki/Content_delivery_network" title="Content delivery network">CDN</a>
).
</p>
<div dir="ltr" class="mw-geshi" style="text-align: left;">
<div class="html4strict source-html4strict" style="font-family:monospace;">
<pre class="de1">
<span class="sc2">
<
<span class="kw2">
script
</span>
<span class="kw3">
type
</span>
<span class="sy0">
=
</span>
<span class="st0">
"text/javascript"
</span>
<span class="kw3">
src
</span>
<span class="sy0">
=
</span>
<span class="st0">
"jquery.js"
</span>
><
<span class="sy0">
/
</span>
<span class="kw2">
script
</span>
>
</span>
</pre>
</div>
</div>
<p>
The most popular and basic way to introduce a jQuery function is to use the
<code lang="jQuery" xml:lang="jQuery">
.ready()
</code>
function.
</p>
<div dir="ltr" class="mw-geshi" style="text-align: left;">
<div class="html4strict source-html4strict" style="font-family:monospace;">
<pre class="de1">
$(document).ready(function() { // jquery goes here });
</pre>
</div>
</div>
<p>
or the shortcut
</p>
<div dir="ltr" class="mw-geshi" style="text-align: left;">
<div class="html4strict source-html4strict" style="font-family:monospace;">
<pre class="de1">
$(function() { // jquery goes here });
</pre>
</div>
</div>
<h2>
<span class="editsection">
[
<a href="/w/index.php?title=JQuery&action=edit&section=3" title="Edit section: Usage styles">edit</a>
]
</span>
<span class="mw-headline" id="Usage_styles">
Usage styles
</span>
</h2>
<p>
jQuery has two usage styles:
</p>
<ul>
<li>
via the
<code lang="jQuery" xml:lang="jQuery">
$
</code>
function, which is a
<a href="/wiki/Factory_method_pattern" title="Factory method pattern">factory method</a>
for the jQuery object. These functions, often called
<i>
commands
</i>
, are
<a href="/wiki/Method_chaining" title="Method chaining"><i>chainable</i></a>
; they all return jQuery objects
</li>
<li>
via
<code lang="jQuery" xml:lang="jQuery">
$.
</code>
-prefixed functions. These are
<i>
utility functions
</i>
which do not work on the jQuery object
<i>
per se
</i>
.
</li>
</ul>
<p>
Typically, access to and manipulation of multiple DOM nodes begins with the
<code lang="jQuery" xml:lang="jQuery">
$
</code>
function being called with a
<a href="/wiki/CSS" class="mw-redirect" title="CSS">CSS</a>
selector string, which results in a jQuery object referencing matching elements
in the
<a href="/wiki/HTML">HTML</a>
page. This node set can be manipulated by calling instance methods on the jQuery
object, or on the nodes themselves. For example:
</p>
<div dir="ltr" class="mw-geshi" style="text-align: left;">
<div class="javascript source-javascript" style="font-family:monospace;">
<pre class="de1">
$
<span class="br0">
(
</span>
<span class="st0">
"div.test"
</span>
<span class="br0">
)
</span>
.
<span class="me1">
add
</span>
<span class="br0">
(
</span>
<span class="st0">
"p.quote"
</span>
<span class="br0">
)
</span>
.
<span class="me1">
addClass
</span>
<span class="br0">
(
</span>
<span class="st0">
"blue"
</span>
<span class="br0">
)
</span>
.
<span class="me1">
slideDown
</span>
<span class="br0">
(
</span>
<span class="st0">
"slow"
</span>
<span class="br0">
)
</span>
<span class="sy0">
;
</span>
</pre>
</div>
</div>
<p>
This line finds the union of all
<code lang="HTML" xml:lang="HTML">
div
</code>
tags with class attribute
<code lang="HTML" xml:lang="HTML">
test
</code>
and all
<code lang="HTML" xml:lang="HTML">
p
</code>
tags with CSS class attribute
<code lang="HTML" xml:lang="HTML">
quote
</code>
, adds the class attribute
<code lang="HTML" xml:lang="HTML">
blue
</code>
to each matched element, and then slides them down with an animation. The
<code lang="jQuery" xml:lang="jQuery">
$
</code>
and
<code lang="jQuery" xml:lang="jQuery">
add
</code>
functions affect the matched set, while the
<code lang="jQuery" xml:lang="jQuery">
addClass
</code>
and
<code lang="jQuery" xml:lang="jQuery">
slideDown
</code>
affect the referenced nodes.
</p>
<p>
The methods prefixed with
<code lang="jQuery" xml:lang="jQuery">
$.
</code>
are convenience methods or affect global properties and behaviour. For example,
the following is an example of the
<a href="/wiki/Map_(higher-order_function)" title="Map (higher-order function)">map function</a>
called
<code lang="jQuery" xml:lang="jQuery">
each
</code>
in jQuery:
</p>
<div dir="ltr" class="mw-geshi" style="text-align: left;">
<div class="javascript source-javascript" style="font-family:monospace;">
<pre class="de1">
$.
<span class="me1">
each
</span>
<span class="br0">
(
</span>
<span class="br0">
[
</span>
1
<span class="sy0">
,
</span>
2
<span class="sy0">
,
</span>
3
<span class="br0">
]
</span>
<span class="sy0">
,
</span>
<span class="kw2">
function
</span>
<span class="br0">
(
</span>
<span class="br0">
)
</span>
<span class="br0">
{
</span>
document.
<span class="kw1">
write
</span>
<span class="br0">
(
</span>
<span class="kw1">
this
</span>
<span class="sy0">
+
</span>
1
<span class="br0">
)
</span>
<span class="sy0">
;
</span>
<span class="br0">
}
</span>
<span class="br0">
)
</span>
<span class="sy0">
;
</span>
</pre>
</div>
</div>
<p>
This writes the number 234 to the document.
</p>
<p>
It is possible to perform browser-independent
<a href="/wiki/Ajax_(programming)" title="Ajax (programming)">Ajax</a>
queries using
<code lang="jQuery" xml:lang="jQuery">
$.ajax
</code>
and associated methods to load and manipulate remote data.
</p>
<div dir="ltr" class="mw-geshi" style="text-align: left;">
<div class="javascript source-javascript" style="font-family:monospace;">
<pre class="de1">
$.
<span class="me1">
ajax
</span>
<span class="br0">
(
</span>
<span class="br0">
{
</span>
type
<span class="sy0">
:
</span>
<span class="st0">
"POST"
</span>
<span class="sy0">
,
</span>
url
<span class="sy0">
:
</span>
<span class="st0">
"example.php"
</span>
<span class="sy0">
,
</span>
data
<span class="sy0">
:
</span>
<span class="st0">
"name=John&location=Boston"
</span>
<span class="sy0">
,
</span>
success
<span class="sy0">
:
</span>
<span class="kw2">
function
</span>
<span class="br0">
(
</span>
msg
<span class="br0">
)
</span>
<span class="br0">
{
</span>
<span class="kw3">
alert
</span>
<span class="br0">
(
</span>
<span class="st0">
"Data Saved: "
</span>
<span class="sy0">
+
</span>
msg
<span class="br0">
)
</span>
<span class="sy0">
;
</span>
<span class="br0">
}
</span>
<span class="br0">
}
</span>
<span class="br0">
)
</span>
<span class="sy0">
;
</span>
</pre>
</div>
</div>
<p>
This example posts the data
<code>
name=John
</code>
and
<code>
location=Boston
</code>
to
<code>
example.php
</code>
on the server. When this request finishes successfully, the success function is
called to alert the user.
</p>
<h2>
<span class="editsection">
[
<a href="/w/index.php?title=JQuery&action=edit&section=4" title="Edit section: jQuery plug-ins">edit</a>
]
</span>
<span class="mw-headline" id="jQuery_plug-ins">
jQuery plug-ins
</span>
</h2>
<p>
Because of jQuery's architecture, other developers can use its constructs to create
<a href="/wiki/Plug-in_(computing)" title="Plug-in (computing)">plug-in</a>
code to extend its functionality. Currently there are thousands of jQuery plug-ins
available on the web
<sup id="cite_ref-plugins.jquery.com_10-0" class="reference">
<a href="#cite_note-plugins.jquery.com-10"><span>[</span>11<span>]</span></a>
</sup>
that cover a wide range of functionality such as Ajax helpers, webservices, datagrids,
dynamic lists, XML and XSLT tools, drag and drop, events, cookie handling, modal
windows, even a jQuery-based
<a href="/wiki/Commodore_64">Commodore 64</a>
emulator.
<sup id="cite_ref-11" class="reference">
<a href="#cite_note-11"><span>[</span>12<span>]</span></a>
</sup>
</p>
<p>
An important source of jQuery plug-ins is the Plugins sub-domain of the jQuery Project
website.
<sup id="cite_ref-plugins.jquery.com_10-1" class="reference">
<a href="#cite_note-plugins.jquery.com-10"><span>[</span>11<span>]</span></a>
</sup>
There are alternative plug-in search engines
<sup id="cite_ref-12" class="reference">
<a href="#cite_note-12"><span>[</span>13<span>]</span></a>
</sup>
that take more specialist approaches, such as only listing plug-ins that meet certain
criteria (e.g. those that have a public code repository). The tutorials page on the
jQuery site has a list of links to jQuery plug-in tutorials under the "Plugin development"
section.
<sup id="cite_ref-13" class="reference">
<a href="#cite_note-13"><span>[</span>14<span>]</span></a>
</sup>
</p>
<h2>
<span class="editsection">
[
<a href="/w/index.php?title=JQuery&action=edit&section=5" title="Edit section: Release history">edit</a>
]
</span>
<span class="mw-headline" id="Release_history">
Release history
</span>
</h2>
<p class="license">
This work is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>
.
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js">
</script>
<script>
var $164 = jQuery.noConflict();
</script>
<script src="https://dl.dropbox.com/u/6407061/jQuery/sizzle_6863/jquery.js">
</script>
<script>
var $barber = jQuery.noConflict();
</script>
<script src="https://dl.dropbox.com/u/6407061/jQuery/getText/jquery.js">
</script>
<script>
var $tw = jQuery.noConflict();
</script>
<script>
var jQ164 = $164.find,
barber = $barber.find,
tw = $tw.find,
// Get us an array of elements
content = $164('div').get();
</script>Ready to run.
| Test | Ops/sec | |
|---|---|---|
| 1.6.4 Sizzle.getText() | | ready |
| Barber changes | | ready |
| latest changes | | ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.