编程 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 相关文章推荐

js二级地域选择的实现方法

Jun 17 Javascript

c#程序员对TypeScript的认识过程

Jun 19 Javascript

兼容各大浏览器的JavaScript阻止事件冒泡代码

Jul 09 Javascript

详解JavaScript设计模式开发中的桥接模式使用

May 18 Javascript

AngularJs 指令详解及示例代码

Sep 01 Javascript

vue2.0父子组件及非父子组件之间的通信方法

Jan 21 Javascript

基于layer.js实现收货地址弹框选择然后返回相应的地址信息

May 26 Javascript

Bootstrap table表格初始化表格数据的方法

Jul 25 Javascript

vue自定义表单生成器form-create使用详解

Jul 19 Javascript

JavaScript实现简单计算器功能

Dec 19 Javascript

vue 监听窗口变化对页面部分元素重新渲染操作

Jul 28 Javascript

详解vue中在父组件点击按钮触发子组件的事件

Nov 13 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

php foreach、while性能比较

2009/10/15 PHP

php使用正则过滤js脚本代码实例

2014/05/10 PHP

PHP中IP地址与整型数字互相转换详解

2014/08/20 PHP

CI框架学习笔记（一） - 环境安装、基本术语和框架流程

2014/10/26 PHP

Zend Framework使用Zend_Loader组件动态加载文件和类用法详解

2016/12/09 PHP

PHP中通过getopt解析GNU C风格命令行选项

2019/11/18 PHP

PHP如何使用cURL实现Get和Post请求

2020/07/11 PHP

验证手机号码的JS方法分享

2013/09/10 Javascript

利用JavaScript实现新闻滚动效果(实例代码)

2013/11/27 Javascript

JavaScript设计模式之外观模式介绍

2014/12/28 Javascript

Jquery的基本对象转换和文档加载用法实例

2015/02/25 Javascript

ECMAScript6中Set/WeakSet详解

2015/06/12 Javascript

js漂浮广告实现代码

2015/08/15 Javascript

Windows下用PyCharm和Visual Studio开始Python编程

2015/10/26 Javascript

jQuery选择器及jquery案例详解(必看)

2016/05/20 Javascript

javascript运算符——逻辑运算符全面解析

2016/06/27 Javascript

javascript之with的使用(阿里云、淘宝使用代码分析)

2016/10/11 Javascript

H5实现中奖记录逐行滚动切换效果

2017/03/13 Javascript

详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)

2018/11/12 Javascript

小程序实现人脸识别功能(百度ai)

2018/12/23 Javascript

JS实现电话号码的字母组合算法示例

2019/02/26 Javascript

Element Breadcrumb 面包屑的使用方法

2020/07/26 Javascript

[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG

2018/04/02 DOTA

[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07

2020/11/09 DOTA

python函数返回多个值的示例方法

2013/12/04 Python

Python3实现发送QQ邮件功能（文本）

2017/12/15 Python

Django rest framework工具包简单用法示例

2018/07/20 Python

python原类、类的创建过程与方法详解

2019/07/19 Python

Python坐标线性插值应用实现

2019/11/13 Python

在tensorflow中实现屏蔽输出的log信息

2020/02/04 Python

丝芙兰波兰：Sephora.pl

2018/03/25 全球购物

国际商务专业职业生涯规划书范文

2014/01/17 职场文书

二年级数学教学反思

2014/01/21 职场文书

软件售后服务方案

2014/05/29 职场文书

zabbix监控mysql的实例方法

2021/06/02 MySQL

openstack中的rpc远程调用的方法

2021/07/09 Python