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

Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法

Dec 06 Javascript

js弹出的对话窗口永远保持居中显示

Dec 15 Javascript

JavaScript fontsize方法入门实例（按照指定的尺寸来显示字符串）

Oct 17 Javascript

javascript修改图片src的方法

Jan 27 Javascript

跟我学习javascript的Date对象

Nov 19 Javascript

js获取元素下的第一级子元素的方法(推荐)

Mar 05 Javascript

vue组件中点击按钮后修改输入框的状态实例代码

Apr 14 Javascript

详解Node项目部署到云服务器上

Jul 12 Javascript

基于node.js实现微信支付退款功能

Dec 19 Javascript

vue 源码解析之虚拟Dom-render

Aug 26 Javascript

js 下拉菜单点击旁边收起实现(踩坑记)

Sep 29 Javascript

JS实现滑动导航效果

Jan 14 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

ASP知识讲座四

2006/10/09 PHP

用PHP实现浏览器点击下载TXT文档的方法详解

2013/06/02 PHP

php读取远程gzip压缩网页的方法

2014/12/29 PHP

你应该知道PHP浮点数知识

2015/05/13 PHP

php无法连接mysql数据库的正确解决方法

2016/07/01 PHP

Js中的onblur和onfocus事件应用介绍

2013/08/27 Javascript

JS window对象的top、parent、opener含义介绍

2013/12/03 Javascript

js获得页面的高度和宽度的方法

2014/02/23 Javascript

js实现网页自动刷新可制作节日倒计时效果

2014/05/27 Javascript

JavaScrip调试技巧之断点调试

2015/10/22 Javascript

js实现滚动条滚动到某个位置便自动定位某个tr

2021/01/20 Javascript

webpack入门必知必会

2017/01/16 Javascript

ie下js不执行的几种可能

2017/02/28 Javascript

判断颜色是否合法的正则表达式(详解)

2017/05/03 Javascript

简单实现js鼠标跟随效果

2020/08/02 Javascript

Vue 引入AMap高德地图的实现代码

2019/04/29 Javascript

5个你不知道的JavaScript字符串处理库(小结)

2020/06/01 Javascript

在主机商的共享服务器上部署Django站点的方法

2015/07/22 Python

将Django框架和遗留的Web应用集成的方法

2015/07/24 Python

python开发利器之ulipad的使用实践

2017/03/16 Python

python django事务transaction源码分析详解

2017/03/17 Python

Python遍历文件夹和读写文件的实现方法

2017/05/10 Python

Python网络编程之TCP与UDP协议套接字用法示例

2018/02/02 Python

运用TensorFlow进行简单实现线性回归、梯度下降示例

2018/03/05 Python

python自动登录12306并自动点击验证码完成登录的实现源代码

2018/04/25 Python

python3对拉勾数据进行可视化分析的方法详解

2019/04/03 Python

django form和field具体方法和属性说明

2020/07/09 Python

python制作一个简单的gui 数据库查询界面

2020/11/19 Python

Python 中Operator模块的使用

2021/01/30 Python

css3实现文字首尾衔接跑马灯的示例代码

2020/10/16 HTML / CSS

详解Canvas实用库Fabric.js使用手册

2019/01/07 HTML / CSS

PHP如何防止SQL注入

2014/05/03 面试题

策划助理岗位职责

2013/11/18 职场文书

纯CSS实现酷炫的霓虹灯效果

2021/04/13 HTML / CSS

关于golang高并发的实现与注意事项说明

2021/05/08 Golang

详解Java分布式事务的 6 种解决方案

2021/06/26 Java/Android