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 相关文章推荐
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
轻松搞定js表单验证
Oct 13 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 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/24 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
轮播的简单实现方法
2016/07/28 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
工厂门卫岗位职责
2013/11/25 职场文书
理工科学生的自我评价
2013/12/15 职场文书
销售工作岗位职责
2013/12/24 职场文书
公司活动策划方案
2014/01/13 职场文书
就业意向书
2014/07/29 职场文书
导游词之襄阳古城
2019/09/27 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python