jquer学习之事件

最新推荐文章于 2024-03-11 09:46:37 发布

原创最新推荐文章于 2024-03-11 09:46:37 发布 · 417 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

<!DOCTYPE html>
<!--事件
jQuery 是为事件处理特别设计的。jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中。
事件还包括：事件冒泡，事件绑定等在之后的demo中意义列举
具体的事件函数参照W3C的手册，再具体的生产中做具体的选择
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
toggle函数是hide和show函数的结合以，可以任意切换。
-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery事件</title>
    <script src="../res/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#hide").click(function(){
                $("p").hide(1000);//点击按钮触发click函数，并执行jQuery中的hide函数，隐藏所有的p标签
            });
            $("#show").click(function(){
                $("p").show(1000);//点击按钮触发click函数，并执行jQuery中的hide函数，显示所有的p标签
            });
            $("#toggle").click(function(){
                $("p").toggle(1000);//点击按钮触发click函数，并执行jQuery中的hide函数，显示或者隐藏所有的p标签
            });
        });
    </script>
</head>
<body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button id="hide">Click me,The element p hide</button>
    <button id="show">Click me,The element p show</button>
    <button id="toggle">Click me,The element p show or hide</button>
</body>
</html>