[知了堂学习笔记]_jQuery的事件

最新推荐文章于 2018-11-04 19:10:08 发布

YX_车车

最新推荐文章于 2018-11-04 19:10:08 发布

阅读量229

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/yxuan9826/article/details/78757945

版权

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php
jQuery的事件在整个库里把它当做函数来使用
1.jQuery事件汇总
ready(fn)
l bind(type,[data],fn)
l live(type,[data],fn)
l change([[data],fn])
l click([[data],fn])
l keydown([[data],fn])
l keypress([[data],fn])
l keyup([[data],fn])
l mousemove([[data],fn])
l mouseover([[data],fn])
l mouseup([[data],fn])
l resize([[data],fn])
l scroll([[data],fn])
l submit([[data],fn])
l unload([[data],fn])
l delegate(selector,type,[data],fn)
2.jQuery常用事件应用
2.1 bind(type,[data],fn)
给匹配的元素绑定事件
下面我们来看一个demo：

    <script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
    <script>
        $(function(){
            //给div绑定事件
            //给div绑定两个以上的事件
            $("div").bind("click",function(){
                window.alert("======boom=====");
            }).bind("mouseover",function(e){
                console.log(e.offsetX+"======"+e.offsetY);
            })
        })
    </script>
</head>
<body>
<div></div>
</body>

2.2 live(type,[data],fn)
jQuery给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
jQuery1.7以后的jq，live不再使用，推荐使用delegate()来替代live()。
下面我们来看着demo：

    <script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
    <script>
        $(function(){
            $("body").delegate("div","click",function(){
                window.alert("这是live函数得到的点击效果");
            });
            //按钮触发新增div事件
            $("#btn01").bind("click",function(){
                $("<div></div>").appendTo("body");
            });
        });
    </script>
</head>
<body>
<p>
    <button id="btn01">新增div</button>
</p>
<div></div>
</body>

2.3 change([[data],fn])
当元素的值发生改变时，会发生change事件，该事件仅适用于文本域（text filed）,以及textarea和select元素
下面我们来看一个demo：

    <script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
    <script>
        $(function(){
            $("#s01").change(function(){
                var text = $("#s01 :selected").text();
                if(text=="java"){
                    $("#s02").empty().append("<option>==选择==</option><option>下班</option><option>吃饭</option>");

                }else if(text=="jquery"){
                    $("#s02").empty().append("<option>==选择==</option><option>回家</option><option>加班</option>");
                }
            });
        });
    </script>
</head>
<body>
<select id="s01">
    <option>==选择==</option>
    <option>java</option>
    <option>jquery</option>
</select>
<select id="s02">
    <option>==选择==</option>
</select>
</body>

2.4 unload([[data],fn])
在当用户离开页面时会发生unload事件
具体来说，当发生以下情况时会发出unload事件：
a. 点击某个离开页面的链接
b. 在地址栏中输入了新的url
c. 使用前进或者后退按钮
d. 关闭浏览器
e. 重新加载页面
下面我们来看一个demo：

    <script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
    <script>
        $(function(){
            //不支持谷歌浏览器
            $(window).unload(function(){
                alert("离开啦啦啦啦啦~~~~");
            });
        })
    </script>
</head>
<body>
<a href="Test35.html">点击离开</a>
</body>

2.5 scroll([[data],fn])
元素滚动的时候发生的事情
一般会用到窗口滑动，如：瀑布流…
下面我们来看一个demo：

    <script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
    <style type="text/css">
        div{
            width: 800px;
            height: 800px;
            border: 1px solid black;
        }
    </style>
    <script>
        $(function(){
            $(window).scroll(function(){
                console.log("==========");
            });
        });
    </script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>

YX_车车

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[知了堂学习笔记]_jQuery的事件

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php jQuery的事件在整个库里把它当做函数来使用 1.jQuery事件汇总 ready(fn) l bind(type,[data],fn) l live(type,[data],fn) l change([[data],fn]) l click([[data],fn]) l
复制链接

扫一扫