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实现UTF8编码转换成gb2312编码
Dec 22 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
JavaScript实现动态生成表格
Aug 02 Javascript
Vue实现图书管理小案例
Dec 03 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程序员的技术瓶颈分析
2011/07/17 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
Javascript的匿名函数小结
2009/12/31 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python实现二分查找算法
2017/09/21 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
python如何生成网页验证码
2018/07/28 Python
python实现事件驱动
2018/11/21 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
Python调用.NET库的方法步骤
2019/12/27 Python
django 模版关闭转义方式
2020/05/14 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
2015年中个人总结范文
2015/03/10 职场文书
2015政治思想表现评语
2015/03/25 职场文书
2015年商场工作总结
2015/04/27 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
解除合同协议书范本
2016/03/21 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
教你使用TensorFlow2识别验证码
2021/06/11 Python