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实现选项卡的特别效果的实例
Mar 03 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
对javascript继承的理解
Oct 11 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
PHP 多进程 解决难题
2009/06/22 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
如何离线执行php任务
2017/02/21 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
Javascript模块模式分析
2008/05/16 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
python的数学算法函数及公式用法
2020/11/18 Python
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
如何开发一个JQuery插件
2016/07/28 面试题
社团成立邀请函
2014/01/08 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
个人政治思想总结
2015/03/05 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python