JavaScript初探四
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <!DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title></title> <script type= "text/javascript" > //bom浏览器对象模型 window 类 和对象的关系 //bom编程:主要就是学习如何使用window对象里面的属性,方法,事件 //window.onload 页面资源加载完毕事件 html+css+js+图片+视频+音频等加载完毕执行 window.onload = function () { //获取dom对象 document.getElementById( "btnTest" ); var peopleArr = [1, 2, 3, 4, 5]; //加了var 就是局部变量,不加var 就是往window对象追加属性 } //---------------分割线-------------------- //定时器--开启以后有一个返回值,叫做定时器id,可以通过这个id来停止这个定时器 var timeOurId = setTimeout(ForTimeOut, 2000, 10, "fox" ); clearTimeout(timeOurId); function ForTimeOut(age, name) { alert( "定时器调用" ); } //计时器--多次执行 var intervarlId = setInterval(ForTimeOut, 1000); clearInterval(intervarlId); //-------------分割线------------------------------ //body对象的作用域--body的本质是div 不给高度默认就一根线,根据自己内部的元素而变大 //如果需要整个页面都是作用域,那么事件应该加给window //------------华丽分割线------------- //------------下面是dom复习---------- //------------华丽分割线------------- //dom文档对象模型 页面中的每一个标签元素 都是一个dom对象 //dom编程:如何使用dom对象的属性,方法,事件 //浏览器解析完页面html+css+js,从上到下创建dom对象,生成dom树 放在 window.document //----------分割线-----------获取dom元素 var domTest = document.getElementById() //只拿一个,如果有相同id ,从上往下取,取到第一个为止 document.getElementsByClassName(); //class 返回的是dom数组 document.getElementsByTagName(); //标签名 标签名就是 标签的 第一个字母(绝大多数) //---------分割线----------修改dom元素的属性 domTest.innerHTML //修改双标签之间的文本值 直接覆盖原始值 innerText domTest.value //单标签 通过.value修改文本值(一般是input标签) domTest.style.任意样式 //修改高度,宽度 等需要单位的 必须加上px domTest.getAttribute() //获取自定义属性 domTest.setAttribute( "littleStar" , "爸爸去哪儿" ); domTest.removeAttribute( "littleStar" ); //注意,英语能力提升,学习编程会更快 //--------分割线---------创建dom元素 document.createElement( "input" ).type= "button" ; //input标签的默认形态 就是文本框 //只有上面这个方法,方法的返回值是,创建好的dom元素 domTest.cloneNode( true ) //克隆dom元素 false 只克隆元素本身(没有子元素) true:子元素一并克隆 //克隆元素跟之前的一模一样,id也是一样,如果又需要根据id获取元素的 必须把id改掉 document.createElement( "table" ).insertRow().insertCell() //快速创建table 不常用--了解即可 //------------分割线-----------删除dom元素 domTest.parentNode.removeChild(domTest); //dom元素不能自己删除自己需要父元素把他删除 domTest.innerHTML = "" ; //暴力型删除,全部清空 //上面的删除,只是将dom元素从dom树里面移除,页面中看不到了,但是还在内存里面 //-----------分割线---------加入到dom树里面 domTest.appendChild(新元素) //为某一个元素追加子节点,在最后追加 domTest.insertBefore(新元素, 位置元素) //在指定元素之前,插入新元素 domTest.innerHTML = "<input type='text' value='马上下课了'>" ; //---------分割线----------dom事件 //在满足某些情形的时候触发方法 //winform中是以 控件对象.onclick 的方式设置 domTest.onclick = function () { } </script> </head> <body style= "background-color: yellow" > <span><input type= "button" /></span> <input type= "button" value= "我是一个按钮" id= "btnTest" foxName= "smallFox" /> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title></title> <script type= "text/javascript" > window.onload = function () { document.getElementById( "button01" ).onclick = function () { alert( "我是通过dom元素.onclick设置的" + this ); } alert(document.getElementById( "button01" ).onclick); alert(document.getElementById( "button02" ).onclick); } //---------封装的方法 function sayYeah() { alert( "oh_Yeah!" + this ); } </script> </head> <body> <input type= "button" id= "button01" value= "document设置" /> <input type= "button" id= "button02" value= "写在标签里面" onclick= "sayYeah();" /> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title></title> <script type= "text/javascript" > //事件参数的由来 //点击某个dom元素的时候.浏览器知道,浏览器就去检查是否有点击事件 //如果有点击事件 就调用 dom.onclick(传入事件参数); 同时传入事件参数 //事件参数的作用,阻断冒泡(*),获取鼠标位置,按键信息等 //常用属性 //offsetX Y 是鼠标在当前这个控件偏离原点的坐标 //窗体加载事件 window.onload = function () { document.getElementById( "btnTestEvent" ).onclick = function ( event ) { //offset 是鼠标在当前这个dom元素的内部的坐标 ,左上角是原点 alert( event .offsetX + "||" + event .offsetY); } } window.onmousemove = function (evt) { // alert(evt.offsetX + "|" + evt.offsetY); //设置按钮的value值 document.getElementById( "showInfo" ).value = evt.x + "|" + evt.y; document.getElementById( "happyTwo" ).style.top = evt.y + "px" ; document.getElementById( "happyTwo" ).style.left = evt.x + "px" ; //document.getElementById("divBox").style.top = evt.x + "px"; //document.getElementById("divBox").style.left = evt.y + "px"; } </script> </head> <body> <label id= "happyTwo" style= "position: absolute;" >快乐的小二逼</label> <input type= "text" id= "showInfo" /> <input type= "button" value= "测试事件参数" id= "btnTestEvent" /> <span style= " border: 1px solid #0094ff" id= "divBox" > <img src= "img/q.bmp" id= "imgBox" /> </span> </body> </html> |
事件冒泡
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title></title> <style type= "text/css" > div { border: 1px solid #0094ff; width: 80%; margin: 0 auto; } #div01Pao { height: 500px; background-color: #00ffe0; } #div02Pao { height: 80%; background-color: #f500ff; } </style> <script type= "text/javascript" > //0级dom事件冒泡,触发了某个子元素的某个事件后,同时会依次逐级触发父元素的同名事件` //事件参数里面的 evt.stopPropagation();这个方法 只要在事件中执行,就能够阻断冒泡 window.onload = function () { //分别为 div01 div02 按钮添加点击事件 document.getElementById( "div01Pao" ).onclick = function (evt) { alert( this .id + "点击事件被触发" ); } document.getElementById( "div02Pao" ).onclick = function (evt) { alert( this .id + "点击事件被触发" ); } document.getElementById( "btnPao" ).onclick = function (evt) { evt.stopPropagation(); alert( this .id + "点击事件被触发" ); } //为body添加点击事件 document.body.onclick = function (evt) { alert( "body的onclick事件被触发" ); } } </script> </head> <body> <div id= "div01Pao" > 我是div01Pao <div id= "div02Pao" > 我是div02Pao <input type= "button" id= "btnPao" value= "btnPao" /> </div> </div> </body> </html> |
二级dom事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title></title> <script type= "text/javascript" > window.onload = function () { document.getElementById( "btnTest" ).onclick = function (evt) { alert( "123" ); alert( "234" ); } document.getElementById( "btnTest" ).onclick = function (evt) { alert( "456" ); } //0级dom事件后注册的会覆盖先注册的- //-----------分割线-------------演示二级dom事件 //二级dom事件 增加 使用 dom元素.addEventListener(事件类型,方法,); //二级dom事件可以多次增加,不会覆盖,执行的顺序,是注册的顺序 //二级跟0级可以共存,执行的顺序是注册的顺序 //二级dom事件移除 使用removeEventListener("事件类型",方法地址)//这里使用匿名函数,就无法移除 document.getElementById( "btnTwo" ).onclick = function (evt) { alert( "0级dom事件被触发" ); } document.getElementById( "btnTwo" ).addEventListener( "click" , sayTwo); document.getElementById( "btnTwo" ).addEventListener( "click" , function (evt) { alert( "第二次注册二级dom事件" ); }); document.getElementById( "btnTwo" ).removeEventListener( "click" , sayTwo); } //-------------封装的方法 function sayTwo(evt) { alert( "二级dom事件" ); } </script> </head> <body> <input type= "button" id= "btnTest" value= "0级dom事件" /> <input type= "button" id= "btnTwo" value= "二级dom事件" /> </body> </html> |
2级dom事件冒泡
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title></title> <style type= "text/css" > div { border: 1px solid #0094ff; width: 80%; margin: 0 auto; } #div01Pao { height: 500px; background-color: #00ffe0; } #div02Pao { height: 80%; background-color: #f500ff; } </style> <script type= "text/javascript" > window.onload = function () { //二级dom事件也会冒泡 //二级dom事件注册的时候 第三个参数如果传了true 那么事件就不在冒泡,而是捕获 //捕获,是从外往里执行,如果元素有事件,那么就执行,如果没有,就不执行 //如果第三个参数给的是 false 那么就是冒泡 //先执行捕获阶段的事件,再执行冒泡阶段的事件 //如果不写第三个参数,默认是false document.getElementById( "btnPao" ).addEventListener( "click" , function (evt) { alert( this .id + "二级事件被触发" ); }, true ); document.getElementById( "div02Pao" ).addEventListener( "click" , function (evt) { alert( this .id + "二级事件被触发" ); }, false ); document.getElementById( "div01Pao" ).addEventListener( "click" , function (evt) { alert( this .id + "二级事件被触发" ); }, true ); } </script> </head> <body> <div id= "div01Pao" > 我是div01Pao <div id= "div02Pao" > 我是div02Pao <input type= "button" id= "btnPao" value= "btnPao" /> </div> </div> </body> </html> |
阻断默认行为
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title></title> <script type= "text/javascript" > //事件参数里面 有一个方法preventDefault() 可以用来阻断默认行为,--一半用在 a标签 或者是 提交按钮 window.onload = function () { document.getElementById( "aPao" ).onclick = function (evt) { alert( "123" ); //使用事件参数的阻断默认行为 evt.preventDefault(); } //document.getElementById("btnSub").onclick = function (evt) { // evt.preventDefault(); //} //表单元素的 onsubmit事件,会在 点击表单中 的submit按钮时触发 document.getElementById( "formUser" ).onsubmit = function (evt) { alert( "表单即将被提交,要不要再次验证数据的合理性呢?" ); } alert( "兄弟稍等一会" ); //直接调用表单元素的 submit()方法 不会触发 onsubmit事件 document.getElementById( "formUser" ).submit(); } </script> </head> <body> <a href= "p040级事件冒泡.html" id= "aPao" >去看冒泡</a> <form action= "p08接受get请求.html" method= "post" id= "formUser" > <label>用户名:</label> <input type= "text" name= "userName" /><br /> <label>密码:</label> <input type= "password" name= "userPass" /><br /> <label>性别:</label><input type= "radio" name= "userSex" id= "man" value= "man" /><label for = "man" >男</label><input type= "radio" name= "userSex" id= "woman" value= "woman" /><label for = "woman" >女</label> <br /> <input type= "submit" id= "btnSub" /> </form> </body> </html> |
正则表达式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title></title> <script type= "text/javascript" > //定义正则的标准 var reg = /(.+)@(.+)/; //使用 / 这里写正则标准/ var mailStr = "橡胶果实@qq.com" ; //字符串 alert(reg.test(mailStr)); //调用 标准的.text(字符串) 会返回true 或者false 分别对应,匹配,不匹配 </script> </head> <body> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title></title> <script type= "text/javascript" > window.onload = function () { document.getElementById( "btnTest" ).onclick = function (evt) { //修改自己的class //通过className来修改元素的 class属性 this .className = "itcast" ; } } </script> </head> <body> <input type= "button" value= "我是按钮" class = "btnButton" id= "btnTest" /> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title></title> <script type= "text/javascript" > window.onbeforeunload = function () { alert( "你确定要离开我了" ); } window.onload = function () { document.getElementById( "btnShow" ).onclick = function (evt) { window.showModelessDialog( "p020级dom事件.html" ); } } </script> </head> <body> <input type= "button" name= "button" value= "显示模态窗口" id= "btnShow" /> </body> </html> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步