判斷用戶輸入事件
- 正常瀏覽器 :
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>
數(shù)組 array
數(shù)組是做什么用的？var num = 10; 變量可以用來存儲(chǔ)東西 。一個(gè)變量里面只能一個(gè)值。我們130人，想把我們每個(gè)人的人名存儲(chǔ)，要用變量需要 130變量。這個(gè)時(shí)候可以考慮 數(shù)組
數(shù)組： 就是一個(gè)大變量， 它里面可以存儲(chǔ)很多的值。
聲明數(shù)組
var arr = [1,3,5,7,9];
var arr = new Array(1,3,5);
使用數(shù)組
- 使用的方法: 數(shù)組名[索引值];
- 索引號(hào)是從0開始的。
數(shù)組的長度
數(shù)組名.length;
遍歷數(shù)組
var arr = [1,2,3,4,5];
for(var i = 0;i<arr.length;i++){
console.log(arr[i]);
}
優(yōu)化寫法
var arr = [1,2,3,4,5];
var len;
for(var i = 0,len = arr.length;i<len;i++){
console.log(arr[i]);
}
getElementsByTagName() 得到一個(gè)偽數(shù)組
例：隔行變色
<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>上證指數(shù)</span><span>3641</span><span>10-5</span><span>0.16%</span>
</li>
<li>
<span>上證指數(shù)</span><span>3641</span><span>10-5</span><span>0.16%</span>
</li>
<li>
<span>上證指數(shù)</span><span>3641</span><span>10-5</span><span>0.16%</span>
</li>
<li>
<span>上證指數(shù)</span><span>3641</span><span>10-5</span><span>0.16%</span>
</li>
<li>
<span>上證指數(shù)</span><span>3641</span><span>10-5</span><span>0.16%</span>
</li>
<li>
<span>上證指數(shù)</span><span>3641</span><span>10-5</span><span>0.16%</span>
</li>
<li>
<span>上證指數(shù)</span><span>3641</span><span>10-5</span><span>0.16%</span>
</li>
<li>
<span>上證指數(shù)</span><span>3641</span><span>10-5</span><span>0.16%</span>
</li>
<li>
<span>上證指數(shù)</span><span>3641</span><span>10-5</span><span>0.16%</span>
</li>
<li>
<span>上證指數(shù)</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>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
<li>選項(xiàng): <input type="checkbox" name=""/></li>
</ul>
</div>
</body>
</html>
js通過封裝函數(shù)來優(yōu)化
<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>
排他思想
排他思想：首先干掉所有人， 剩下自己額外設(shè)置
例：
<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>
通過自定義屬性獲取當(dāng)前索引(基于上面的案例)
window.onload = function(){
var btns = document.getElementsByTagName("input");
for(var i=0;i<btns.length ;i++){
btns[i].index = i;//給每個(gè)button定義一個(gè)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="新聞時(shí)事"/><input type="button" value="體育"/><input type="button" value="明星八卦"/><input type="button" value="城市服務(wù)"/>
</div>
<div class="bottom" id="bottom">
<div class="div1" style="display: block;">首頁</div>
<div class="div2">新聞時(shí)事</div>
<div class="div3">體育</div>
<div class="div4">明星八卦</div>
<div class="div5">城市服務(wù)</div>
</div>
</div>
</body>
</html>
優(yōu)化之后，通過函數(shù)封裝，多個(gè)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");//第一個(gè)tab欄
tab("two");//第二個(gè)tab欄
}
</script>
</head>
<body>
<div class="box" id="one">
<div class="tab-btn">
<ul>
<li class="current">首頁</li>
<li>新聞時(shí)事</li>
<li>體育</li>
<li>購物</li>
<li>游戲</li>
</ul>
</div>
<div class="tab-con">
<div class="show">首頁</div>
<div>新聞時(shí)事</div>
<div>體育</div>
<div>購物</div>
<div>游戲</div>
</div>
</div>
<div class="box" id="two">
<div class="tab-btn">
<ul>
<li class="current">首頁</li>
<li>新聞時(shí)事</li>
<li>體育</li>
<li>購物</li>
<li>游戲</li>
</ul>
</div>
<div class="tab-con">
<div class="show">首頁</div>
<div>新聞時(shí)事</div>
<div>體育</div>
<div>購物</div>
<div>游戲</div>
</div>
</div>
</body>
</html>
