HTML5第十五课时汇总
来源：互联网 发布：数据之魅 编辑：程序博客网 时间：2024/05/17 22:41
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>DOM操作</title> <script type="text/javascript"> /*文档就绪函数*/ window.onload=function(){ var d=document.getElementById('d');//通过ID来查找。 d.innerText;//添加文本内容 d.innerHTML="ssssss"; var abc=document.getElementsByName('abc');//通过name来查找。 //获取的是一个数组，通过下标得到对应的元素，因为abc获得的不止一个。 // 必须用abc[0]才可以修改，从咳咳咳修改到噗噗噗。 abc[0].innerText="噗噗噗"; var span=document.getElementsByTagName("span");//通过标签的名字来查找。 //同上，得到的也是一个数组，用下标来操作对应的标签。 span[0].innerText="通过标签名字来得到。" var p=document.getElementsByClassName("p");//通过classname来查找。 //通过循环，来改变其内容。 for(var i=0;i< p.length;i++){ p[i].innerText="得得得"; } } </script></head><body><div id="d"></div><a href="first.html" name="abc">咳咳咳</a><br/><span></span><p class="p"></p><p class="p"></p><p class="p"></p></body></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>通过节点修改属性</title> <style> .a{ color: red; } .b{ font-weight:bolder; } </style> <script type="text/javascript"> window.onload=function(){ var d=document.getElementById('d');//通过ID找到对应的元素 /*d.style.color='red';//设置盒子中字体的颜色。 d.style.cssText='font-weight:bold'; d.style.cssText+='font-size:30px'; //cssText和上面一行方式是一样的，但是以这一行为主,仅仅是字体加粗了，但是却颜色没有改变。 //如果想要不改变原来的红色，需要按照如此方式写，在‘+’前加一个‘+’：d.style.cssText+='font-weight:bold';*/ d.className='a';//添加类名。 d.className+=' b';//要是在‘=’前写了+，就是类名为ab，可以在‘b’的前面加一个空格，类名为a或b } </script></head><body><div id="d"> 你很厉害。</div></body></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>鼠标监听</title> <style> img{ margin: 20px 20px;//左右有点间距。 } .a{ border: 1px solid red; } .b{ border: 5px solid orange; } </style> <script type="text/javascript"> //文档就绪函数。 window.onload=function(){ var img=document.getElementsByTagName('img'); //循环获取鼠标放在每个图片上，需要分成的类和改变的格式。 for(var i=0;i<img.length;i++){ //鼠标进入这个元素时 img[i].onmouseover=function(e){ e.target.className='b';//用一个元素，修改类名，target。 } //鼠标离开时候，元素class的改变。 img[i].onmouseout=function(e){ e.target.className='a'; } } } </script></head><body><img class="a" src="../../image/new_01.jpg" alt=""/><img class="a" src="../../image/new_02.jpg" alt=""/><img class="a" src="../../image/new_03.jpg" alt=""/></body></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>节点的查找</title> <script type="text/javascript"> window.onload=function(){ //通过id找到td var td1=document.getElementById('td1'); var tr=td1.parentNode;//获取父元素节点。 tr.style.backgroundElementColor='red'; var td3=tr.lastElementChild;//最后一个孩子元素节点。 td3.innerText='333' var td11=tr.firstElementChild;//获取第一个孩子元素节点。 td11.innerText='122321' var td2=td3.previousElementSibling;//td3的前一个元素节点。 td2.innerText='000000'; var td4=td1.nextElementSibling;//后一个元素节点。 } </script></head><body><table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td id="td1">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr></table></body></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>创建,插入节点</title></head><body><div id="d"></div><br/><span id="s">span标签</span></body><script type="text/javascript"> window.onload=function(){ var d=document.getElementById('d'); //创建一个节点 var a=document.createElement('a');//创建一个a标签 a.href='index.html'; a.innerText='二娃，千里眼和顺风耳。' a.style.cssText+='color:red'; a.style.cssText+='text-decoration:none'; d.appendChild(a);//在d中添加一个a标签。 //在指定节点前插入节点。 var p=document.createElement('p');//创建一个p标签 p.innerText='大娃，钢筋铁骨。';//添加文本内容。 d.insertBefore(p,a);//插入到d中，将p放在a的前面。 var span=document.getElementById('s');//获取目标元素。 span.style.cssText+='color:orange' var spanc=span.cloneNode(true);//true是将原先标签里的内容克隆出来，false不将原先的标签内容克隆出来。 d.appendChild(spanc); }</script></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>鼠标事件</title></head><body><input type="button" id="b" value="鼠标事件单击"/><input type="button" id="c" value="鼠标事件双击"/></body><script type="text/javascript"> window.onload=function(){ function dbl(){ alert('鼠标双击了');//内部方法 } var input=document.getElementById('b'); input.onclick=function(){ alert('鼠标单击了'); } var c=document.getElementById('c'); c.ondblclick=dbl; }</script></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>键盘事件</title></head><body></body><script type="text/javascript"> window.onload=function(){ window.onkeypress=function(e){ console.log(e); /* alert(e.keyCode);//keyCode输出的是键值码。*/ if(e.charCode==103){ alert('G键被点击了。') } } }</script></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>HTML时间监听</title></head><body><input type="text" id="d"/></body><script type="text/javascript"> window.onload=function(){ var d=document.getElementById('d'); d.onchange=function(){//内容发生改变，光标焦点转移之后，能够监听到，转移之前监听不到 alert('内容发生改变了'); } }</script></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>内容复制事件</title></head><body><input type="text" id="a"/><div id="b"></div></body><script type="text/javascript"> window.onload=function(){ //获取元素 var a=document.getElementById('a'); var b=document.getElementById('b'); //添加一个内容改变监听事件 a.oninput=function(){ //将a的文本输入框内容复制给b b.innerText= a.value; } }</script></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>表格提交练习写法1</title></head><body><form id="f"> <input type="text" id="username"/> <input type="submit" /></form></body><script type="text/javascript"> window.onload=function(){ var f=document.getElementById('f'); //输入框获取 var username=document.getElementById('username'); f.onsubmit=function(){//提交表单的事件监听。 //判断是否存在内容 if(username.value==''){ alert('请输入用户名'); return false;//阻止提交。 }else{ alert('提交成功'); return true;//允许提交。 } return false; } }</script></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>表格提交练习写法2</title></head><body><form onsubmit="return submitFun(this);"> <input type="text" name="category" /> <input type="submit" name="submit" value="提交"/></form></body><script> function submitFun(obj){ if(obj.category.value==''){ alert("请输入内容"); return false; }else{ alert('提交成功'); return true; } }</script></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>填写信息登录验证</title></head><body><form action="test.html" method="post" id="f"> 邮箱： <br/> <input type="text" id="email" /> <br/> 密码： <br/> <input type="password" id="pwd"/> <br/> <br/> <input type="submit" value="登录"/></form></body><script type="text/javascript"> window.onload=function(){ //获取两个表单项目 var email=document.getElementById('email'); var pwd=document.getElementById('pwd'); //表单提交监听事件 document.getElementById('f').onsubmit=function(){ //验证表单项： //1.验证邮箱是否为空 if(email.value==''){ alert('请输入邮箱！！！'); return false; } //2.验证密码是否为空 if(pwd.value==''){ alert('请输入密码！！！'); return false; } //3.验证邮箱是否正确 if(email.value.indexOf('@'+'.')==-1){ alert('邮箱格式不正确！！！必须包含@或.'); return false; } return true; }; }</script></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>正则表达式普通方式</title></head><body><form action="test.html" method="post" id="form"> <input type="text" id="a"/> <input type="submit" value="登录"/></form></body><script type="text/javascript"> window.onload=function(){ document.getElementById('form').onsubmit=function(){//提交监听事件 //普通方式声明一个正则表达式 var reg1=/white/i;//此处的i（附加参数）是忽略大小写。 //使用构造函数声明一个正则表达式 var reg2=new RegExp('china','i'); //验证输入框内容是否匹配 /*var a=document.getElementById('a').value;//返回的是该节点的属性值。 if(reg1.test(a)){//返回的是true或者false //验证通过 alert('验证通过') }else{ //验证失败 alert('验证失败'); return false; } */ //通过正则表达式，分割一个字符串。 var arr= a.split(reg1); for(var i=0;i<arr.length;i++){ alert(arr[i]); } } }</script></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>通过正则表达式，分割一个字符串</title></head><body><form action="test.html" method="post" id="form"> <input type="text" id="a"/> <input type="submit" value="登录"/></form></body><script type="text/javascript"> window.onload=function(){ document.getElementById('form').onsubmit=function(){//提交监听事件 //普通方式声明一个正则表达式 var reg1=/a/i; //通过正则表达式，分割一个字符串。 var arr= a.split(reg1); for(var i=0;i<arr.length;i++){ alert(arr[i]); } } }</script></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>正则表达式修改输入框属性</title></head><body><form action="test.html" method="post" id="form"> <input type="text" id="a"/> <input type="submit" value="登录"/></form></body><script type="text/javascript"> window.onload=function(){ document.getElementById('form').onsubmit=function(){//提交监听事件 //普通方式声明一个正则表达式 var reg1=/a/ig;//此处的i（附加参数）是忽略大小写。g是代表全局匹配。 //验证输入框内容是否匹配 var a=document.getElementById('a').value; var b= a.replace(reg1,'b'); //通过value的值，用reg1，修改输入框的属性。 var input=document.getElementById('a'); input.value=b; return false; } }</script></html><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><h1>登陆成功</h1></body></html>
阅读全文
0 0
- HTML5第十五课时汇总
- html5第十一课时，汇总
- html5第十二课时，汇总
- HTML5第十三课时汇总
- HTML5第十四课时汇总
- HTML5第一课时
- HTML5第二课时
- HTML5第五课时，背景图片
- html第十六课时汇总
- html5第三课时，标签应用。
- HTML5第五课时，标签选择器
- HTML5第五课时，字体属性
- HTML5第六课时，后代继承
- HTML5第六课时，后代选择器
- HTML5第六课时，padding内边距
- HTML5第六课时，盒子弧度
- html5第七课时，页面作业
- html5第七课时，固定定位
- Java复制一个目录及其子目录的文件到另外一个目录
- ArangoDB(NoSQL数据库)下载 v3.2.0官方版
- .pch文件的创建和使用
- 简单的Logger类
- 透明的Activity
- HTML5第十五课时汇总
- 单字节超过ff处理方法
- 搭建Gulp环境的那些事儿
- js中的关键字
- Post请求与Get请求的区别
- js中对象的3种表示方法
- 基本if分支语句
- Palindrome Names
- WampServer的三个权限问题
