jQuery另一個很令人惬意的地方是,一般的代碼都是一行一行寫,jQuery的代碼可以一串一串寫。
這一點,在前面的文章中已經介紹
過了。
直接來一個Demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html XMLns="http://www.w3.org/1999/xHtml"> <head> <title>chainning code</title> <script src="../scripts/jquery-1.2.3.intellisense.JS" type="text/Javascript"></script> <script type="text/Javascript"> $(function(){ //添加四個按鈕 $('<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')); //找出所有按鈕 $('input[type="button"]') .eq(0)//找到第一個按鈕 .click(function(){ alert('you clicked me!'); }) .end().eq(1)//返回所有按鈕,再找到第二個 .click(function(){ $('input[type="button"]:eq(0)').trigger('click'); }) .end().eq (2)//返回所有按鈕,再找到第三個 .click(function(){ $('input[type="button"]:eq(0)').unbind('click'); }) .end().eq(3)//返回所有按鈕,再找到第四個 .toggle(function(){ $('.panel').hide('slow'); },function(){ $('.panel').show('slow'); }); }); </script> <style type="text/CSS"> .panel { padding: 20px; background-color: #000066; color: #FFFFFF; font- weight: bold; width: 200px; height: 50px; } </style> </head> <body> <div class="panel">welcome to jQuery!</div> </body> </Html>
現在,鏈式代碼已經成為jQuery非常流行的一個特點了,在使用鏈條方式寫代碼時,可能會用到eq()/filter()……(reference:
href="http://docs.jquery.com/Traversing">http://docs.jquery.com/Traversing)等方法變化jQuery對象的對應范圍,然後,又可以用end()函數將范圍復原到原來的狀況。
需要注意的是,
有幾個函數並不返回jQuery對象,所以鏈條就不能繼續下去,比如get()就不能像eq()那樣用。