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

发布时间：2023-10-03 15:02:24 所属栏目：教程来源：

导读：如下所示：

代码如下:

<html>

<head>

<title>jquery</title>

<style>

body

{

font-size: 12px;

}

li

{

如下所示：

代码如下:

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

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!