判断用户输入事件
- 正常浏览器 :
oninput - IE6、7、8支持的 ：
onpropertychange
例：仿淘宝输入框
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.search{
width: 380px;
margin: 100px auto;
position: relative;
}
.search input{
width: 350px;
height: 30px;
line-height: 30px;
font-size: 14px;
}
.search label{
position: absolute;
left: 6px;
top: 6px;
color: #999;
height: 22px;
line-height: 22px;
cursor: text;
}
.search label i{
float: left;
width: 16px;
height: 21px;
background: url("images/search.png") no-repeat left;
margin-right: 3px;
}
</style>
<script type="text/javascript">
window.onload = function () {
function $(id) {return document.getElementById(id);}
//onpropertychange是为了兼容IE8以下的浏览器
$("tb-search").oninput = $("tb-search").onpropertychange = function () {
if(this.value == ""){
$("message").style.display = "block";
}else{
$("message").style.display = "none";
}
}
}
</script>
</head>
<body>
<div class="search">
<input type="text" id="tb-search"/>
<!--注意for属性的作用-->
<label for="tb-search" id="message"><i></i>买顶帽子防晒</label>
</div>
</body>
</html>
数组 array
数组是做什么用的？var num = 10; 变量可以用来存储东西 。一个变量里面只能一个值。我们130人，想把我们每个人的人名存储，要用变量需要 130变量。这个时候可以考虑 数组
数组： 就是一个大变量， 它里面可以存储很多的值。
声明数组
var arr = [1,3,5,7,9];
var arr = new Array(1,3,5);
使用数组
- 使用的方法: 数组名[索引值];
- 索引号是从0开始的。
数组的长度
数组名.length;
遍历数组
var arr = [1,2,3,4,5];
for(var i = 0;i<arr.length;i++){
console.log(arr[i]);
}
优化写法
var arr = [1,2,3,4,5];
var len;
for(var i = 0,len = arr.length;i<len;i++){
console.log(arr[i]);
}
getElementsByTagName() 得到一个伪数组
例：隔行变色
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 500px;
}
ul,li{
list-style: none;
}
li{
height: 38px;
line-height: 38px;
}
li span{
margin: 5px;
}
.current{
background-color: #aaa!important;
}
</style>
<script type="text/javascript">
window.onload = function(){
var lis = document.getElementsByTagName("li");
var len;
for(var i=0 ,len = lis.length;i<len;i++){
if(i%2 == 0){
lis[i].style.backgroundColor = "#eee";
}else{
lis[i].style.backgroundColor = "#fff";
}
lis[i].onmouseover = function () {
this.className = "current";
}
lis[i].onmouseout = function () {
this.className = "";
}
}
}
</script>
</head>
<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>
<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>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul,li{
list-style: none;
}
</style>
<script type="text/javascript">
window.onload = function () {
function $(id){return document.getElementById(id);}
var btns = $("top").getElementsByTagName("input");
var checks = $("bottom").getElementsByTagName("input");
// console.log(btns.length);
btns[0].onclick = function () {
for(var i=0;i<checks.length;i++){
checks[i].checked =true;
}
}
btns[1].onclick = function () {
for(var i=0;i<checks.length;i++){
checks[i].checked =false;
}
}
btns[2].onclick = function () {
for(var i=0;i<checks.length;i++){
checks[i].checked =!checks[i].checked;
}
}
}
</script>
</head>
<body>
<div id="top">
<input type="button" value="全选"/>
<input type="button" value="取消"/>
<input type="button" value="反选"/>
</div>
<div id="bottom">
<ul>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
<li>选项: <input type="checkbox" name=""/></li>
</ul>
</div>
</body>
</html>
js通过封装函数来优化
<script type="text/javascript">
window.onload = function () {
function $(id){return document.getElementById(id);}
var btns = $("top").getElementsByTagName("input");
var checks = $("bottom").getElementsByTagName("input");
function all(flag){
for(var i=0;i<checks.length;i++){
checks[i].checked =flag;
}
}
btns[0].onclick = function () {
all(true);
}
btns[1].onclick = function () {
all(false);
}
btns[2].onclick = function () {
for(var i=0;i<checks.length;i++){
checks[i].checked =!checks[i].checked;
}
}
}
</script>
排他思想
排他思想：首先干掉所有人， 剩下自己额外设置
例：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input{
border: 0 none;
width: 80px;
height: 26px;
background-color: #ccc;
margin-left: 12px;
color: #333;
font-size: 16px;
font-family: "simsun";
font-weight: 500;
}
.current{
background: red;
color: #fff;
}
</style>
<script type="text/javascript">
window.onload = function(){
var btns = document.getElementsByTagName("input");
for(var i=0;i<btns.length ;i++){
btns[i].onclick = function () {
//排他思想，先清除所有人的样式
for(var j=0;j<btns.length;j++){
btns[j].className = "";
}
this.className = "current";
}
}
}
</script>
</head>
<body>
<input type="button" value="排他思想" class="current"/>
<input type="button" value="排他思想"/>
<input type="button" value="排他思想"/>
<input type="button" value="排他思想"/>
<input type="button" value="排他思想"/>
<input type="button" value="排他思想"/>
</body>
</html>
通过自定义属性获取当前索引(基于上面的案例)
window.onload = function(){
var btns = document.getElementsByTagName("input");
for(var i=0;i<btns.length ;i++){
btns[i].index = i;//给每个button定义一个index属性
btns[i].onclick = function () {
alert(this.index);
//排他思想，先清除所有人的样式
for(var j=0;j<btns.length;j++){
btns[j].className = "";
}
this.className = "current";
}
}
}
例：Tab栏切换
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 400px;
height: 425px;
}
.top input{
margin: 0;
padding: 0;
outline-style: none;
border: 0 none;
width: 80px;
height: 25px;
background-color: #ccc;
color: #333;
font-size: 16px;
font-family: "simsun";
font-weight: 500;
}
.top .current{
background: red;
color: #fff;
}
.bottom div{
width: 400px;
height: 400px;
background-color: red;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function () {
function $(id) {return document.getElementById(id);}
var btns = $("top").getElementsByTagName("input");
var divs = $("bottom").getElementsByTagName("div");
for(var i=0;i<btns.length;i++){
btns[i].index = i;
btns[i].onclick = function () {
for(var j = 0;j<btns.length;j++){
btns[j].className = "";
divs[j].style.display = "none";
}
this.className = "current";
divs[this.index].style.display = "block";
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="top" id="top">
<input type="button" value="首页" class="current"/><input type="button" value="新闻时事"/><input type="button" value="体育"/><input type="button" value="明星八卦"/><input type="button" value="城市服务"/>
</div>
<div class="bottom" id="bottom">
<div class="div1" style="display: block;">首页</div>
<div class="div2">新闻时事</div>
<div class="div3">体育</div>
<div class="div4">明星八卦</div>
<div class="div5">城市服务</div>
</div>
</div>
</body>
</html>
优化之后，通过函数封装，多个tab互不影响
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,ul,li{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.box{
width: 500px;
height: 430px;
margin: 15px auto;
}
.tab-btn{
width: 500px;
height: 30px;
}
.tab-btn li{
float: left;
width: 100px;
height: 30px;
line-height: 30px;
background-color: #ccc;
color: #333;
text-align: center;
}
.tab-btn .current{
background-color: red;
color:#fff;
}
.tab-con div{
width: 500px;
height: 400px;
background-color: red;
display: none;
}
.tab-con .show{
display: block;
}
</style>
<script type="text/javascript">
window.onload = function () {
function $(id){return document.getElementById(id);}
function tab(id){
var lis = $(id).getElementsByTagName("li");
var cons = $(id).getElementsByClassName("tab-con")[0].getElementsByTagName("div");
for(var i=0; i<lis.length; i++){
lis[i].index = i;
lis[i].onmouseover = function () {
for(var j=0; j<lis.length; j++){
lis[j].className = "";
cons[j].className = "";
}
this.className = "current";
cons[this.index].className = "show";
}
}
}
tab("one");//第一个tab栏
tab("two");//第二个tab栏
}
</script>
</head>
<body>
<div class="box" id="one">
<div class="tab-btn">
<ul>
<li class="current">首页</li>
<li>新闻时事</li>
<li>体育</li>
<li>购物</li>
<li>游戏</li>
</ul>
</div>
<div class="tab-con">
<div class="show">首页</div>
<div>新闻时事</div>
<div>体育</div>
<div>购物</div>
<div>游戏</div>
</div>
</div>
<div class="box" id="two">
<div class="tab-btn">
<ul>
<li class="current">首页</li>
<li>新闻时事</li>
<li>体育</li>
<li>购物</li>
<li>游戏</li>
</ul>
</div>
<div class="tab-con">
<div class="show">首页</div>
<div>新闻时事</div>
<div>体育</div>
<div>购物</div>
<div>游戏</div>
</div>
</div>
</body>
</html>
