js学习笔记.docx

1、js学习笔记JavaScript学习笔记1.js的作用：交互，用来改样式，实现网页的动态效果。2.编写js的流程：（1）布局：html+css（2）属性：确定要修改哪些属性（3）事件：确定用户做哪些操作。（比如点击某个按钮要怎么怎么样）（4）编写js：在事件中用js来修改页面元素的样式。实例1：鼠标提示框的制作：当鼠标移到复选框上时，提示框显示，当鼠标移出时隐藏。提示框/标题 /添加css样式 #div1width:200px;height:100px;background:#ccc;border:1px solid #999;display:none;/给div添加样式 为了您的信息安全，请

2、注意周围环境 分析：1id就是身份证，代表的就是div这个标签。都是通过id来获取标签2程序实际上改的就是div的样式中display属性的值。当鼠标移入的时候为“block”当鼠标移出的时候为“none”。3上面直接获取元素的方式在低版本的浏览器上是不兼容的，全称应该是onmouseout=document.getElementById(div1).style.display=none;（1）onclick事件：表示当鼠标点击的时候发生。 分析：alert（）是浏览器自带的一个显示框或者叫交互框，上面程序的意思是当点击按钮时在页面上弹出“您好”的对话提示框。（2）onmouseover事件：

3、表示当鼠标移入的时候发生。 分析：上面的程序表示当鼠标移入时，在页面上弹出“您好”的对话提示框。（3）onmouseout事件：表示当鼠标移出时发生。分析：上面的程序表示当鼠标移出时，在页面上弹出“您好”的对话提示框。Js中的函数：1.函数定义：function 函数名（参数）函数体2.函数传参：function 函数名 (形式参数1，形式参数2.)函数体3.函数调用：函数名（实参列表）/参数可有可无程序中函数一般都主要有以上三个方面的内容，这里就不一一赘述。下面简单的通过一个例子来说明函数的具体应用Eg：制作一个div，当鼠标移入移出时宽高和颜色发生变化。 函数初实 #div1width:2

4、00px;height:100px;background:#ccc;border:1px solid #999;display:block;/样式添加 /函数定义 function change(width,height,color) var odiv1= document.getElementById(div1);/元素获取 odiv1.style.width=width;/改变样式 odiv1.style.height=height;/改变样式 odiv1.style.background=color;/改变样式 /给元素添加事件，调用函数，传递实参 分析：1.js中的变量都是弱类型的变量

5、，统一通过var关键字来定义变量。2.var odiv1= document.getElementById(div1)这是定义变量，并将获取的元素赋值给他，后面修改元素的属性，就可以通过刚才定义的变量来调用相应的属性，修改其值。3.注意传递参数时的格式，调用时实参的格式要格外注意。实参都是用单引号括起来的，而形参在使用的时候是不需要用单引号括起来的。4.上面程序定义了一个函数，将函数的值赋值给鼠标移入移出事件，函数中传递三个参数，通过改变三个函数的值来实现不同的效果。Js中获取属性的方式有两种：1.通过点来获取，如：odiv1.style.background=color;2.通过 来获取，如

6、：odiv1.stylebackground=color;两者的对比：一般情况下我们都是用点来获取元素的属性。但凡能用点来获取的都可以用 来获取， 也可以适用不知道要修改的属性是什么的情况，这种情况通常将要修改的属性作为函数的参数来传递，然后通过 来获取修改。当然我们也可以定义一个变量，将某个属性名称赋值给变量，然后在获取属性时， 中只需要写上定义的变量就好了。 Js中的变量和字符串：注意：Js中的字符串都是需要加上单引号的，比如400px等，相当于常量。变量是不需要加上引号的，变量在使用前必须要先定义。注意：Js中style修改和添加的是行间的样式，也就是修改之后的样式他是添加在行间的。cl

7、asName修改的是样式表中的样式，他的优先级要高于行间样式。所以一般两者不要混着用就好了。提取行间事件： 像上面这种onclick事件是加在行间的，一般简单的事件可以直接添加在行间，但是大多情况我们都是将事件添加在js中。这样会避免一些麻烦，并且会使代码层次分明。1.如何为元素添加事件： Document var oBtn=document.getElementById(btn1);/这一行是在获取元素 function abc()/创建一个函数 alert(a);/函数的功能是弹出一个a。 oBtn.onclick=abc;/事件作为所获取的元素的属性来添加，并将一个函数作为事件的内容 分

8、析：（1）事件和元素的其他属性一样都可以在js中被添加，添加事件都是要执行一定的功能，所以他的值一般是一个函数。（2）上面的程序我们发现js是添加在标签之内的，实际上我们一般情况并不是在标签之内添加js，具体请看下面的实例讲解。对于上面的程序我们还可以做下面的修改： Document window.onload=function()/表示当页面加载完毕的时候执行下面的代码 var oBtn=document.getElementById(btn1); oBtn.onclick=function()/在这里直接将匿名函数赋值给点击事件，省去了给函数取名的麻烦。 alert(a); 解析：（1）函

