第27天：js-表单获取焦点和数组声明遍历
一、表单
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="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 window.onload=function(){ 8 //获取某类元素 9 /*var lis=document.getElementsByTagName('li'); 10 //lis[0].innerHTML="abc"; 11 for(var i=0;i<lis.length;i++){ 12 lis[i].innerHTML="abc"; 13 }*/ 14 15 //金字塔打印 16 /*function line(){ 17 for(var i=1;i<100;i++){ 18 document.write("<hr width="+i+"%/>"); 19 } 20 } 21 line();*/ 22 23 //自动获取焦点 24 /*var txt=document.getElementById("txt"); 25 txt.focus();//focus()自动获取焦点的方法*/ 26 27 //自动选择表单内容 28 /* var txt=document.getElementById("txt"); 29 txt.onmouseover=function(){ 30 this.select(); 31 }*/ 32 } 33 </script> 34 </head> 35 <body> 36 <!-- <div id="box"> 37 <ul> 38 <li>1234567890</li> 39 <li>1234567890</li> 40 <li>1234567890</li> 41 <li>1234567890</li> 42 <li>1234567890</li> 43 </ul> 44 </div>--> 45 <input type="text" id="txt" value="请输入内容"> 46 <button>搜索</button> 47 </body> 48 </html>
