jQuery练习(鼠标移来移去,焦点获得失去)

最新推荐文章于 2020-12-30 10:28:59 发布

greatverve

最新推荐文章于 2020-12-30 10:28:59 发布

阅读量1.4k

点赞数

分类专栏： JS.JQuery 文章标签： jquery function input border c# css

本文链接：https://blog.csdn.net/greatverve/article/details/3593621

版权

JS.JQuery 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

练习链式操作等

 
 <!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>
    <title>jQuery鼠标移来移去,焦点获得失去</title>
<script type="text/ecmascript" src="../js/jquery-1.2.6.js"></script>
<script type="text/ecmascript">
    //添加获得焦点失去焦点
    $("document").ready(function(){
        $("input[@type='text'],input[@type='password'],textarea").focus(function(){
            $(this).css({background:"#fcc", border:"1px solid #f00"}).blur(function(){
                $(this).css({background:"transparent", border: "1px solid #ccc"})
            })
        });
    });
    //根据标签名找标签,$(input[@type='password'])多个标签之间用逗号隔开.
    //$("..").focus(function(){$(this).})//链式操作用$(this)取得当前对象.
    //设置css的方法:$(this).css({这里添写键值对});//形式key:"value"
    //$().hover(f1(){},f2(){})//hover的用法
    $(function(){
        $("input[@type='text'],input[@type='password'],textarea").hover(function(){
            $(this).css({background:"#369", border:"1px solid #369"})},function(){
                $(this).css({background:"#f6f", border:"1px solid #f6f"})
            }
        )
    });
    //去掉这个会有小毛病
    $(document).ready(function(){
        if ($.browser.msie){
          $("input[@type='text'], input[@type='password'], textarea").focus(function(){
                $(this).addClass("focus")
            }).blur(function(){
                    $(this).removeClass("focus")
                });
        }
    })
    //两种链式操作方法
    $(function(){
        //第一种，像穿珠子，比较清晰，我比较喜欢。
        //$("#d1").mouseover().mouseout()
        $("#d1").mouseover(function(){
            $(this).html("over");
        }).mouseout(function(){
            $(this).html("out");
        })
        //第二种，一层套一层，不大习惯。像C#语法，但又不能像那样格式。
        //$("#d2").mousedown(function(){
        //  $(this).css().mouseup(function(){
        //      $(this).css()
        //  })
        //});
        $("#d2").mousedown(function(){
            $(this).html("down").mouseup(function(){
                $(this).html("up")
            })
        });
    });
</script>
</head>
<body>
<div>
<input type="text" id="i1" />
<textarea id="TextArea1" cols="20" rows="2"></textarea>
<div id="d1">hello</div>
<div id="d2">hi,hi</div>
</div>
</body>
</html>
 