第27天：表单获取焦点和数组声明遍历
Posted 半指温柔乐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第27天：表单获取焦点和数组声明遍历相关的知识，希望对你有一定的参考价值。
一、表单
1、this指事件的调用者
2、input.value 表单更换内容
3、innerHTML更换盒子里的内容，文字、标签都能换。
4、isNaN("12")如果里面的不是个数字，返回true
二、表单自动获得焦点
txt.focus();//方法
Onfocus事件
三、鼠标经过选择表单
select();选择
txt.onmouseover=function(){
this.select();
}
四、获取某类元素
getElementById();//获取一个标签元素
getElementsByTagName(“li”);//获取多个标签，伪数组
lis[0],lis[i]
五、placeholder表单占位符
<input type="text" id="txt" placeholder="必败的国际品牌">
案例：
1、仿淘宝搜索框
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>仿淘宝搜索框</title> 6 <style> 7 .search{ 8 width: 400px; 9 height: 30px; 10 margin: 100px auto; 11 position: relative; 12 } 13 .search input{ 14 width: 300px; 15 height: 25px; 16 float: left; 17 } 18 .search label{ 19 position: absolute; 20 left: 15px; 21 top:5px; 22 color: #c1c1c1; 23 cursor: text; 24 } 25 .search button{ 26 display: block; 27 width: 50px; 28 height: 33px; 29 background-color: orange; 30 color: #fff; 31 text-decoration: none; 32 border: 1px solid #f1f1f1; 33 float: left; 34 position: absolute; 35 top:-1px; 36 left: 303px; 37 font-size: 16px; 38 cursor: pointer; 39 40 } 41 </style> 42 <script> 43 window.onload=function(){ 44 function $(id){return document.getElementById(id);} 45 $("txt").oninput=function(){ 46 if(this.value==""){ 47 $("message").style.display="block"; 48 }else{ 49 $("message").style.display="none"; 50 } 51 } 52 } 53 </script> 54 </head> 55 <body> 56 <div class="search"> 57 <input type="text" id="txt"> 58 <label for="txt" id="message">国际品牌</label> 59 <!--<input type="text" id="txt" placeholder="必败的国际品牌">--> 60 <button id="btn">搜索</button> 61 </div> 62 </body> 63 </html>
运行效果：
2、隔行变色
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>隔行变色</title> 6 </head> 7 <style> 8 .box{ 9 width: 500px; 10 margin: 100px auto; 11 } 12 li{ 13 list-style: none; 14 line-height: 30px; 15 } 16 li span{ 17 margin-right:20px; 18 } 19 .current{ 20 background-color: #c1c1c1!important; 21 } 22 </style> 23 <script> 24 window.onload=function(){ 25 var lis=document.getElementsByTagName("li"); 26 for(var i=0;i<lis.length;i++){ 27 if(i%2==0){ 28 lis[i].style.backgroundColor="#eee"; 29 } 30 lis[i].onmouseover=function(){ 31 this.className="current";//一定要用this 32 } 33 lis[i].onmouseout=function(){ 34 this.className="";//一定要用this 35 } 36 } 37 38 } 39 </script> 40 <body> 41 <div class="box"> 42 <ul> 43 <li> 44 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> 45 </li> 46 <li> 47 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> 48 </li> 49 <li> 50 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> 51 </li> 52 <li> 53 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> 54 </li> 55 <li> 56 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> 57 </li> 58 <li> 59 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> 60 </li> 61 <li> 62 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> 63 </li> 64 <li> 65 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span> 66 </li> 67 </ul> 68 </div> 69 </body> 70 </html>
运行效果：
3、数组声明与遍历
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>数组声明与遍历</title> 6 </head> 7 <script> 8 var num=10; 9 var arr=[1,3,5,7,9];//声明数组 10 var arr=new Array(1,3,5); 11 var textArr=["刘备","诸葛亮","项羽","张飞","赵云"]; 12 console.log(textArr[1]);//使用数组 13 console.log(textArr.length)//求数组长度 14 //遍历数组一 15 for(var i=0;i<textArr.length;i++){ 16 console.log(textArr[i]); 17 } 18 //遍历数组二（推荐） 19 for(var i= 0,len=textArr.length;i<len;i++){ 20 console.log(textArr[i]); 21 } 22 </script> 23 <body> 24 </body> 25 </html>
4、获取某类元素
1 <!DOCTYPE html> 2 <html lang以上是关于第27天：表单获取焦点和数组声明遍历的主要内容，如果未能解决你的问题，请参考以下文章