第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的数字.浮 ...
随机推荐
- python--复习之路的目录
想要看时点链接看看,常来复习,温故而知新,可以为师矣. 1:基本类型 python--基本类型之字符串 python--基本类型之列表 python--基本类型之元组 python--基本类型之集合 ...
- python--基本类型之集合
set(集合): 定义和创建: 定义:集合是一个无序的,不重复的数据集合,它主要作用1:去重,把一个列表变成集合,就自动去重了2:关系测试,测试两组数据之间的交集,差集,并集等关系 集合:把不同的数据 ...
- TableView滑动时候出现的卡顿现象
分析 UITableView是UIScrollView的子类,因此它可以自动响应滚动事件(一般为上下滚动). 它内部包含0到多个UITableViewCell对象,每个table cell展示各自的 ...
- 【NIS】深入了解NIS
1 简介 NIS( NetworkInformation Service)提供了一个网络黄页的功能,当用户登录系统时,Linux系统会到NIS主机上去寻找用户使用的帐号密码信息加以比对,以提供用户登 ...
- linux部署MantisBT(三)部署MantisBT
三.部署MantisBT 1.下载MantisBT https://www.mantisbt.org/download.php 2.将MantisBT安装包放在/apache/htdocs下并重命名为 ...
- Ubuntu安装netdata监控平台
介绍 Netdata通过可扩展的Web仪表板提供准确的性能监控,可以显示Linux系统上的流程和服务.它监控有关CPU,内存,磁盘,网络,进程等指标. Netdata官网地址:https://my-n ...
- Java初始化方法：类、容器
Java初始化方法:类.容器 初始化类(非final): Struts2的DefaultActionMapper类中: public DefaultActionMapper() { ...
- * 197. Permutation Index【LintCode by java】
Description Given a permutation which contains no repeated number, find its index in all the permuta ...
- Java学习 · 初识 容器和数据结构
容器和数据结构 1. 集合的引入 a) 集合的使用场景:需要将一些相同结构的个体整合到一起时 i. 新闻列表 ii. 邮件列表 iii. ...
- Python基础 之 文件操作
文件操作 一.路径 文件绝对路径:d:\python.txt 文件相对路径:在IDEA左边的文件夹中 二.编码方式 utf-8 gbk... 三.操作方式 1.只读 r 和 rb 绝对路径的打开操作 ...