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

自适应图片大小的弹出窗口

Jul 27 Javascript

跟着Jquery API学Jquery之一选择器

Apr 07 Javascript

一段批量给页面上的控件赋值js

Jun 19 Javascript

ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题

Dec 11 Javascript

Javascript前端UI框架Kit使用指南之kitjs的对话框组件

Nov 28 Javascript

关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法

Jun 13 Javascript

JavaScript与ActionScript3两者的同性与差异性

Sep 22 Javascript

js中new一个对象的过程

Feb 20 Javascript

jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】

Mar 09 Javascript

jQuery模拟实现天猫购物车动画效果实例代码

May 25 jQuery

Mint-UI时间组件起始时间问题及时间插件使用

Aug 20 Javascript

vue离开当前页面触发的函数代码

Sep 01 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中的类－什么叫类

2006/11/20 PHP

php下通过IP获取地理位置的代码(小偷程序)

2011/06/09 PHP

mongo Table类文件获取MongoCursor(游标)的实现方法分析

2013/07/01 PHP

php分享朋友圈的实现代码

2019/02/18 PHP

js右键菜单效果代码

2007/07/21 Javascript

动态的改变IFrame的高度实现IFrame自动伸展适应高度

2012/12/28 Javascript

jquery时间下拉框小例子

2013/04/15 Javascript

jQuery实现Twitter的自动文字补齐特效

2014/11/28 Javascript

基于jQuery实现的向下滑动二级菜单效果代码

2015/08/31 Javascript

PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解

2015/10/09 Javascript

js实现兼容IE、Firefox的图片缩放代码

2015/12/08 Javascript

JavaScript File分段上传

2016/03/10 Javascript

深入浅析JavaScript的API设计原则

2016/06/14 Javascript

js将滚动条滚动到指定位置的简单实现方法

2016/06/25 Javascript

网页瀑布流布局jQuery实现代码

2016/10/21 Javascript

详解webpack es6 to es5支持配置

2017/05/04 Javascript

以BootStrap Tab为例写一个前端组件

2017/07/25 Javascript

简单的Vue SSR的示例代码

2018/01/12 Javascript

使用webpack构建应用的方法步骤

2019/03/04 Javascript

详解微信小程序之提高应用速度小技巧

2020/01/07 Javascript

js数组相减简单示例【删除a数组所有与b数组相同元素】

2020/03/04 Javascript

JS中==、===你分清楚了吗

2020/03/04 Javascript

js实现3D旋转效果

2020/08/18 Javascript

JavaScript的一些小技巧分享

2021/01/06 Javascript

[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/20 DOTA

Python base64编码解码实例

2015/06/21 Python

解决Atom安装Hydrogen无法运行python3的问题

2019/08/28 Python

python轮询机制控制led实例

2020/05/03 Python

opencv python 对指针仪表读数识别的两种方式

2021/01/14 Python

浅谈css3新单位vw、vh、vmin、vmax的使用详解

2017/12/01 HTML / CSS

韩国邮政旗下生鲜食品网上超市：epost

2016/08/27 全球购物

英国马莎百货印度官网：Marks & Spencer印度

2020/10/08 全球购物

离职证明标准格式

2014/09/15 职场文书

杭白菊导游词

2015/02/10 职场文书

2015年农村党员公开承诺事项

2015/04/28 职场文书

2016开学第一课心得体会

2016/01/23 职场文书