初探JavaScript魅力（2）

最新推荐文章于 2018-03-07 15:23:00 发布

weihongda666

最新推荐文章于 2018-03-07 15:23:00 发布

阅读量172

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weihongda666/article/details/78743508

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

函数传参（一个参数，两个参数）

function show(num)
	{
		alert(num);	
	}
	show('abc');

function show(a,b)
	{
		alert(7+8);
	}
	show(7,8);

函数传参例子：点击不同的按钮改变div的颜色

<script>
function setcolor(color)
	{
		var odiv = document.getElementById('div1');
		odiv.style.background= color ;
	}
</script>
<body>
<input type="button" value="变红"  οnclick="setcolor('red')"/>
<input type="button" value="变蓝"  οnclick="setcolor('blue')"/>
<input type="button" value="变绿"  οnclick="setcolor('green')"/>
<div id="div1">
</div>
</body>

例子2（两个传参）：点击按钮改变div的宽，高，颜色

<style>
#div1
{
	width:200px;
	height:200px;
	background:gray;
}
</style>
<script>
	function Setstyle(name,value)
	{
		var oDiv = document.getElementById('div1');
		
		oDiv.style[name]=value;
		
		//1.通过style加样式 ，在行间
		//2.通过style取样式 ，在行间
		//样式优先级：*<标签<class<id<行间
	}
</script>
</head>

<body>
<input type="button" value="变宽"  οnclick="Setstyle('width','400px')"/>
<input type="button" value="变高"  οnclick="Setstyle('height','400px')"/>
<input type="button" value="变粉"  οnclick="Setstyle('background','pink')"/>
<div id="div1">
</div>
</body>

第二种操作属性的方法

<script>
function setText()
{
	var oTxt = document.getElementById('txt1');
	
	//第一种操作属性的方法:用 “点”。一般使用第一种
	//oTxt.value='asdasdasdas';
	
	//第二种操作属性的方法;用“[‘’]” 第二种的好处，可以用变量，用参数写进去 
	oTxt['value']='asdasdasda';
	//变量、参数，数值变化，不用加引号  ；字符串是固定的，需要加引号''；
}
</script>

提取事件：window.onload

<script>

//JS代码是一行读完一行执行的，放在这里可能会下面的加载没完成
//window.onload ：当页面加载完成后才发生
//行为  样式   结构   三者分离
// JS   CSS    HTML
window.οnlοad=function ()
{
	var odiv = document.getElementById('btn1');
	
	odiv.οnclick=function()
	{
	alert('asdasdas');
	};
} ;
</script>

while循环

<script>
var i=0;            //1.初始化

while(i<5)			//2.条件

{
	alert(i);		//3.语句
	
	i++;			//4.自增
}

</script>

for循环（一般都用这个）

<script>
for(i=0;i<5;i++)			//for（初始化；条件；自增）
{							//  {
	alert(i);				//		语句;
}							//  }
</script>

获取一组数据：document.getElementsByTagName

（获取所有的div并给所有的div加颜色）

<script>

window.οnlοad=function()
{
   var aDiv= document.getElementsByTagName('div');
   
   //数组一次只能对一个元素进行设置
   //aDiv[0].style.background='red';
   //aDiv[1].style.background='red';
   //aDiv[2].style.background='red';
   //aDiv[3].style.background='red';
   
   //利用长度定义变量i的范围
   for(var i=0;i<aDiv.length;i++)
   {
	aDiv[i].style.background='red';   
	}
};
</script>

复选框全选、不选、反选的实现（循环、数组的综合例子）

<script>
window.οnlοad=function()
{
	var obtn1 = document.getElementById('btn1') ;
	var obtn2 = document.getElementById('btn2') ;
	var obtn3 = document.getElementById('btn3') ;
	var adiv = document.getElementById('div1') ;
	var ach = adiv.getElementsByTagName('input');
	
	//全选点击功能
	obtn1.οnclick=function()
	{
	for(var i=0;i<ach.length;i++)
		{
		ach[i].checked = true;
		}
	}
	
	//不选点击功能
	obtn2.οnclick=function()
	{
	for(var i=0;i<ach.length;i++)
		{
		ach[i].checked = false;
		}
	}
	
	//反选点击功能
	obtn3.οnclick=function()
	{
	for(var i=0;i<ach.length;i++)
		{
		if(ach[i].checked == true)
			{
				ach[i].checked = false;
			}
		else
			{
				ach[i].checked = true;
			}
		}
	}
};

</script>

innerHTML的作用、例子

