1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>02-jQuery-动态创建表格案例</title> 6 <script src="jquery-1.11.3.js"></script> 7 <style> 8 .top{ 9 position: fixed; 10 bottom: 40px; 11 right: 10px; 12 cursor:pointer; 13 14 } 15 </style> 16 <script> 17 $(function(){ 18 $('.top').on('click',function(){ 19 $(window).scrollTop(0); 20 $(window).scrollLeft(0); 21 }); 22 $('#J_Box').on('click','h1',function(){ 23 this.innerHTML+='-'; 24 $(this).text($(this).text()+1); 25 }) 26 }) 27 </script> 28 <body> 29 <div class="top" id="top"> 30 <img src="imgs/bk-top3.jpg" alt=""> 31 </div> 32 <div id="J_Box"> 33 <h1>爱情保卫战</h1> 34 <h1>爱情保卫战</h1> 35 <h1>爱情保卫战</h1> 36 <h1>爱情保卫战</h1> 37 <h1>爱情保卫战</h1> 38 <h1>爱情保卫战</h1> 39 <h1>爱情保卫战</h1> 40 <h1>爱情保卫战</h1> 41 <h1>爱情保卫战</h1> 42 <h1>爱情保卫战</h1> 43 <h1>爱情保卫战</h1> 44 <h1>爱情保卫战</h1> 45 <h1>爱情保卫战</h1> 46 <h1>爱情保卫战</h1> 47 <h1>爱情保卫战</h1> 48 <h1>爱情保卫战</h1> 49 <h1>爱情保卫战</h1> 50 <h1>爱情保卫战</h1> 51 <h1>爱情保卫战</h1> 52 <h1>爱情保卫战</h1> 53 <h1>爱情保卫战</h1> 54 <h1>爱情保卫战</h1> 55 <h1>爱情保卫战</h1> 56 <h1>爱情保卫战</h1> 57 <h1>爱情保卫战</h1> 58 <h1>爱情保卫战</h1> 59 <h1>爱情保卫战</h1> 60 <h1>爱情保卫战</h1> 61 <h1>爱情保卫战</h1> 62 <h1>爱情保卫战</h1> 63 <h1>爱情保卫战</h1> 64 <h1>爱情保卫战</h1> 65 <h1>爱情保卫战</h1> 66 <h1>爱情保卫战</h1> 67 <h1>爱情保卫战</h1> 68 <h1>爱情保卫战</h1> 69 <h1>爱情保卫战</h1> 70 <h1>爱情保卫战</h1> 71 <h1>爱情保卫战</h1> 72 <h1>爱情保卫战</h1> 73 <h1>爱情保卫战</h1> 74 <h1>爱情保卫战</h1> 75 <h1>爱情保卫战</h1> 76 <h1>爱情保卫战</h1> 77 <h1>爱情保卫战</h1> 78 <h1>爱情保卫战</h1> 79 <h1>爱情保卫战</h1> 80 </div> 81 </body> 82 </html>