zoukankan      html  css  js  c++  java
  • jquery模拟操作——trigger()函数

    在页面中很多效果需要触发才能实现,比如click后的弹窗。但有时我们无法点击或是跳过用户触发,就像网页中那些可恶的广告弹窗

    trigger函数可以实现模拟操作。譬如常用的点击动作,我们可以这样,

    $('#btn').trigger('click');

    这样当页面加载完成后就会立即触发id为btn的点击效果,除此之外还可以触发我们自定义的事件比如

    $('#btn').bind('myClick',function(){`````});
    $('#btn').trigger('myClick');

    利用trigger的特性,我们可以把它变成表单中全选的效果

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
    
        <body>
            <table border="" cellspacing="" cellpadding="">
                <tr>
                    <th>
                        <input type="button" name="" id="" value="全选" /><br />
                        <input type="checkbox" name="" id="" value=""/><label for="">全选</label>
                    </th>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="" value=""/><label for="">1</label>
                        <input type="checkbox" name="" id="" value=""/><label for="">2</label>
                        <input type="checkbox" name="" id="" value=""/><label for="">3</label>
                    </td>
                </tr>
            </table>
            <script src="../jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                $('th input[type="button"]').click(function(){
                    $('td input').trigger('click');
                    
                });
                $('th input[type="checkbox"]').click(function(){
                    $('td input').click();
                });
            </script>
        </body>
    
    </html>

     $('td input').click(); 和 $('td input').trigger('click'); 效果是一样的,trigger函数还可以传参,由此我们可以拓展他的各种功能。

  • 相关阅读:
    让我用69406条评论告诉你“反贪风暴”好不好看!!!
    【大数据】爬取全部的校园新闻
    【大数据】获取一篇新闻的全部信息
    【大数据】理解爬虫原理
    中文统计
    [大数据]统计词频
    数据库表设计以及表字段命名
    设计模式的理论理解
    文件上传之oss服务器上传文件简笔
    QueryWrapper/UpdateWrapper认识
  • 原文地址:https://www.cnblogs.com/so-letitgo/p/4443568.html
Copyright © 2011-2022 走看看