Jquery code specifications make the Code look better and better. jquery code specifications

Jquery code specifications make the Code look better and better. jquery code specifications

After learning jQuery recently, I feel that jQuery is really good. As he said, I should do less! It feels good to start. However, if you write too much, you will find that this code line can be written so long. And the readability is not good. I am lucky to have bought a book named jQuery. I just sorted it out. In practice, how can we make our jQurey Code look readable and aesthetic. I used a small example in this book. To teach you how to write good food!

I want to present this demo code. Thank you! Hi ~

<! DOCTYPE html> 
Kids shoes. Please refer to this Code
 $(".level1>a").click(function () {  $(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();  return false;  });
Can you understand what is going on at first glance?
Even after several years of development. It cannot be seen at a glance what this line of code is going to do. This is because this line of code is too long. Each read operation starts from the previous series. No aesthetic or readability.
Although jQuery achieves the separation of behavior and content, jQuery code should also have good hierarchy specifications so as to further improve code readability and maintainability.
So the code should write this style
 $(".level1>a").click(function () {  $(this).addClass("current")  .next().show()  .parent().siblings().children("a").removeClass("current")  .next().hide();  return false;  });
Splits the actions executed by each object into a single row. This greatly improves readability.
But do not separate them at will. If you separate them at will, you are better off. So, the following three points are summarized:
1. If the same object does not have more than three operations, you can write a row directly.
  $(this).addClass("current").show();
2. It is recommended to write one operation per row for many operations that agree to the object.
 $(this).addClass("current")  .show()  .fadeTo("mouseover")  .fadeTo("fast",1)  .unbind("click")  .click(function(){  //do something  });
3. for a small number of operations on multiple objects, you can write a row for each object. If child elements are involved, you can consider appropriate indentation, such as the code in the demo.
$(this).addClass("current")  .childer("li").show().end().siblings().removeClass()  .children("a").hide(); 
To add comments to the code;
JQuery is known for its powerful selector. Sometimes it is easy to solve complicated problems with a single row selector, but it is easy to write the following code.
$ ("# Table> tbody> tr: has (td: has (: checkbox: enabled)" ).css ("background", "red ");Haha, can you recognize me at a glance?
When writing an excellent selector, do not forget to add comments to the Code. This is very important, whether it is for future reading, sharing with others, and cooperative development, annotations can achieve good results.
//Note: In the tbody of a table with the id of table, if the checkbox in the column of each row is not disabled, set the background of this row to red.
$ ("# Table> tbody> tr: has (td: has (: checkbox: enabled)" ).css ("background", "red ");
Similar meaningful annotations can cultivate good coding habits and styles and improve development efficiency.
------------------------------------------------------------ Update ---------------------------------------------------------
(1) mutual conversion between jQuery objects and DOM objects
Before converting jQuery objects and DOM objects, define the style of variables. If the obtained object is a jQuery object, add $
For example:
Var $ variable = jQuery object
If the DOM object is obtained;
Var varible = DOM object;
The above are the specifications written by jQuery. I hope that the content in this article will help you in your study or work. I also hope to provide more support to the customer's home!