JQuery中的事件以及动画

页面导航:首页 > 网络编程 > JavaScript > JQuery中的事件以及动画

JQuery中的事件以及动画

来源: 作者: 时间:2016-02-03 09:20 【

bind事件script src=script jquery-1 7 1 min js script script $(function () { $( divid h5 head) bind(click, function () { bind事件,其中包含三个参数,第一
.bind事件
 
 
<script src="script/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $("#divid h5.head").bind("click", function () {  //bind事件,其中包含三个参数,第一个为事件,第二个为事件
                alert($(this).text());
            });
 
            $("#divid h5.content").css("display", "none");    //css方法就是可以动态设置标签样式
        });
 
        $(function () {
            $("#btnid").bind("click", function () {
                if (bool == true) {
                    $("#btnid .content").css("display", "none");
                    bool = false;
                    $(this).val("显示");
                }
                else {
                    $("#btnid .content").css("display", "");
                    bool = true;
 
                    $(this).val("隐藏");
                }
            });
        });
 
            $(function () {
                $("input[type=button]").bind("click", function () {  //内容的显示与隐藏
                    var content = $("#divid .content");
                    if (content.is(":visible")) {
                        content.hide();
                        $(this).val("显示");
                    }
                    else {
                        content.show();
                        $(this).val("隐藏");
                    }
                });
            });
    </script>
<body>
    <div id="divid">
        <h5 class="head">Rocky?</h5>
        <div class="content">就让雨下下来 不用带伞 让一切完蛋 看被淋湿的心 多久才会晒干</div>
    </div>
    <input type="button" name="name" value="显示 " id="btnid" />
</body>
 
               在上面的操作中我们新学习了bind事件,而bind事件是三个参数,第一个参数是事件的名字,例如:click,dbclick,mouver等,第二个参数是data,即传递过来的事件对象,第三个参数是一个方法,即用来处理处 理绑定的事件函数这就是我们的一个特殊的事件;另外在这里还举例写了一个动画中的例子,即文本信息的显示或者隐藏,在还没有学习show()和 hide()之前我们一般是按照上面第一种方式来写的,定义一个bool类型的变量即可,这样写起来还是很简单的,但是在写显示隐藏时间处理按钮上面还是 蛮蛮烦的,所以在学习了show()和hide()后就简单许多了,就是直接可以隐藏和显示。可以对比一下,显然在代码的处理上简单啦。
 
                 toggle事件和事件冒泡等
 
 
<script>
        $(function () {
            $("input[type=button]").toggle(function () {    //toggle两个参数都为事件,轮番调用
                $(this).css("backgroundColor","red");
            }, function () {
                $(this).css("backgroundColor", "yellow");
            });
        });
 
        $(function () {
            $("div").each(function () {
                $(this).bind("mouseup", function (e) {
                    alert(e.pageX);   //输出鼠标的x方向的位置
                    alert(e.pageY);   //输出鼠标的y方向的位置
                    alert(e.which);   //输出鼠标的按键的选择,1为鼠标左键,2为滚轴按键,3为鼠标右键
                });
            });
        });
 
        $(function () {
            $("#txt").keydown(function () {
                e.preventDefault();      //阻止a标签链接
                alert(e.keyCode);           //键盘获取其ask码
            });
        });
 
        $(function () {
            $("#ouuerdiv").click(function () {
                alert($(this).text());
            });
            $("#div").click(function () {
                alert($(this).text());
            });
            $("#innerdiv").click(function () {          //在这里是写了一个事件的冒泡现象,组织冒泡可以使用preventDefault或者precentDefault
                alert($(this).text());
            });
        })
    </script>
<body>
    <input type="button" name="btnname" value="按钮" id="btn"/>
    <div id="ouuerdiv"> 外部div<div id="div">中部div<div id="innerdiv">内部div</div></div></div>
    <a href="http://www.baidu.com" id="a">百度</a>
    <textarea id="txt" rows="5" cols="5">
    </textarea>
</body> 
 
                 Toggle事件:模拟鼠标点击事件,当鼠标移动到元素上时触发第一个事件,当鼠标离开元素时触发第二个事件。两个事件之间相互切换触发;另外还要说下事 件冒泡,事件冒泡其实简单的理解为:在一个页面上可以有多个事件,也可以多个元素相应一个事件。像上面一样假设页面中存在两个元素,其中一个div元素嵌 套在另一个div元素中并且都绑定了一个click事件,那么当你点击内部中div元素时间,外部的div也会显示,这就是事件冒泡。在这里需要注意的是都绑定了一个事件,容易想当然的认为仅仅的内部发生click事件。
 
                 .移除事件和连续添加多个事件
 
 
<script>
        $(function () {
            $("removeall").click(function () {      
                $("#btn").unbind();                //实现移除事件
            });
 
            $("#btn").bind("click", function () {          //可以连续添加多个事件
                $("#text").append("<p>我是第一个添加的事件</p>")
            })
                    .bind("click", function () {
                        $("#text").append("<p>我是第二个添加的事件</p>")
                    })
                           .bind("click", function () {
                               $("#text").append("<p>我是第三个添加的事件</p>")
                           })
        });
    </script>
<body>
    <button id="btn">单击我吧</button><button id="removeall">删除所有的事件</button>
    <div id="text">div文本信息</div>
</body>
 
                上面我们学习了bind事件,就是添加一个事件,而unbind就是移除事件,我们可以对比一下,嘿嘿,而针对连续添加多个事件其实就是当你添加玩一个事件后继续.bind添加事件即可。
 
                  .模拟事件
 
                  
 
                 我们学习的上面的bind事件、click事件等一般都是通过单击按钮才能触发的事件,但是有时间,需要通过模拟用户操作,来达到单击的效果,例如:在用户进入也买年后就触发click事件,而不需要用户去单击,那么我们就使用trigger()方法来完成模拟操作。
 
                  .一些其他的事件
 
<script>
        $(function () {
            $("#btn").click(function () {
                //$("#div").hide(2000);        //在2秒内隐藏
                //$("#div").show(2000);        //在2秒内显示
                //$("#div").fadeIn(2000);      //增强元素的不透明度,直至元素完全显示
                //$("#div").fadeOut(2000);     //降低元素的不透明度,直至元素完全消失
 
                $("#btn").toggle(function () { 
                    $("div").slideDown(2000);     //改变元素的高度,由上至下显示
                    $(this).val("显示")         
                }, function () {
                    $("div").slideUp(2000);       //改变元素的高度,由下至上缩短隐藏
                    $(this).val("隐藏")
                });
            });
 
            //$("#btn").click(function () {
            //    $("div").fadeTo(600,0.2);       //fadeTo方法适用于在0.6s内透明度是0.2
            /
Tags:

文章评论


<