三、深入Javascript(1)_看智能社blue老师JS视频整理的笔记

时间:2022-08-22 18:07:52


1、函数返回值 ( return )

function show()
{
	return 12;
};
alert(show());	//弹出12


(1)return就是函数返回值,作用把东西返回到函数外面来,在哪调用返回到哪

(2)函数不仅可以返回数字,返回字符串,返回算式(如return a+b;求出算式结果,然后把结果给返回出去)

(3)函数参数,一次可以写多个进去,但是return返回值一次只能返回1个出去,当然有些折中的小办法,如json可以让函数同时返回多个东西,后面讲到再说

(4)函数可以没有return,结果:undefined

(5)函数返回值(函数可以把一些东西传到外面来)和函数传参(把一些东西传到函数里边去)正好相反

(6)和变量一样,一个函数最好只返回一种类型的值


2、arguments:可变参、不定参(即参数的个数是可变的,参数的个数是不定的)

		function sum()
		{
			//alert(arguments.length);
			//alert(arguments[0]);
			//arguments

			var result=0;

			for(i=0;i<arguments.length;i++)
			{
				result+=arguments[i];
			};

			return result;

		};
		alert(sum(13,5,6,13,5,6,13,5,6,13,5,6));	//这个例子是求所有参数的和,即13,5,6,13,5,6,13,5,6,13,5,6这些数的和</span>

注:arguments其实是一个数组,数组里面存的是传给函数的参数

3、css函数,来自于jQuery,与jQuery里边的css差不多

css(oDiv,'width')获取样式(会把样式的结果给返回出去)

css(oDiv,'width','200px')       设置样式

简单来说,css函数给两个参数是获取,给三个参数是设置

例如:

	<script>
		function css()
		{
			if(arguments.length==2)
			{
				return arguments[0].style[arguments[1]];
			};
			else
			{
				return arguments[0].style[arguments[1]]=arguments[2];
			};
		};

		window.onload=function ()
		{
			var oDiv=document.getElementById('div1');

			//alert(css(oDiv,'width'));	 //两个参数,获取样式

			css(oDiv,'background','green');  //三个参数,设置样式
		};
	</script>
	</head>
        <body>
		<div id="div1" style="width:200px; height:200px; background:red;">
		</div>      
	</body>

上面例子的简写:

	<script>
		function css(obj,name,value)
		{
			//alert(obj==arguments[0]);
			if(arguments.length==2)
			{
				return obj.style[name];
			};
			else
			{
				return obj.style[name]=value;
			};
		};

		window.onload=function ()
		{
			var oDiv=document.getElementById('div1');

			alert(css(oDiv,'width'));

			//css(oDiv,'background','green');
		};
	</script>
	</head>
        <body>
		<div id="div1" style="width:200px; height:200px; background:red;">
		</div>      
	</body>

4、获取非行间样式

	<style>
		#div1 {width:200px; height:200px; background:red;}
	</style>
	<script>
		window.onload=function ()
		{
			var oDiv=document.getElementById('div1');

			//alert(oDiv.style.width);     //style只能用来获取行间样式
			//IE(currentStyle用来获取非行间样式,只兼容IE和高版本的chrome)
			//alert(oDiv.currentStyle.width);

			//chrome、FF(getComputedStyle有两个参数,第一个就是你要获取哪个物体的样式,第二个参数就是个垃圾,可以写任意东西)
			//alert(getComputedStyle(oDiv,false).width);

			//alert(oDiv.currentStyle);

			if(oDiv.currentStyle)         //*****如何让所有浏览器都兼容呢?实际上,JS里99.99%的这种兼容问题,都是通过if来解决的
			{
				//IE
				alert(oDiv.currentStyle.width);
			}
			else
			{
				//chrome、FF
				alert(getComputedStyle(oDiv,false).width);
			}
		};
	</script>
	</head>
    	<body>
		<div id="div1">
		</div>      
	</body>

把上面的if else封装成一个函数,以后每次要用的时候,直接去调用就可以,即公用函数。得如下代码:

	<style>
		#div1 {width:200px; height:200px; background:red;}
	</style>
	<script>
		function getStyle(obj,name)
		{
			if (obj.currentStyle)
			{
				return obj.currentStyle[name];
			}
			else
			{
				return getComputedStyle(obj,false)[name];
			}
		};
		window.onload=function ()
		{
			var oDiv=document.getElementById('div1');

			alert(getStyle(oDiv,'width'));
		};
	</script>
	</head>
    	<body>
		<div id="div1">
		</div>      
	</body>

css里有两种样式:


(1) 复合样式:background、border
(2) 单一样式:width、height、position

上面的例子如果想取背景颜色,直接这样写alert(getStyle(oDiv,'background'));是取不到的,

因为currenStyle没法取复合样式,只能取单一样式,如果就想取背景颜色,那就要写成backgroundcolor,如下面

alert(getStyle(oDiv,'backgroundColor'));