This post will show you how to check currently loaded jQuery version on the page. This maybe useful in your jQuery plugins, in cases when your code utilizes jQuery version specific methods. Also, when you are writing code that runs in an environment where jQuery is already embedded. For example in open source CMS's like Drupal, Magento Ecommerce, etc.
jQuery keeps track of the current version of the script being used in jQuery.fn.jquery
property. Both major version version 1.x and version 2.x have this property.
// Returns string: "1.10.2"
jQuery.fn.jquery;
// Since jQuery == $, we can use shorthand syntax
$.fn.jquery;
You can look into the jQuery source code and find out that jQuery.fn
is a reference to jQuery.prototype
.
jQuery.fn = jQuery.prototype = {
// The current version of jQuery being used
jquery: version,
...
This means we can use alternative method to get current jQuery version like so:
// Alternative method, also returns string
jQuery().jquery;
// or shorthand method
$().jquery
Caveats & notes
I would like to remind you that jQuery must be loaded before you call the code above. Otherwise, it will throw an error: ReferenceError: jQuery is not defined
or TypeError: $(...) is null
. To avoid it, you can check for existance of jQuery first.
if (window.jQuery) {
jQuery().jquery;
}
If jQuery is not loaded, we can load it dynamically from an alternative location.
if (!window.jQuery) {
var jq = document.createElement('script');
jq.type = 'text/javascript';
jq.src = '/path-to-your/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(jq);
}
Also, learn how to check loaded jQuery UI version.
i like the first one
ReplyDeleteYes, the first is more coder friendly =)
ReplyDeleteThe second command returns the wrong jQuery version for me, the first one works fine.
ReplyDeleteThanks!
the first one I think is deprecated
ReplyDeletethanks
ReplyDeletewhat is the difference between these two ?
ReplyDeletesometimes the 1st one works, sometimes it does not.
where do I paste this code?
ReplyDeleteThanks,
ReplyDeleteSecond one worked for me
@nanda thats bullshit. These two will return the exxact same thing, as long as jQuery and $ are equivalent. In other words:
ReplyDelete$().version and $.fn.version are the exact same thing because fn is just an alies for prototype in jQuery.
jQuery().version === jQuery.fn.version
$().version === $.fn.version
if $ === jQuery then $().version === jQuery.fn.version
@eveevans that of course means either are both deprecated, or none of them. And in fact, it is *NOT* deprecated: http://api.jquery.com/jquery-2/ (written while jQuery 1.7.1 was up2date)
by some reason the first method didn't work for me saying that
ReplyDeleteTypeError: $() is undefined
$().jquery;
???
eveevans: Both approaches are acceptable. To clarify, .jquery is a "property assigned to the jQuery prototype, commonly referred to by its alias $.fn"[1] that provides a string with the jQuery version number. The $ function is a factory method for the jQuery object[2]. The object $() inherits the .jquery property from the jQuery prototype object.
ReplyDeleteNanda: If you're getting different versions using both approaches, then one possibility is that you're using more than one version of jQuery. This can happen if you're working on a project using several different jQuery plugins (as some package jQuery along with the plugin code) with possibly built-in jQuery support (e.g., in content management systems such as WordPress or Drupal).
References:
[1] http://api.jquery.com/jquery-2/
[2] http://en.wikipedia.org/wiki/JQuery