JQuery总结-事件、this、e和层的显示隐藏

最新推荐文章于 2024-09-21 17:47:05 发布

原创最新推荐文章于 2024-09-21 17:47:05 发布 · 535 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript/JQuery 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了JavaScript中事件绑定的基本方法，包括绑定事件、移除事件、只执行一次的事件绑定，以及事件处理中的特殊按键判断和阻止默认行为。同时展示了如何通过jQuery库实现层的显示和隐藏，包括使用`show()`, `hide()`方法和`toggle()`方法来控制元素的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.绑定事件

          //完整版绑定事件
            //bind(事件名，方法名)
            $("#btn1").bind("click", function () {
                alert("bind");
            });

            //简化版绑定事件
            $("#btn2").click(function () {
                alert("直接绑定");
            });

2.移除事件

           //移除id=btn的按钮的click事件
             $("#btn").unbind("click");

3.绑定只执行一次的事件

          //给id=btn的按钮绑定事件  该事件只能被触发一次
            $("#btn").one("click", function () {
                alert("我被点击啦，以后不能再点了");
            });

4. e

a.阻止默认方法

 $("a").click(function (e) {
              //阻止默认方法
                e.preventDefault();
            });

b.特殊按键判断

$("#specialKey").click(function (e) {
                if (e.altKey) {
                    alert("alt");
                } else if (e.shiftKey) {
                    alert("shift");
                } else if (e.ctrlKey) {
                    alert("ctrl");
                }
            });

c.获取鼠标的页面坐标

//获得鼠标的页面坐标
$("#location").text("鼠标当前页面坐标:" + e.pageX + "," + e.pageY);

e.target(相当于dom中的e.srcElement)和this的区别:this在哪层调用，就代表哪层的对象，而target代表最根层的对象，即冒泡的起点

5.层的显示隐藏

<!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></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">

        //ready函数
        $(function () {
            $("#btnShow").click(function () {
                //显示div
                $("div").show();
            });
            $("#btnHide").click(function () {
                //隐藏div
                $("div").hide();
            });
            $("#btnHideFast").click(function () {
                //快速隐藏
                $("div").hide("fast");
            });
            $("#btnHideNormal").click(function () {
                //常速隐藏
                $("div").hide("normal");
            });
            $("#btnHideSlow").click(function () {
                //慢速隐藏
                $("div").hide("slow");
            });
            $("#btnHideNum").click(function () {
                //1秒内隐藏
                $("div").hide(1000);
            });
            $("#btnChange").click(function () {
                //层的显示和隐藏切换
                $("div").toggle();
            });
        });
    
    </script>
</head>
<body>
    <div id="div">
        好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上
        好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上
        好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上
        好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上 好好学习 天天向上
    </div>
    <button id="btnShow">
        显示</button><br />
    <br />
    <button id="btnHide">
        隐藏</button>
    <button id="btnHideFast">
        隐藏快速</button>
    <button id="btnHideNormal">
        隐藏中速</button>
    <button id="btnHideSlow">
        隐藏慢速</button>
    <button id="btnHideNum">
        隐藏自定义速度</button>
    <br />
    <br />
    <button id="btnChange">
        切换显示</button><br />
    <br />
</body>
</html>