I have a HTML list of about 500 items and a "filter" box above it. I started by using jQuery to filter the list when I typed a letter (timing code added later): $('#filter').keyup( function() { var jqStart = (new Date).getTime(); var search = $(this).val().toLowerCase(); var $list = $('ul.ablist > li'); $list.each( function() { if ( $(this).text().toLowerCase().indexOf(search) === -1 ) $(this).hide(); else $(this).show(); } ); console.log('Time: ' + ((new Date).getTime() - jqStart)); } ); However, there was a couple of seconds delay after typing each letter (particularly the first letter). So I thought it may be slightly quicker if I used plain Javascript (I read recently that jQuery's each function is particularly slow). Here's my JS equivalent: document.getElementById('filter').addEventListener( 'keyup', function () { var jsStart = (new Date).getTime()...
It is syntactic sugar. It is not specific only to jQuery, other libraries use it as well.
ReplyDeleteYou can look for a full details article about the use of dollar sign in Javascript here.
The JQuery object :)
ReplyDeleteFrom the JQuery doc:
By default, jQuery uses "$" as a shortcut for "jQuery"
So, using $("#id") or jQuery("#id") is the same
As said in other answers $ is a shortcut to the jQuery function.
ReplyDeleteSome JavaScript libraries uses $ too (example: prototype). To avoid conflict with those other libraries jQuery provides jQuery.noConflict() function. Calling this function the control of the $ variable goes back to the other library that first implemented it. Doing this to use jQuery you can't do this $('div.someClass') anymore, instead jQuery('div.someClass').
Alternatively can do this:
jQuery.noConflict();
jQuery.ready(function($) {
// use $ for jQuery
}
//use $ for the other library
When writing plugins to avoid problems with the usage of noConflict you can pass 'jQuery' to a function:
function($) {
//use $ writing your plugin
}(jQuery)