• jQuery操作dom事件


    参考:jQuery权威指南
    jQuery初步
    jQuery选择器
    jQuery操作dom
    jQuery操作dom事件
    jQuery插件
    jQuery操作Ajax
    jQuery动画与特效
    jQuery实现导航栏
    jQuery实现点击式选项卡
    jQuery实现select三级联动

    //1.绑定事件bind()
    bind('event name', eventData, function(event) {
        /* Act on the event */
    });
    //event name事件名称:可接收事件列表
    blur,focus,load,resize,scroll,unload,click,dblclick,mounsedown,mouseup
    mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown
    keypress,keyup,error
    //eventData数据对象:
    //function回调函数:
    //如果绑定多个事件中间用空格隔开
    //映射方式绑定不同事件
    $(".text").bind({
        focus:function(event) {     
        },
        change:function(){
        }
    });
    //传参数
    $(".text").bind('focus', {msg:"test"}, function(event) {
        alert($(this).val());
    });
    //取消绑定unbind()
    $("p").unbind();//取消p的所有事件
    $("p").unbind( "click" );//取消p的click事件
    var foo = function () {
      // 处理某个事件的代码
    };
    $("p").bind("click", foo); // ... 当点击段落的时候会触发 foo 
    $("p").unbind("click", foo); // ... 再也不会被触发 foo
     
    //2.鼠标悬停事件:hover()  
    $(".clsTitle").hover(function() {
        $(".clsContent").show();
    }, function() {
        $(".clsContent").hide();
    });
    //3.轮播事件:toggle(fn1,fn2,fn3....);该函数功能是按fn函数顺序依次执行。执行完最后一个然后再重复对这些函数轮番调用
    //图片轮播:单击图片时轮播图片
    //单击时变成a.jpg,再单击变成b.jpg,再次单击又变成a.jpg
    $("img").toggle(function() {
            $("img").attr('src', 'a.jpg');
        }, function() {
            $("img").attr('src', 'b.jpg');
    });
     
     
    //4.一次性事件:one(type,[data],fn),该事件只执行一次
    //页面:<input id="btn" type="button" value="点击查看联系方式"/>
    $("#btn").one('click', function(event) {
        this.value="111111111111";
    });
     
    //5.自定义执行指定事件:trigger(),在页面dom元素加载完毕后自动执行某类事件,可以是自定义事件
    //页面dom加载完成后,使input选中
    $("input").trigger('select');
    //页面dom加载完成后,给input赋默认值
    $("input").bind('myEvent', function(event) {
        $(this).val("默认值");
    });
    $("input").trigger('myEvent');
    






  • 相关阅读:
    ionic开发遇到的问题总结
    promise和Rxjs的一点区别
    angular2组件通信
    神奇的函数作用域
    vue模板的几种写法及变化
    在安卓上,微信公众号无法分享到QQ的解决办法之一
    mysql忘记密码
    无法远程连接服务器上的mysql
    gitHub 基础命令
    linux安装Node(Centos)
  • 原文地址:https://www.cnblogs.com/meet/p/4748465.html
Copyright © 2020-2023  润新知