zoukankan      html  css  js  c++  java
  • jQuery 事件

    blur()
    触发或绑定blur事件。
    $("input").blur(function(){
      $("input").css("background-color","#D6D6FF");
    });

    change()
    触发或绑定change事件, 该事件仅适用于文本域(text field),以及 textarea 和 select 元素。
    $(".field").change(function(){
      $(this).css("background-color","#FFFFCC");
    });

    click()
    触发或绑定click事件。
    $("button").click(function(){
      $("p").slideToggle();
    });

    dblclick()
    触发或绑定dblclick事件。

    error()
    触发或绑定error事件, 当元素遇到错误(没有正确载入)时,发生 error 事件。
    $("img").error(function(){
      $("img").replaceWith("Missing image!");
    });

    focus()
    触发或绑定focus事件,当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
    $("input").focus(function(){
      $("input").css("background-color","#FFFFCC");
    });

    resize()
    触发或绑定resize事件,当调整浏览器窗口的大小时,发生 resize 事件。

    scroll()
    触发或绑定scroll事件,当用户滚动指定的元素时,会发生 scroll 事件。
    scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。

    select()
    触发或绑定select事件,当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。
    $("input").select(function(){
      $("input").after(" Text marked!");
    });

    submit()
    触发或绑定submit事件,当提交表单时,会发生 submit 事件。该事件只适用于表单元素。
    $(selector).submit()

    keydown() 触发或绑定指定元素的keydown事件
    keypress() 触发或绑定指定元素的keypress事件
    keyup() 触发或绑定指定元素的keyup事件
    当按钮被按下时,发生keydown事件;当按钮被松开时,发生keyup事件;按键按下并松开,发生keypress事件.
    $("input").keydown(function(){
      $("input").css("background-color","#FFFFCC");
    });

    load()
    当指定的元素(及子元素)已加载时,会发生load事件,适用于任何带有URL的元素(比如图像、脚本、框架、内联框架)。
    根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发load事件。
    $("img").load(function(){
      $("div").text("Image loaded");
    });

    unload()
    当用户离开页面时,会发生 unload 事件, 包括以下情况时:
    点击某个离开页面的链接;在地址栏中键入了新的URL;使用前进或后退按钮;关闭浏览器;重新加载页面
    unload() 方法只应用于 window 对象。
    $(window).unload(function(){
      alert("Goodbye!");
    });
    $("p").click(function(e){
      $("p").animate({fontSize:"+=5px"});
      $(this).unbind(e);
    });

    mousedown() 触发或将函数绑定到指定元素的mousedown事件
    mouseenter() 触发或将函数绑定到指定元素的mouseenter事件
    mouseleave() 触发或将函数绑定到指定元素的mouseleave事件
    mousemove() 触发或将函数绑定到指定元素的mousemove事件
    mouseout() 触发或将函数绑定到指定元素的mouseout事件
    mouseover() 触发或将函数绑定到指定元素的mouseover事件
    mouseup() 触发或将函数绑定到指定元素的mouseup事件
    $("button").mousedown(function(){
      $("p").slideToggle();
    });

    ready()
    规定当 ready 事件发生时执行的代码。
    当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
    由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
    ready() 函数仅能用于当前文档,因此无需选择器。
    允许使用以下三种语法:
    $(document).ready(function)
    $().ready(function)
    $(function)

    toggle()
    用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
    $("p").toggle(
      function(){
        $("body").css("background-color","green");},
      function(){
        $("body").css("background-color","red");},
      function(){
        $("body").css("background-color","yellow");}
    );

    trigger()
    触发被选元素的指定事件类型。
    $("button").click(function(){
      $("input").trigger("select");
    });

    triggerHandler()

    触发被选元素的指定事件类型。但不会执行浏览器默认动作,也不会产生事件冒泡。
    triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素。
    与 trigger() 方法相比的不同之处:
    它不会引起事件(比如表单提交)的默认行为
    .trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
    由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
    该方法的返回的是事件处理函数的返回值,而不是具有可链性的 jQuery 对象。此外,如果没有处理程序被触发,则这个方法返回 undefined。
    $("button").click(function(){
      $("input").triggerHandler("select");
    });

    bind()
    为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
    $("button").bind("click",function(){
      $("p").slideToggle();
    });

    unbind()
    移除被选元素的事件处理程序。
    该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
    unbind()适用于任何通过jQuery附加的事件处理程序,取消绑定元素的事件处理程序和函数
    如果没有规定参数,unbind()方法会删除指定元素的所有事件处理程序。
    $("button").click(function(){
      $("p").unbind();
    });

    live()
    为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
    通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
    $("button").live("click",function(){
      $("p").slideToggle();
    });

    die()
    移除所有通过live()方法向指定元素添加的一个或多个事件处理程序。
    $("p").die();


    one()
    为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。
    当使用one()方法时,每个元素只能运行一次事件处理器函数。
    $("p").one("click",function(){
      $(this).animate({fontSize:"+=6px"});
    });


    preventDefault()
    阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
    $("a").click(function(event){
    event.preventDefault();
    });

    event属性:

    result 属性
    包含由被指定事件触发的事件处理器返回的最后一个值,除非这个值未定义。
    $("button").click(function(e) {
      $("p").html(e.result);
    });

    target 属性
    规定哪个 DOM 元素触发了该事件。
    $("p, button, h1, h2").click(function(event){
    $("div").html("Triggered by a " + event.target.nodeName + " element.");
    });

    timeStamp 属性
    包含从 1970 年 1 月 1 日到事件被触发时的毫秒数。
    $("button").click(function(event){
      $("span")html(event.timeStamp);
    });

    type 属性
    描述触发哪种事件类型。
    $("p").bind('click dblclick mouseover mouseout',function(event){
    $("div").html("Event: " + event.type);
    });

    which 属性
    指示按了哪个键或按钮。
    $("input").keydown(function(event){
      $("div").html("Key: " + event.which);
    });

    pageX() 属性
    鼠标指针的位置,相对于文档的左边缘。
    pageY() 属性
    鼠标指针的位置,相对于文档的上边缘。
    $(document).mousemove(function(e){
      $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
    });

  • 相关阅读:
    Git上传文件、文件夹到github
    Git管理修改、撤销修改、删除文件
    Git使用教程之从远程库克隆项目(四)
    Git使用教程之在github上创建项目(三)
    Git使用教程之SSH连接方式配置(二)
    Git使用教程之新手也能看懂(一)
    JS字符串截取 “指定字符” 前面和后面的内容!
    vue.js 实现点击展开收起动画
    最简单的手机预览WEB移动端网页的方法
    vue-cli中浏览器图标的配置
  • 原文地址:https://www.cnblogs.com/luangeng/p/6189481.html
Copyright © 2011-2022 走看看