Some notices should not do with Jquery

Introduction

jQuery is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation. And jQuery have a lot of advantage such as:

• Ease of use
• Large library
• Strong opensource community.
• Great documentation and tutorials
• Ajax support

Even it have so much advantages but it still have some disadvantages that we need to notice. And according to my work experience workong with project and reading some doc on line there are some points should not do when using Jquery:

Do not use document ready

Instead of $ (document) .ready (function () {// Do something}); You can place your script at the bottom of the page. HTML5 will synchronize attributes, scripts are loaded and synchronized by the web browser, so if we remove the top script will delay the DOM load and make the loading of our site slower.

Limit use of loop

There is nothing wrong with that. But for jQuery support us for using with easy way, so we need to use it For example, we have an array that filters out the rank of <= 5 Normally we will do this.

(function($) {

  var list = [
    { firstName: "abc", rank: 1 },
    { firstName: "ss", rank: 2 },
    { firstName: "a", rank: 3 },
    { firstName: "nsdl", rank: 4 },
    { firstName: "sds", rank: 5 },
    { firstName: "aass", rank: 6 },
    { firstName: "sddd", rank: 7 }
  ]

  // iterate through the cast and find zack and kelly

  var topFive = [];
  $.each(list function(idx, item) {
    if ( item.rank <= 5) {
      topFive.push(actor);
    }
  });

  console.log(topFive);

}(jQuery));

But we can write with short way like this:

(function($) {

   var list = [
     { firstName: "abc", rank: 1 },
    { firstName: "ss", rank: 2 },
    { firstName: "a", rank: 3 },
    { firstName: "nsdl", rank: 4 },
    { firstName: "sds", rank: 5 },
    { firstName: "aass", rank: 6 },
    { firstName: "sddd", rank: 7 }
  ]


  var topFive = $.map(list, function(item, idx) {
     if ( item.rank <= 5) {
      return item;
    }
  });

  console.log(topFive);

}(jQuery));

Now look at the code it is neatly tidy. If you just do not edit, you can use $ .Grep

var topFive = $.grep(list, function(item) {
    if ( item.rank <= 5) {
       return item;
    }
});

Do not use this

It's not a big deal or a problem, but using this in the case of complex code, we can minimize the confusion, instead of using this we assign it to a variable.

var obj = this;

I only mentioned a few points, but of course very much but not qualified (time, money ... haha) to raise. Hope everyone adds to improve their skills.