jQuery基本操作之三

jQuery3
jQuery事件：
jQuery事件注册：
单个事件注册：
$(“div”).click(function(){
$(this).css(“background”,“purple”);
});
$(“div”).mouseenter(function(){
$(this).css(“background”,“skyblue”);
});
事件处理on（多个或一个事件连接起来）
element.on(events,[selector],fn)
1.events：一个或多个用空格分隔的事件类型
2.selector：元素的子元素选择器
3.fn回调函数即绑定在元素身上的侦听函数
$(“div”).on({
mouseenter:function(){
$(this).css(“background”,“skyblue”);
},click:function(){
$(this).css(“background”,“purple”);
},mouseleave:function(){
$(this).css(“background”,“blue”);
}
})
$(“div”).on(“mouseenter mouseleave”,function(){
$(this).toggleClass(“current”);
})
2.事件委派操作，事件委派的定义就是把原来加给子元素身上的事件绑定在父元素上，就是把事件委派给父元素

$(“ul”).on(“click”,“li”,function(){
alert(11);
})
//click是绑定在ul身上的但是触发的时间是ul里面的小li
on可以给动态生成的元素绑定事件
$(“ol li”).click(function(){
alert(11);
})//后来动态创建的元素无法触发点击事件
$("ol").on("click","li",function()alert(11);)//后来动态创建的元素可以触发点击事件varli=$(“

