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 相关文章推荐
js对象数组按属性快速排序
Jan 31 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
基于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
php中session退出登陆问题
2014/02/27 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
php实现评论回复删除功能
2017/05/23 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
python调用shell的方法
2013/11/20 Python
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python编写弹球游戏的实现代码
2018/03/12 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
应届电子商务毕业自荐书范文
2014/02/11 职场文书
个人向公司借款协议书
2014/10/09 职场文书
银行贷款收入证明
2014/10/17 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
服务行业标语口号
2015/12/26 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js