第27天:js-表单获取焦点和数组声明遍历

简介: 一、表单1、this指事件的调用者2、input.value 表单更换内容3、innerHTML更换盒子里的内容,文字、标签都能换。4、isNaN("12")如果里面的不是个数字,返回true二、表单自动获得焦点txt.

一、表单

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>

 

相关文章
|
2天前
|
JavaScript 前端开发
js遍历对象的方法
js遍历对象的方法
12 1
|
11天前
|
移动开发 JavaScript 前端开发
分享88个表单按钮JS特效,总有一款适合您
分享88个表单按钮JS特效,总有一款适合您
22 1
|
12天前
|
存储 移动开发 JSON
分享86个表单按钮JS特效,总有一款适合您
分享86个表单按钮JS特效,总有一款适合您
21 1
|
22天前
|
JavaScript
在js中如何将数组传递到函数呢?
在js中如何将数组传递到函数呢?
|
24天前
|
JavaScript 前端开发 测试技术
[小笔记]TypeScript/JavaScript数组转置
[小笔记]TypeScript/JavaScript数组转置
19 0
|
27天前
|
移动开发 JavaScript 前端开发
分享95个JS表单脚本,总有一款适合您
分享95个JS表单脚本,总有一款适合您
13 0
|
27天前
|
移动开发 JavaScript 前端开发
分享106个JS表单脚本,总有一款适合您
分享106个JS表单脚本,总有一款适合您
12 0
|
27天前
|
移动开发 JavaScript 前端开发
分享98个JS表单脚本,总有一款适合您
分享98个JS表单脚本,总有一款适合您
14 0
|
5天前
|
JavaScript 前端开发 索引
【JavaScript】面试手撕数组原型链(易)
续借上文,这篇文章主要讲的是数组原型链相关的考题,有些人可能会纳闷,数组和原型链之间有什么关系呢?我们日常使用的数组forEach,map等都是建立在原型链之上的。举个🌰,如我有一个数组const arr = [1,2,3]我想要调用arr.sum方法对arr数组的值进行求和,该如何做呢?我们知道数组没有sum函数,于是我们需要在数组的原型上定义这个函数,才能方便我们调用,具体代码如下。接下来我们就是采用这种方式去实现一些数组常用的方法。
28 6
|
7天前
|
JavaScript 前端开发
【JavaScript】面试手写题精讲之数组(上)
该专题主要是讲解我们在面试的时候碰到一些JS的手写题, 确实这种手写题还是比较恶心的。有些时候好不容易把题目写出来了,突然面试官冷不丁来一句有没有更优的解法,直接让我们僵在原地。为了解决兄弟们的这些困扰,这个专题于是就诞生啦。我们会将一些常见的不是最优解的答案作为对比,方便大家更好理解。
24 3

相关产品

  • 云迁移中心