jQuery中的常用事件

最新推荐文章于 2021-02-20 17:51:38 发布

黄佳耀

最新推荐文章于 2021-02-20 17:51:38 发布

阅读量215

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46884853/article/details/109445339

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        .changeColor{
            background-color: #333;
            border: 2px solid red;
            color: white;
            font-weight: bold;
            
        }
        h2{
            text-align: center;
        }
    </style>
</head>

<body>
<!-- 
    toggleClas:定义和用法
        toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

        该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

        不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。
 -->
 <div id="box" style="width: 100%;height:50px;border:2px solid #333;text-align:center">注意看：我马上要被切换罗！！！</div>
 <button id="btn" style="outline:none;margin:20px auto 0;display:block;width:200px;height:30px;border-radius: 15px;line-height:30px;text-align:center;">toggleClass:切换</button>
<script>
    $('#btn').click(function(){
        $('#box').toggleClass('changeColor')
    });
</script>

<br>
<hr>
<h2>浏览器事件</h2>

 <!-- 
    resize:定义和用法
    当调整浏览器窗口的大小时，发生 resize 事件。

    resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。
 -->
    <span>resize次数：</span><span id="times">0</span>
    <script>
    $(window).resize(function(){
        // text获取元素的文本内容
        $('#times').text(parseInt($('#times').text())+1);
    });
</script>

<!-- 
    scroll:定义和用法
        当用户滚动指定的元素时，会发生 scroll 事件。

        scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

        scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。
 -->
    <div id="bigBox" style="height: 100px;width:100%;overflow:hidden;border:2px solid red;overflow-y:scroll">
        <div style="width: 100%;height:500px;background:gray;"></div>
    </div>
    <span>scroll次数：</span><span id="timescroll">0</span>
    <script>
        $('#bigBox').scroll(function(){
            $('#timescroll').text(parseInt($('#timescroll').text())+1);
        });
    </script>

<br>
<hr>
<h2>鼠标点击事件</h2>
<h2>on and bind and trigger and ....</h2>
<diV style="width: 100%;border:1px solid #666">
        <div style="margin: 0 auto;margin:0 auto;width:150px;background:skyblue;text-align:center"><span style="padding-right:50px;display:inline-block">我会+1哦:</span><span id="click_add">0</span></div>
        <button id="btn_text" style="margin:0 auto;display:block">点击</button>
</diV>

<script>
    // $('#btn_text').click(function(){
    //     $('#click_add').text(parseInt($('#click_add').text())+1);
    // });

    // on 事例
    // $('#btn_text').on('click',function(){
    //     $('#click_add').text(parseInt($('#click_add').text())+1);
    // })

    // bind绑定
    // $('#btn_text').bind('click',function(){
    //     $('#click_add').text(parseInt($('#click_add').text())+1);
    // })

    // trigger
    $('#btn_text').click(function(){
        $('#click_add').text(parseInt($('#click_add').text())+1);
        // 触发Click事件
        $('#btn_text').trigger('click');
    });

</script>

<!-- hover -->
<label for="" id="hover_text" style="display: block;margin:0 auto;text-align:center">鼠标悬停事件</label>
<script>
    $('#hover_text').hover(function(){
        $('#hover_text').text('你来了！');
        $('#hover_text').css({
            'background':'#333',
            'color':'white'
        });
    },
    function(){
        $('#hover_text').text('你走了！');
        $('#hover_text').css({
            'background':'red',
            'color':'white'
        })
    });
</script>

<input type="text" style="width: 400px;margin:50px auto ;display:block" id="ipt" placeholder="blur and focus test!!!">
<!-- 
    blur:定义和用法
        当元素失去焦点时发生 blur 事件。

        blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。

        提示：早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。
 -->
 <!-- 
     focus:定义和用法
        当元素获得焦点时，发生 focus 事件。

        当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

        focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。
 -->
 <script>
     $('#ipt').focus(function(){
         $('#ipt').val('focus'); 
     });
     $('#ipt').blur(function(){
         $('#ipt').val('blur'); 
     });
 </script>

<br>
<hr>
<h2>键盘事件</h2>
<div style="text-align: center;width:200px;margin:50px auto;"><span>显示效果：</span><span id="result"></span></div>
<input type="text" style="width: 400px;margin:50px auto ;display:block" id="ipt1" placeholder="keyup test!!!">
<input type="text" style="width: 400px;margin:50px auto ;display:block" id="ipt2" placeholder="keydown test!!!">
<input type="text" style="width: 400px;margin:50px auto ;display:block" id="ipt3" placeholder="keypress test!!!">
<script>
    $('#ipt1').keyup(function(){
        // $('#ipt1').val('this is keyup test!!!');
        $('#result').text($(this).val());
    });
    $('#ipt2').keydown(function(){
        // $('#ipt2').val('this is keydown test!!!');
        $('#result').text($(this).val());
    });
    $('#ipt3').keypress(function(){
        // $('#ipt3').val('this is keypress test!!!');
        $('#result').text($(this).val());
    });
</script>
</body>
</html>

黄佳耀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
jQuery中的常用事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcss.com/
复制链接

扫一扫

专栏目录