Home思洋影视事业部网站建设知识库
0 Comments

jQuery链式语法

发布于：2013-05-28  |   作者：广州网站建设  |   已聚集：人围观
jQuery链式语法

jQuery的代码是非常优雅的，也是非常灵巧的。它允许用户连续设计各种行为，从而实现按人的惯性思维进行快速开发。

例如，在下面这个示例中，仅写了两行脚本，就实现了复杂的页面交互效果，如图1.12所示。第一行代码使用jQuery构造器函数($())构建4个按钮，并把它们附加到文档中。第二行代码是一个连续的行为动作，分别选中这四个按钮并为它们绑定不同的事件处理函数。

广州网站建设,网站建设,广州网页设计,广州网站设计
  1. <style type="text/css"> 
  2. .panel {  
  3.     padding: 60px;  
  4.     background-color: red;  
  5.     color: #FFFFFF;  
  6.     font-size:50px;  
  7.     font-weight: bold;  
  8.     width: 600px;  
  9.     text-align:center;  
  10. }  
  11. </style> 
  12. <script src="images/jquery-1.3.2.js" type=" text/javascript"></script> 
  13. <script type="text/javascript" > 
  14. $(function(){  
  15.     //第一行代码，在文档中添加四个按钮  
  16.     $('<input type="button" value="click me"/ ><input type="button" value="triggle click me"/> <input type="button" value="detach handler"/><input  type="button" value="show/hide text"/>').appendTo($('body'));  
  17.     //第二行代码，分别选中四个按钮，并为它们绑定不同的事件处理函数  
  18.     $('input[type="button"]')  
  19.     .eq(0).click(function(){    //找到第一个按钮，并绑定click事件处理函数  
  20.         alert('you clicked me!');  
  21.     }).end().eq(1)    //返回所有按钮，再找到第二个  
  22.     .click(function(){    //为第二个按钮绑定click事件处理函数  
  23.         $('input[type="button"]:eq(0)').trigger('click');  
  24.     }).end().eq(2)     //返回所有按钮，再找到第三个  
  25.     .click(function(){    //为第三个按钮绑定click事件处理函数  
  26.         $('input[type="button"]:eq(0)').unbind('click');  
  27.     }).end().eq(3)     //返回所有按钮，再找到第四个  
  28.     .toggle(function(){    //为第四个按钮绑定toggle事件处理函数  
  29.         $('.panel').hide('slow');  
  30.     }, function(){  
  31.         $('.panel').show('slow');  
  32.     });  
  33. });  
  34. </script> 
  35.  
  36. <div class="panel">welcome to jQuery!</div> 
（点击查看大图）图1.12  jQuery链式语法示例效果图

在上面示例中，通过end()方法取消当前的jQuery对象，返回前面的jQuery对象。这样当匹配某个按钮时，为其绑定事件处理函数，然后调用end()方法，则又返回前面一个jQuery对象，即按钮集合。

链式代码已经成为jQuery 非常流行的一个特点，在使用链条方式编写代码时，可能会用到eq()、filter()的jQuery方法改变链式方法的对象，但是借助jQuery的end() 方法又能够恢复或最初的jQuery对象，从而可以实现继续执行链式操作。注意，有几个jQuery的方法并不返回jQuery 对象，所以链式操作就不能继续下去，如get() 就不能像eq() 那样使用。

链式语法是一种比较时尚的编程方法，但是在使用该种方法时，为了方便阅读，读者应该注意以下几个问题。

第一，如果在同一个jQuery对象上执行不超过3个方法，则可以在同一行内书写。例如，下面一行代码选择第一个按钮，修改它的名称，并为其附加一个类。

广州网站建设,网站建设,广州网页设计,广州网站设计
  1. $('input[type="button"]').eq(0).val("修改按钮名称").addClass("red"); 

第二，如果在同一个jQuery对象上执行很多操作，则应该分行进行书写，这样方便阅读和修改。

第三，对于多个对象执行少量的操作，则可以为每一个对象书写一行代码。如果涉及子元素操作，可以考虑使用缩进方法进行设计，这样就能够区分层次。例如，针对上面示例，我们可以这样进行缩进显示。

广州网站建设,网站建设,广州网页设计,广州网站设计
  1. $('input[type="button"]')  
  2.     .eq(0).click(function(){  
  3.         alert('you clicked me!');  
  4.     }) 

第四，如果对于多个对象执行很多连续的操作，则可以考虑结合上面几种方法进行设计。

标签：
飞机