前端基本功：JS必记知识点+案例（三）
2016-10-28 本文已影响161人
越IT
判断用户输入事件
正常浏览器 : 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 大部分浏览器支持 检测用户表单输入内容
//onpropertychange ie678 检测用户表单输入内容
$("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> //当我们点击label 的时候 光标回到input里面。
</div>
</body>
</html>
数组array
数组： 就是一个大变量， 它里面可以存储很多的值。
- 声明数组
var arr = [1,3,5,7,9];
var arr = new Array(1,3,5);
-
使用数组
使用的方法: 数组名[索引值]; 函数名();
索引号是从0开始的。 0 1 2 3 4 5 ...
var textArr = ["刘备","诸葛亮","赵云","关羽"];
console.log(textArr[3])
-
数组的长度
数组名.length;
console.log(textArr[i]);
- 遍历数组
for(var i= 0,len =textArr.length; i<len;i++
想到了for 遍历 数组
getElementsByTagName() 得到一个伪数组
案例：隔行变色
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) // 只有偶数能被2整除
{ lis[i].style.backgroundColor = "#eee"; }
//鼠标经过li 的时候， 当前的底色变亮
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>
数组求平均数：
求平均数
<!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){ //封装求平均值函数
var len = array.length; //数组的长度
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>
字符相连
数值相加 字符相连
1+1 = 2;
“你好” + “吗” “你好吗”
“你好” + 2 “你好2”
“0” + 10 “010”
10 - “2” 8
所有的input 取过来的值 是 字符型。
三元运算符 三目运算符
一元： a++ b++ +a -a
二元: a+b a>=b
三元: 表达式 ? 结果1 : 结果2 等价于 if else
如果表达式结果为真 ， 则返回 结果1
如果表达式结果为假， 则返回结果2
if(3>5) {alert(“11”)} else { alert(22)} ==
3>5 ? alert(11) : alert(22)
排他思想☆☆☆☆☆
排他思想:
首先干掉所有人， 剩下我自己、
案例：
排他并相应指示.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 = [ ]; //数组
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 =" ";
}
//当前的那个按钮 的添加 类名
this.className ="purple";
//先隐藏下面所有的 div盒子
for(var i=0;i<divs.length;i++)
{
divs[i].style.display="none";
}
//留下中意的那个 跟点击的序号有关系的
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 =" ";
}
//当前的那个按钮 的添加 类名
this.className ="purple";
//先隐藏下面所有的 div盒子
//留下中意的那个 跟点击的序号有关系的
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>
