jQuery事件

最新推荐文章于 2024-03-20 08:53:45 发布

我可能是个假开发

最新推荐文章于 2024-03-20 08:53:45 发布

阅读量443

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/CSDN_GIA/article/details/70285461

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

jQuery事件

一、页面未加载执行失败

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>页面未加载执行失败</title>
        <script type="text/javascript">
            document.getElementById("panel").onclick = function() {
                alert("元素已经加载完毕 !");
            }
            /*
                执行错误，为什么？
                因为dom还未加载完毕。
            */
        </script>
    </head>

    <body>
        <div id="panel">click me.</div>
    </body>

解决：

<!--解决办法：
        方式一：将JS代码移到需要操作的html代码后面，一般建议放到body的外面
        方式二：将JS代码放到一个页面加载函数中去-->

    <body>
        <div id="panel">click me.</div>
        <script type="text/javascript">
                document.getElementById("panel").onclick = function() {
                    alert("元素已经加载完毕 !");
                }
                /*正确执行*/
        </script>
    </body>

二、事件绑定

1.点击展开：

<title>点击展开</title>
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#panel h5.head").bind("click", function() {
                var $content = $(this).next();
                if($content.is(":visible")) {
                    $content.hide();
                } else {
                    $content.show();
                }
            })
        })
    </script>
    </head>

    <body>
        <div id="panel">
            <h5 class="head">什么是jQuery?</h5>
            <div class="content">
                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
            </div>
        </div>
    </body>

2.鼠标划过：

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>鼠标滑过</title>
        <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
        <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $(".head").mouseover(function() {
                    $(this).next().show();
                }).mouseout(function() {
                    $(this).next().hide();
                })
            })
        </script>
    </head>

    <body>
        <div id="panel">
            <h5 class="head">什么是jQuery?</h5>
            <div class="content">
                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
            </div>
        </div>
    </body>

三、移除事件

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>事件移除</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            body {
                font-size: 13px;
                line-height: 130%;
                padding: 60px;
            }

            p {
                width: 200px;
                background: #888;
                color: white;
                height: 16px;
            }
        </style>
        <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                $('#btn').bind("click", function() {
                    $('#test').append("<p>我的绑定函数1</p>");
                });
                $('#delAll').click(function() {
                    $('#btn').unbind("click");
                });
            })
        </script>
    </head>

    <body>
        <button id="btn">点击我</button>
        <div id="test"></div>
        <button id="delAll">删除所有事件</button>
    </body>

四、合成事件

1、合成事件hover：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>合成事件hover</title>
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $(".head").hover(function() {
                $(this).next().show();
            }, function() {
                $(this).next().hide();
            })
        })
    </script>
</head>

    <body>
        <div id="panel">
            <h5 class="head">什么是jQuery?</h5>
            <div class="content">
                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
            </div>
        </div>
    </body>

2、合成事件toggle

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>合成事件toggle</title>
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $(".head").toggle(function() {
                $(this).next().hide();
            }, function() {
                $(this).next().show();
            })
        })
    </script>
</head>

    <body>
        <div id="panel">
            <h5 class="head">什么是jQuery?</h5>
            <div class="content">
                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
            </div>
        </div>
</body>