第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的数字.浮 ...
随机推荐
- Java基础之this和super关键字用法
this 在java中,this是一个引用当前类对象的引用变量,主要有以下几种用法: 引用当前类的实例变量· this关键字可以用来引用当前类的实例变量.如果实例变量和某个方法的参数之间存在歧义(实例 ...
- Windows下MySQL多实例运行（转）
关键字:Windows下MySQL多实例运行 阅读前注意事项: 1.有的版本的data目录不直接放在mysql安装目录下,有可能在:C:\ProgramData\MySQL\MySQL Server ...
- 【原创】linux命令-Axel命令 - linux多线程下载 - 费元星 - 未来星开发团队
[费元星版权Q:9715234] Axel 是 Linux 下一个不错的HTTP/FTP高速下载工具.支持多线程下载.断点续[费元星版权Q:9715234]传,且可以从多个地址或者从一个地址的多个连接 ...
- Docker - 容器中的tomcat如何使用startup.sh启动
网上大多介绍的catalina.sh启动,因为docker容器中,无法直接启动startup.sh. 解决方法: 编辑catalina.sh,找到 >> "$CATALINA_O ...
- 关于BLOB/TEXT字段存储设计及性能的简单研究
简单研究了一下BLOB/TEXT字段对数据库性能的影响,得到一个大概的结论:(未验证) 无论MySQL还是MSSQL,都可以通过把BLOB/TEXT数据存储在行外的方式提高性能 把BLOB/TEXT字 ...
- python中出现ascii编码问题的解决办法
一劳永逸,一次性全盘解决的办法 环境变量中去设置 以centos 7为例: vim /etc/profile export PYTHONIOENCODING=utf-8 source /etc/pro ...
- 爬虫1.1-基础知识+requests库
目录 爬虫-基础知识+requests库 1. 状态返回码 2. URL各个字段解释 2. requests库 3. requests库爬虫的基本流程 爬虫-基础知识+requests库 关于html ...
- fp-growth树创建代码及详细注释
事务集过滤重排: #FP树节点结构 class treeNode: def __init__(self,nameValue,numOccur,parentNode): self.name=nameVa ...
- Python3 迭代器,生成器,装饰器
1.迭代器 迭代器有两个基本方法,iter()和next(),next()完成后会引发StopIteration异常 a='abcdef' b=iter(a) #创建迭代器对象 print(type( ...
- 5.hadoop常用命令
1. 单独启动和关闭hadoop服务 启动名称节点 #hadoop-daemon.sh start namenode 启动数据节点 #hadoop-daemons.sh start datanode ...