js学习-day010
对正则表达式知识点的补充 https://c.runoob.com/front-end/854
验证邮箱：^\w+@\w+\.\w+$
贪婪和非贪婪模式
正则表达式的补充2
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <!-- 8 JS中使用正则表达式 Regular Expression 9 1.创建正则对象 10 -方式 11 var reg = new RegExp("\w",i); 12 var reg = /\w/i; 13 -参数 14 i 忽略大小写 15 g 全局模式 16 2.与正则表达式相关的方法 17 -针对RegExp对象 18 test()匹配 19 exec()提取一个内容 20 -针对String对象 21 match() 22 replace() 23 split() 24 search() 25 3.匹配 26 -匹配日期 27 -匹配手机 28 4.提取 29 5.替换 30 6.贪婪和非贪婪模式 31 32 --> 33 34 <script type="text/javascript"> 35 //匹配日期 36 var date = '2022-10-08'; 37 var reg = /^\d{4}-\d{1,2}-\d{1,2}$/; 38 console.log(reg.test(date));//true 39 40 //匹配手机 41 var phone = "13427720820"; 42 var regPhone = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/; 43 console.log(regPhone.test(phone));//true 44 45 //exec()提取 46 var qqStr = "coco:234532,jelly:373297"; 47 var regqq = /\d+/g; 48 do{ 49 var content = regqq.exec(qqStr); 50 if(content){ 51 console.log(content[0]); 52 } 53 }while(content) 54 55 //match()可以提取多个内容，注意match()函数的顺序，先是要匹配的字符串，再是正则表达式 56 var qqStr1 = "coco:234532,jelly:373297"; 57 var regQQ = /\d+/g; 58 var regArr = qqStr1.match(regQQ); 59 console.log(regArr); 60 61 //分组提取，就是加个括号，然后用RegExp.$数字，就可以提取出要的那一部分 62 var dateStr = "2011-02-09"; 63 var dateReg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/; 64 if(dateReg.test(dateStr)){ 65 console.log(RegExp.$1); 66 console.log(RegExp.$2); 67 console.log(RegExp.$3); 68 } 69 70 //替换 71 str = " di sha lsj df sa s "; 72 console.log(str); 73 console.log(str.trim()); 74 str = str.replace(/\s/g,"*"); 75 console.log(str); 76 str = " di sha lsj df sa s "; 77 str = str.replace(/^\s*/,"****");//只替换开头的空格 78 console.log(str); 79 str = " di sha lsj df sa s "; 80 str = str.replace(/\s*$/,"****");//只替换末尾的空格 81 console.log(str); 82 83 //贪婪和非贪婪模式 84 var st = "aaaaabbbbbaaaaa"; 85 var res = st.match(/a.*b/);//默认是贪婪模式 86 console.log(res[0]); 87 res = st.match(/a.*?b/); 88 console.log(res[0]);//非贪婪模式，有一个b就OK了 89 </script> 90 </body> 91 </html>
这一集是一个案例，对邮箱输入手机号和邮箱进行检验是否正确的
https://www.bilibili.com/video/av47638351/?p=84
*********************************现在开始进入JS特效篇*******************************
Web APIs
DOM
1.document和window（document和window应该是一个东西）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div id = "box"></div> 8 <button id = "btn">按钮</button> 9 <script type="text/javascript"> 10 //1.获取到div对象 11 var box = document.getElementById("box"); 12 console.log(box); 13 //向box标签的div里面添加文字 14 box.innerText = "hello"; 15 16 var btn = document.getElementById("btn"); 17 btn.onclick = function (fun){ 18 alert("你好呀"); 19 }; 20 </script> 21 </body> 22 </html>
2.事件
3.文档加载过程
4.文档页面元素的获取
1 <button name = "btn" class="btn" id="btn">点我</button> 2 3 <script type="text/javascript"> 4 window.onload = function(ev){ 5 var btn1 = document.getElementById("btn"); 6 var btn2 = document.getElementsByClassName("btn")[0]; 7 var btn3 = document.getElementsByTagName("button")[0]; 8 var btn4 = document.getElementsByName("btn")[0]; 9 var btn5 = document.querySelector("#btn"); 10 var btn6 = document.querySelectorAll("#btn")[0]; 11 console.log(btn1); 12 console.log(btn2); 13 console.log(btn3); 14 console.log(btn4); 15 console.log(btn5); 16 console.log(btn6); 17 } 18 </script>
5.节点之间的关系
页面中元素标签的属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 #id{ 7 width: 200px; 8 height: 200px; 9 background-color: cyan; 10 } 11 </style> 12 </head> 13 <body> 14 <div id="box"> 15 <button class="btn">你好呀</button> 16 <span id="span"> 17 <a href="#">这是一个连接诶</a> 18 </span> 19 <p class="para">我是一个段落</p> 20 <div>嘻嘻嘻</div> 21 </div> 22 23 <script type="text/javascript"> 24 //获取父节点 25 window.onload = function (ab){ 26 var a = document.getElementsByTagName("a")[0]; 27 console.log(a.parentNode);//span 28 } 29 </script> 30 31 <script type="text/javascript"> 32 //获取兄弟节点，下一个 33 var span = document.getElementById("span"); 34 var nextEle = span.nextElementSibling || span.nextSibling;//这是两个条件 35 console.log(nextEle); 36 37 //下一个兄弟节点 38 var preEle = span.previousElementSibling || span.previousSibling; 39 console.log(preEle); 40 </script> 41 42 <script type="text/javascript"> 43 //获取第一个子节点 44 console.log(box.firstElementChild || box.firstChild); 45 //获取最后一个子节点 46 console.log(box.lastElementChild || box.lastChild); 47 48 //获取所有的节点 49 console.log(box.childNodes); 50 console.log(box.children); 51 </script> 52 53 <!-- ！！！！！！！！！！！！！！！！！！！！！！！ --> 54 <script type="text/javascript"> 55 window.onload = function (ab){ 56 //1.获取标签 57 var box = document.getElementById("box"); 58 //2.获取标签内部的所有节点 59 var allNodeLists = box.childNodes; 60 //3.过滤元素节店 61 var newListArr = []; 62 63 allNodeLists.forEach(function(value,key,parent){ 64 console.log(value); 65 66 //1表示元素 67 //2表示属性 68 //3表示文本内容 69 if(value.nodeType === 1){ 70 newListArr.push(value); 71 //获取页面中的元素标签，然后存进新建的数组里 72 } 73 }); 74 console.log(newListArr); 75 } 76 </script> 77 </body> 78 </html>
6.节点的操作
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 img{ 7 width: 200px; 8 } 9 </style> 10 </head> 11 <body> 12 <div id="word"> 13 <p class="para">罗小黑战记</p> 14 <button class="btn">按钮</button> 15 </div> 16 17 <script type="text/javascript"> 18 window.onload = function(ab){ 19 //CRUD增删改查 20 var box = document.getElementById("word"); 21 22 //1.创建节点 23 var img = document.createElement("img"); 24 img.src = "../img/img-01.jpg"; 25 //简单直接地添加到box标签的div里面，最后 26 box.appendChild(img); 27 28 //将新插入的节点放到button后面，可以指定 29 var btn = document.getElementsByTagName("button")[0]; 30 box.insertBefore(img,btn); 31 32 33 //2.删除节点 34 img.remove(); 35 //box.removeChild(img); 36 37 } 38 </script> 39 </body> 40 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <div class="box"> 8 <button class="btn">点我</button> 9 <img/> 10 </div> 11 <script type="text/javascript"> 12 window.onload = function(ab){ 13 //1.获取节点 14 var img = document.getElementsByTagName("img")[0]; 15 console.log(img); 16 17 //2.获取标签的属性 18 console.log(img.getAttribute("src")); 19 console.log(img.getAttribute("alt")); 20 21 //3.设置属性 22 img.setAttribute("src","../img/img-01.jpg"); 23 img.setAttribute("alt","罗小黑战记很好看"); 24 img.setAttribute("aaa","罗小黑战记很好看"); 25 26 //4.删除属性 27 //img.removeAttribute("src"); 28 29 } 30 </script> 31 </body> 32 </html>
7.案例
1）图片切换轮播图
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 #box{ 7 width:1200px; 8 margin:0 auto; 9 } 10 img{ 11 width: 200px; 12 } 13 </style> 14 </head> 15 <body> 16 <div class="box"> 17 <img id="icon" src="../img/img-02.jpg"> 18 <p></p> 19 <button id="prev">上一张</button> 20 <button id="next">下一张</button> 21 </div> 22 23 <script type="text/javascript"> 24 var icon = document.getElementById("icon"); 25 var pre = document.getElementById("prev"); 26 var next = document.getElementById("next"); 27 28 var currentIndex = 2,minIndex = 2,maxIndex = 3; 29 30 pre.onclick = function (ab1){ 31 if(currentIndex === maxIndex){ 32 //最大边界 33 currentIndex = minIndex; 34 }else{ 35 currentIndex++; 36 } 37 icon.setAttribute("src","../img/img-0"+currentIndex+".jpg"); 38 console.log("icon.src"); 39 } 40 41 next.onclick = function (ab2){ 42 if(currentIndex === minIndex){ 43 //最大边界 44 currentIndex = maxIndex; 45 }else{ 46 currentIndex--; 47 } 48 icon.setAttribute("src","../img/img-0"+currentIndex+".jpg"); 49 console.log("icon.src"); 50 } 51 </script> 52 </body> 53 </html>
