web前端之锋利的jQuery四：jQuery中的事件

最新推荐文章于 2020-10-03 21:14:57 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2020-10-03 21:14:57 发布

阅读量3.3k

点赞数 2

本文链接：https://blog.csdn.net/u014785563/article/details/53470346

版权

web前端之锋利的jQuery四：jQuery中的事件

加载DOM：

执行时机：
$(document).ready(function(){}); 详情解释

事件绑定：

bind(event,data,function)
第一个参数是事件类型，类型包括：blur focus load resize unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter change select submit keydown keypress keyup error等，当然也可以包含自定义名称（可以发现jQuery中对应的事件绑定类型比JavaScript中的少了一个“on”）
第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象
第三个参数则是用来绑定的处理函数

（1）基本效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    
        $('#panel h5.head').bind("click",function(){
    
            $(this).next().show();
        })
    });
    </script>
    <style type="text/css">
    .content{
        display:none;
    }
    </style>
</head>
<body>
    <div id="panel">
        <h5 class="head">什么是jQuery</h5>
        <div class="content">
            jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
        </div>
    </div>
</body>
</html>

（2）加强效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    
        $('#panel h5.head').bind("click",function(){
    
            if($(this).next().is(":visible")){
   //如果内容是显示的
                $(this).next().hide();
            }else{
                $(this).next().show();
            }

        })
    });
    </script>
    <style type="text/css">
    .content{
        display:none;
    }
    </style>
</head>
<body>
    <div

最低0.47元/天解锁文章

爸爸去哪了2之熊猫三胞胎

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端之锋利的jQuery四：jQuery中的事件

web前端之锋利的jQuery四：jQuery中的事件与动画加载DOM：执行时机： $(document).ready(function(){}); 详情解释事件绑定：bind(event,data,function) 第一个参数是事件类型，类型包括：blur focus load resize unload click dblclick mousedow
复制链接

扫一扫