Jquery实现的一种常用高亮效果示例代码


Posted in Javascript onJanuary 28, 2014

如下所示:

<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="" />篮球 <input type="checkbox" value="" />足球 <input
            type="checkbox" value="" />音乐</li>
    </ul>
    </script>
</body>
</html>
Javascript 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
JS之Date对象和获取系统当前时间详解
Jan 13 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
js实现搜索栏效果
Nov 16 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
基于JQuery实现的Select级联
Jan 27 #Javascript
javascript根据像素点取位置示例
Jan 27 #Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 #Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 #Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 #Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 #Javascript
javascript中定义私有方法说明(private method)
Jan 27 #Javascript
You might like
风格模板初级不完全修改教程
2006/10/09 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
微信小程序登录换取token的教程
2018/05/31 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
Php多进程实现代码
2018/05/07 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python aiohttp的使用详解
2019/06/20 Python
python读取ini配置文件过程示范
2019/12/23 Python
python两个list[]相加的实现方法
2020/09/23 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
安全检查与奖惩制度
2014/01/23 职场文书
入职担保书怎么写
2014/05/12 职场文书
物流管理专业求职信
2014/05/29 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
如何写观后感
2015/06/19 职场文书