海阔天空

手机扫码查看

2020javaweb教程之jQuery事件

jQuery获得焦点和失去焦点

<input type="text" id="user">
<script>
    $(function(){
        $("#user").focus(function(){//获得焦点
            $(this).css("backgroundColor","red")
        }).blur(function(){         //失去焦点
            $(this).css("backgroundColor","orange")
        })
    })
</script>

单击、双击、鼠标移入和移出

<p>这是第一段文本</p>
<p>这是第二段文本</p>
<p>这是第三段文本</p>
<script>
    $(function(){
        $("p").click(function(){//单击事件
            $(this).css("color","red");
        })
        $("p").dblclick(function () {//双击事件
            $(this).css("fontSize","50px")
        })
        $("p").hover(function(){//鼠标移入
            $(this).css("color","orange")
        },function () {         //鼠标移出
            $(this).css("color","black")
        })
    })
</script>

鼠标按下和鼠标松开

<p>你点我干哈</p>
<script>
    $(function(){
        $("p").mousedown(function(){
            $(this).text("你点击了我")
        }).mouseup(function () {
            $(this).text("你点我干哈")
        })
    })
</script>