Chain programming style of jquery

2021-06-18 12:44:28

chain programming style jquery

jQuery The chain programming style of

First of all, I will show you through a case jQuery The chain programming style of . Write a page first , Show me a list , The code is as follows ：

<body> <div> <ul class="menu"> <li class="level1"> <a href="#"> Fruits </a> <ul class="level2"> <li><a href="#"> Apple </a></li> <li><a href="#"> Pineapple </a></li> <li><a href="#"> cantaloup </a></li> </ul> </li> <li class="level1"> <a href="#"> Staple food </a> <ul class="level2"> <li><a href="#"> noodles </a></li> <li><a href="#"> Steamed bread </a></li> <li><a href="#"> Steamed Rice </a></li> </ul> </li> </ul> </div></body><script type="text/javascript"> $(function() { $(".level1 > a").click(function() { $(this).addClass("current").next().show().parent.siblings().children("a").removeClass("current").next().hide(); return false; }); });</script>

The effect of code execution is shown in the figure below ：

jQuery The chain programming style of

The extension effect of the above code is through jQuery The chain operation of , All increases current Class operation 、 Method calls to query child elements 、 Animation method calls and so on are all on the same element , So in the beginning, I got a jQuery After the object , All the methods behind 、 Property is called through “.” It can be called continuously , This mode is chain operation .

In order to increase the readability and maintainability of the code , We will modify the above chain code format as follows ：

<script type="text/javascript"> $(function() { $(".level1 > a").click(function() { // Add... To the current element current style $(this).addClass("current") // The next element shows .next().show() // The parent element's sibling element's child element a remove current style .parent.siblings().children("a").removeClass("current") // Their next element is hidden .next().hide(); return false; }); });</script>

After adjusting the standard format , Increased code readability , More convenient for later maintenance .

meanwhile , We're talking about the same jQuery Object is chained , Mainly follow the following 3 Bar format specification .

（1） For the same object, no more than 3 Operations , It can be written in one line , The code is as follows ：

<script type="text/javascript"> $(function() { $("li").show().unbind("click"); });</script>

（2） More operations on the same object , It is recommended to write one operation per line , The code is as follows ：

<script type="text/javascript"> $(function() { $(this).removeClass("mouseout") .addClass("mouseover") .stop() .fadeTo("fast", 0.5) .fadeTo("fast", 1) .unbind("click") .click(function() { ....... }); });</script>

（3） Small operations on multiple objects , You can write one line per object , If it comes to child elements , Consider appropriate indentation . The code is as follows ：

<script type="text/javascript"> $(function() { $(this).addClass("highLight") .children("a").show().end() .siblings().removeClass("highLight") .children("a").hide(); });</script>

That's all about jQuery The chain programming style of .

版权声明

本文为[Simplicity]所创，转载请带上原文链接，感谢

https://qdmana.com/2021/06/20210602145120707r.html

文章推荐