JQuery中的事件以及动画-阿里云开发者社区

开发者社区> 杰克.陈> 正文

JQuery中的事件以及动画

简介: 原文:JQuery中的事件以及动画                嘿嘿,今天学习了JQuery的事件以及动画,感觉即将学习完JQuery,在回忆起上周学习的JavaScript,感觉好多刚刚学习的知识点都记得模 糊啦,这个是很让失望的,这里只说明了一点,课是听过啦,但是没有好好的练习,于是就加快了刚学习的知识的遗忘力度。
+关注继续查看
原文:JQuery中的事件以及动画

               嘿嘿,今天学习了JQuery的事件以及动画,感觉即将学习完JQuery,在回忆起上周学习的JavaScript,感觉好多刚刚学习的知识点都记得模 糊啦,这个是很让失望的,这里只说明了一点,课是听过啦,但是没有好好的练习,于是就加快了刚学习的知识的遗忘力度。在一周的时间里学习了JavaScript, 那时间没感觉可得节奏很快,现在顿时发现课真的是快啦,我需要认真的对待,好好的在练习练习,而写发现最近的态度也有很大的问题,总是在赶今天学习的任 务,发现没有更多的时间去复习前面学习的知识,感觉还是有点苦恼的。这个事需要迅速解决的问题。好啦,来总结一下今天的知识吧。

              一.简单的点击事件

              

             上面就是在JQuery中实现的单击事件,这个与JavaScript中的单击事件相比,JavaScript使用的是onclick来实现其单击事件。

              二.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,mouseover等,第二个参数是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
            //});
        });
    </script>
<body>
 <div id="div" style="width:300px; height:300px;" >1234</div>
    <input type="button" name="name" value="操作动画" id="btn" />
</body>

                   七.动画方法

                   

                   八.多行文本框的应用-高度变化

 <script src="script/jquery-1.7.1.min.js"></script>
    <style>
        input:focus,textarea:focus {
            border:1px solid #f00;
            background-color:#fcc;
        }
    </style>
    <script>
        $(function () {
            var comment = $("#comment");
            $(".bigger").click(function () {
                if (comment.height() < 500) {
                    comment.height($("#comment").height() + 100);  //在原有高度的基础上增高100
                }
            });
            $(".smaller").click(function () {  
                if (comment.height() > 100) {
                    comment.height($("#comment").height() - 100);  //在原有高度的基础上降低100
                }
            }); 
        })
    </script>
<body>
    <form action="#" method="post" id="regform">
        <div class="msg"><span class="bigger">放大</span><span class="smaller">缩小</span></div>
        <div style="" data-mce-style="color: #800000;">"><textarea rows="8" cols="20" id="comment">海海海海</textarea></div>
    </form>
</body>

                  

              上面的操作实现了点击放大时间,textarea的高度变高即面积变大,当点击缩小时间textarea的面积变小,即实现了动画的效果。

               九.复选框应用

<script src="script/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $("#checkall").bind("click", function () {
                $(":checkbox").each(function () {
                    $(this).attr("checked", "checked");         //点击按钮时间需要全部选中
                });
            });

            $("#checkno").bind("click", function () {
                $(":checkbox").attr("checked", false);    //点击按钮时间需要全部不选中
            });

            $("#checkRev").bind("click", function () {
                $(":checkbox").each(function () {
                    if ($(this).attr("checked") == "checked") {
                        $(this).attr("checked", false);
                    }
                    else {
                        $(this).attr("checked", true);   //点击按钮时间需要选中的清除,未选中的被选中
                    }
                });
            });

            //或者:
            $(this).attr("checked", !$(this).attr("checked"));
        });
    </script>
<body>
    <form>你爱好的运动?<br />
    <input type="checkbox" name="names" value="足球 "  />足球<br />
     <input type="checkbox" name="names" value="篮球 " />篮球<br />
     <input type="checkbox" name="names" value="排球 " />排球<br />
     <input type="checkbox" name="names" value="羽毛球 " />羽毛球<br />
    <input type="button" id="checkall" value="全选 " /><br />
    <input type="button" id="checkno" value="全不选 " /><br />
    <input type="button" id="checkRev" value="反选 " /><br />
    <input type="button" name="send" value="提交" /><br />
</form>
</body>

                   在这里需要注意的是,判断复选框选中或者不选中的状态,必须通过控制元素的checked属性来达到目的,如果属性checked为true,说明被选中,如果为false,则说明未被选中。

                   十.下拉框的应用

<script src="script/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $("#add").click(function () {
                var selectoption = $("#select1 option:selected");
                selectoption.remove();
                selectoption.appendTo('#select2');    //把选中的项添加到右边的aelect框中
            });
            $("#addAll").bind("click",function () {
                var options = $("#select1 option");
                options.appendTo('#select2');
            });
        });
    </script>
<body>
    <div class="center">
        <select multiple="multiple" id="select1" style="width: 100px; height: 160px">
            <option value="1">选项1</option><option value="2">选项2</option> <option value="3">选项3</option>
            <option value="4">选项4</option><option value="5">选项5</option><option value="6">选项6</option>
            <option value="7">选项7</option><option value="8">选项8</option><option value="9">选项9</option>
        </select>
        <div>
            <span id="add">添加到右边</span>
            <span id="addAll">全部添加到右边</span>
        </div>
    </div>
    <div class="center" style="float:right">
        <select multiple="multiple" id="select2" style="width: 100px; height: 160px" >
        </select>
    </div>

                      

                上面的操作是实现了在在左边点击选择的项,然后添加到右边的框中,可以一个一个的添加,也可以全部一次性添加。

                十一.表格的应用

 <script src="script/jquery-1.7.1.min.js"></script>
        <style>
            .even {
                background-color: #fff38f;
            }
            .odd {
                background-color: #ffffee;
            }
    </style>

    <script>
        $("#table tr:odd").addClass("odd");          //选取索引为奇数的行数
        $("#table tr:even:not(:first)").addClass("even");   //选取索引为偶数的除了索引为0的行数
        $("table tr").each(function () {
            $(this).click(function () {
                $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
            });
        })
    </script>
<body>
     <table border="1" id="table">
        <thead><tr><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead><tbody>
            <tr class="parent" id="row1"><td colspan="3">前台设计组</td></tr>
            <tr class="child1"><td>张三</td><td>男</td><td>浙江宁波</td></tr>
            <tr class="child1"><td>李四</td><td>女</td><td>浙江杭州</td></tr>
            <tr class="parent" id="row2"><td colspan="3">前台开发组</td></tr>
            <tr class="child2"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
            <tr class="child2"><td>赵六</td><td>男</td><td>湖南长沙</td></tr>
            <tr class="parent" id="row3"><td colspan="3">后台开发组</td></tr>
            <tr class="child3"><td>孙七</td><td>男</td><td>湖南长沙</td></tr>
            <tr class="child3"><td>周八</td><td>男</td><td>湖南长沙</td>
            </tr>
        </tbody>
    </table>
</body>

                   上面主要学习了对表格的简单操作,嘿嘿,今天就总结到这里,简单的学习动画的操作还是要灵活的掌握,其实这些都是简单的实例,我们在实际操作中当然不会这样的简单的,要加油喽。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4045 0
我的Android进阶之旅------&gt;介绍一款集录制与剪辑为一体的屏幕GIF 动画制作工具 GifCam
由于上一篇文章:我的Android进阶之旅------>Android之动画之Frame Animation实例 中展示的是Frame动画效果,但是之前我是将图片截取下来,不好说明确切的动画过程,因此今天百度了一下gif动画的制作工具,找到了这款不错的软件GifCam。
1119 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4224 0
Flutter的AnimatedContainer实现容器样式的动画切换
AnimatedContainer可以理解为Container Animat,也就是说带动画的容器,使用AnimatedContainer可以很方便的实现Widget的动画效果。
178 0
Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
AnimatedDefaultTextStyle通过动画过渡的方式来切换文本的显示样式
572 0
【百度地图API】如何利用地图API制作汽车沿道路行驶的动画?——如何获得道路层数据
原文:【百度地图API】如何利用地图API制作汽车沿道路行驶的动画?——如何获得道路层数据 有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画。可是,百度地图的道路数据并没有公开。
1534 0
我的Android进阶之旅------&gt;Android之动画之Frame Animation实例
============================首先看看官网上关于Frame animation的介绍================================ 地址:http://developer.
897 0
+关注
杰克.陈
一个安静的程序猿~
9798
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载