jQuery事件
- jQuery事件注册
- 单个事件注册:$().cilck(function(){})
- 事件处理on()绑定事件
element.on(event事件类型 多个空格隔开, [selector]子元素选择器 事件委托, fn侦听函数)
on({click:function(){},逗号隔开mouseenter:function(){},...})
on("mouseenter mouseleave", function(){})
- 事件处理off()解绑事件
off()方法可移除 on()方法添加事件
$("p").off;
$("p").off("click");
$("ul").off("click", "li");
- 事件处理one()只触发事件一次,与on()用法相同
- 自动触发事件
- 元素.事件():$(“div”).click(); click事件需另外绑定,会触发元素的默认行为
- 元素.trigger(“事件”); $(“div”).trigger(“click”) 会触发元素的默认行为例如表单事件获得光标
- 元素.triggerHandler(“事件”); 不会触发元素的默认行为
- jQuery事件对象
element.on(events,[selector], function(event){})
阻止默认行为:event.preventDefaule() 或者return false
阻止冒泡:event.stopPropagation()
- jQuery对象拷贝:$extend()
语法:$extend([deep], target, object1,[objectN])
- deep: 设为true为深拷贝,默认false为浅拷贝,一般都会覆盖
- 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
- 深拷贝把原来里面的数据完全复制一份给目标对象,如果有不冲突的属性,合并到一起
- 多库共存
- jQuery插件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/732659e0fe59c8599d8af047941e8b3e.png)
- 案例:todolist
- 本地存储格式:var todolist = [{title: “XXX”}, done: false]
- 本地存储里面只能存储字符串的数据格式,对象—>字符串:JSON.stringify()
- 获取本地存储数据,把字符串—>对象:JSON.parse()
- 读取本地存储的数据:localStorage.getItem(“来源”, 转为对象)
- 存储数据到本地存储:localStorage.setItem(“来源”, 转为字符串)
- jQuery尺寸
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/0fc5fa6d1db2b47bf005f57358a6748d.png)
- jQuery位置
- offset(): 设置或获取元素偏移
- offset()方法设置或返回被选元素相对文档的偏移坐标,跟父级没有关系
- 有两个属性offset().top/left:距离文档的偏移
- 可以设置元素偏移:offset({top: 10, left: 30})
- position:获取距离带有定位的父级位置(偏移),没有定位的父级以文档为准,不能设置偏移量
- scrollTop()/scrollLeft():设置或获取元素被卷去的头部或左侧
- 页面滚动事件:$(window).scroll(function(){});
- 返回顶部:$(“body, html”).stop().animate({scrollTop: 0}); //animate对元素操作:body, html