jQuery的事件,动画效果等

Posted 2021-02-09 q767498226

一.事件

　　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对象中