继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Jquery实现的高亮效果代码分享

largeQ
关注TA
已关注
手记 953
粉丝 92
获赞 585

 分享一段Jquery实现的一种常用高亮效果代码:


<html>
<head>
   <title>jquery</title>
   <style>
       body
       {
           font-size: 12px;
       }
       li
       {
           list-style: none;
           height: 34px;
           padding-top: 5px;
       }
   </style>

   <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>

   <script type="text/javascript">
$(document).ready(function(){    
   var oInputs = $("ul.demo input");

   oInputs.each(function(i){
       oInputs.eq(i).focus(function(){
           oInputs.eq(i).parent().css("background-color","ccf");
       }).blur(function(){
           oInputs.parent().css("background-color","");
       })
    });
   
   
   oInputs.focus(function(){
       $(this).css("background-color","ff9").blur(function(){
           $(this).css("background-color","");
       });
   })
})
   </script>

</head>
<body>
   <ul class="demo">
       <li>
           <h5>
               注册选项</h5>
       </li>
       <li>用户名:<input type="text" value="" id="name" style="width: 200px" /></li>
       <li>密 码:<input type="password" value="" id="pass" style="width: 200px" /></li>
       <li>爱 好:<input type="checkbox" value="" />篮球&nbsp;<input type="checkbox" value="" />足球&nbsp;<input
           type="checkbox" value="" />音乐</li>
   </ul>
   </script>
</body>
</html>


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP