JQuery绑定事件

来源：互联网发布：南阳理工网络教学平台编辑：程序博客网时间：2024/06/03 23:39

一、jquery绑定事件

$btn1.bind("click",f1=function(){                    alert("我是");                })                $btn1.bind("click",f2=function(){                    alert("我是46");                })

2.取消绑定

$btn2.unbind("click",f2);

3、只执行一次

$btn2.one("click",f2=function(){                    alert("我是46");                })

4.触发某一个事件
对象.trigger(“click”)
5.div的显示和隐藏

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>演示事件</title>        <style type="text/css">            * {                margin: 0px;                padding: 0px;            }            body {                font-size: 13px;                line-height: 130%;                padding: 60px;            }            #panel {                width: 300px;                border: 1px solid #0050D0;            }            .head {                padding: 5px;                background: #96E555;                cursor: pointer;            }            .content {                padding: 10px;                text-indent: 2em;                border-top: 1px solid #0050D0;                display: none;            }        </style>        <script src="../jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            $(function() {                //需求: 点击标题后 显示 标题下面的div                $("#panel h5.head").bind("click",function(){                    //让标题下面的div显示                /*  $(this).next().show();*/                $div=$(this).next();                if($div.is(":visible")){                    $div.hide(1000);                }else{                    $div.show("fast");                }                });            });        </script>    </head>    <body>        <div id="panel">            <h5 class="head" style="width: 50px;" >什么是jQuery?</h5>            <div class="content">                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。            </div>        </div>    </body></html>

6.改变绑定事件的类型

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>演示事件</title>        <style type="text/css">            * {                margin: 0px;                padding: 0px;            }            body {                font-size: 13px;                line-height: 130%;                padding: 60px;            }            #panel {                width: 300px;                border: 1px solid #0050D0;            }            .head {                padding: 5px;                background: #96E555;                cursor: pointer;            }            .content {                padding: 10px;                text-indent: 2em;                border-top: 1px solid #0050D0;                display: none;            }        </style>        <script src="../jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">         $(function(){            $("#panel").bind("mouseover",function(){             $(this).find("div.content").show(300);                })            $("#panel").bind("mouseout", function() {                    $(this).find("div.content").hide();                });         })        </script>    </head>    <body>        <div id="panel">            <h5 class="head" style="width: 50px;" >什么是jQuery?</h5>            <div class="content">                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。            </div>        </div>    </body></html>

7.内置动画

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>演示事件</title>        <style type="text/css">            * {                margin: 0px;                padding: 0px;            }            body {                font-size: 13px;                line-height: 130%;                padding: 60px;            }            #panel {                width: 300px;                border: 1px solid #0050D0;            }            .head {                padding: 5px;                background: #96E555;                cursor: pointer;            }            .content {                padding: 10px;                text-indent: 2em;                border-top: 1px solid #0050D0;                display: none;            }        </style>        <script src="../../jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">         $(function(){            /*淡入淡出效果*/            $("#panel").bind("mouseover",function(){             $(this).find("div.content").fadeIn(3000);             })            $("#panel").bind("mouseout", function() {                    $(this).find("div.content").fadeOut(3000);                });         })        </script>    </head>    <body>        <div id="panel">            <h5 class="head" style="width: 50px;" >什么是jQuery?</h5>            <div class="content">                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。            </div>        </div>    </body></html>

8.淡入淡出效果

<!DOCTYPE html>    <html>        <head>            <meta charset="UTF-8">            <title>演示事件</title>            <style type="text/css">                * {                    margin: 0px;                    padding: 0px;                }                body {                    font-size: 13px;                    line-height: 130%;                    padding: 60px;                }                #panel {                    width: 300px;                    border: 1px solid #0050D0;                }                .head {                    padding: 5px;                    background: #96E555;                    cursor: pointer;                }                .content {                    padding: 10px;                    text-indent: 2em;                    border-top: 1px solid #0050D0;                    display: none;                }            </style>            <script src="../../jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>            <script type="text/javascript">             $(function(){                $("#panel").bind("mouseover",function(){                 $(this).find("div.content").show(300);                    })                $("#panel").bind("mouseout", function() {                        $(this).find("div.content").hide();                    });             })            </script>        </head>        <body>            <div id="panel">                <h5 class="head" style="width: 50px;" >什么是jQuery?</h5>                <div class="content">                    jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。                </div>            </div>        </body>    </html>

9.收缩，展开效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>演示事件</title>        <style type="text/css">            * {                margin: 0px;                padding: 0px;            }            body {                font-size: 13px;                line-height: 130%;                padding: 60px;            }            #panel {                width: 300px;                border: 1px solid #0050D0;            }            .head {                padding: 5px;                background: #96E555;                cursor: pointer;            }            .content {                padding: 10px;                text-indent: 2em;                border-top: 1px solid #0050D0;                display: none;            }        </style>        <script src="../../jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">         $(function(){            /*下拉上升的效果   */            /*动画积累问题的解决*/            /*if(!$("#panel").find("div.content").is(":animated"))*/            $("#panel").bind("mouseover",function(){                if(!$("#panel").find("div.content").is(":animated")){                     $(this).find("div.content").slideUp(2000);                    }            })            $("#panel").bind("mouseout", function() {            if(!$("#panel").find("div.content").is(":animated")){                    $(this).find("div.content").slideDown(2000);                    }                });         })        </script>    </head>    <body>        <div id="panel">            <h5 class="head" style="width: 50px;" >什么是jQuery?</h5>            <div class="content">                jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。            </div>        </div>    </body></html>

11、自定义动画和动画回调函数
对象.animate({left:”50px”},3000,funxtion(){alert(3);})
参数1.让div向右移动50px
参数2.移动所需要的时间
参数3.移动完成后的回调函数

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            #img1 {                position:relative;            }        </style>        <script src="../../jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>        <script type="text/javascript">            $(function(){            /*  $("#img1").bind("mouseover",function(){                    $(this).animate({left:"500px"},3000);                })*/                /*$("#img1").click(function(){                    $(this).animate({left:"500px"},3000);                    $(this).animate({width:"50px"},3000);                })*/                //鼠标悬停向左向右移动                $("#img1").bind("mouseover",function(){                    if(!$(this).is(":animated")){                        $(this).animate({left: "-=20px" },1000,function(){                            $(this).css("left","auto");                        });                    }                })                $("#img1").bind("mouseout",function(){                    if(!$(this).is(":animated")){                        $(this).animate({ left: "+=20px" },1000,function(){                            $(this).css("left","auto");                        });                    }                })            })        </script>    </head>    <body>        <img  id="img1" src="../../../../src/一号店/1.jpg"/>    </body></html>

12.动画延迟 delay(3000);
13.停止动画对象.stop() 只能停止一个动画对象.stop(true) 停止所有的动画

阅读全文

0 0