第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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现

图层控制是很多GIS系统里面必须的一个小功能,本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层...

4622
来自专栏Golang语言社区

go语言实现文件分割的方法

import ( // "bufio" "flag" "fmt" "io" "os" ) import "strconv" var infile *s...

3.2K7
来自专栏向治洪

Markdown对应Yelee主题语法

概述 这里说的是Yelee主题的语法和原生语法是有些区别的;更多的基础语法可以到Cmd Markdown上面去查看;但是我觉得都会各有不同吧 注意这里说的不是真...

2006
来自专栏前端知识分享

第79天:jQuery事件总结(二)

       上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。

1192
来自专栏九彩拼盘的叨叨叨

学习前端 第5周 第4天

933
来自专栏python3

tkinter -- Menu

程序每次打印出当前选中的语言,与 Checkbutton 不同的是,同一个组内只有一个处于选中状态

893
来自专栏三木的博客

React 概要

React 简介 React 是一个开源的javascript库,用来构建用户接口(UI)。下图是React的一些基本信息: ? React 的特点 单向数据流...

2057
来自专栏阮一峰的网络日志

jQuery设计思想

jQuery是目前使用最广泛的javascript函数库。 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQue...

5496
来自专栏河湾欢儿的专栏

标签类型

标签类型 块 1.独占一行 2.支持所有样式 3.不设置宽度的时候,宽度撑满整个一行 内嵌 1.可以在一行显示 2.不支持宽高,不支持上下的mar...

1073
来自专栏C/C++基础

web前端开发初学者十问集锦(3)

我们经常使用元素的width:100%和height:100%将元素的宽度和高度扩充至父元素的宽度和高度。但是前提是需要对其父元素显示设置宽度和高度,否则无效。

992

扫码关注云+社区

领取腾讯云代金券