第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的数字.浮 ...
随机推荐
- 解决protobuf import路径的问题
网上关于protobuf import的文章不太详细,有些问题说的不全,比如import时的路径是在哪个目录中搜索的,比如: 我有一个这样的目录结构,我怎么在demo2/protoDemo2.prot ...
- PWA-网络
PWA-网络 fetch API Get fetch('/some/url',{ method:'GET' }).then(function(resp){ //success }).catch(fun ...
- 为什么我要放弃javaScript数据结构与算法（第五章）—— 链表
这一章你将会学会如何实现和使用链表这种动态的数据结构,这意味着我们可以从中任意添加或移除项,它会按需进行扩张. 本章内容 链表数据结构 向链表添加元素 从链表移除元素 使用 LinkedList 类 ...
- ioc解析
引述:IoC(控制反转:Inverse of Control)是Spring容器的内核,AOP.声明式事务等功能在此基础上开花结果.但是IoC这个重要的概念却比较晦涩隐讳,不容易让人望文生义,这不能不 ...
- HDU 2242 考研路茫茫——空调教室
考研路茫茫——空调教室 http://acm.hdu.edu.cn/showproblem.php?pid=2242 分析: 树形dp,删边. 代码: #include<cstdio> # ...
- android分析windowManager、window、viewGroup之间关系(二)
三.接上一节,分析windowManager中添加一个悬浮框的方式,首先看代码 WindowManager.LayoutParams params = new LayoutParams(); para ...
- Android性能测试 | 启动时间篇
[转载]原文地址:http://www.51testing.com/html/93/n-3724593.html 背景介绍 Android用户也许会经常碰到以下的问题: 1)应用后台开着,手机很快没电 ...
- 227. Mock Hanoi Tower by Stacks【LintCode java】
Description In the classic problem of Towers of Hanoi, you have 3 towers and N disks of different si ...
- solidity python 签名和验证
注意,以太坊智能合约里面采用的是公钥非紧凑类型 def gen_secrets_pair(): """ 得到公钥和私钥 :return: ""&quo ...
- Linux下安装paramiko
paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. 由于使用的是python这样的能够跨平台运行的语言,所以所有python支持的平台, ...