一、表单

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、仿淘宝搜索框

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>仿淘宝搜索框</title>

     <style>

         .search{

             width: 400px;

             height: 30px;

             margin: 100px auto;

             position: relative;

         }

         .search input{

             width: 300px;

             height: 25px;

             float: left;

         }

         .search label{

             position: absolute;

             left: 15px;

             top:5px;

             color: #c1c1c1;

             cursor: text;

         }

         .search button{

             display: block;

             width: 50px;

             height: 33px;

             background-color: orange;

             color: #fff;

             text-decoration: none;

             border: 1px solid #f1f1f1;

             float: left;

             position: absolute;

             top:-1px;

             left: 303px;

             font-size: 16px;

             cursor: pointer;

         }

     </style>

     <script>

         window.onload=function(){

             function $(id){return document.getElementById(id);}

             $("txt").oninput=function(){

                 if(this.value==""){

                     $("message").style.display="block";

                 }else{

                 $("message").style.display="none";

                 }

             }

         }

     </script>

 </head>

 <body>

 <div class="search">

     <input type="text" id="txt">

     <label for="txt" id="message">国际品牌</label>

     <!--<input type="text" id="txt" placeholder="必败的国际品牌">-->

     <button id="btn">搜索</button>

 </div>

 </body>

 </html>

运行效果：

2、隔行变色

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>隔行变色</title>

 </head>

 <style>

     .box{

         width: 500px;

         margin: 100px auto;

     }

     li{

         list-style: none;

         line-height: 30px;

     }

     li span{

         margin-right:20px;

     }

     .current{

         background-color: #c1c1c1!important;

     }

 </style>

 <script>

     window.onload=function(){

         var lis=document.getElementsByTagName("li");

         for(var i=0;i<lis.length;i++){

             if(i%2==0){

                 lis[i].style.backgroundColor="#eee";

             }

             lis[i].onmouseover=function(){

                 this.className="current";//一定要用this

             }

             lis[i].onmouseout=function(){

                 this.className="";//一定要用this

             }

         }

     }

 </script>

 <body>

     <div class="box">

         <ul>

             <li>

                 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>

             </li>

             <li>

                 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>

             </li>

             <li>

                 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>

             </li>

             <li>

                 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>

             </li>

             <li>

                 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>

             </li>

             <li>

                 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>

             </li>

             <li>

                 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>

             </li>

             <li>

                 <span>上证指数</span><span>3641</span><span>10-5</span><span>0.16%</span>

             </li>

         </ul>

     </div>

 </body>

 </html>

运行效果：

3、数组声明与遍历

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>数组声明与遍历</title>

 </head>

 <script>

     var num=10;

     var arr=[1,3,5,7,9];//声明数组

     var arr=new Array(1,3,5);

     var textArr=["刘备","诸葛亮","项羽","张飞","赵云"];

     console.log(textArr[1]);//使用数组

     console.log(textArr.length)//求数组长度

     //遍历数组一

     for(var i=0;i<textArr.length;i++){

         console.log(textArr[i]);

     }

     //遍历数组二（推荐）

     for(var i= 0,len=textArr.length;i<len;i++){

         console.log(textArr[i]);

     }

 </script>

 <body>

 </body>

 </html>

4、获取某类元素

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script>

         window.onload=function(){

             //获取某类元素

             /*var lis=document.getElementsByTagName('li');

             //lis[0].innerHTML="abc";

             for(var i=0;i<lis.length;i++){

                 lis[i].innerHTML="abc";

             }*/

             //金字塔打印

             /*function line(){

17                 for(var i=1;i<100;i++){

18                    document.write("<hr width="+i+"%/>");

19                 }

20             }

21             line();*/

             //自动获取焦点

             /*var txt=document.getElementById("txt");

             txt.focus();//focus()自动获取焦点的方法*/

             //自动选择表单内容

            /* var txt=document.getElementById("txt");

             txt.onmouseover=function(){

             this.select();

             }*/

         }

     </script>

 </head>

 <body>

   <!--  <div id="box">

         <ul>

             <li>1234567890</li>

             <li>1234567890</li>

             <li>1234567890</li>

             <li>1234567890</li>

             <li>1234567890</li>

         </ul>

     </div>-->

   <input type="text" id="txt" value="请输入内容">

     <button>搜索</button>

 </body>

 </html>

第27天：js-表单获取焦点和数组声明遍历的更多相关文章

  1. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  2. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  3. 简单js表单验证

     简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...

  4. JS表单验证-12个常用的JS表单验证

    JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...

  5. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  6. node.js表单——formidable/////z

    node.js表单--formidable   node处理表单请求,需要用到formidable包.安装formidable包的命令如下: npm install formidable 安装pack ...

  7. js表单提交,面向对象

    一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...

  8. angular js 表单验证

    <!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...

  9. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

随机推荐

  1. 如何在VMware Fusion中导入windows下的虚拟机

    最近换了新款的mbp,因为偷懒,便将之前在windows台式机上的虚拟机搬了过来. 特此记录下搬运过程,方便以后查看. 一 操作过程 安装激活VMware 常规操作,无需赘言 拷贝windows下虚拟 ...

  2. [BZOJ3563&3569]DZY Loves Chinese

    bzoj 加强版 sol 其实前一题还有一种解法的,具体方法请见bzoj讨论版. 以下是正解(?) 建一棵生成树. 考虑什么时候图会不连通:当且仅当存在一条树边被删除,同时所有覆盖了他的非树边也被删除 ...

  3. Shr-前端汇总

    F7控件监听 f7控件的监听是指,在点击F7控件时,对控件内的内容进行选中后出发该事件监听:通过参数value可以获取当前F7控件的一些值信息. //人力编制方案监听 回写计划期间 及分录数据 ini ...

  4. Python3 linux安装

    ./configure --prefix=/usr/local/python3 --with-ssl --enable-optimizations make && make insta ...

  5. hugepages_settings.sh

    #!/bin/bash## hugepages_settings.sh## Linux bash script to compute values for the# recommended HugeP ...

  6. Android 9 Pie震撼来袭 同步登陆WeTest

    WeTest 导读 2018年8月7日,Google对外发布最新 Android 9.0 正式版系统,并宣布系统版本Android P 被正式命名为代号“Pie”,最新系统已经正式推送包括谷歌Pixe ...

  7. Qt-QML-Repeater-导航条

    上篇文章中,我写了一个自己的Button,也就是美化了一下QML自带的Button 就是上面的这个,剩下的就是放三张图片在上面就可以了,当然了,这个Button在后期,还是会加入更让多的美化,比如,可 ...

  8. RabbitMQ基础教程之使用进阶篇

    RabbitMQ基础教程之使用进阶篇 相关博文,推荐查看: RabbitMq基础教程之安装与测试 RabbitMq基础教程之基本概念 RabbitMQ基础教程之基本使用篇 I. 背景 前一篇基本使用篇 ...

  9. uiautomatorviewer定位App元素

    这个工具是Android SDK自带的, 日常的工作中经常要使用的, 在C:\Android\sdk\tools\bin目录下: 双击之, 请注意, 我一般选择第一个机器人小图标Device Scre ...

  10. 使用maven构建web项目（简易版）

    在eclipse中使用maven开发一个web项目 第一步:安装maven:在Windows上安装Maven 中间省略很多步骤....(包括关于eclipse中配置maven) 第二步:不用懂任何ma ...