一、表单

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>
  64.  
  65. 运行效果：
  66.  

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>
  71.  
  72. 运行效果：

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. 17                 for(var i=1;i<100;i++){
  18. 18                    document.write("<hr width="+i+"%/>");
  19. 19                 }
  20. 20             }
  21. 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>

第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. 后端系统开发之gflags使用规范

    任何好用的工具如果使用不当都会带来不好的后果,gflags也是一样.我遇到过一些gflags的“坑”,还从领导和同事那里获得一些好的想法,整理成7条gflags使用规范.有意识的遵循这些规范,对项目的 ...

  2. Go Web Gin EasyUI 框架

    项目结构 第三方: 1.gin微服务框架 2.EasyUI框架

  3. C# 面试题 （三）

    1. 抽象类的特性是什么? 抽象类不能被实力化,在抽象类上使用new操作符是错误的. 抽象类允许(但不必要)包含抽象方法和入口. 抽象类不能用scaled修饰符. 2. abstract关键字怎么用? ...

  4. rm 删除不掉文件，报错解决 以及 chattr的介绍

    rm 强制删除一个文件 居然删除不掉! 出现这个错误: rm: cannot remove ‘default/.user.ini’: Operation not permitted 原来呀: 然后呢 ...

  5. 一个只有十行的精简MVVM框架（上篇）

    本文来自网易云社区. 前言 MVVM模式相信做前端的人都不陌生,去网上搜MVVM,会出现一大堆关于MVVM模式的博文,但是这些博文大多都只是用图片和文字来进行抽象的概念讲解,对于刚接触MVVM模式的新 ...

  6. 「日常训练」ZgukistringZ（Codeforces Round #307 Div. 2 B）

    题意与分析(CodeForces 551B) 这他妈哪里是日常训练,这是日常弟中弟. 题意是这样的,给出一个字符串A,再给出两个字符串B,C,求A中任意量字符交换后(不限制次数)能够得到的使B,C作为 ...

  7. unity实现框选效果

    思路: 在uinity中既可以将屏幕坐标转换为世界坐标,也可以将世界坐标转换为屏幕坐标.这样的话我们就可以通过判断物体在世界坐标转换为平幕坐标是否在鼠标框选的矩形区域坐标内,来判断物体是否在框选范围. ...

  8. [python]np.loadtxt报错

    np.loadtxt报错 通过pandas生成的cvs数据利用nump.loadtxt读取的时候 tmp = np.loadtxt('test.csv', dtype=np.str, delimite ...

  9. 腾讯云ubuntu安装使用MySQL

    安装步骤 ubuntu@VM---ubuntu:~$ sudo apt-get install mysql-server (密码: root/root) ubuntu@VM---ubuntu:~$ s ...

  10. bug 调试

    系统性能分析中,CPU.内存和 IO 是主要关注项.----系统层面 1. 对于 CPU,如果是常见的 Linux,可以先用 top 命令查看负载状况. top -H  -p [pid] pstree ...