第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、仿淘宝搜索框
<!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-表单获取焦点和数组声明遍历的更多相关文章
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- 简单js表单验证
简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...
- JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...
- js 表单验证控制代码大全
js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...
- node.js表单——formidable/////z
node.js表单--formidable node处理表单请求,需要用到formidable包.安装formidable包的命令如下: npm install formidable 安装pack ...
- js表单提交,面向对象
一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...
- angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
- JS表单验证类HTML代码实例
以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...
随机推荐
- 解决区间第K大的问题的各种方法
例题:http://poj.org/problem?id=2104 最近可能是念念不忘,必有回响吧,总是看到区间第k大的问题,第一次看到是在知乎上有人面试被弄懵了后来又多次在比赛中看到.以前大概是知道 ...
- java 程序文本文档形式的编写，编译，及运行
一.程序的编写 1.在指定路径下新建文本文档 如在f盘新建了一个名为demo的文件夹,在该文件夹路径下新建了一个文本文档 2.打开文本文档,进行编写,例如: 3.保存 选择文件另存为,文件名称为你创建 ...
- Linux 7.4配置VSFTP服务器
vsftpd(very secure ftp daemon,非常安全的FTP守护进程)是一款运行在Linux操作系统上的FTP服务程序,不仅完全开源而且免费,此外,还具有很高的安全性.传输速度,以及支 ...
- 吴裕雄 python 机器学习——层次聚类AgglomerativeClustering模型
import numpy as np import matplotlib.pyplot as plt from sklearn import cluster from sklearn.metrics ...
- 【JAVA】关于java中 类.class.getResource("/").getPath()获取路径有空格的问题
写了一个web工程,在本地测试正确,但是部署到服务器上就出现错误.原因是读取不到配置文件. 后来从打印出来的文件路径中发现是用Java的class.getResource("/") ...
- Java 语法基础
一 关键字 关键字: 其实就是某种语言赋予了特殊含义的单词 保留字: 其实就是还没有赋予特殊含义 但是准备日后要使用过的单词 二 标示符 标示符: 其实就是在程序中自定义的名词 比如类名, 变量名, ...
- 网络安全部门的漏洞扫描让你头痛不已么——PHP环境选它就可以了
最近网络安全要求是越来越严,原来PHP编写的程序在XAMPP或者其他环境下总会被某款软件扫出漏洞,进而上级部门就停止了我们服务器的外网出口,然而自从发现了一款安全环境神器UPUPW后,这样的问题就再也 ...
- http://www.yiibai.com/javalang/string_endswith.html
http://www.yiibai.com/javalang/string_endswith.html
- 1.安装hbase
参考:http://hbase.apache.org/book.html#quickstart 一.下载hbase 去apache下载hbase,然后解压到/usr/local/hbase-1.1.3 ...
- 什么是Frozen Binary
对于Python来说,你可以将Python的字节码,PVM(也就是解析器),以及需要的相关类库,打包成一个package,这个package实际上是一个二进制可执行文件,这样,用户获取到这个packa ...