第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的数字.浮 ...
随机推荐
- Go语言入门（二）Go语言中的变量、常量、数据类型、流程控制以及函数
Go语言中的变量 通常用var关键声明变量,有常规方式和简化方式. 常规方式: var name1 type1 name1 = value1 //赋值 简化方式: var name2 = value1 ...
- flash读写学习笔记与spi接口及简单测试验证（三）
FPGA中的视频图像资源,以及想要永久存储的程序都是要存储在flash中,flash是FPGA一个不可缺少的部分,flash的种类有很多,根据winbond公司的128Mbit Qual SPI接口的 ...
- ECMAScript 5 compatibility shims for legacy JavaScript engines
ECMAScript 5 compatibility shims for legacy JavaScript engines https://github.com/es-shims/es5-shim
- 20145202mc《计算机病毒》实践3
网站检测 http://www.virscan.org/ lab01-02.exe lab01-03.exe 分析这两个文件是否加壳了: Lab01-02.exe lab01-03.exe 查看两个样 ...
- 成都Uber优步司机奖励政策（2月28日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- SLAM前沿问题梳理
鲁棒性问题:数据关联是影响系统鲁棒性的主要原因 特征提取.线特征 短期内的数据关联是最容易处理的,新的研究方向包括特征提取.线特征等. 回环检测 对于前端的环闭合检测,检测当前测量中的特征并试图将它们 ...
- mysql 常用语句使用
1.查询语句 SELECT * FROM table 2.更改语句 UPDATE table SET name = '123456' WHERE id = 100 3.插入语句 INSERT INTO ...
- 编译chromium时下载gn.exe时出错的解决方案
天朝人写个代码真难,想要编译一下chromium,但是获取代码时各种坑,不是网速慢,就是网络联不通,真难玩. 本文针对下载gn.exe等工具时失败的解决方案. 原因1:gclient没有走代理,针对使 ...
- Python ：编写条件分支代码的技巧
『Python 工匠』是什么? 我一直觉得编程某种意义是一门『手艺』,因为优雅而高效的代码,就如同完美的手工艺品一样让人赏心悦目. 在雕琢代码的过程中,有大工程:比如应该用什么架构.哪种设计模式.也有 ...
- 第五模块·WEB开发基础-第3章jQuery&Bootstrap
01-jQuery介绍 02-如何使用jQuery 03-jQuery的入口函数 04-jQuery对象和JS对象的相互转换 05-jQuery如何操作DOM 06-底层选择器 07-基本过滤器 08 ...