JavaScript-15
1.jQuery基本事件
- jOuery事件处理 on()绑定事件：element.on(events,[selector],fn)
- on方法在匹配元素上绑定一个或多个事件的事件处理函数
- 可以进行事件委派操作。事件委派就是，把原来加在子元素身上的事件绑定在父元素上，把事件委派给父元素。
- on()可以给动态创建的元素绑定事件
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 <script src="js/jquery-3.6.0.js">script> 7 <style type="text/css"> 8 div { 9 width: 200px; 10 height: 200px; 11 background-color: #00FFFF; 12 cursor: pointer; 13 } 14 style> 15 head> 16 <body> 17 <div>div> 18 <script> 19 $(function(){ 20 //1.单个事件注册 21 // $("div").click(function(){ 22 // $(this).css("background-color","pink"); 23 // }) 24 // $("div").mouseover(function(){ 25 // $(this).css("background-color","green"); 26 // }) 27 //2.事件处理on 28 // 给一个元素绑定不同的事件处理 29 $("div").on({ 30 mouseenter:function(){ 31 $(this).css("background-color","green"); 32 }, 33 click:function(){ 34 $(this).css("background-color","pink"); 35 } 36 }) 37 //给一个元素绑定相同的事件处理 38 $("div").on("mouseover mouseleave",function(){ 39 alert(1); 40 }) 41 //on可以实现事件委派 42 //click是绑定在ul身上的，但是触发的对象是ul里面的小li 43 // $("ul").on("click","li",function(){ 44 // alert(11); 45 // }) 46 //动态创建元素，click没有办法绑定事件，on()可以给动态生成的元素绑定事件 47 }) 48 script> 49 body> 50 html>
- off()解绑事件：off可以移除通过on()方法添加的事件处理程序
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8">script> 7 <style> 8 div { 9 width: 200px; 10 height: 200px; 11 background-color: pink; 12 } 13 style> 14 head> 15 <body> 16 <div>div> 17 <script> 18 $(function(){ 19 $("div").on("click",function(){ 20 console.log("mouse-click"); 21 }) 22 $("div").on("mouseenter",function(){ 23 console.log("mouse-enter"); 24 }) 25 //1.事件解绑 26 // $("div").off();//解除了div身上的所有事件 27 // $("div").off("click");//解除了div身上的click事件 28 //2.解除事件委托 29 // $("ul").off("click","li"); 30 //3.one()但是它只能触发事件一次 31 $("div").one("click",function(){ 32 alert(1); 33 }) 34 }) 35 script> 36 body> 37 html>
- 自动触发事件trigger()
- element.click() //自动调用点击事件
- element.trigger("事件")
- element.triggerHandler("事件")，不会触发元素的默认行为
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8">script> 7 head> 8 <body> 9 <button>点击button> 10 <script> 11 $(function(){ 12 $("button").on("click",function(){ 13 console.log("(*?▽?*)"); 14 }) 15 //自动触发事件 16 //1.元素.事件() 17 // $("button").click(); 18 //2.元素.trigger(事件) 19 // $("button").trigger("click"); 20 //3.元素.triggerHandler("事件")最大特点是不会触发元素的默认行为。例如输入框光标闪烁 21 $("button").triggerHandler("click"); 22 }) 23 script> 24 body> 25 html>
2.jQuery事件对象
事件被触发就会有事件对象的产生
- 阻止默认行为：event.preventDefault()或者return false;
- 阻止冒泡：event.stopPropagation()
3.jQuery其他方法
- jQuery对象拷贝
如果想要把某个对象拷贝（合并）给另一个对象使用，此时可以使用$.extend()方法
$.extend([deep],target,object1,[objectN])
-
- deep：如果设置为true为深拷贝，默认为false 浅拷贝
- target：要拷贝的目标对象
- object1：待拷贝到第一个对象的对象
- 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝的对象
- 深拷贝，前面加true，完全克隆对象(拷贝的对象，而不是地址)，修改目标对象不会影响被拷贝的对象
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 <script src="js/jquery-3.6.0.js">script> 7 head> 8 <body> 9 <script> 10 $(function(){ 11 var targetObj = { 12 id: 0, 13 sex: "man" 14 }; 15 var obj = { 16 id: 1, 17 name: "Andy", 18 msg: { 19 age: 18 20 } 21 } 22 $.extend(true,targetObj,obj); 23 // console.log(targetObj);//会覆盖targetObj里面原来属性相同的一些数据 24 // //1.浅拷贝会把原来对象里面的复杂数据类型地址拷贝给目标对象 25 // targetObj.msg.age = 30; 26 console.log(targetObj); 27 console.log(obj); 28 }) 29 script> 30 body> 31 html>
- 多库共存
- jQuery变量规定新的名称：$.noConflivt var xx = $.noConflict
- $符号冲突，使用jQuery
- jQuery插件
- jQuery插件库
- jQuery之家
- jQuery插件使用步骤：
- 引入相关的文件：（jQuery文件和相关的插件）
- 复制相关html、css、js（调用插件）
- 图片懒加载（图片使用延迟加载在可提高网页下载速度。能够帮助减轻服务器负载）
当我们页面滑动到可视区域，再显示图片
4.本地存储
-
- 数据存在用户浏览器中
- 设置、读取方便，设置页面刷新不丢失数据
- 容量较大，sessionStorage约5M，localStorage约20M
- 只能存储字符串，可以将对象JSON.stringify()编码后存储
- window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口（页面）下数据可以共享
- 以键值对的形式存储使用
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 head> 7 <body> 8 <input type="text" /> 9 <button class = "set">存储数据button> 10 <button class = "get">获取数据button> 11 <button class = "remove">删除数据button> 12 <button class = "del">清空所有数据button> 13 <script type="text/javascript"> 14 var input = document.querySelector("input"); 15 var btn01 = document.querySelector(".set"); 16 var btn02 = document.querySelector(".get"); 17 var btn03 = document.querySelector(".remove"); 18 var btn04 = document.querySelector(".del"); 19 btn01.addEventListener("click",function(){ 20 //当我们点击“存储数据”可以把表单里面的值存储起来 21 var val = input.value; 22 //存储数据 23 sessionStorage.setItem("uname",val); 24 sessionStorage.setItem("lover",val); 25 }) 26 btn02.addEventListener("click",function(){ 27 //获取数据 28 var uname = sessionStorage.getItem("uname"); 29 console.log(uname); 30 }) 31 btn03.addEventListener("click",function(){ 32 //删除数据 33 sessionStorage.removeItem("uname"); 34 }) 35 btn04.addEventListener("click",function(){ 36 //清除所有数据 37 sessionStorage.clear(); 38 }) 39 script> 40 body> 41 html>
- window.localStorage（使用形式和sessionStorage一致）
- 生命周期永久生效，除非手动删除，否则关闭页面也会存在
- 可以多窗口（页面）共享（同一浏览器可以共享）
- 以键值对的形式存储使用
- todoList案例
- index.html
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>title> 6 <link rel="stylesheet" type="text/css" href="css/header.css"/> 7 <link rel="stylesheet" type="text/css" href="css/list.css"/> 8 <script src="js/jquery-3.6.0.js">script> 9 <script src="js/add.js">script> 10 <script src="js/check.js">script> 11 <style type="text/css"> 12 * { 13 margin: 0; 14 padding: 0; 15 } 16 17 body { 18 background-color: rgb(203, 206, 203); 19 } 20 style> 21 head> 22 <body> 23 <div class="header"> 24 <a href="javascript:;">ToDoLista> 25 <input class="record" type="text" /> 26 div> 27 <div class="list"> 28 <div class="ing"> 29 <h3>正在进行h3> 30 <span class="ingNum">0span><br /> 31 <ul class="todo"> 32 ul> 33 div> 34 <div class="end"> 35 <h3>已经完成h3> 36 <span class="endNum">0span> 37 <ul class="ended"> 38 ul> 39 div> 40 div> 41 body> 42 html>
-
- header.css
1 .header { 2 background-color: rgb(47, 50, 47); 3 padding: 10px 0; 4 text-align: center; 5 } 6 7 .header a{ 8 color: rgb(180, 187, 204); 9 text-decoration: none; 10 font-size: 18px; 11 } 12 13 .record { 14 display: inline-block; 15 width: 250px; 16 height: 20px; 17 margin-left: 150px; 18 border-radius: 5px; 19 }
-
- list.css
1 .list { 2 margin-left: 400px; 3 width: 486px; 4 } 5 6 .list h3 { 7 display: inline-block; 8 margin-bottom: 10px; 9 } 10 11 .ing { 12 margin: 10px 0px 10px 0px; 13 } 14 15 .end { 16 margin: 10px 0px 10px 0px; 17 } 18 19 .endNum, 20 .ingNum{ 21 float: right; 22 width: 26px; 23 height: 26px; 24 margin-right: 10px; 25 background-color: rgb(228, 230, 248); 26 color: #887d80; 27 line-height: 25px; 28 text-align: center; 29 border-radius: 13px; 30 } 31 32 .todo { 33 width: 470px; 34 list-style: none; 35 } 36 37 .todo li { 38 display: none; 39 width: 100%; 40 padding-left: 10px; 41 margin-bottom: 10px; 42 background-color: #fcfffc; 43 border-radius: 5px; 44 border-left: #5d959c 5px solid; 45 line-height: 30px; 46 } 47 48 #underway { 49 margin-right: 5px; 50 } 51 52 .todo img { 53 float: right; 54 margin-right: 10px; 55 margin-top: 2px; 56 height: 26px; 57 cursor: pointer; 58 } 59 60 .ended { 61 width: 470px; 62 list-style: none; 63 } 64 65 .ended li{ 66 display: none; 67 width: 100%; 68 padding-left: 10px; 69 margin-bottom: 10px; 70 background-color: #fcfffc; 71 border-radius: 5px; 72 border-left: #5d959c 5px solid; 73 line-height: 30px; 74 } 75 76 .ended img { 77 float: right; 78 margin-right: 10px; 79 margin-top: 2px; 80 height: 26px; 81 cursor: pointer; 82 } 83 84 .ended .endedCurrent { 85 filter: grayscale(80%) brightness(60%); 86 text-decoration: line-through; 87 }
-
- add.js
1 $(function(){ 2 //打开页面读取本地存储 3 if(localStorage.length != 0){ 4 var data = localStorage.getItem("todolist"); 5 data = JSON.parse(data); 6 var ingNum = 0; 7 var endNum = 0; 8 for(var i = 0 ; i < data.length ; i++){ 9 if(!data[i].done){ 10 var li = $("
-
- check.js
1 $(function(){ 2 //点击勾选框 3 $(".todo").on("click","input",function(){ 4 var li = $(this).parent().clone(); 5 li.css("display","none"); 6 li.addClass("endedCurrent"); 7 $(".ended").prepend(li); 8 var todolist = localStorage.getItem("todolist"); 9 todolist = JSON.parse(todolist); 10 var list = []; 11 for(var i = 0 ; i < todolist.length ; i++){ 12 if(todolist[i].title == li.text()){ 13 todolist[i].done = true; 14 } 15 list.push(todolist[i]); 16 } 17 localStorage.setItem("todolist",JSON.stringify(list)); 18 li.slideDown(); 19 //删除li 20 $(this).parent().slideUp(function(){ 21 $(this).remove(); 22 $(".ingNum").html($(".todo li").length); 23 }); 24 $(".endNum").html($(".ended li").length); 25 }) 26 27 $(".ended").on("click","input",function(){ 28 var li = $(this).parent().clone(); 29 li.css("display","none"); 30 li.removeClass("endedCurrent"); 31 $(".todo").prepend(li); 32 var todolist = localStorage.getItem("todolist"); 33 todolist = JSON.parse(todolist); 34 var list = []; 35 for(var i = 0 ; i < todolist.length ; i++){ 36 if(todolist[i].title == li.text()){ 37 todolist[i].done = false; 38 } 39 list.push(todolist[i]); 40 } 41 localStorage.setItem("todolist",JSON.stringify(list)); 42 li.slideDown(); 43 $(".ingNum").html($(".todo li").length); 44 $(this).parent().slideUp(function(){ 45 $(this).remove(); 46 $(".endNum").html($(".ended li").length); 47 }); 48 }) 49 //删除存储 50 $(".list").on("click","img",function(){ 51 var todolist = localStorage.getItem("todolist"); 52 todolist = JSON.parse(todolist); 53 for(var i = 0 ; i < todolist.length ; i++){ 54 if($(this).parent().text() == todolist[i].title){ 55 todolist.splice(i,1); 56 break; 57 } 58 } 59 $(this).parent().slideUp(function(){ 60 $(this).remove(); 61 $(".ingNum").html($(".todo li").length); 62 $(".endNum").html($(".ended li").length); 63 }) 64 if(todolist.length == 0){ 65 localStorage.clear(); 66 }else{ 67 localStorage.setItem("todolist",JSON.stringify(todolist)); 68 } 69 }) 70 })