第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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-09-09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读