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 相关文章推荐
JavaScript触发器详解
Mar 10 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
学习javascript文件加载优化
Feb 19 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
p5.js临摹旋转爱心
Oct 23 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
世界收音机发展史
2021/03/01 无线电
php 生成WML页面方法详解
2009/08/09 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
用console.table()调试javascript
2014/09/04 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python自定义解析简单xml格式文件的方法
2015/05/11 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
python实现自主查询实时天气
2018/06/22 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
Python高并发和多线程有什么关系
2020/11/14 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
小学运动会班级口号
2014/06/09 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
八年级作文之感恩
2019/11/22 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL