Juery事件方法 — 37个

event:

event.data           //当前执行的处理程序被绑定时传递到事件方法的可选数据

  $("p").each(function(i){

    $(this).on("click",{x:i},function(event){

      alert("序号:" + $(this).index() + "。段落的数据为: " + event.data.x);

    });

  });

event.delegateTarget           //返回当前调用的juery事件处理程序所添加的元素

$("div").on("click","button",function(event){

    $(event.delegateTarget).css("background-color", "pink");

  });

event.pageX           //返回鼠标指针的位置,相对于文档的左边缘

event.pageY           //返回鼠标指针的位置,相对于文档的上边缘

event.preventDefault()           //阻止事件的默认行为

event.relatedTarget          //返回鼠标移动时,哪个元素进入或退出

$("div,p").mouseenter(function(event){

    $("#msg").html("关联的目标为: " + event.relatedTarget.nodeName);

  })

event.result          //包含右指定事件触发的事件处理程序返回的最后一个值

$("button").click(function(){

    return "Hello world!";

  });

  $("button").click(function(event){

    $("p").html(event.result);

  }); 

event.timeStamp          //鼠标左键第一次按下到最后一次抬起所消耗的毫秒数

$("button").click(function(event){

    $("span").text(event.timeStamp);

  });

event.which          //返回被按下的键盘或鼠标号

$("input").keydown(function(event){

    $("div").html("Key: " + event.which);

  });

点击:

click()           //添加、触发click事件

dblclick()           //添加触发double click事件

光标:

blur()           //添加触发失去焦点事件

change()       //当用于select元素时,change事件会在选择某个选项是发生

                       当用于text fileld或textarea时,change事件在元素失去焦点时发生

focus( )          //获得焦点时发生的事情

$("input").focus(function(){

    $("span").css("display","inline").fadeOut(2000);

  });

focusin( )        //当在元素或在其内的任意元素上发生focus事件时,focusin()方法添加要运行的函数

focusout( )    //当在元素或在其内的任意元素上发生focusout事件时,focusout()方法添加要运行的函数

$("div").focusin(function(){

    $(this).css("background-color","#FFFFCC");

  });

  $("div").focusout(function(){

    $(this).css("background-color","#FFFFFF");

  });

键盘:

keydown( )      //键按下的过程 发生事件

keypress( )      //键被按下 发生事件

keyup( )          //键被松开 发生事件

  $("input").keydown(function(){

    $("input").css("background-color","yellow");

  });

$("input").keypress(function(){

    $("span").text(i+=1);

  });

  $("input").keyup(function(){

    $("input").css("background-color","pink");

  });

鼠标:

hover( )      //当鼠标指针悬停在被选元素上时要运行的两个函数

                     方法触发mouseenter和mouseleave事件

$("p").hover(function(){

    $("p").css("background-color","yellow");

    },function(){

    $("p").css("background-color","pink");

  });

mouseenter( ) //当鼠标移上

mouseleave( ) //当鼠标移出

  $("p").mouseenter(function(){

    $("p").css("background-color","yellow");

  });

  $("p").mouseleave(function(){

    $("p").css("background-color","lightgray");

  });

mousedown( )   //当鼠标按下

mouseup( )       //当鼠标按起来

$("div").mouseup(function(){

    $(this).after("<p style='color:green;'>释放鼠标按钮。</p>");

  });

  $("div").mousedown(function(){

    $(this).after("<p style='color:purple;'>按下鼠标按钮。</p>");

  });

mousemove( ) //当鼠标在元素上移动

$(document).mousemove(function(event){

    $("span").text(event.pageX + ", " + event.pageY);

  });

mouseover( ) //当鼠标在元素上移动,与mouseenter不同。mouseover在鼠标进入被选元素或任意子元素都会触发,mouseente事件只有在鼠标进入被选元素时被触发

mouseout( ) //当鼠标在元素上移动,与mouseout不同。mouseout在鼠标离开被选元素或任意子元素都会触发,mouseleave事件只有在鼠标离开被选元素时被触发

  $("p").mouseover(function(){

    $("p").css("background-color","yellow");

  });

  $("p").mouseout(function(){

    $("p").css("background-color","lightgray");

  });

事件:

on( ) //在被选元素上添加一个或多个事件处理程序

$("p").on("click",function(){

    alert("段落被点击了。");

  });

off( ) //移除通过on() 方法添加的事件处理程序

$('p').on('click',function() {

  $(this).css('background','#ccc')

  })

  $('button').click(function(){

  $('p').off('click')

  })

one( ) //在被选元素上添加一个或多个事件处理程序,且只能运行一次事件处理函数

$("p").one("click",function(){

    $(this).animate({fontSize:"+=6px"});

  });

窗口:

resize( ) //当跳转浏览器窗口大小时,发生resize事件

<p>窗口重置了 <span>0</span> 次大小。</p>

<button>触发窗口的 resize 事件</button>

 

实例1:var x=parseInt($('span').text())

             $(window).resize(function(){

       $('span').text(x+=1)

          })

 

实例2: $(window).resize(function(){

    var x=parseInt($('span').text())

              $("span").text(x+=1);

           });

           $("button").click(function(){

              $(window).resize();

           });

滚动:

scroll( ) //当用户滚动指定的元素时,会发生scroll事件

          Scroll事件适用于所有可滚动的元素和window对象(浏览器窗口)

          Scroll方法触发scroll事件,或规定当发生scroll事件时运行的函数

 实例1:$('div').scroll(function() {

    var x=parseInt($('span').text())

    $('span').text(x+=1)

          })

实例2: $("div").scroll(function(){

            $("span").text(x+=1);

         });

        $("button").click(function(){

            $("div").scroll();

        });

表单:

select( ) //textarea或文本类型的input元素的文本被选中(标记)时,会发生select事件

$("input").select(function(){

    $("input").after("文本已选中!");

  });

submit( ) //当提交表单时,发生submit事件

            该事件只适用于<form>元素

$("form").submit(function(){

    alert("提交");

  });



trigger( ) //触发被选元素上指定的事件以及事件的默认行为(比如表单提交)

           该方法与triggerHandler方法类似,不同的是triggerHandler()不触发事件的默认行为

           triggerHandler方法创建的事件不会再DOM树中冒泡

$("input").select(function(){   //会触发冒泡

    $("input").after("文本已选中!");

  });

  $("button").click(function(){

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

 });

triggerHandler( ) //触发被选元素上指定的事件,triggerHandler()不触发事件的默认行为

                   triggerHandler方法创建的事件不会再DOM树中冒泡

$("input").select(function(){   //不触发冒泡

     $("input").after("select 事件触发!");

  });

  $("button").click(function(){

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

  });

右键菜单事件:

contextmenu( ) //添加事件处理程序到contextmenu事件(右键菜单事件)

                             Contextmenu() 方法只是作为 .on( contextmenuhandler )

                             的一个速记方法,移除该事件可以用 .off( contextmenu)

 $( "#div" ).contextmenu(function(event) {

alert( "处理程序.contextmenu()被调用。" );

event.preventDefault()  //取消右键菜单的浏览器默认行为

}); 


猜你喜欢

转载自blog.csdn.net/yang295242361/article/details/80104958
37