jQuery简单事件操作

投稿人：在云端 2017-03-12

分类 :js jquery 总分类 :网站阅读 : 0 0条评论

$().事件类型(事件处理函数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>

下一篇：jQuery 节点追加(父子)

上一篇：jQuery加载事件执行时机