×
Get in touch

Get in touch with Binary

Binary Studio website uses cookies to enhance your browsing experience. By continuing to use our site, you agree to our Privacy Policy and use of cookies.

Learn more more arrow
Agree
Binary Studio 31.10.2011

Useful Tips on jQuery Techniques


1. jQuery Secrets

Sizzle is a JavaScript CSS selector engine. It was the basis of jQuery earlier but now this is a separate project that has no dependencies. Minified version of Sizzle is very small (about 4 KB) so it can be easily embedded into another library or be used when all jQuery functionality is not needed.

There are only few ways to find element in HTML DOM. All high-level selectors invoke one of getElement methods in the end that allows finding element by its name, tag name, identifier or class name. That’s why selector expression should be as specific as possible. Use of identifiers makes selection task much easier while selecting from a log of elements with the same class leads to complete enumeration. There are some tricks that take into account performance of the specific browser versions but in common case such optimizations are controversial. Important fact about Sizzle engine is that the search result is never cached.

CSS hooks provide a way to define functions for getting and settings CSS properties. They can be used for normalizing features and such as border radius, box shadow or gradient. Common property will be automatically transformed into browser-specific if it is necessary. In the worst case property will not be applied. There is a plugin named jquery-cssHooks that includes predefined collection of common CSS hooks.

As well as many other frameworks in different languages, jQuery allows to associate arbitrary data with HTML element. The data method gets or stores value by key. Value can be simple string, object or even function. jQuery stores associated data in its cache. That’s why other library functions are aware about data and can decrease memory leaks after DOM change. Custom HTML 5 data-attribute value acts as initial data value and will be automatically converted into JavaScript object (unlike attr method that always returns a string). Complex object is described in JSON standard in curly brackets.

jQuery plugin declaration is a common way for extensibility and code separation. Plugin method becomes available for any element object and element context is passed to plugin code. It allows applying plugin method to set of DOM elements. One more approach in separation of server- and client-side development is using Fixture plugin. Often client and server code is written by different team members. Code that contains AJAX requests cannot be tested while server code is in development. Fixtures operate like fake objects. They catch requests and return fake results after delay. Fixtures support predefined results, regular expression, echo and so on. Real requests are not performed. Important thing is that no code changes are required.

There are a lot of methods for interacting with DOM: inserting and removing elements. They are very straightforward and don’t require any explanation. There’re two sets of methods for different directions, for example, append and appendTo, insertAfter and after, replaceAll and replaceWith. These pairs are equivalent except placement of the content and target. Convenient wrap function wraps HTML snippet around each element in the set.

In some cases forced context should be set. Proxy method creates wrapper for any function and this wrapper always has specified context.

 

Sergey B., .NET developer

Binary Studio

 

2. jQuery: Events, Animation, Ajax

At recent .NET Team Meeting I have made a presentation dedicated to some of in-depth jQuery features related to events, animation and ajax.

Next items were discussed under “Events” subtopic:

  • handling of only first event;
  • binding of multiple events to one handler;
  • features of .live() method (understanding of overall mechanism and context property);
  • providing arguments for handler while triggering of custom events;
  • using of result of previously executed handler for given event;
  • peculiarities of .remove()/.detach() methods;
  • specifics of using of event namespaces.

“Animation” subtopic:

  • use cases of .stop() method;
  • purpose of .queue() method.

“Ajax” subtopic:

  • use cases of .ajaxStart() and similar methods of jQuery;
  • controlling the mechanism of jQuery’s ajax by using .ajaxPrefilter() and .ajaxTransport().

Each example has corresponding snippet of code hosted on jsFiddler, so you can see it in action.

Presentation is available at http://www.slideshare.net/presentr/jquery-events-animation-ajax.

Thanks for attention!

 

Constantin T., .NET/JavaScript developer

Binary Studio