jQuery-事件绑定

来源：互联网发布：asp微信接口源码编辑：程序博客网时间：2024/06/06 18:35
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>事件绑定</title>    <script src="../libs/jquery.js"></script>    <style type="text/css">        .content{            display: none;        }    </style></head><body><div id="panel">    <h5 class="head">什么是jQuery？</h5>    <div class="content">        jQuery是一个快速、简洁的JavaScript框架，        是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。        jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。        它封装JavaScript常用的功能代码，        提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。    </div></div><script>    //事件绑定，一般情况我们都会把bind省略不写，为了减少代码量   /* $(function () {     //绑定的click事件，当点击鼠标时触发事件        $("#panel h5.head").bind("click",function () {            if($(this).next().is(":visible")){  //用if else来判断，如果是显示的就收起，收起的就显示                $(this).next().hide();            }else{                $(this).next().show();  //$(this).next()被多次使用，可以定义为一个局部变量            }        })    })*/    /*$(function () {     //绑定mouseover和mouseout事件        $("#panel h5.head").bind("mouseover",function () {            $(this).next().show();        }).bind("mouseout",function () {            $(this).next().hide();        })    })*/    //简写时间绑定    /*$(function () {        $("#panel h5.head").mouseover(function () {            $(this).next().show();        }).mouseout(function () {            $(this).next().hide();        });    });*/    //合成事件    //hover（enter，leave）    // 用于模拟光标悬停事件，当光标移动到元素上时，会触发指定的第一个函数（enter）；    // 当光标移除这个元素时，会触发指定的第二个函数（leave）    /*$(function () {        $("#panel h5.head").hover(function () {            $(this).next().show();        },function () {            $(this).next().hide();        });    });*/    //toggle(fn1,fn2,```fnN)    //用于模拟鼠标连续单击事件，第一次单击元素，触发指定的第一个函数，当再次单击同一个元素时，则触发第二个函数，以此类推。    /*$(function () {        $("#panel h5.head").toggle(function () {            $(this).next().show();        },function () {            $(this).next().hide();        });    });*/    //toggle()的另一个作用，切换元素的可见状态，如果元素是可见的，单击切换后则为隐藏，如果是隐藏的，单击后则为可见。    $(function () {        $("#panel h5.head").toggle(function () {            $(this).next().toggle();        },function () {            $(this).next().toggle();        })    });</script></body></html>
阅读全文
0 0