<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .panle { padding: 60px; background-color: red; color: #fff; font-size: 50px; font-weight: bold; width: 600px; text-align: center; } </style> <script src="../jquery.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(){//找到第一个按钮，并绑定click事件处理函数 alert('you clicked me!'); }).end().eq(1) //返回所有按钮，再找到第二个 .click(function(){ //为第二个按钮绑定click事件处理函数 $('input[type="button"]:eq(0)').trigger('click'); }).end().eq(2) //返回所有按钮，再找到第三个 .click(function(){ //为第三个按钮绑定click事件处理函数 $('input[type="button"]:eq(0)').unbind('click'); }).end().eq(3) //返回所有按钮，再找到第四个 .toggle(function(){ //为第四个按钮绑定toggle事件处理函数 $('.panel').hide('slow'); },function(){ $('.panel').show('slow'); }); }); </script> </head> <body> <div class="panel">welcome to jquery!</div> </body> </html>