jQuery学习笔记3

jQuery 事件注册

jQuery 事件处理

    <div></div><ul><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li><li>我们都是好孩子</li></ul><ol></ol><script>$(function () {// 1.单个事件注册// $("div").click(function () {//   $(this).css("background", "purple");// });// $("div").mouseenter(function () {//   $(this).css("background", "skyblue");// });// 2.事件处理on// $("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)on可以实现事件委托（委派）$("ul li").click();$("ul").on("click", "li", function () {alert(11);});//click 是绑定在ul身上的，但是触发的对象是ul里面的小li// （3）on可以给动态创建的元素绑定事件// $("ol li").click(function () {//   alert(11);// });$("ol").on("click", "li", function () {alert(11);});var li = $("<li>我是后来创建的</li>");$("ol").append(li);});</script>

    $(function () {// 1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并添加到ul中$(".btn").on("click", function () {var li = $("<li></li>");li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");$("ul").prepend(li);li.slideDown();$(".txt").val("");});// 2.点击的删除按钮，可以删除当前的微博留言// $("ul a").click(function () {//   // 此时的click不能给动态创建的a添加事件//   alert(11);// });// on可以给动态创建的元素绑定事件$("ul").on("click", "a", function () {$(this).parent().slideUp(function () {$(this).remove();});});});

    $(function () {$("div").on({click: function () {console.log("我点击了");},mouseover: function () {console.log("我鼠标经过了");},});$("ul").on("click", "li", function () {alert(22);});// 1.事件解绑off// $("div").off(); // 这个是解除了div上的所有事件$("div").off("click"); // 这个是解除了div身上的点击事件// 2.one() 但是它只能触发事件一次$("p").one("click", function () {alert(11);});});

 

    $(function () {$("div").on("click", function () {alert(11);});// 自动触发事件// 1.元素.事件()// $("div").click(); //会触发元素的默认行为// 2.元素.trigger("事件") 会触发元素的默认行为// $("input").trigger("focus");// 3.元素.triggerHandler("事件") 就是不会触发元素的默认行为$("div").triggerHandler("click");$("input").on("focus", function () {$(this).val("你好吗");});// $("input").triggerHandler("focus");});

jQuery 事件对象

 

    $(function () {$(document).on("click", function () {console.log("点击了document");});$("div").on("click", function () {console.log(event);console.log("点击了div");event.stopPropagation();});});

jQuery 对象拷贝

注意浅拷贝与深拷贝的特点

    $(function () {//var targetObj = {};var obj = {id: 1,name: "andy",};// $.extend(target, obj)$.extend(targetObj, obj);console.log(targetObj);var targetObj = {id: 0,msg: {sex: "男",},};var obj = {id: 1,name: "andy",msg: {age: 18,},};// $.extend(target, obj)// 1.浅拷贝就是把原来对象里面的复杂数据类型地址拷贝给目标对象// $.extend(targetObj, obj);// console.log(targetObj); // 会覆盖targetObj里面原来的数据// targetObj.msg.age = 20;// console.log(obj);// 1.深拷贝就是把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起$.extend(true, targetObj, obj);// console.log(targetObj); // 会覆盖targetObj里面原来的数据targetObj.msg.age = 20;console.log(targetObj);console.log(obj);});

jQuery 多库共存

      $(function () {function $(ele) {return document.querySelector(ele);}console.log($("div"));// 1.如果$符号冲突 我们就使用jQueryjQuery.each();// 2.让jquery释放对$控制权 让自己决定var suibian = jQuery.noConflict();console.log(suibian("span"));suibian.each();});

jQuery 插件

注意头部底部不用复制，头部是seo标识，底部是广告之类的

案例：toDoList 

本地存储： 

    var todolist = [{title: "我今天吃八个馒头",done: false,},{title: "我今天学习jq",done: false,},];localStorage.setItem("todo", todolist);//   1.本地存储里面只能存储字符串的数据格式，把我们的数组对象转换成字符串格式 JSON.stringify()localStorage.setItem("todo", JSON.stringify(todolist));var data = localStorage.getItem("todo");console.log(typeof data);console.log(data[0].title);//   2.获取本地存储的数据，我们需要把里面的字符串数据转换为对象格式 JSON.parse()data = JSON.parse(data);console.log(data);

索引号，如果是亲兄弟，就会编排，如果不是亲兄弟，就不会编排，点击任何一个ul当中的a标签都是索引0

    <div><a href="#">1</a><a href="#">2</a><a href="#">3</a></div><ul><li><a href="#">a</a></li><li><a href="#">b</a></li><li><a href="#">c</a></li></ul><script>$("div a").click(function() {console.log($(this).index());})$("ul a").click(function() {console.log($(this).index());})</script>

$(function () {//   alert(11);//   1.按下回车 把完整数据 存储到本地存储里面// 2.存储的数据格式 var todolist = [{title: 'xxx', done: false}]load();$("#title").on("keydown", function (event) {// console.log(event);if (event.keyCode === 13) {if ($(this).val() === "") {alert("请输入你的操作");} else {// 先读取本地存储原来的数据var local = getData();console.log(local);//   把local数组进行更新数据,把最新的数据追加给local数组local.push({ title: $(this).val(), done: false });//   把这个数组local 存储给本地存储saveData(local);//   2. toDoList 本地存储数据渲染加载到页面load();$(this).val("");}}});//   3.toDoList删除操作$("ol").on("click", "a", function () {// alert(11);// 先获取本地存储var data = getData();console.log(data);// 修改数据var index = $(this).attr("id");console.log(index);data.splice(index, 1);// 保存到本地存储saveData(data);// 重新渲染页面load();});//   4.toDoList 正在进行和已经完成选项操作$("ol,ul").on("click", "input", function () {// alert(11)// 先获取本地存储的数据var data = getData();// 修改数据var index = $(this).siblings("a").attr("id");console.log(index);// data[?].done = ?data[index].done = $(this).prop("checked");console.log(data);// 保存到本地存储saveData(data);// 重新渲染页面load();});//   读取本地存储的数据function getData() {var data = localStorage.getItem("todolist");if (data !== null) {// 本地存储里面的数据是字符串格式的,但是我们需要的是对象格式的return JSON.parse(data);} else {return [];}}//   保存本地存储数据function saveData(data) {localStorage.setItem("todolist", JSON.stringify(data));}//   渲染加载数据function load() {// 读取本地存储的数据var data = getData();console.log(data);// 遍历之前先要清空ol里面的元素内容，不然每次按钮按下keydown的时候，就会往ol当中追加数据$("ol,ul").empty();var todoCount = 0; // 正在进行的个数var doneCount = 0; // 已经完成的个数// 遍历这个数据$.each(data, function (i, n) {//   console.log(n);if (n.done) {$("ul").prepend("<li><input type='checkbox' checked='checked'><p>" +n.title +"</p><a hred='javascript:;' id=" +i +"></a></li>");doneCount++;} else {$("ol").prepend("<li><input type='checkbox'/><p>" +n.title +"</p><a hred='javascript:;' id=" +i +"></a></li>");todoCount++;}});console.log(todocount, donecount);$("#todocount").text(todoCount);$("#donecount").text(doneCount);}
});