• 我是后来创建的
• ”)；
  $(ol).append(li);
  微博发布留言案例：
  $(function(){
  KaTeX parse error: Expected '}', got 'EOF' at end of input: …tion(){ var li=("
• ");
  li.html($(".txt").val()+“ 删除”);
  $(“ul”).prepend(li);
  li.slideDown();
  $(".txt").val("");
  })
  })
  $(“ul”).on(“click”,“a”,function(){
  $(this).parent().slideUp(function(){
  $(this).remove();
  });
  })
  事件处理off解绑事件：
  off可以移除通过on方法添加的事件处理程序
  $(“div”).off();解除所有事件
  $(“div”).off(“click”);
  解除事件委托：
  $(“ul”).off(“click”,“li”);
  有的事件只想触发一次，可以使用one来绑定事件
  $("p").one("click",function()alert(11);)自动触发事件：tigger();1.元素.click();2.element.trigger("click");3.$(“div”).triggerHandler(“click”);//不会触发元素的默认行为
  jQuery事件对象：
  element.on(events,[selector],function(event){})
  阻止默认行为：event.preventDefault()或者return false
  阻止冒泡：event.stopPropagation()
  jQuery其他方法：
  拷贝对象：
  $.extend([deep],target,object1,[objectN])1.deep如果设为true为深拷贝，默认为false浅拷贝2.target要拷贝的目标对象3.object1待拷贝到底一个对象的对象4.浅拷贝拷贝的是地址5.深拷贝完全克隆，改变不会影响源数据多库共存：jQuery使用$为标示符，随着jQuery的流行，其他js库也会用这 $作为标示符，这样一起使用会引起冲突。客观需求：让jquery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。1.把里面的$改为jquery
  2.jquery变量规定新的名称： $.noConflict()varxx=$.noConflict();
  jQuery插件：
  jquery插件库：http://www.jq22.com/
  jquery之家：http://www.htmleaf.com/推荐
  图片懒加载：
  只显示可视区域的图片

  jQuery处理：
  toDoList综合案例：
  $(function(){
  KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲title").on("key…(this).val()===""){
  alert(“请输入必要的操作”);
  }else{
  //先读取本地存储原来的数据
  var local=getDate();
  console.log(local);
  //把local数组进行更新数据，把最新的数据追加给local数组
  local.push({title:$(this).val(),done:false});
  //把这个数组存储为本地存储
  saveDate(local);
  //2.toDoList本地存储数据渲染加载到页面
  load();
  $(this).val("");
  }
  }
  });
  3.toDoList删除操作
  KaTeX parse error: Expected '}', got 'EOF' at end of input: …修改数据 var index=(this).attr(“id”);
  console.log(index);
  data.splice(index,1);
  //保存到本地存储
  saveDate(data);
  //重新渲染页面
  load();
  })
  4.toDoList正在进行和已完成选项操作：
  KaTeX parse error: Expected '}', got 'EOF' at end of input: …修改数据 var index=(this).siblings(“a”).attr(“id”);
  console.log(index);
  data[index].done=$(this).prop(“checked”);
  console.log(data);
  //保存到本地存储
  saveDate();
  //重新渲染页面
  load();
  })
  //读取本地存储的数据
  function() getDate(){
  var data=localStorage.getItem(“todolist”);
  if(data!==null){
  //本地存储里面的数据是字符串格式的，但是我们需要的是对象格式的
  return JSON.parse(data);
  }else{
  return [];
  }
  }
  //保存本地存储数据
  function saveDate(data){
  local.Storage.setItem(“todolist”,JSON.stringfy(data));
  }
  function load(){
  var data=getDate();
  console.log(data);
  $(“ol”).empty();
  var todoCount=0;
  var doneCount=0;
  $.each(data,function(i,n){
  if(n.done){
  $(“ul”).prepend("

• "+n.title+"

• ");
  doneCount++;
  }else{
  $(“ol”).prepend("

• "+n.title+"

• ");
  todoCount++;
  }
  });
  $("#todocount").text(todoCount);
  $(“donecount”).text(doneCount);
  }
  })

  toDoList本地存储数据渲染加载到页面：
  1）因为后面也会经常渲染加载操作，所以声明一个函数load，方便后面调用
  2）先要读取本地存储数据，数据不要忘记转换为对象格式
  3）之后遍历这个数据($.each()),有几条数据，就生成几个小li添加到ol里面
  4)每次渲染之前，先把原先里面ol的内容清空，然后渲染加载最新的数据
  toDoList删除操作：
  1)点击里面的a链接，不是删除的li，而是删除本地存储对应的数据
  2)核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
  3)我们可以给链接自定义属性记录当前的索引号
  4)根据这个索引号删除相关的数据—数组的splice（i，1）方法
  //splice（从哪个位置开始删除，删除几个元素）
  5)存储修改后的数据，然后存储给本地存储
  6)重新渲染加载数据列表
  7）因为a是动态创建的，我们使用on方法绑定事件
  toDoList正在进行和已完成选项操作：
  1）当我们点击了小的复选框，修改本地存储数据，再重新渲染数据
  2）点击之后，获取本地存储数据
  3）修改对应数据属性done为当前复选框的checked状态
  4）之后保存数据到本地存储
  5）重新渲染加载数据列表
  6）load加载函数里面，新增一个条件如果当前数据的done为true就是已经完成的，就把列表渲染加载到ul里面
  7）如果当前数据的done为false，则是待办事项，就把列表渲染的、加载到ol里面
  todolist统计正在进行个数和已经完成个数
  1）在我们load函数里面操作
  2）声明2个变量：toCount待完成的个数，doCount已完成的个数
  3）当进行遍历本地存储数据的时候，如果数据done为false，则todoCount++，否则doneCount++
  4）最后修改相应的text
  jQuery尺寸、位置操作：
  语法 用法
  width()/height() 取得匹配元素宽度和高度值，只算width/height
  innerWidth()/innerHeight() 取得匹配元素宽度和高度值，包括padding
  outerWidth()/outerHeight() 取得匹配元素宽度和高度值，包含padding、border
  outerWidth(true)/outerHeight(true) 取得匹配元素宽度和高度，包含padding、border、margin
  以上参数为空，则是获取相应值，返回的是数字型
  如果以上参数为数字，则是修改相应值
  参数可以不必写单位
  jQuery位置：
  1.offset（）设置或获取元素偏移
  1）offset（）方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
  2）该方法有两个属性left、top、offset().top用于获取距离文档顶部的距离，offset（）.left用于获取距离文档左侧的距离
  3）可以设置元素的偏移：offset({top:10,left:30});

  2.position()获取带有定位父级位置（偏移），如果没有带有定位的父级则以文档为准，只能获取，不能设置

  3.scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
  scrollTop()方法设置或返回被选元素被卷去的头部
  带有动画的返回顶部
  $(".back").click(function(){
  $("body,html").stop().animate(scrollTop:0);//$(“document”).stop().animate({
  scrollTop:0只有元素才能做动画，不能是文档，这么写是错误的。
  });
  })