jQuery | chaining（）-yiteyi-C++库

jQuery是一个非常强大的JavaScript框架。有了jQuery，我们可以使用do-chaining，这意味着在单个元素上的单个语句中将多个方法链接在一起。我们曾经一次只使用一条语句，但现在使用链式方法，我们可以绑定多个方法以缩短代码。这样，浏览器就不必多次找到同一个元素。

null

优势： 在jQuery中使用方法链接时，它可以确保不需要多次使用同一个选择器。过度使用选择器会严重降低代码的速度，因为每次调用选择器时，都会迫使浏览器去寻找它。通过组合或“链接”多种方法，您可以大大减少浏览器查找相同元素的次数，而无需设置任何变量。

使用JavaScript和jQuery实现chaining（），以便更好地理解： 代码#1： 使用上下滑动法链接功能-

                     <!DOCTYPE html>                   
                     <html>                   
                             
                     <head>                   
                                         <script src=                               "                   
                                 https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                      "                               >                   
                                         </script>                   
                     </head>                   
                             
                     <body>                   
                                         <p id=                               "para"                               >Chaining method                               in                               jQuery</p>                   
                             
                                         <button>Click me</button>                   
                             
                                         <script type=                               "text/javascript"                               >                   
                                         $(document).ready(                               function                               () {                   
                                         $(                               "button"                               ).click(                               function                               () {                   
                             
                                         //assigning the color blue                   
                                         $(                               "#para"                               ).css(                               "color"                               ,                               "blue"                               )                   
                                         //using slide up method                   
                                         .slideUp(2000)                   
                                         //using slide down method                   
                                         .slideDown(2000).                   
                                         slideUp(2000).                   
                                         slideDown(4000);                   
                                         });                   
                                         });                   
                                         </script>                   
                     </body>                   
                             
                     </html>                   

输出： 图片[1]-jQuery | chaining（）-yiteyi-C++库

代码#2： 使用动画功能在jQuery中实现链接效应-

                     <!DOCTYPE html>                   
                     <                               html                               >                   
                             
                     <                               head                               >                   
                                         <                               script                               src="                   
                                 https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js                      ">                   
                                         </                               script                               >                   
                             
                     </                               head                               >                   
                             
                     <                               body                               >                   
                             
                                         <                               p                               id                               =                               "para"                               >Chaining method in jQuery</                               p                               >                   
                             
                                         <                               button                               >Click me</                               button                               >                   
                             
                                         <                               script                               type                               =                               "text/javascript"                               >                   
                                         $(document).ready(function() {                   
                                         $("button").click(function() {                   
                                         $("#para").css("color", "blue").animate({                   
                                         width: "100%"                   
                                         })                   
                                         //it adds animation to the program by styling it                   
                                         .animate({                   
                                         fontSize: "46px"                   
                                         })                   
                                         .animate({                   
                                         borderWidth: 30                   
                                         });                   
                                         });                   
                                         });                   
                                         </                               script                               >                   
                     </                               body                               >                   
                             
                     </                               html                               >                   

输出： 图片[2]-jQuery | chaining（）-yiteyi-C++库

文章版权归作者所有，未经允许请勿转载。

THE END

Javascript