JQuery事件切换

原创 2019-01-21 17:55:27 238
摘要:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="static/js/jquery-3.3.1.min.js"></script>

<style>

div{width:500px;height:500px;background: red;}

</style>

</head>

<body>

<script>

/*

    /* $(selector).hover(function () {

            // over鼠标移上时触发的函数

           

        }, function () {

            // out鼠标移出时触发的函数

        }

    );


    $("div").toggle();//如果元素是可见的就切换为隐藏,否则相反

    */

$(document).ready(function () {

$("div").hover(function () {

// over

$("div").css("background", "pink");

}, function () {

// out

$("div").css("background", "red");

}

);


$("button").click(function (e) {

$("div").toggle();

});

});


</script>


<div></div>

<button>点击</button>

</body>

</html>


批改老师:天蓬老师批改时间:2019-01-21 17:56:31
老师总结:$("div").toggle(), jQuery中的自动切换非常有意思, 用原生来实现非常的麻烦, 这也是jQuery中的一个特色, 很多动画特效都是基于它完成的

发布手记

热门词条