jquery常用事件

最新推荐文章于 2021-01-22 22:17:15 发布

没伞的孩子只能跑

最新推荐文章于 2021-01-22 22:17:15 发布

阅读量586

点赞数

分类专栏：学习笔记文章标签： jquery 常用事件

本文链接：https://blog.youkuaiyun.com/zoujian1993/article/details/50619461

版权

学习笔记专栏收录该内容

23 篇文章

订阅专栏

对jquery的各种事件进行了了解，并对常用的一些事件进行了练习。

常用事件：
1、ready（）：当dom载入就绪时执行的一个函数，相当于window.load方法。
2、on（）：在指定元素上添加事件处理的函数，经常用于添加click事件。
3、bind（）：在指定元素上绑定事件。用法同on。
4、one（）：用于在指定元素上添加事件处理函数，与on的区别是事件只执行一次。
5、hover（）：当鼠标移进移出是触发该函数，在该方法内分别可以对鼠标移进和移出事件做处理。
6、blur（）：当元素失去焦点是触发该事件。相当于直接在元素内添加onblur事件。
7、change（）：当元素值发生改变的时候触发该事件，该事件仅适用于文本域和select元素。当作用于文本域的时候该事件会在元素失去焦点时触发，相当于blur。
8、click（）：触发每一个匹配元素的click事件，dbclick触发双击事件。
9、focus（）：当元素获得焦点是触发。
10、keydown（）：当键盘或按钮被按下时触发该事件。
11、keypress（）：与keydown类似。与keydown事件不同的是，每插入一个字符就会触发keypress事件。
12、mousedown（）：当鼠标移动到元素上方并按下按键时触发。相对应的是mouseup（）。
13、mouseenter（）：当鼠标移进是触发事件，相对应的是mouseout（）或mouseleave（）。
14、unload（）：当离开本页面时触发该事件。
15、submit（）：当提交表单是触发该事件。

在进行事件练习的时候，出现了一个问题，就是当把这些事件的js单独放在<script>标签内的时候，这些事件不会生效，原因是加载的时候没有加载。所以申明这些事件的时候要放到ready（）方法内或者window.load（）方法内，这样在加载的时候才会加载这些申明。
下面是练习时用的做的一些小demo：
由于有些事件只是通过弹窗的形式测试，在这里我是使用的Jquery的一个弹窗插件layer。要测试请首先下载相应的文件[这是我上传的layer相关文件](http://download.youkuaiyun.com/detail/zoujian1993/9420753)
当然了，你也可以去官网下载。另外关于layer的一些注意事项以及小demo我在上一篇博客有一些介绍[layer介绍](http://blog.youkuaiyun.com/zoujian1993/article/details/50602129)
下面是我的小demo：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>">

        <title>My JSP 'index.jsp' starting page</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
        <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript">
    var color = ['red','pink','black','gray','blue'];
    $(document).ready(function(){
        $('#div1').attr('style','background:pink;height:500px;width:100%;height:50%');

        $('#div1').hover(function(){
            layer.msg('Mouse in');
        },function(){
            layer.msg('Mouse out');
        });

        $("#btn1").on('click',function(){
            var i=Math.floor(Math.random()*color.length);
            $('#div1').attr('style','background:'+color[i]+';height:50%;width:100%');
        });
        $("#btn2").bind('click',function(){
            var i=Math.floor(Math.random()*color.length);
            $('#div1').attr('style','background:'+color[i]+';height:50%;width:100%');
        });
        $("#btn3").one('click',function(){
            var i=Math.floor(Math.random()*color.length);
            $('#div1').attr('style','background:'+color[i]+';height:50%;width:100%');
        });

        $("#txt1").blur(function(){
            layer.msg($('#txt1').val());
        });
        $("#txt2").change(function(){
            layer.msg('输入框改变'+$('#txt2').val());
        });
        $('#txt4').focus(function(){
            layer.msg('获得焦点');
        });
        $('#txt5').keydown(function(event){
            layer.msg('keydown  '+event.keyCode);
        });
        $('#div2').mousedown(function(){
            layer.msg('mousedown');
        });
        $('#div2').mouseenter(function(){
            $('#div2').css('background-color','red');
        });
        $('#div2').mouseout(function(){
            $('#div2').css('background-color','pink');
        });
        $(window).unload(function(){
            layer.msg('unload事件触发');
        });

        $('#div3').show(4000,function(){});
    });

    function change(){
        alert($('#txt3').val());
    }
</script>
    </head>

    <body>
        <div id="div1"></div>
        <div>
            <input type="button" id="btn1" value="改变颜色on事件">
            <input type="button" id="btn2" value="改变颜色bind事件">
            <input type="button" id="btn3" value="改变颜色one事件"><br/>
            blur事件<input type="text" id="txt1">
            change事件<input type="text" id="txt2"/>
            change事件原生<input type="text" id="txt3" onchange="change()"/>
            focus事件<input type="text" id="txt4">
            keydown事件<input type="text" id="txt5">
        </div>
        <div id="div2" style="background:pink;height:10%;width:100%"></div>
        <div>
            <a href="http://www.baidu.com">百度一下</a><br/>
        </div>
        <div id="div3" style="display:none">用缓慢的动画将隐藏的段落显示出来，历时4000毫秒。<br/>
        用缓慢的动画将隐藏的段落显示出来，历时4000毫秒。用缓慢的动画将隐藏的段落显示出来，历时4000毫秒。<br/>
        用缓慢的动画将隐藏的段落显示出来，历时4000毫秒。用缓慢的动画将隐藏的段落显示出来，历时4000毫秒。<br/>
        用缓慢的动画将隐藏的段落显示出来，历时4000毫秒。</div>
    </body>
</html>