Your location:Tech News>News>Script>15 worth of jQuery developers focus on developing the skills and experience summary [classic collection]

Latest News

15 worth of jQuery developers focus on developing the skills and experience summary [classic collection]



  This article summarizes the 15 described worthy of attention jQuery developers to develop skills and experience.Very insightful and practical!Share to you for your reference, as follows:

  In this article, we will introduce 15 to make your jQuery more effective techniques, most on performance, I hope that we can love!

  1. Try to use the latest version of the jQuery library

  jQuery project uses a lot of innovation.The best way to improve performance is to use the latest jQuery version.Each new version contains optimization bug fixes.For us, the only thing to do was to modify tag, why not do it?

  We can also use the free CDN services, for example, Google to store the jQuery library.





  2. Using a simple selector

  Until recently, return DOM elements are parsed way selector string, JavaScript and cycle built javascript API, e.g., incorporating the use of three ways getElementbyId (), getElementsByTagName (), getElementsByClassName ().However, modern browsers are beginning to support querySelectorAll (), this method can understand CSS Finder, and can bring significant performance improvements.

  However, we should avoid using complex selectors return element.Not to mention many users are using older versions of the browser, forced to deal with jQuery DOM tree.This approach is very slow.

  $ ( ''Li [data-selected = "true"] a'') // Fancy, but slow

  $ ( ''Li.selected a '') // Better

  $ ( ''# Elem'') // Best

  Select id is the fastest way.If you need to use the class name, then you''d better bring the tag name, which will be faster.Especially on older browsers and mobile devices.

  DOM javascript application access is the slowest way, so use as little as possible.Use variables to the selectors, it will use cache to store.Better Performance.

  var buttons = $ ( ''# navigation a.button '');

  // Some prefer prefixing their jQuery variables with $:

  var $ buttons = $ ( ''# navigation a.button '');

  Another interesting jQuery do is give you a lot of extra convenience selector, for example,: visible,: hidden,: animated there are other, these are not legitimate CSS3 selectors.The result is that you use these libraries can not effectively use querySelectorAll () method.To compensate for this problem, you need to select the elements, then filtered, as follows:

  $ ( ''A.button: animated ''); // Does not use querySelectorAll ()

  $ ( ''A.button '').filter ( '': animated''); // Uses it

  3. An array of ways to use jQuery object

  Run selector result is a jQuery object.However, jQuery library makes you feel like you''re using a defined length and array index.

  // Selecting all the navigation buttons:

  var buttons = $ ( ''# navigation a.button '');

  // We can loop though the collection:

  for (var i = 0; i

  console.log (buttons [i]); // A DOM element, not a jQuery object


  // We can even slice it:

  var firstFour = buttons.slice (0,4);

  If performance is your concern, then use a simple for or while loop to process, rather than the $.each (), so make your code faster.

  Check the length is also a way of checking whether your collection contains elements.

  if (buttons) {// This is always true

  // Do something


  if (buttons.length) {// True only if buttons contains elements

  // Do something


  4. Select Properties

  jQuery provides a property that shows a chain used to make the selector.

  $ ( ''# Container li: first-child'').selector

  // #container li: first-child

  $ ( ''# Container li'').filter ( '': first-child'').selector

  // #container li.filter (: first-child)

  While the above example for the same element selector is completely different.The second fact is illegal, you can not use it to create an object.Only to display the collection filter is used to reduce the.

  5. Create an empty jQuery object

  Create a new jQuery space can greatly reduce overhead.Sometimes, you may need to create an empty object, and then use the add () method to add objects.

  var container = $ ([]);

  container.add (another_element);

  This is also quickEach based approach, you can use this instead of a faster way each ().

  6. Choose a random element

  I mentioned above, jQuery adding its own filter selector.In addition to the library, you can add your own filters.Just add a new method to the $.expr [ '':''] Object.Is a great way to use Waldek Mastykarz mentioned in the blog: create a selector to return random elements.You can modify the code below:

  (Function ($) {

  var random = 0;

  $.expr [ '':''].random = function (a, i, m, r) {

  if (i == 0) {

  random = Math.floor (Math.random () * r.length);


  return i == random;


  }) (JQuery);

  // This is how you use it:

  $ ( ''Li: random'').addClass ( ''glow'');

  7. Use CSS Hooks

  CSS hooks API developer to provide a method and obtained values set specific CSS.Use it, you can hide the browser-specific implementation and use of a unified interface to access specific attributes.

  $.cssHooks [ ''borderRadius''] = {

  get: function (elem, computed, extra) {

  // Depending on the browser, read the value of

  // -moz-border-radius, -webkit-border-radius or border-radius


  set: function (elem, value) {

  // Set the appropriate CSS3 property



  // Use it without worrying which property the browser actually understands:

  $ ( ''# Rect'').css ( ''borderRadius'', 5);

  Better that people have created a class library support CSS hooks

  8. Use custom delete method

  You may have heard of jQuery remove the plug, it can allow you to add special effects to your animation.The only drawback is that you need to load additional visitors a javascript file.Fortunately, you can simply copy from the plug-in effect, and added to jQuery.easing the object, as follows:

  $.easing.easeInOutQuad = function (x, t, b, c, d) {

  if ((t / = d / 2) < 1) return c/2*t*t + b;

  return -c / 2 * ((--t) * (t-2) - 1) + b;


  // To use it:

  $ ( ''# Elem'').animate ({width: 200}, ''slow'', ''easeInOutQuad'');

  9. $.proxy ()

  One of the disadvantages of using the callback method is executed when the class library method, context is provided to another element, for example:


  Execute the code below:

  $ ( ''# Panel'').fadeIn (function () {

  // this points to #panel

  $ ( ''# Panel button'').click (function () {

  // this points to the button

  $ (This).fadeOut ();



  You will encounter problems, button will disappear, not the panel.Use $.proxy method, you can write code like this:

  $ ( ''# Panel'').fadeIn (function () {

  // Using $.proxy to bind this:

  $ ( ''# Panel button'').click ($.proxy (function () {

  // this points to #panel

  $ (This).fadeOut ();

  }, This));


  Such was the correct execution.$.proxy method accepts two parameters, your initial approach, as well as context.Here to read more $.proxy in the docs..

  10. Determine whether the page is too complex

  A very simple truth about complex pages load more slowly.You can use the code below to check your page content:

  console.log ($ ( ''*'').length);

  It returns a value smaller than the code page load faster.You may wish to consider deleting unwanted extra elements to optimize your code

  11. Your code into jQuery plugin

  If you have to spend some time to develop some jQuery code, then you can consider the code will become plug-in.This will help you reuse code, and can effectively help you organize your code.Creating a plug-in code is as follows:

  (Function ($) {

  $.fn.yourPluginName = function () {

  // Your code goes here

  return this;


  }) (JQuery);

  You can read more here Development Tutorials.

  12. Set the default global AJAX

  If you develop ajax program, then you definitely need to inform the user display "Loading" and the like, ajax underway, we can use the following code unified management, as follows:

  // ajaxSetup is useful for setting general defaults:

  $.ajaxSetup ({

  url: ''/ ajax /'',

  dataType: ''json''


  $.ajaxStart (function () {

  showIndicator ();

  disableButtons ();


  $.ajaxComplete (function () {

  hideIndicator ();

  enableButtons ();


  13. Use delay in the animation () method

  Animation chain is the power of jQuery.But there is one overlooked detail is that you can add delays between animations, as follows:

  // This is wrong:

  $ ( ''# Elem'').animate ({width: 200}, function () {

  setTimeout (function () {

  $ ( ''# Elem'').animate ({marginTop: 100});

  }, 2000);


  // Do it like this:

  $ ( ''# Elem'').animate ({width: 200}).delay (2000).animate ({marginTop: 100});

  jQuery animation helped us a great favor, or else we have to deal with their own a bunch of details, setting timtout, handling property value, the tracking animation changes, etc..

  14. Rational use of HTML5 Data property

  The HTML5 data attributes can help us insert data.Particularly suitable front and rear ends of a data exchange.jQuery recently published data () method, can effectively utilize HTML5 attributes to automatically obtain data.Here is an example:


  data-options = ''''>


  To access the data you need to call the following code:

  $ ( "# D1").data ( "role"); // "page"

  $ ( "# D1").data ( "lastValue"); // 43

  $ ( "# D1").data ( "hidden"); // true;

  $ ( "# D1").data ( "options").name; // "John";

  If you want to see practical examples, please refer to this tutorial:

  HTML5 + jQuery plugin Quicksand achieve cool StarCraft 2 classification arms showing the effect: https: // / article / 85050.htm

  15. Local storage and jQuery

  Local storage is a super simple API.Simply add your data to the localStorage global properties:

  localStorage.someData = "This is going to be saved across page refreshes and browser restarts";

  But for older browsers, this is not good news.Because they do not support.But we can use jQuery plug-in to provide support once the local storage does not work then.This embodiment may enable local storage work.

  These are the 15 we introduce the jQuery development skills.In this paper, we hope the jQuery programming help.

  More about jQuery content Interested readers can view the site topic: "jquery Ajax usage in summary", "jQuery table (table) operating skills summary", "jQuery drag effects and skills summary", "jQuery extension skills summary "," jQuery common classic effects summary "," jQuery animation and special effects usage summary "," jquery selector usage summary "and" jQuery plug-ins and common usage summary "

  In this paper, we hope the jQuery programming help.

  You may also be interested in the article: simple heart-shaped point concerns the effect of praise jquery jquery achieve attention jquery skills to improve skills (front-end development will Studies) jQuery attention and achieve click Cancel function

Recommend article

Relate article