jQuery简单事件操作

$().事件类型(事件处理函数fn);    设置事件
blur(fn)    当输入域(input)失去焦点时触发事件:
focus(fn)   当输入框获得焦点时触发事件
change(fn)  当输入域(input)发生变化时触发事件:
click(fn)   click可以理解为一次简单的触发,只执行一次,找不到以后就不再执行;onclick则是给这个id注册一种行为,可以重复触发
dblclick(fn)    当双击按钮时触发事件
mouseover(fn)   鼠标移入触发
mouseout(fn)    鼠标移出触发
submit(fn)      事件将会在表单提交时触发

$().事件类型();     触发事件执行

详细注释看代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

    <script>
        $(function () {
            /*
            *   1.$().事件类型(事件处理函数fn);    设置事件
            *   blur(fn)    当输入域(input)失去焦点时触发事件:
            *   focus(fn)   当输入框获得焦点时触发事件
            *   change(fn)  当输入域(input)发生变化时触发事件:
            *   click(fn)   click可以理解为一次简单的触发,只执行一次,找不到以后就不再执行;onclick则是给这个id注册一种行为,可以重复触发
            *   dblclick(fn)    当双击按钮时触发事件
            *   mouseover(fn)   鼠标移入触发
            *   mouseout(fn)    鼠标移出触发
            *   submit(fn)      事件将会在表单提交时触发
            *
            *   2.$().事件类型();     触发事件执行
            * */

            //页面加载完毕为div设置事件
            $('div').mouseover(function () {
                //因为this代码dom对象,所以下面的$('div').css('background','lightgreen');
                //可以换成(this),如果有多个dom对象,则程序会自动解析this为不同的dom对象
               $(this).css('background','lightgreen');
            });

            $('div').mouseout(function () {
                $('div').css('background','lightblue'); //因为我们有页面内置样式,所以这儿可以写成这样$('div').css('background','');
            });

            //为同一个div设置两个mouseover事件
            //这儿只是为了演示用,因为下面的代码完全放在同一个mouseover中使用
            $('div').mouseover(function () {
                $('div').css('font-size','30px');
            });
        });

        /*
        * 上面是设置事件执行
        * 下面是触发事件执行
        * */
        function f1() {
            //解发对象事件执行
            $('div').mouseover();
        }
    </script>

    <style>
        div { width:300px; height:200px; background:lightblue;}
    </style>
</head>
<body>
<h2>简单事件操作</h2>
<div>这是一小段内容</div>
<input type="button" value="触发" onclick="f1()">
</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND