欢迎光临
我们一直在努力

NaN详解及isNaN()方法的应用

阅读(3665)

NaN:not a number 不是个数字的 数字类型

<script>
var a = Number('abc');
// alert( a );    // NaN
// alert( typeof (a) );		// number

// 一旦写程序中出现:NaN  肯定进行了非法的运算操作
// alert( '200px' -  100 );

// NaN 是 false
if( a ){
 // alert( '真' );
}else{
 // alert( '假' );
}

// NaN 与自己都不相等!!
alert( a === a );	// false
</script>

isNaN:Is not a number 是不是不是一个数字(不是数字)

<script>
// isNaN();  判断某些值是不是数字
// 不喜欢数字、讨厌数字

// alert( isNaN( function(){ alert(1) } ) );    // true
// alert( isNaN( [] ) );    // false
alert( isNaN('250') );   // Number()  '250' => 250 => false
</script>

JavaScript的数据类型转换

阅读(2337)

显式类型转换(强制类型转换):

Number()      函数把对象的值转换为数字(如果无法转换为数字,那么返回NaN)。

parseInt()    函数可解析一个字符串,并返回一个整数。

parseFloat()  函数可解析一个字符串,并返回一个浮点数(开头和结尾的空格是允许的,如果字符串的第一个字符不能被转换为数字,则返回NaN)。

隐式类型转换:

+  200 + ‘3’变成字符串

– * / %’200′ – 3   变成数字

++ –变成数字

> < 数字的比较 、字符串的比较

!取反把右边的数据类型转成布尔值

例:显式类型转换

<script>
var a = '+100';
 // alert( Number(a) );			// 100
var a1 = '  ';
 // alert( Number(a1) );    // 0
var a2 = true;
 // alert( Number(a2) );    // true-1  false-0
var a3 = [ 10 ];
 // alert( Number(a3) );    // 10
var a4 = null;
 // alert( Number(a4) );    // 0

var b = ' 200px';
 // alert( parseInt(b) );    //200
var c = '12.34元';
 // alert( parseFloat(c) );    //12.34

var json = {};
 // alert( Number(json) );    // NaN
var u;
 // alert( Number(u) );    // NaN
var fun = function (){ alert(1); };
 // alert( Number(fun) );    // NaN
</script>

例:parseInt()和parseFloat()的应用,判断一个数字是不是小数。

<script>
var num = '200.45';
if( parseInt(num) == parseFloat(num) ){
	//alert( num + '是整数' );
}else{
	//alert( num + '是小数' );
}
</script>

JavaScript数据类型及相关操作

阅读(2620)

ECMAScript:标准、核心

HTML 标签类型:block、inline、inline-block、table……

JS中的数据类型:数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义

typeof 判断数据类型

<script>
var i = 100;
// alert( typeof i );		// number

var s = ' miaov ';
// alert( typeof s );		// string
// alert( s.length );		// 7
// alert( s.charAt(3) );	// 'a'

var b = true;				// 布尔值:true  false
// alert( typeof b );		// boolean
if ( true ) {}
for ( ; false ; ) {  }

var fn = function (){ alert(1); };
// fn();
function fn1(){
	alert(2);
}
// alert( fn1 );
// fn1();

var obj = document;
// alert( typeof obj );		// object  物体、东西、对象
obj.abc = 123;
obj.onOff = true;
obj.fn1 = function (){ alert(1); };
// alert( document.onOff );		// 123
// obj.fn1();

var arr = [ 1,2,3,4 ];
// alert( arr.length );
// arr[2] = 345;
// alert( arr );
// arr.push( 5,6,7 );
// alert( arr );
// alert( typeof arr );		// object

arr.abc = 999;
arr.fn1 = function (){ alert('ok'); };
// alert( arr.abc );
// arr.fn1();

var json = { name:'miaov', age:5  };
// alert( json.name + '今年' + json.age + '岁了' );
// alert( typeof json );

var n = null;
// alert( typeof n );

var u;
// alert( typeof u );		// undefined 未定义
// 表示你写的程序出问题了~~
</script>

JavaScript练习:带缩略图的图片切换效果

阅读(3226)

带缩略图的图片切换效果

