jQuery基础三

jQuery事件

1. jQuery事件注册
   • 单个事件注册：$().cilck(function(){})
   • 事件处理on()绑定事件

     //on()方法在匹配元素上绑定了一个或多个事件的事件处理函数
     element.on(event事件类型 多个空格隔开, [selector]子元素选择器 事件委托, fn侦听函数)
     //1.event可用对象形式：
     on({click:function(){},逗号隔开mouseenter:function(){},...})
     //2.同一函数也可用
     on("mouseenter mouseleave", function(){})
     

2. 事件处理off()解绑事件

   off()方法可移除 on()方法添加事件
   $("p").off; //解除元素所有的事件
   $("p").off("click"); //解除p元素的点击事件
   $("ul").off("click", "li"); //解绑事件委托
   

3. 事件处理one()只触发事件一次，与on()用法相同
4. 自动触发事件
   • 元素.事件()：$(“div”).click(); click事件需另外绑定，会触发元素的默认行为
   • 元素.trigger(“事件”)； $(“div”).trigger(“click”) 会触发元素的默认行为例如表单事件获得光标
   • 元素.triggerHandler(“事件”); 不会触发元素的默认行为
5. jQuery事件对象

element.on(events,[selector], function(event){})
阻止默认行为：event.preventDefaule() 或者return false
阻止冒泡：event.stopPropagation()

6. jQuery对象拷贝：$extend()

   语法：$extend([deep], target, object1,[objectN])
   

   • deep: 设为true为深拷贝，默认false为浅拷贝，一般都会覆盖
   • 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
   • 深拷贝把原来里面的数据完全复制一份给目标对象，如果有不冲突的属性，合并到一起
7. 多库共存
   • 如果$符号冲突，使用jQuery
   • 让jQuery释放对$控制权，自己定义

     var X = jQuery.noConflict();
     

8. jQuery插件
   
9. 案例：todolist
   • 本地存储格式：var todolist = [{title: “XXX”}, done: false]
   • 本地存储里面只能存储字符串的数据格式，对象—>字符串：JSON.stringify()
   • 获取本地存储数据，把字符串—>对象：JSON.parse()
   • 读取本地存储的数据：localStorage.getItem(“来源”, 转为对象)
   • 存储数据到本地存储：localStorage.setItem(“来源”, 转为字符串)
10. jQuery尺寸
    
11. 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