jQuery的事件,动画效果等

一.事件

  click(function(){})      点击事件

  hover(function(){})       悬浮事件,这是jQuery封装的,js没有不能绑定事件

  focus(function(){})        聚焦事件,多用于input

  blur(function(){})        离开聚集事件,与聚焦事件相反

  change(function(){})     内容改变时触发,多用于input,select

  keyup(function(e){})      $(window)对象获取,键盘抬起时触发,形参为e, e.keyCode可以回去键的码值

  keydown(function(e){})    键盘按下时触发

  mouseover(function(e){})   鼠标移上去时触发

  mouseenter(function(e){})     鼠标进入标签时触发

  input(function(e){})      实时监听input输入值变化,只能绑定事件才能触发

二.绑定事件

  $("#id").on("事件",function(){})    

三.阻止后续事件执行

  return false;    可以阻止后续时间执行,打断事件执行

  e.stopPropagation()    e.是函数的形参传入的

四.事件委托

  利用别的标签来捕获事件,可以操作后来添加的标签,还可以优化内存提高性能

  $("受托方").on("事件","委托人",function(){})    $(this)还是"委托人"

五.动画效果

  1.基本效果

    .show(毫秒)      显示

    .hide()          隐藏

    .toggle()         切换

  2.滑动,像窗帘一样,必须有宽高才行

    .slideDown(毫秒)    显示

    .slideUp()        隐藏

    .slideToggle()       切换

  3.渐变

    .fadeIn(毫秒)      显示

    .fadeOut()        隐藏

    .fadeToggle()      切换

  4.自定义

    animate(样式,毫秒)

六.each循环

  1.遍历数组

    $.each(list,function(index,value){})    传入的是数组的索引和值

  2.遍历jQuery对象

    $("#id").each(function(){})        可以对遍历的标签在函数中进行操作

    return false:       终止循环遍历

    return;          跳出本次循环遍历    

七. .data()

  $("#id").data("key","value");     给标签保存一个属性

  $("#id").data("key")        获取属性值

  $("#id").removeData("key")       删除数据

八.插件

  1.新增一个对象

    jQuery.extend(object)

jQuery.extend({
    min:function(a,b){return a < b ? a : b;},
    max:function(a,b){return a > b ? a : b;}
})
多个对象用逗号隔开
// 调用
jquery.min(1,2);
新增对象和调用

  2.合并到一个jQuery对象中

    jQuery.fn.extend(object)

jQuery.fn.extend({
      check:function(){},
      uncheck: function(){}
})
合并到jQuery对象中
jQuery.fn.extend({
      check:function(){},
      uncheck: function(){}
})
合并到jQuery对象中

猜你喜欢

转载自www.cnblogs.com/q767498226/p/10398717.html