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 相关文章推荐
html下载本地
Jun 19 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 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时间戳与日期的转换
2013/06/06 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Python基于动态规划算法计算单词距离
2015/07/25 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python批量下载抖音视频
2019/06/17 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
python中for in的用法详解
2020/04/17 Python
python GUI模拟实现计算器
2020/06/22 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
波兰购物网站:MALL.PL
2019/05/01 全球购物
计算机专业职业生涯规划范文
2014/01/19 职场文书
网络教育自我鉴定
2014/02/04 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
运动会标语
2014/06/21 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
一文搞懂Redis中String数据类型
2022/04/03 Redis