编程 Javascript

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 Prototype对象

Jan 07 Javascript

dojo学习第二天 ajax异步请求之绑定列表

Aug 29 Javascript

JQuery入门——事件切换之toggle()方法应用介绍

Feb 05 Javascript

使用JQUERY进行后台页面布局控制DIV实现左右式

Jan 07 Javascript

JS+CSS简单树形菜单实现方法

Sep 12 Javascript

JS实现动态生成表格并提交表格数据向后端

Nov 25 Javascript

jQuery实现简单倒计时功能的方法

Jul 04 Javascript

微信小程序实战之运维小项目

Jan 17 Javascript

javascript 中设置window.location.href跳转无效问题解决办法

Feb 09 Javascript

JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法

Sep 21 Javascript

JavaScript实现简单贪吃蛇效果

Mar 09 Javascript

js中位数不足自动补位扩展padLeft、padRight实现代码

Apr 06 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

DC宇宙的第一个英雄，堪称动漫史鼻祖，如今成为美国文化的象征

2020/04/09 欧美动漫

把1316这个数表示成两个数的和，其中一个为13的倍数，另一个是11的倍数，求这两个数。

2011/06/24 PHP

PHP修改session_id示例代码

2014/01/08 PHP

Laravel 实现在Blade模版中使用全局变量代替路径的例子

2019/10/22 PHP

js 数组操作代码集锦

2009/04/28 Javascript

JavaScript生成GUID的多种算法小结

2013/08/18 Javascript

JQuery之focus函数使用介绍

2013/08/20 Javascript

jQuery简单实现banner图片切换

2014/01/02 Javascript

JavaScript中的6种运算符总结

2014/10/16 Javascript

深入理解javascript严格模式(Strict Mode)

2014/11/28 Javascript

js中实现字符串和数组的相互转化详解

2016/01/24 Javascript

AngularJS前端页面操作之用户修改密码功能示例

2017/03/27 Javascript

vue+ElementUI实现订单页动态添加产品数据效果实例代码

2017/07/13 Javascript

微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb

2018/07/04 Javascript

js canvas实现红包照片效果

2018/08/21 Javascript

JS实现随机抽选获奖者

2019/11/07 Javascript

基于JS正则表达式实现模板数据动态渲染(实现思路详解)

2020/03/07 Javascript

[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11

2020/12/13 DOTA

Python 代码性能优化技巧分享

2012/08/07 Python

对于Python的Django框架部署的一些建议

2015/04/09 Python

Python使用base64模块进行二进制数据编码详解

2018/01/11 Python

Python通过属性手段实现只允许调用一次的示例讲解

2018/04/21 Python

Atom Python 配置Python3 解释器的方法

2019/08/28 Python

Django配置MySQL数据库的完整步骤

2019/09/07 Python

Python cookie的保存与读取、SSL讲解

2020/02/17 Python

关于Keras Dense层整理

2020/05/21 Python

Python使用pyexecjs代码案例解析

2020/07/13 Python

css animation配合SVG制作能量流动效果

2021/03/24 HTML / CSS

《学棋》教后反思

2014/04/14 职场文书

环保建议书400字

2014/05/14 职场文书

新学期开学演讲稿

2014/05/24 职场文书

知识竞赛拉拉队口号

2014/06/16 职场文书

药剂专业毕业生求职信

2014/06/24 职场文书

2014年英语工作总结

2014/12/20 职场文书

2015年清明节活动总结

2015/02/09 职场文书

台积电称即便经济低迷也没有降价的计划

2022/04/21 数码科技