<!doctype html><html><head>
<meta charset="utf-8">
<title>带缩略图的图片切换效果</title>
<style>
body,div,h2,a,ul,li,p{ margin:0; padding:0;}
li{ list-style:none;}
#banner{ width:720px; height:500px; margin:0 auto;padding:20px 30px; background: #666 url(loader_ico.gif) no-repeat center; position:relative;}
h2{ height:36px; margin-bottom:15px; line-height:36px; font-size:24px; color:#fff;}
.pic,.pic img{ width:720px; height:420px;} 
#banner a{ width:36px; height:36px;font-size:24px; line-height:36px;color:#fff;text-decoration:none; text-align:center; background:rgba(0,0,0,.5);position:absolute;top:273px;}
#banner a:hover{background:rgba(0,0,0,.8)}
#prev{ left:50px; }
#next{ right:50px;}
#banner p{ width:720px;height:24px; font-size:14px; line-height:24px; color:#fff; text-align:center;background:rgba(0,0,0,.5); position:absolute;top:71px;}
.nav{ width:130px;height:20px; margin:10px auto;}
.nav li{ width:16px; height:16px; float:left;margin:0 5px; background:#09F; border-radius:50%; position:relative;}
.nav li.on,.nav li:hover{ background:#fff;}
.nav li img{ display:none;width:80px; height:80px; padding:3px; background:#FFF; position:absolute; top:-100px; left:-40px;z-index:100;}
.nav li:hover img{display:block}
</style>
<script>
window.onload = function(){
	var oBan= document.getElementById('banner');
	var oImg= document.getElementById('img1');
	var aBtn= oBan.getElementsByTagName('a');
	var oUl= oBan.getElementsByTagName('ul')[0];
	var aLi= oBan.getElementsByTagName('li');
	var oP=  oBan.getElementsByTagName('p')[0];
	var num=0;
	
	var arrImg = ['http://ww3.sinaimg.cn/mw1024/88b110f7gw1el70kwib3vj20k00bp43e.jpg','http://ww3.sinaimg.cn/mw1024/88b110f7gw1el70l70n9yj20rq0ih11y.jpg','http://ww2.sinaimg.cn/mw1024/88b110f7gw1el70lsdgjfj20xc0e7wmo.jpg','http://ww3.sinaimg.cn/mw1024/88b110f7gw1el70lc81caj20k00dbahg.jpg','http://ww4.sinaimg.cn/mw1024/88b110f7gw1el70kt987xj20k00bjtcu.jpg','http://ww2.sinaimg.cn/mw1024/88b110f7gw1el70krl9h4j20k00dcwmj.jpg'];
	var arrImgs = ['http://ww3.sinaimg.cn/square/88b110f7gw1el70kwib3vj20k00bp43e.jpg','http://ww3.sinaimg.cn/square/88b110f7gw1el70l70n9yj20rq0ih11y.jpg','http://ww2.sinaimg.cn/square/88b110f7gw1el70lsdgjfj20xc0e7wmo.jpg','http://ww3.sinaimg.cn/square/88b110f7gw1el70lc81caj20k00dbahg.jpg','http://ww4.sinaimg.cn/square/88b110f7gw1el70kt987xj20k00bjtcu.jpg','http://ww2.sinaimg.cn/square/88b110f7gw1el70krl9h4j20k00dcwmj.jpg'];

	//初始化
	for(var i=0;i<arrImg.length;i++){
		oUl.innerHTML +='<li></li>';		
	}
	oUl.style.width=arrImg.length*26+'px';
	oImg.src= arrImg[num];
	oP.innerHTML='图片'+num;
	aLi[num].className='on';
	
	aBtn[1].onclick= function(){
		aLi[num].className='';
		if(num<arrImg.length-1){
			num++			
		}else{num=0}
		oImg.src= arrImg[num];
		oP.innerHTML='图片'+num;
		aLi[num].className='on';
	};
	
	aBtn[0].onclick= function(){
		aLi[num].className='';
		if(num==0){
			num=arrImg.length-1;
		}else{
			num--
		}
		oImg.src= arrImg[num];
		oP.innerHTML='图片'+num;		
		aLi[num].className='on';
	};	

	for(var i=0;i<aLi.length;i++){
		aLi[i].index= i;
		//aLi控制图片切换
		aLi[i].onclick= function(){
			oImg.src= arrImg[this.index];
			oP.innerHTML='图片'+this.index;
			aLi[num].className='';
			aLi[this.index].className= 'on';
			num=this.index;			//将num的值改为当前点击的元素
		};
		//移入aLi看小图
		aLi[i].onmousemove = function(){
			aLi[this.index].innerHTML= '<img src="' + arrImgs[this.index] + '">';	
		}
	}

};
</script>
</head>
<body>
<div id="banner">
	<h2>带缩略图的幻灯片</h2>
	<div class="pic"><img id="img1"></div>
  <p></p>
	<a id="prev" href="javascript:;"> < </a>
	<a id="next" href="javascript:;"> > </a>  
  <ul class="nav"></ul>
</div>
</body>
</html>

JavaScript操纵HTML元素的自定义属性

阅读(2451)

JS 可以为任何HTML元素添加任意个 自定义属性

元素.属性名=属性值,如:aBtn.abc = 123;

例:

<input type="button" value="按钮1" />
<script>
window.onload = function (){
 var aBtn = document.getElementsByTagName('input')[0];

 aBtn.abc = 123;  // 添加自定义属性 abc
 aBtn.onclick = function(){
  alert( aBtn.abc );  //弹出属性值为 123
 }
};
</script>

例:自定义属性应用——匹配数组内容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>邦邦的小站_分享Web前端的学习心得!</title>
<script>
window.onload = function(){
  var aBtn = document.getElementsByTagName('input');
	var arr = ['Web前端','JavaScript','CSS3','邦邦的小站','jmsbang.com'];

	for(var i=0;i<aBtn.length;i++){
		aBtn[i].num=0;
		
		aBtn[i].onclick = function(){
			this.value=arr[this.num];
			
			this.num++;
			if(this.num==arr.length){
				this.num=0;
			}
		};
	}
	
};
</script>
</head>
<body>
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">

</body>
</html>

js中的this关键字详解

阅读(2423)

this是Javascript的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。




无标题文档




js中巧用cssText属性批量操作样式

阅读(2466)

一般情况下我们用js设置元素对象的样式会使用这样的形式:

var oDiv1= document.getElementById("div1");
oDiv1.style.width="20px";
oDiv1.style.height="20px";
oDiv1.style.border="solid 1px red";

样式一多,代码就很多。而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程,这种销毁和重建,都会增加浏览器的开销。

js中有一个cssText的属性,语法为:obj.style.cssText=”样式”;

上面的代码我们可以改为:

oDiv1.style.cssText="width:20px;height:20px;border:solid 1px red;";

这样就可以尽量避免页面reflow,提高页面性能。

JavaScript For循环

阅读(2356)

如果希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。

语法:

for (语句1; 语句2; 语句3)

{

被执行的代码块;

}

语句1 在循环(代码块)开始前执行

语句2 定义运行循环的条件

语句3 在循环已被执行之后执行

例1:说明for循环的执行顺序

<script>
/*
var i = 0;
for( ; i<3; ){
    alert(1);
    i++;
}

1) var i=0;
2) i<3; 关键!!
3) 括号里面的所有代码
4) i++
*/

for(var i=0; i<3; i++){
    alert(i);  // 弹出 0 1 2
}
// alert(i);	// 弹出 3
</script>

例2:如下例中当循环的内容很多,每循环一次都要进行一次innerHTML的操作,这是性能有问题。可将循环的内容先赋值给变量str,最后再用innerHTML添加到页面。

<script>
window.onload = function (){
	
    var str = '';
    for( var i=0; i<3000; i++ ){
    // document.body.innerHTML += '<input type="button" value="按钮" />';
    // 性能有问题!!!
    str += '<input type="button" value="按钮" />';
    }

    document.body.innerHTML = str;
};
</script>

JavaScript获取元素的第二种方法 getElementsByTagName()

阅读(3086)

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

语法

document.getElementsByTagName(tagname)

说明

如果把特殊字符串 “*” 传递给 getElementsByTagName() 方法,它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。

注释:传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

#list {}	var oUl = document.getElementById('list');      静态方法
li {}		var aLi = document.getElementsByTagName('li');  动态方法
#list li{}      var aLi = oUl.getElementsByTagName('li');
                //  aLi => [ li, li, li ]	 元素的集合
                aLi.length    3
                aLi[0]  // 在用TagName的时候,必须要加上:[]
<ul id="list">
  <li></li>
  <li></li>
  <li></li>
</ul>
<ol>
  <li></li>
  <li></li>
</ol>

<script>
window.onload = function (){
	//var oUl = document.getElementById('list');
	var oUl = document.getElementsByTagName('ul')[0];
	var aLi = oUl.getElementsByTagName('li');
	
	alert( aLi.length );
};
</script>

JavaScript数组(Array)

阅读(2164)

数组的定义:

var arr=[12, 5, 8, 9];

var arr=new Array(12, 5, 8, 9);

没有任何差别,[]的性能略高,因为代码短。

数组的属性

length

既可以获取,又可以设置(快速清空数组)

数组使用原则:数组中应该只存一种类型的变量

<script>
var num = 1;
var str = '这是一句话';

// 用数组:
var arr = [ 1, 2, 3, 'img/1.jpg', 'bbb' ];  // 放数据的仓库
 alert( arr.length ); // 5
// alert( arr[3] );
// alert( arr[4] );
// alert( arr[arr.length-1] );  // 最后一个

arr.push('img/3.jpg');  // 往数组的最后一位添加"数据"
</script>

Array 对象方法

方法 描述
concat() 连接两个或更多的数组,并返回结果。
every() 检测数组元素的每个元素是否都符合条件。
filter() 检测数组元素,并返回符合条件所有元素的数组。
indexOf() 搜索数组中的元素,并返回它所在的位置。
join() 把数组的所有元素放入一个字符串。
lastIndexOf() 返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
map() 通过指定函数处理数组的每个元素,并返回处理后的数组。
pop() 删除数组的最后一个元素并返回删除的元素。
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reverse() 反转数组的元素顺序。
shift() 删除并返回数组的第一个元素。
slice() 选取数组的的一部分,并返回一个新数组。
some() 检测数组元素中是否有元素符合指定条件。
sort() 对数组的元素进行排序。
splice() 从数组中添加或删除元素。
toString() 把数组转换为字符串,并返回结果。
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
valueOf() 返回数组对象的原始值。