9、数可以不取名字，这种函数叫做匿名函数，使用匿名函数给事件赋值可以省去取名字的麻烦。（2）浏览器在解释执行代码的时候是从头到尾一步一步执行代码的，所以将js添加在里面有时会出现问题，所以我们通常将js添加在head里面。Window.onload=function()表示当页面加载完毕的时候执行函数当中的代码。一般我们都是将js的代码写在上面的函数当中。网页当中我们提倡行为（js），样式（css），结构（html）三者分离。如何一次性获取多个元素：当页面中有多个相同的标签时，我们如何一次性获取这多个标签？实际上我们是通过document.getElementTagName(标签名)来获取多个元素

10、的。例子程序： Document div width:200px;height:200px;border:1px solid red;float:left;margin:10px; window.onload=function() var adiv=document.getElementsByTagName(div);/一次性获取多个相同的元素，adiv就相当于一个数组。 for(var i=0;iadiv.length;i+)/4通过循环来修改所有元素的样式 adivi.style.background=green; 1 2 3 4 1 2 3 4 分析：上面的程序当中我们还用到了数组，循环

11、的相关知识，这里就不多加分析了。实例1：常见的全选，不选和反选 全选，不选和反选 window.onload=function() var oBtn1=document.getElementById(it1); var oBtn2=document.getElementById(it2); var oBtn3=document.getElementById(it3); var oDiv=document.getElementById(div1); var aCh=oDiv.getElementsByTagName(input); oBtn1.onclick=function() for(var

12、 i=0;iaCh.length;i+) aChi.checked=true; oBtn2.onclick=function() for(var i=0;iaCh.length;i+) aChi.checked=false; oBtn3.onclick=function() for(var i=0;iaCh.length;i+) if(aChi.checked=false) aChi.checked=true; else aChi.checked=false; 分析：（1）上面的程序在反选的事件中用到了if语句，关于选择结构，这个和java中的一样，所以以后直接用就好了，就不在一一赘述。（2）

13、上面的程序将所有的复选框全部放在div中避免了选择元素时，将按钮也选进去的麻烦。（3）选择元素时不但可以从document中选择，在选定了父级标签后可以在父级标签下再选元素。实例2：选项卡的制作： 全选，不选和反选 #div1 .activebackground:yellow;/添加class的值。 #div1 divheight:200px;width:200px;background:#ffff99;border:1px solid black;margin:2px;display:none;/简单布局 window.onload=function() var oDiv=document.

14、getElementById(div1); var aCh=oDiv.getElementsByTagName(input); var aDiv=oDiv.getElementsByTagName(div);/以上为元素获取 for(var i=0;iaCh.length;i+)/通过循环给按钮加事件 aChi.index=i;/每一个按钮关联一个数字，通过数字使按钮和特定的div相关连。 aChi.onclick=function()/给每一个按钮添加事件 for(var i=0;iaCh.length;i+) aChi.className=; aDivi.style.display=non

15、e;/以上是在修改属性内容之前先全部初始化好。 this.className=active;/this表示当前点击的按钮。这里表示当点击当前按钮时添加class aDivthis.index.style.display=block;/表示与按钮关联的div在按钮变成当前按钮时显示。 教育培训招生出国 分析：以上程序要实现的功能是四个按钮，四个盒子，每个盒子关联一个按钮，当某个按钮被点击的时候，此按钮变成高亮显示，并且弹出相应的盒子。通过上面的程序我们要学会以下知识：（1）学会className的使用（2）学会一次性给多个按钮添加事件（3）学会如何关联两个元素（4）学会this的用法（5）学会在

16、修改样式之前初始化。实例3：制作简易日历 简易日历 .activebackground:#ffff99; #div1width:280px;height:480px;background:green; #div1 ultext-align:center; #div1 ul liwidth:75px;height:85px;float:left;border:1px solid black;margin:1px;text-align:center;list-style-type:none; #div2width:315px;height:90px;background:#ccffff;posit

17、ion:absolute;top:400px;left:392px; window.onload=function() var odiv1=document.getElementById(div1); var oli=odiv1.getElementsByTagName(li); var odiv2=document.getElementById(div2); var arr=快放假了，好好准备考试, 放假了，好好过大年, 真是的，这么快就要开学了, 这个月我就要过生日了，好开心啊, 五一的时候要出去旅游, 这个月太热了，记得向心爱的人表白啊, 哈哈，生活如此的美好，你却是如此的暴躁, 好长的

18、暑假，呆着有点无聊, 又是一年的开学季, 期待国庆长假的到来, 双选会就要开始了，好紧张的感觉, 期末了，又要好好学习了, for(var i=0;ioli.length;i+) olii.index=i; olii.onmouseover=function() for(var i=0;ioli.length;i+) olii.className=; this.className=active; odiv2.innerHTML=+(this.index+1)+月活动+arrthis.index+; 1JAN 2FEB 3MAR 4APR 5MAY 6JUN 7JUL 8AUG 9SEP 10OCT 11NO