<script>
window.οnlοad=function()
{
	var otxt = document.getElementById('txt1');
	var obtn = document.getElementById('btn1');
	var odiv = document.getElementById('div1');
	
	obtn.οnclick=function()
	{	
		//innerHTML ：里面的HTML ，可以放入/提取，能在里面执行HTML代码
		odiv.innerHTML = otxt.value;
		alert(odiv.innerHTML);
	}
}
</script>
</head>

<body>
<input id="txt1" type="text"  />
<input id="btn1" type="button" value="提取文本"/>
<div id=div1>
</div>
</body>

选项卡的实现：循环、数组、索引值、this的使用、

<style>
#div1 div{width:200px; height:200px; background:pink; display:none;}
#div1 .active{ background:pink;}
</style>
<script>
window.οnlοad=function()
{
	var adiv = document.getElementById('div1');	
	var odiv = adiv.getElementsByTagName('div');
	var obtn = adiv.getElementsByTagName('input');
	for(var i=0;i<obtn.length;i++)
	{	
		//创造一个索引值 ‘index’ 表示当前的序号
		obtn[i].index=i;
		
		obtn[i].οnclick=function()
		{
				for(var i=0;i<obtn.length;i++)
				{
					//把所有的div隐藏
					odiv[i].style.display='none';
					
					//把所有的按钮class命名变成空
					obtn[i].className='';	
				}
				//给当前的div显示
				odiv[this.index].style.display='block';	
				
				//给当前的按钮一个class
				this.className='active';
		};
	}	
	
};
</script>
</head>

<body>

<div id="div1">
	
    <input class="active" type="button" value="选项卡1"  />
	<input type="button" value="选项卡2"  />
	<input type="button" value="选项卡3"  />
	<input type="button" value="选项卡4"  />
	<div style="display:block">111</div>
	<div>222</div>
	<div>333</div>
    <div>444</div>
</div>

</body>

数组的定义

<script>

var arr=[1,2,3,4];

alert(arr[1]);

</script>

JS简易年历（数组的定义和使用，innerHTML的使用，索引，字符串的链接）

<link rel="stylesheet" type="text/css" href="css1.css" />

<script>
window.οnlοad=function()
{
	var oDiv = document.getElementById('tab');
	var aLi = oDiv.getElementsByTagName('li');
	var oTxt = oDiv.getElementsByTagName('div')[0];
	
	//定义text的数组内容
	var arr=['这是一月','这是二月','这是三月','这是四月',
			 '这是五月','这是六月','这是七月','这是八月',
			 '这是九月','这是十月','这是十一月','这是十二月'];
	
	for(var i=0;i<aLi.length;i++)
	{	
		//索引写在功能的上面
		aLi[i].index=i;
		aLi[i].οnmοuseοver=function()
		{
			for(var i=0;i<aLi.length;i++)
			{	
				aLi[i].className = '';
			}
			this.className='active';
			
			//字符串的链接
			oTxt.innerHTML='<h2> '+(this.index+1)+'月活动</h2><p>'+arr[this.index]+'</p>';
		};
	}
};
</script>
</head>

<body>

<div id="tab" class="calendar" >
	<ul>
    	<li class="active"><h2>1</h2><p>JAN</p></li>
    	<li><h2>2</h2><p>FER</p></li>
        <li><h2>3</h2><p>MAR</p></li>
        <li><h2>4</h2><p>APR</p></li>
        <li><h2>5</h2><p>MAY</p></li>
        <li><h2>6</h2><p>JUN</p></li>
        <li><h2>7</h2><p>JUL</p></li>
        <li><h2>8</h2><p>AUG</p></li>
        <li><h2>9</h2><p>SEP</p></li>
        <li><h2>10</h2><p>OCT</p></li>
        <li><h2>11</h2><p>NOV</p></li>
        <li><h2>12</h2><p>DEC</p></li>
    </ul>
    
    <div class="text">
        <h2>1月活动</h2>
        <p>快过年了，大家可以商量着去哪玩吧～</p>
    </div>
</div>
</body>

笔记：
~函数传参：参数就是定位符，什么时候用---函数里定不下来的时候

~操作属性的第二种方式 [ ‘’]：什么时候用---要修改的属性不固定的时候

~style与className:

1.通过style加样式，在行间
2.通过style取样式，在行间
样式优先级：*<标签<class<id<行间

之后再修改className不会有效果

~提取事件

为元素添加事件可以用JS添加

行为样式结构三者分离：js css html

~获取一组元素

getElementsByTagName

~循环

用for循环添加事件

什么时候用for循环----一组元素