Jquery实现的一种常用高亮效果示例代码_jquery

如下所示:

复制代码 代码如下:

<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>

时间: 2024-08-03 12:23:31

Jquery实现的一种常用高亮效果示例代码_jquery的相关文章

Jquery实现的一种常用高亮效果

  Code<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">&

jquery实现多行文字图片滚动效果示例代码_jquery

今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?pars

jQuery bxCarousel实现图片滚动切换效果示例代码_jquery

BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: ◆ 可以指定显示的元素总数 ◆ 可以指定每次滚动的元素个数 ◆ 自动播放模式 ◆ 前一张/后一张按钮控制图片流动 参数含义: display_num:显示元素的数量,几张图片 move:单击左右控制键时,移动的元素个数,此处为移动2张图片 prev_image:上一元素按钮图片 next_image:下一元素按钮图片 margin:图片之间的间隙,一般设为10px auto:自动滚动效果 controls:是否

通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)_jquery

我个人表示非常喜欢微软新一代的产品,先不管它产品的成熟与否,但是它带来的是全新的产品.所谓全新,是指在用户体验上,苹果这些年的成功使得所有产品都在模仿它的界面,包括安卓在内,不知道大家的感觉如何,反正我是对这些圆角矩形产生了审美疲劳(苹果以及安卓的粉丝勿喷,这里仅仅是从界面上评价,事实上从整体上来说,微软还是有差距的),当年wp的推出让我眼前一亮,马上喜欢上了Metro风格的产品,直至今天wp8以及win8开始越来越成熟. 写的不好,欢迎各位看官指正批评,不欢迎无故猛喷.大神请绕道. 废话少说,

jQuery 网易相册鼠标移动显示隐藏效果实现代码_jquery

其实主要是jquery 层选择器的应用,jquery 高手可以跳过... 网易相册效果图如下:当鼠标移动经过照片就显示"设为封面|删除",移开后就隐藏,此效果在web开发中经常会用到.故总结一下 直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

jquery div拖动效果示例代码_jquery

复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

Jquery easyui 下loaing效果示例代码_jquery

复制代码 代码如下: //采用jquery easyui loading css效果 function ajaxLoading(){     $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");  

用jquery中插件dialog实现弹框效果实例代码_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

html、css和jquery相结合实现简单的进度条效果实例代码_jquery

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery实现进度条</title>