Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what is the method of code specification in jquery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The code is as follows:

Menu bar * {margin: 0; padding: 0;} .box {width: 400px; height: 280px; background-color: red; margin: 50px auto; border: 1px solid # 000;} .box .menu {width: 100%; height: 100%; background-color: gold; list-style: none;} .box .menu > .level1 {width: 100%; height: auto; line-height: 40px; list-style: none } .box .menu > .level1 > a.current {background-color: green; color: # 0a0a0a; text-decoration: none;} .box .menu > .level1 > a {display: inline-block; background-color: gray; width: 100%; text-align: center; text-decoration: none;} .box > .level1 > .level2 {width: 100%; height: 160px; background-color: white; display: none; float: left } .box .menu > .level1: nth-of-type (1) > .level2 {display: block;} .box .menu > .level1 > .level2 li {width: 100%; height: 40px; list-style: none; background-color: gainsboro; text-align: center } $(function () {(".level1 > a") .click (function () {$(this) .addClass ("current"). Next (). Show (). Parent (). Siblings (). Children ("a"). RemoveClass ("current"). Next (). Hide (); return false;});}) Shirt short-sleeved shirt sweater cardigan trousers short-sleeved shirt shirt shirt

Children's shoes. Please look at this code.

$(".level1 > a") .click (function () {$(this) .addClass ("current"). Next (). Show (). Parent (). Siblings (). Children ("a"). RemoveClass ("current"). Next (). Hide (); return false;})

Can you see what's going on at first glance?

Even a god who has been developed for a few years. You can't tell at a glance what this line of code is going to do. Because this line of code is too long. Every time you read it, you have to tell yourself what's in front of you. No sense of beauty, reading.

Although jQuery separates behavior from content, jQuery code should also have a good hierarchical machine specification in order to further improve the readability and maintainability of the code.

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;})

Each action performed by the object is divided into a separate line. In this way, readability is greatly improved.

But do not divide at will, divide at will, then you might as well divide. So to sum up, the following three points

1. If there are no more than 3 operations on the same object, it can be written on a single line.

$(this) .addClass ("current") .show ()

two。 For more action suggestions for agree objects, write one action per line

$(this) .addClass ("current") .show () .fadeTo ("mouseover") .fadeTo ("fast", 1) .unbind ("click") .click (function () {/ / do something})

3. For small operations on multiple objects, you can write one line for each object, and if child elements are involved, consider appropriate indentation, such as the code in demo

$(this) .addClass ("current") .childer ("li"). Show (). End (). Siblings (). RemoveClass () .children ("a") .childer ()

It is also important to add comments to the code.

JQuery is known for its powerful selector. Sometimes complex problems can be easily solved with an one-line selector, but it is easy to write the following code

$("# table > tbody > tr:has (td:has (: checkbox:enabled))"). Css ("background", "red"); , can you recognize me at a glance?

When writing an excellent selector, don't forget to comment this piece of code, which is very important. Whether you read it yourself in the future or share it with others and develop it cooperatively, comments will have a good effect.

/ / comment: in the tbody of a table whose id is table, if the checkbox in a 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")

Through similar meaningful comments, we can cultivate good coding habits and styles and improve development efficiency.

Mutual conversion between jQuery object and DOM object

Before the jQuery object and DOM object convert to each other, agree on the style of defining the variable. If the object you get is a jQuery object, add $to the variable.

For example:

Var $variable = jQuery object

If the acquired DOM object

Var varible = DOM object.

This is the end of the content of "what is the method of the code specification in jquery". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.