jQuery事件

来源：互联网发布：詹姆斯生涯所有数据编辑：程序博客网时间：2024/06/05 15:06

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>

0 0