原理是建立2个input，一个type是text，一个type是password。在点击按钮时，这两input个的显示状态与val（）的值在切换。
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>案例测试</title>
<link rel="stylesheet" href="css/all.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/all.js"></script> </head> <body>
<!-- 密码的显示与隐藏 -->
<div class="code">
<span>密码：</span><input type="password" /><input type="text" class="hide" /><a>SHOW</a>
</div>
<!-- End 密码的显示与隐藏 -->
</body> </html>
css：
/* 公共样式 */
* { padding:; margin:; list-style: none; }
.hide { display: none; } /* 密码的显示与隐藏 */
.code { margin: 50px 0 0 100px; }
.code input { margin: 0 10px; padding: 10px 0 10px 10px; height: 20px; line-height: 20px; }
.code a { display: inline-block; padding: 0 14px; line-height: 30px; background: #ddf; cursor: pointer; }
js：
$(function(){
//密码的显示与隐藏
//alert('lll');
$('.code a').on('click',function(){
if($(this).html() == 'SHOW'){
$(this).html('HIDE')
.siblings('input[type=text]').css('display','inline-block')
.siblings('input[type=password]').css('display','none')
;
$(this).siblings('input[type=text]').val($(this).siblings('input[type=password]').val());
}else{
$(this).html('SHOW')
.siblings('input[type=text]').css('display','none')
.siblings('input[type=password]').css('display','inline-block')
;
$(this).siblings('input[type=password]').val($(this).siblings('input[type=text]').val());
}
})
})
js也可以换成下面的代码，只不过是换了一个函数：当a被点击时，在两个function之间进行切换。
$('.code a').toggle(function(){
$(this).html('HIDE')
.siblings('input[type=text]').css('display','inline-block')
.siblings('input[type=password]').css('display','none')
;
$(this).siblings('input[type=text]').val($(this).siblings('input[type=password]').val());
},function(){
$(this).html('SHOW')
.siblings('input[type=text]').css('display','none')
.siblings('input[type=password]').css('display','inline-block')
;
$(this).siblings('input[type=password]').val($(this).siblings('input[type=text]').val());
})