• jQuery学习之事件


    浑浑噩噩度过了迷茫的几天,这几天就像跟傻了一样,什么东西都学不进去,而且又发现好多东西都要学,在跟几个朋友聊了下天后,重新又振作了起来,于是重新拾起当初

    学习的那份激情,继续开始学习。

    咱们博客园里基本都是web前端的高手、大牛,所以对我这个主要做后台服务器编程的小菜鸟来说,希望大神们不要喷我呀,说实话,看着前端那些绚丽的页面,心真的动了,感觉html5,jquery,css太神奇了,所以现在准备将自己觉着比较常见的jQuery函数记录一下。

    jQuery事件:

    1.change()函数

    当元素的值发生改变时,会发生 change 事件。

    该事件仅适用于文本域(text field),以及 textarea 和 select 元素。

    change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。

    注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。

    例:

    $(".field").change(function(){
      $(this).css("background-color","#abcdef");
    });

    2.slideToggle(speed,[callback])函数

    通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。

    speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

    callback (Function) : (可选) 在动画完成时执行的函数。

    例:

    $("p").slideToggle("fast",function(){
       alert("fast slide");
     }); 

    3.click()函数

    这个绝对是jQuery用的最多的函数了,当点击元素时,会发生 click 事件。

    当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click,click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。

    例:

    $("button").click(function(){
      $("p").slideToggle();
    });

    4.focus()和blur()函数

    这两个函数一般都以成对形式存在,focus表示获得焦点的时候触发对应的函数,blur表示失去焦点时会触发对应的函数

    例:

            $("#username").focus(function()
            {
                var value = $(this).val();
                if(value == this.defaultValue)
                {
                    $(this).val('');
                }
            })
            $("#username").blur(function()
            {
                          var value = $(this).val();
                if(value == '')
                {
                    $(this).val(this.defaultValue);
                }
            })    

    5.preventDefault()函数

    preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。

    例:

    $("a").click(function(event){
      event.preventDefault();
    });

    6.keydown()和keyup()函数

    完整的 key press 过程分为两个部分:1. 按键被按下(keydown);2. 按键被松开(keyup)。

    当按钮被按下时,发生 keydown 事件。keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。

    当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数。

    注:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

    例:

      $("input").keydown(function(){
        $("input").css("background-color","#FFFFCC");
      });
      $("input").keyup(function(){
        $("input").css("background-color","#D6D6FF");
      });

    7.mouseover、mouseout、mouseenter、mouseleave、mousedown、mouseup函数

    这几个函数不用说基本都能猜出它们的作用,跟鼠标的动作相关的,通常它们与对应事件配套使用,例:

      $("p").mouseenter(function(){
        $("p").css("background-color","yellow");
      });
      $("p").mouseleave(function(){
        $("p").css("background-color","#E9E9E4");
      });

    8.one()函数

    one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。

    当使用 one() 方法时,每个元素只能运行一次事件处理器函数。这点和bind不同,bind绑定后,只要一触发就会调用对应的函数,例:

    $("p").one("click",function(){
      $(this).animate({fontSize:"+=6px"});
    });

    这样在点击点击段落时,function之后执行一次,如果one换成bind,则每次点击都会执行function一次。

    9.scroll()函数

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

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

    scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。例:

    $("div").scroll(function() {
      $("span").text(x+=1);
    });

    10.select()函数

    textarea文本类型input 元素中的文本被选择时,会发生 select 事件。

    select() 方法触发 select 事件,或规定当发生 select 事件时运行的函数。例:

    $("input").select(function(){
      $("input").after(" Text marked!");
    });

    11.toggle()函数

    toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。而click只能绑定一个处理函数

    当指定元素被点击时,在两个或多个函数之间轮流切换。

    如果规定了两个以上的函数,则 toggle() 方法将切换所有函数。例如,如果存在三个函数,则第一次点击将调用第一个函数,第二次点击调用第二个函数,第三次点击调用第三个函数。第四次点击再次调用第一个函数,以此类推。例:

    $("p").toggle(
      function(){
      $("body").css("background-color","green");},
      function(){
      $("body").css("background-color","red");},
      function(){
      $("body").css("background-color","yellow");}
    );

    这样当第一次点击时,会调用第一个函数,第二次点击,调用第二个函数,依次循环下去。

    12.trigger()函数

    trigger() 方法触发被选元素的指定事件类型,括号里必须填上某一指定事件。例:

    $("button").click(function(){
      $("input").trigger("select");
    });
  • 相关阅读:
    项目开发日志——第三篇
    项目开发日志——第二篇
    项目开发日志——第一篇
    实时控制软件设计第四周作业
    实时控制软件设计第三周作业
    实时控制软件设计第二周作业
    关于开放式CNC系统实时软件控制系统的一些简单分析
    初学者的卡尔曼滤波——扩展卡尔曼滤波(一)
    C++_Eigen函数库用法笔记——The Array class and Coefficient-wise operations
    C++_Eigen函数库用法笔记——Block Operations
  • 原文地址:https://www.cnblogs.com/xiaoluo501395377/p/2742958.html
Copyright © 2020-2023  润新知