专栏首页前端知识分享第27天:js-表单获取焦点和数组声明遍历

第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 条评论
登录 后参与评论

相关文章

  • 第66天:闭包的原理和函数传参

    在程序语言中,所谓闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型...

    半指温柔乐
  • 第4天:JS入门-给div设置宽高背景色

    今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高、背景色。一点点都是进步。核心代码如下:

    半指温柔乐
  • 第31天:动态生成节点-京东轮播图创建

    一、获取节点属性 getAttribute()通过这个方法可以得到某些元素的某些属性 alert(demo.getAttribute("class"));

    半指温柔乐
  • 用Github五万颗星的css动画库, 为网页增添趣味性

    animate整个项目只有一个css文件, 使用方法也非常简单, 只要给相应的元素添加class属性即可

    zhaoolee
  • linux 定时任务 Crontab 使用方法

    用户所建立的 crontab 文件中,每一行都代表一项任务,每行的每个字段代表一项设置,它的格式共分为六个字段,前五段是时间设定段,第六段是要执行的命令段,格式...

    huginn 中文网
  • 论文赏析[ACL18]基于RNN和动态规划的线性时间成分句法分析

    Linear-Time Constituency Parsing with RNNs and Dynamic Programminggodweiyang.com

    godweiyang
  • CSS3

    天天_哥
  • 对libevent+多线程服务器模型的C++封装类

    最近在看memcached的源码,觉得它那种libevent+多线程的服务器模型真的很不错,我将这个模型封装成一个C++类,根据我的简单测试,这个模型的效率真...

    bear_fish
  • CSS 使用 Flex 布局来制作一个骰子

    我在上一篇博文 CSS 布局_2 Flex弹性盒中,对 Flex 弹性盒有着详细的介绍,在这里,我们使用 Flex 弹性盒布局,来实现骰子的布局,一个面可以设置...

    Nian糕
  • 在Mac下配置PHP开发环境:Apache+php+MySql

    <span class="pln">sudo apachectl start</span>

    慕白

扫码关注云+社区

领取腾讯云代金券