精华内容
参与话题
问答
  • JQ 点击自动增加

    2015-12-21 14:12:20
    jQuery 点击按钮自动增加,和减少.
  • NULL 博文链接:https://onestopweb.iteye.com/blog/2346078
  • jq 模拟点击事件,自动触发

    千次阅读 2019-06-26 17:48:42
    $('#id').trigger("click");
    $('#id').trigger("click");

     

    展开全文
  • 有时候,需要通过模拟用户操作,来达到单击的效果。例如在用户进入页面后,就触发...本篇文章我们就为大家讲解JQuery 模拟点击事件,自动触发事件。 $('#btn').trigger("click"); 这样,当页面加载完毕后,就...

    有时候,需要通过模拟用户操作,来达到单击的效果。例如在用户进入页面后,就触发click事件,而不需要用户去主动单击。在JQuery中,可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。本篇文章我们就为大家讲解JQuery 模拟点击事件,自动触发事件。

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

    这样,当页面加载完毕后,就会立刻输出想要的效果。也可以直接简写click(),来达到同样的效果:

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

    触发自定义事件

    trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。例如为元素绑定一个“myClick”的事件,JQuery代码如下:

    $('#btn').bind("myClick", function(){     
        $('#test').append("<p>我的自定义事件.</p>");     
    });
    

    想要触发这个事件,可以使用以下代码来实现:

    $('#btn').trigger("myClick");
    

    传递数据

    trigger(type[,data])方法有两个参数,第1个参数是要触发的事件类型,第2个参数是要传递给事件处理函数的附加数据,以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。

    下面是一个传递数据的例子。

    $(function(){     
        $('#btn').bind("myClick", function(event, message1, message2){     
            $('#test').append( "<p>"+message1 + message2 +"</p>");     
        });     
        $('#btn').click(function(){     
            $(this).trigger("myClick",["我的自定义","事件"]);     
        }).trigger("myClick",["我的自定义","事件"]);     
    })
    

    执行默认操作

    trigger()方法触发事件后,会执行浏览器默认操作。例如:

    $("input").trigger("focus");
    

    以上代码不仅会触发为<input>元素绑定的focus事件,也会使<input>元素本身得到焦点(这是浏览器的默认操作)。

    如果只想触发绑定的focus事件,而不想执行浏览器默认操作,可以使用jQuery中另一个类似的方法——triggerHandler()方法。

    $("input").triggerHandler("focus");
    

    该方法会触发<input>元素上绑定的特定事件,同时取消浏览器对此事件的默认操作,即文本框只触发绑定的focus事件,不会得到焦点



    作者:Cherry丶小丸子
    链接:https://www.jianshu.com/p/e3687c3a1051
    来源:简书
     

    展开全文
  • 帮写后代的男朋友写的一个简单的轮播图…… 此处请自行引入jquery。上代码!!! &amp;lt;style&amp;gt; body{ padding: 0; margin: 0; overflow: hidden; } .array { height: 100%...

    帮写的一个简单的轮播图……
    此处请自行引入jquery。上代码!!!

    <style>
            body{
                padding: 0;
                margin: 0;
                overflow: hidden;
            }
            .array {
                height: 100%;
                width: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
    
            .array > div {
                width: 10%;
                height: 100%;
                display: inline-block;
                position: absolute;
                top: 0;
            }
    
            .leftArr {
                left: 0;
                background: -webkit-linear-gradient(left, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
                background: -o-linear-gradient(right, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
                background: -moz-linear-gradient(right, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
                background: linear-gradient(to right, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
            }
    
            .rightArr {
                right: 0;
                background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
                background: -o-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
                background: -moz-linear-gradient(right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
                background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
            }
            .imageBox{
                width: 100%;
                height: 100%;
                position: relative;
            }
            .array > div img {
                width: 60px;
                height: 60px;
                cursor: pointer;
            }
            .vaCenter {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            .pointList {
                position: absolute;
                top: auto;
                left: 0;
                right: 0;
                margin: auto;
                height: 21px;
                bottom: 24px;
                text-align: center;
            }
            .pointList>div {
                display: inline-block;
                width: 8px;
                height: 8px;
                border-radius: 8px;
                background: #3d786c;
                margin-right: 6px;
            }
            .focusActive {
                background: #79bbae !important;
            }
    <div class="imageBox">
        <img src="img/img1.jpg" id="images" index="0" alt=""/>
        <div class="array">
            <div class="leftArr">
                <img onclick="next(this)" data="left" class="vaCenter" src="img/leftArr.png" alt="">
            </div>
            <div class="rightArr">
                <img onclick="next(this)" data="right" class="vaCenter" src="img/rightArr.png" alt="">
            </div>
        </div>
        <div class="pointList"></div>
    </div>
    //urlList 数组 将所有图片的路径写入
        //list 字符串 第一个圆点添加focus的样式
        var urlList=['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg','img/img5.jpg','img/img6.jpg','img/img7.jpg'],list='<div class="focusActive"></div>';
        for (var i = 0; i < urlList.length - 1; i++) {
            list += '<div></div>';
        }
        $('.pointList').html(list);//将所有的圆点都添加到容器里面
            function next(e) {//点击上/下一张
                window.clearInterval(set);//点击滚动轮播时清除计时器
                var _ths = $(e),
                        data = _ths.attr('data'),//查看此事件发生在左点击还是右点击
                        _index = $('.imageBox #images').attr('index'),//当前显示的图片是在数组中的第几张
                        len = urlList.length,//轮播图片的总量
                        _idx = 0;
                if (data == 'left') {
                    var ix = 0;
                    if (_index != 0) {
                        ix = parseInt(_index) - 1;
                        _idx = ix + 1;
                    } else {
                        ix = len - 1;
                        _idx = len;
                    }
                    $('.imageBox #images').attr('src', urlList[ix]).attr('index', ix);
                    $('.pointList>div').removeClass('focusActive');
                    $('.pointList>div:nth-child(' + _idx + ')').addClass('focusActive');
                } else {
                    var ix = 0;
                    if (parseInt(_index) + 1 != len) {
                        ix = parseInt(_index) + 1;
                        _idx = ix + 1;
                    } else {
                        ix = 0;
                        _idx = 1;
                    }
                    $('.imageBox #images').attr('src', urlList[ix]).attr('index', ix);
                    $('.pointList>div').removeClass('focusActive');
                    $('.pointList>div:nth-child(' + _idx + ')').addClass('focusActive');
                }
                set=window.setInterval(function(){//点击轮播结束,启动计时器
                    autoScroll()
                },4000);
            }
        $(".imageBox>div").on({
            mouseover : function(){
                clearInterval(set);//鼠标移到图片上关闭自动轮播
            } ,
            mouseout : function(){
                set=window.setInterval(function(){
                    autoScroll()
                },4000);//鼠标移出图片区域重新启动自动轮播
            }
        }) ;
    
        function autoScroll(){//自动轮播
            //_index:每张图片链接在
            var _index = $('.imageBox #images').attr('index'),
                    len = urlList.length,
                    _idx = 0;
            var ix = 0;
            if (parseInt(_index) + 1 != len) {
                ix = parseInt(_index) + 1;
                _idx = ix + 1;
            } else {
                ix = 0;
                _idx = 1;
            }
            $('.imageBox #images').attr('src', urlList[ix]).attr('index', ix);
            $('.pointList>div').removeClass('focusActive');
            $('.pointList>div:nth-child(' + _idx + ')').addClass('focusActive');
        }
        var set=window.setInterval(function(){//自动执行计时器
            autoScroll()
        },4000);

    完了……没了……

    展开全文
  • Jq 自动登录

    2018-07-04 17:47:17
    本文章是利用jq 来做自动登录,具体需求如下,在用户点击了保存密码后,下一次访问时跳过登录页面,直接进入首页,具体是利用token 来做的,判断token是否存在;1. 首先做一个中间页(在登录之前的一个页面,专门做...

    本文章是利用jq 来做自动登录,具体需求如下,在用户点击了保存密码后,下一次访问时跳过登录页面,直接进入首页,具体是利用token 来做的,判断token是否存在;

    1. 首先做一个中间页(在登录之前的一个页面,专门做跳转,相当于一个跳转页);

    $(document).ready(function () {
        var token = $.cookie(health.cookie_key);
        if (token == undefined || token == false) {      //判断token是否存在,不存在跳到登录页
            location.href = '/health/login.html';
        } else {
            let url = $.formateUrl('backend/user/info');  //存在的话,获取用户信息(本项目需求)
            $.get(url, function (res) {
                if (res.code == 0) {
                    let currentInfo = [];
                    currentInfo.push({
                        avatar: res.content.user.avatar,
                        name: res.content.user.name,
                    });
    
                    $.cookie(health.cookie_orgid_key, res.content.user.orgid, {path: '/'});
                    $.cookie(health.cookie_user_key, JSON.stringify(currentInfo), {path: '/'});
    
                    let returnUrl = $.getQueryString('returnUrl');
                    if (returnUrl) {
                        location.href = returnUrl;
                    } else {
                        location.href = '/health/index.html';   //完成之后跳到首页
                    }
    
                } else {                //如果token 过期,先清除相处的相关数据,在跳到登录页
                    $.destroy();             //清除数据,自定义的方法destroy()
                    location.href = '/health/login.html';
                }
    
            });
        }
    });

    2.登录页 ,如果点击了记住密码,则只需以下操作。(具体代码再项目中有,这里只表达相关意思)

    //记住密码
    var cookieOptions = {};
    cookieOptions.path = '/';
    if (this.selected === 'true' || this.selected === true) {   //    如果记住密码
        cookieOptions.expires = 7;                // 在cookie 中保存7天
    }
    $.cookie(health.cookie_key, res.content.user.access_token, cookieOptions); 


    3. 之后跳到登录页

    let referrer = $.getQueryString('referrer');
    if (referrer) {
        location.href = decodeURI(referrer);
    } else {
        location.href = health.homeUrl + 'health/index.html';
    }

    展开全文
  • jq加载页面时自动点击按钮,则 &lt;i id="spPoints"&gt;按钮&lt;/i&gt; &lt;script language="javascript" type="text/javascript"&gt; ..
  • html基本框架如下: //图片可自行替换 <div class="out"> 2 <ul class="img"> 3 <li><a href="#"><img src="images/1.jpg" alt=""></a></li> ...a...
  • 在央视官网划水的时候,发现一个点赞排名,试着点击了几次,竟然发现没有防重复提交,如下图: 于是想着用代码实现自动间隔点赞 初步代码实现       初始代码如下: $(function() { ...
  • 想要实现效果,点击时有滑动出导航条的效果。 实现代码 html代码 &lt;ul class="tab"&gt; &lt;li&gt;全部&lt;/li&gt; &lt;li&gt;福利&lt;/li&gt; &...
  • 1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">...JQ轮播图,图片可调用,自动+鼠标点击切换</title> ...
  • <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">...JQ轮播图,图片可调用,自动向左切换+鼠标点击切换</title> <sc...
  • 这个图片轮播是基于jQuery开发的一个无缝衔接,可以点击左右进行滑动、可以点击下标进行滑动、也可以进行自动轮播的插件
  • jq点击切换隐藏显示

    千次阅读 2019-06-17 14:20:17
    点击自动切换显示或隐藏 .hidden { display:none; } .block { display:block; } <button style="display:none;"></button>/默认隐藏* */ <p>123456789</p> 在加入代码: <...
  • jq实现自动轮播图效果

    万次阅读 2018-04-15 10:55:06
    当离开时,自动播放 3、点击底部button的时候,定时器清除,手动切换图片。当离开时,自动播放&lt;div id="container"&gt; &lt;a class="item" href="#"&gt;&...
  • jq实现点击右边内容实现,左边内容切换、自动切换,当鼠标放上右边li上面,左边内容停止切换。HTML代码: <div class="nav-list-content fldi">//左边内容 <ul class="clearfix" id="shenfen
  • 因为我点击这个按钮是要根据各种配置信息,从很多个地方获取数据,然后填充到一个word文件中,实现 自动生成word文档的功能,这个时间很长,以至于按钮点击后回发超时,用户根本不知道这个文档到底好了没,当然我也...
  • 如何做到进入网页默认自动翻译!! 我用一下方式都不行,可以改变select中的值但是不能出发翻译事件 $(window).load(function(){ $('.goog-te-combo').change(function(){ $('.goog-te-combo').empty(); var ...
  • 利用jq实现横向tab分类切换自动居中

    千次阅读 2018-11-29 16:30:47
    css:用flex布局自动处理浮动,也不用去计算ul的宽度。 js: 1.当前点击的li距离屏幕左边的距离 2.li的宽度的一半 3.总屏幕宽度的一半 4.当前滚动条滚动的距离 最后结果: 当前滚动条滚动的距离+(当前点击的...
  • 实现自动点击

    2017-05-26 15:26:00
    实现自动点击前提是这个元素有自动点击事件 1.JS 实现自动点击 varoDiv=document.getElementById('div');//获取元素div oDiv.onclick=function(){//给元素增加点击事件 alert(1); }; oDiv.click();//执行点击...
  • 其实不懂程序的人会感觉,哇,写后台脚本自动抢购,好厉害啊。 其实写一个js 的脚本并不难,今天就在这里跟大家分享下最简单的js脚本怎么写然后植入网页。   首先,先模拟一个抢购页面的网页,预设默认的时候有一个...

空空如也

1 2 3 4 5 ... 7
收藏数 129
精华内容 51
热门标签
关键字:

jq自动点击