判斷用戶輸入事件
正常瀏覽器 : oninput
Ie 678 支持的 ： onpropertychange
案例：
淘寶案例.gif
<!DOCTYPE html>
<html><head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.search{
width:300px;
height:30px;
margin:100px auto;
position:relative;
}
.search input{
width:200px;
height:25px;
}
.search label{
font-size: 12px;
color:#ccc;
position: absolute;
top:8px;
left:20px;
cursor:text;
}
</style>
<script>
window.onload = function(){
function $(id){return document.getElementById(id);}
// oninput 大部分瀏覽器支持 檢測用戶表單輸入內(nèi)容
//onpropertychange ie678 檢測用戶表單輸入內(nèi)容
$("txt").oninput = $("txt").onprepertychange = function(){
if(this.value ==" ")
{
$("message").style.display ="block";
}
else
{
$("message").style.display ="none";
}
}
}
</script>
<head>
</head>
<body>
<div class="search">
<input type="text" id="txt"/>
<label for="txt" id="message">必敗的國際大牌</label> //當(dāng)我們點擊label 的時候 光標回到input里面。
</div>
</body>
</html>
數(shù)組array
數(shù)組： 就是一個大變量， 它里面可以存儲很多的值玻熙。
- 聲明數(shù)組
var arr = [1,3,5,7,9];
var arr = new Array(1,3,5);
-
使用數(shù)組
使用的方法: 數(shù)組名[索引值]; 函數(shù)名();
索引號是從0開始的。 0 1 2 3 4 5 ...
var textArr = ["劉備","諸葛亮","趙云","關(guān)羽"];
console.log(textArr[3])
-
數(shù)組的長度
數(shù)組名.length;
console.log(textArr[i]);
- 遍歷數(shù)組
for(var i= 0,len =textArr.length; i<len;i++
想到了for 遍歷 數(shù)組
getElementsByTagName() 得到一個偽數(shù)組
案例：隔行變色
x.gif
源碼 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 300px;
}
li{
line-height: 30px;
list-style-type: none;
}
li span{
margin: 5px;
}
.current{
background-color: #aaa!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";
}
else
{
lis[i].style.backgroundColor = "#ddd";
}
lis[i].onmouseover = function(){
this.className ="current";
}
lis[i].onmouseout = function(){
this.className ="";
}
}
/* var lis = document.getElementsByTagName("li"); // 得到所有的li//alert(lis.length);
for(var i = 0; i<lis.length; i++)
{
if(i%2 == 0) // 只有偶數(shù)能被2整除
{ lis[i].style.backgroundColor = "#eee"; }
//鼠標經(jīng)過li 的時候捏萍， 當(dāng)前的底色變亮
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>
數(shù)組求平均數(shù)：
求平均數(shù)
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*var arr =[1,2,3,4,5,6];
var sum = 0;
for(var i = 0,leg =arr.length;i<leg;i++){
sum = sum +arr[i];
}
console.log(sum/arr.length)*/
var arr = [10,20,30,34,67];
function avg(array){ //封裝求平均值函數(shù)
var len = array.length; //數(shù)組的長度
var sum = 0;
for(var i=0;i<len; i++)
{
sum +=array[i]; // sum = sum + array[i];
}
return sum/len;
}
//a*=3 a= a*3
console.log(avg(arr));
</script>
</body>
</html>
字符相連
數(shù)值相加 字符相連
1+1 = 2;
“你好” + “嗎” “你好嗎”
“你好” + 2 “你好2”
“0” + 10 “010”
10 - “2” 8
所有的input 取過來的值 是 字符型朋魔。
三元運算符 三目運算符
一元： a++ b++ +a -a
二元: a+b a>=b
三元: 表達式 ? 結(jié)果1 : 結(jié)果2 等價于 if else
如果表達式結(jié)果為真 ， 則返回 結(jié)果1
如果表達式結(jié)果為假铣卡， 則返回結(jié)果2
if(3>5) {alert(“11”)} else { alert(22)} ==
3>5 ? alert(11) : alert(22)
排他思想☆☆☆☆☆
排他思想:
首先干掉所有人， 剩下我自己偏竟、
案例：
排他并相應(yīng)指示.gif
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.damao{
background-color:pink;
}
</style>
<script>
window.onload = function(){
var btns = document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++)
{
btns[i].index=i; //給每 個button定義了一個index屬性 索引號
btns[i].onclick = function(){
//清除所有人的 類名 只能用for遍歷
alert(this.index);
for(var j=0;j<btns.length;j++)
{
btns[j].className = " ";
}
//就剩下自己 就是一個 而且是點擊那個
this.className = "damao";
}
}
}
</script>
</head>
<body>
<button>思想原理</button>
<button>思想原理</button>
<button>思想原理</button>
<button>思想原理</button>
<button>思想原理</button>
<button>思想原理</button>
</body>
</html>
變量 和屬性
變量
是獨立存在的 自由自在的
屬性和方法
屬于某個對象的 屬性和 方法
例如：
<script>
var index =10; //變量 誰都可以使用
var arr = [ ]; //數(shù)組
arr.index = 20; //自定義屬性 它只能在arr 才能使用
</script>
面試持舐洌考點TAB切換案例：
TAB切換案例.gif
源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width:400px;
margin:100px auto;
border:1px solid #ccc;
}
.bottom div{
width:100%;
height: 300px;
background-color: pink;
display:none;
}
.purple{
background-color: purple;
}
.bottom .show{
display:block;
}
</style>
<script>
window.onload = function(){
var btns = document.getElementsByTagName("button");
var divs = document.getElementById("divs").getElementsByTagName("div");
for(var i= 0;i<btns.length;i++)
{
btns[i].index = i; // 難點
btns[i].onclick = function(){
//讓所有的 btn 類名清空
//alert(this.index);
for(var j=0;j<btns.length;j++)
{
btns[j].className =" ";
}
//當(dāng)前的那個按鈕 的添加 類名
this.className ="purple";
//先隱藏下面所有的 div盒子
for(var i=0;i<divs.length;i++)
{
divs[i].style.display="none";
}
//留下中意的那個 跟點擊的序號有關(guān)系的
divs[this.index].style.display ="block";
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="top">
<button>第一個</button>
<button>第二個</button>
<button>第三個</button>
<button>第四個</button>
<button>第五個</button>
</div>
<div class="bottom" id="divs">
<div style="display:block;">1好盒子</div>
<div>2好盒子</div>
<div>3好盒子</div>
<div>4好盒子</div>
<div>5好盒子</div>
</div>
</div>
</body>
</html>
進一步精簡源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width:400px;
margin:100px auto;
border:1px solid #ccc;
}
.bottom div{
width:100%;
height: 300px;
background-color: pink;
display:none;
}
.purple{
background-color: purple;
}
.bottom .show{
display:block;
}
</style>
<script>
window.onload = function(){
var btns = document.getElementsByTagName("button");
var divs = document.getElementById("divs").getElementsByTagName("div");
for(var i= 0;i<btns.length;i++)
{
btns[i].index = i; // 難點
btns[i].onclick = function(){
//讓所有的 btn 類名清空
//alert(this.index);
for(var j=0;j<btns.length;j++)
{
btns[j].className =" ";
divs[j].className =" ";
}
//當(dāng)前的那個按鈕 的添加 類名
this.className ="purple";
//先隱藏下面所有的 div盒子
//留下中意的那個 跟點擊的序號有關(guān)系的
divs[this.index].className = "show";
}
}
}
</script>
</head>
<body>
<div class="box">
<div class="top">
<button>第一個</button>
<button>第二個</button>
<button>第三個</button>
<button>第四個</button>
<button>第五個</button>
</div>
<div class="bottom" id="divs">
<div class ="show">1好盒子</div>
<div>2好盒子</div>
<div>3好盒子</div>
<div>4好盒子</div>
<div>5好盒子</div>
</div>
</div>
</body>
</html>
