在进行项目开发的时候，登录注册页面往往是在全站通用的，直接放到页面上引入，会使得HTML的DOM结构变得笔记多，封装成JS字符串又不利于修改调整，可以考虑使用异步加载HTML，简单示例：
login.html
<div class="login"> <h3>登录</h3> <div><input type="text" class="name" value="张三" placeholder="您的姓名"></div> <div><input type="text" class="phone" value="18314416390" placeholder="您的电话"></div> <div><button class="sub">提交</button></div> </div>
点击异步加载login.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script> <style type="text/css"> *{margin: 0; margin: 0;} .login{width: 400px; margin: 0px auto;} .login h3{margin-bottom: 20px;} .login input{height: 30px; line-height: 30px; margin-bottom: 20px;} .login button{width: 100px; height: 30px; line-height: 30px; text-align: center;} </style> </head> <body> <div class="top"><button id="btn">登录</button></div> <div id="login" class="login"></div> </body> <script type="text/javascript"> $("#btn").click(function(){ $("#login").load("login.html"); }); $('.sub').live('click',function(){ console.log($('.name').val()); console.log($('.phone').val()); }); </script> </html>