公告

昵称：

园龄：

粉丝：

关注：

+加关注

搜索

 

 

常用链接

 

随笔分类

随笔档案

最新评论

• 加油 莫非是在blue那里学习:)
• --月曜

阅读排行榜

评论排行榜

推荐排行榜

Posted on 

2013-09-09 10:55  阅读(482) 评论(1)  

JavaScript是什么

JavaScript就是修改样式

编写JS的流程

布局：HTML+CSS

属性：确定要修改哪些属性

事件：确定用户做哪些操作（产品设计）

编写JS：在事件中，用JS来修改页面元素的样式

 

例子:鼠标提示框

鼠标移入到input上的时候，让div1显示

鼠标移出input的时候，让div1隐藏

div1显示：

div1的display变成block

 

分析效果实现原理

样式：Div的display

事件：onmouseover (鼠标移进时)、onmouseout (鼠标移出时)、 onclick(鼠标点击时)

特效基础事件驱动：onmouseover 元素属性操作：obj.style.[……]

特效实现原理概括：响应用户操作，对页面元素（标签）进行某种修改 

CSS部分:

1 2 3 4 5 6 7 8

<style type= "text/css" >     #div 1 {         width : 200px ;         height : 100px ;         background : #ccc ;         border : 1px solid #999 ;         display : none ;     }

html部分:

1 2 3 4 5

< input type = "checkbox" onmouseover = "div1.style.display='block';" onmouseout = "div1.style.display='none';" />   < div id = "div1" >     鼠标移入显示div1内容..... </ div >

οnmοuseοver="div1.style.display='block';"

事件:当鼠标移入=修改div1的样式的display改变为=block

οnmοuseοut="div1.style.display='none';"

事件:当鼠标移出=修改div1的样式的display改变为=none

 

为了避免兼容问题,不能直接引用元素的id,要使用document.getElementById( )来获取元素:

1 2	onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';"

 

获取元素:

document.getElementById( )的意思:

get       Element    By    Id

  ↓             ↓           ↓      ↓

获取        元素        用    id

通过ID获取元素.

 

最终代码:

1 2 3 4 5 6 7 8 9

<style type= "text/css" >     #div 1 {         width : 200px ;         height : 100px ;         background : #ccc ;         border : 1px solid #999 ;         display : none ;     }     </style>

1 2 3 4 5

<input type= "checkbox" onmouseover= "document.getElementById('div1').style.display='block';" onmouseout= "document.getElementById('div1').style.display='none';" /> <div id= "div1" >     鼠标移入显示div 1 内容..... </div>

 

例子制作更复杂的效果（DIV的颜色、大小都变化）

 

 

1 2 3 4 5

#div 1 {         width : 200px ;         height : 200px ;         background : red ;     }

 

1 2 3 4 5

< div id = "div1" onmouseover="document.getElementById('div1') .style.width = '300px' ;     document.getElementById('div1') .style.height = '300px' ;     document.getElementById('div1') .style.background = 'green' ;" onmouseout="document.getElementById('div1') .style.width = '200px' ;     document.getElementById('div1') .style.height = '200px' ;     document.getElementById('div1') .style.background = 'red' ;"></ div >

 

直接在事件内写html代码会很乱,所以需要引入fucntion()、

函数的基本形式

function 函数名 ( )

{

代码

}

 

把JS从标签里放入到函数里，类似css里的class 当以后需要的时候,直接调用函数名即可.

变量的使用——别名 var 定义变量名=

 

最终代码:

1 2 3 4 5 6 7

<style type= "text/css" >     #div 1 {         width : 200px ;         height : 200px ;         background : red ;     } </style

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<script type= "text/javascript" >     function bianlv ()     {         var odiv=document.getElementById( 'div1' );         odiv.style.width= '300px' ;         odiv.style.height= '300px' ;         odiv.style.background= 'green' ;     }     function bianhong ()     {         var odiv=document.getElementById( 'div1' );         odiv.style.width= '200px' ;         odiv.style.height= '200px' ;         odiv.style.background= 'red' ;     } </script>

 

1	< div id = "div1" onmouseover = "bianlv ()" onmouseout = "bianhong ()" ></ div >

 

函数的两个慨念:

函数定义：只是告诉系统有这个函数，不会实际执行,可以想象成一个存放代码的盒子.

函数调用：真正执行函数里的代码

函数的定义和调用缺一不可,只有定义没有调用,函数将没有任何意义,只有调用没有定义,浏览器将报错.

1 2 3 4 5

function show ()     //定义函数     {         alert( 'abc' );     }     show();          //调用函数

 

例子网页换肤

改变,link标签下的href链接css文件来实现换肤功能.

1	< link id = "a1" href = "" rel = "stylesheet" >  //为link命名为id=a1

 

1 2 3 4 5 6 7 8 9 10 11 12

<script type= "text/javascript" >     function pifu1 ()    //定义函数皮肤1     {         var ol=document.getElementById( 'a1' );  //定义变量ol通过id:a1来获取link         ol.href= '网页换肤1.css' ;   //改变ol下的href链接文件地址     }     function pifu2 ()     {         var ol=document.getElementById( 'a1' );         ol.href= '网页换肤2.css' ;     } </script>

 

1 2	<input type= "button" value= "皮肤1" onclick= "pifu1()<!--鼠标点击调用函数pifu1-->" /> <input type= "button" value= "皮肤2" onclick= "pifu2()<!--鼠标点击调用函数pifu2-->" />

 

从这个例子中可看出,任何标签都可以加ID,包括link

任何标签的任何属性,都可以修改.

 

例子第一种操作修改属性的方法--修改文字

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> < html xmlns = "" xml:lang = "en" > < head >     < meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" />     < title ></ title >     < script type = "text/javascript" >     function gaiwenzi ()         //定义函数名为gaiwenzi     {         var otxt=document.getElementById("txt1"); //定义变量,通过ID获取元素        //第一种操作属性的方法---.就是的,的意思,otxt的value.         otxt.value="修改文本框内文字";     }     </ script > </ head > < body >     < input id = "txt1" type = "text" /> <!-- 为inpu命名id为txt1 -->     < input type = "button" value = "改文字" onclick = "gaiwenzi()"  />     <!-- 鼠标点击,执行函数gaiwenzi() --> </ body > </ html >

 

HTML里怎么写,JS里就怎么写.

 

if判断-if的基本格式

1 2 3 4 5 6 7 8

if (条件，如预报有雨) //如果条件成立执行语句1如果不成立执行语句2 {     语句1,带伞; } else {       语句2,不带伞; }

例子,显示隐藏

分析:

当点击的时候,如果div是显示的,那么就隐藏掉,(把div的style的display设置为none)

当点击的时候,如果div是隐藏的,那么就显示出来,(把div的style的display设置为block)

1 2 3 4 5 6 7 8

if (如果div是显示的) {     oDiv.style.display= 'none' ; } else   //div没有显示 {     oDiv.style.display= 'block' ; }

最终代码:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

< style type = "text/css" >     #div1{         width: 100px;         height: 200px;         background: #ccc;         display: none;     } </ style > < script type = "text/javascript" >     function anniu ()   //定义函数     {         var odiv=document.getElementById("div1");        //定义变量,通过ID获取元素         if (odiv.style.display=="block")        //条件,如果div是显示的.         {             odiv.style.display="none";          //如果div是显示的条件成立执行此条         }         else{             odiv.style.display="block";   //如果div是显示的条件不成立执行此条         }     } </ script > </ head > < body >    < input type = "button" value = "显示隐藏" onclick = "anniu ()" /> <!--点击时调用执行函数anniu-->    < div id = "div1" ></ div > </ body >

 

在JS中,一个=号,代表赋值,例如 a=5代表,赋值a为5或把a改变为5.

在JS中,两个==号,代表判断.

例如在显示隐藏例子中,(odiv.style.display=="block")  就是判断,div中样式的display是不是block.

总结:JS中,一个=号是赋值,两个=号是判断.

JS中class的使用:className

JS中不可以直接引用class名字,需要写成className=class名字

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

< style type = "text/css" >     #div1{         width: 100px;         height: 100px;         border: 1px solid black;     }     .box{         background: red;     } </ style > < script type = "text/javascript" >     function bianhong ()     {         var odiv=document.getElementById("div1");         odiv.className="box";  //JS中不可以直接引用class名字,需要写成className=class名字     } </ script > </ head > < body >     < input type = "button" value = "点击变红" onclick = "bianhong ()" />     < div id = "div1" ></ div > </ body >

 

函数传参:函数的参数就是一个占位符.

什么时候用传参:------函数里有定不下来的东西的时候使用传参.

例如此例中的num.

1 2 3 4 5

function show(num) //1,num参数的值是多少,不知道.它只是一个占位符     {         alert(num);     }     show(5); //2,当我们在调用函数show的时候传了一个5，那么num的值就是5,也就是说调用的时候,你传什么,num就是什么.

 

参数可以传多个,如此例:

1 2 3 4 5

function show(a,b) //1,参数可以有多个,每个参数中间用,号分隔.     {         alert(a+b); //3,所以最终弹出结果为,a5+b12=17.     }     show(5,12); //2,调用时传入的5和12分别对应参数a=5,b=12.

 

例子,div变色

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

< style type = "text/css" >     #div1{         width: 200px;         height: 200px;         background: red;     } </ style > < script type = "text/javascript" >     function bianse (yanse) //1,在定义的时候这个yanse参数是没有值的.     {         var odiv=document.getElementById("div1");         odiv.style.background=yanse;     } </ script > </ head > < body >     < input type = "button" value = "变绿" onclick = "bianse (" green")" />       // 2,在调用的时候,如果传的值为green红色那么参数yanse的值就是红色     < input type = "button" value = "变黄" onclick = "bianse (" yellow")" />     < input type = "button" value = "变黑" onclick = "bianse (" black") />    < div id = "div1" ></ div > </ body >

 

例子,第二种操作修改属性参数的方法--改文字

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

< script type = "text/javascript" >     function gaiwenzi (naum)//定义函数名为gaiwenzi参数为naum     {         var otxt=document.getElementById("txt1");//定义变量         //第一种操作属性的方法.就是的,的意思,otxt的value.         // otxt.value="修改文本框内文字";         //第二种操作属性的方法[]第二种与第一种相比,最大的优势是[]中具体属性的名字是可以变的.调用的时候传入的属性名是什么它就是什么         otxt["naum"]="修改文本框内文字";     }     </ script > </ head > < body >     < input id = "txt1" type = "text" /> <!-- 为inpu命名id为txt1 -->     < input type = "button" value = "改文字" onclick = "gaiwenzi(value)"  />     <!-- 鼠标点击,调用函数gaiwenzi(naum)传入参数value,这时naum的值就是value --> </ body >

在JS中,凡是用.的地方,同样也可以使用[ ]

什么时候使用第二种操作属性的方法:

当要修改的属性不固定时,

例子,div改变样式，将属性名作为参数传递

  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

< style type = "text/css" >     #div1{         width: 200px;         height: 200px;         background: #ccc;     } </ style > < script type = "text/javascript" >     function bianyan(shux,zhi)  //1,调用的时候传一个什么属性名进来shux就是什么属性     {         var odiv=document.getElementById("div1");         odiv.style[shux]=zhi;  //2,shux是什么属性名这里改变的就是哪个属性     } </ script > </ head > < body >    < input type = "button" value = "变宽" onclick = "bianyan('width','400px')" />    <!--点击时调用函数bianyan()传入属性名宽,值400px-->    < input type = "button" value = "变高" onclick = "bianyan('height','400px')" />    <!--点击时调用函数bianyan()传入属性名高,值400px-->    < input type = "button" value = "变绿" onclick = "bianyan('background','green')" />    <!--点击时调用函数bianyan()传入属性名背景,值绿色-->    < div id = "div1" ></ div > </ body >

  

变量和字符串的区别.

变量里面的值是可以改变的,

字面量(也叫常量):看到的东西,是什么就知道它是什么,它包含数字和字符串.它的值是固定的,看到它就知道它里面存的是什么.

除了字面量外还有一种东西,叫变量,例如,var a=? a里面的值是不固定的,只看a本身是不知道它里面存的是什么的,

总结:如果你用的是一个变量或者参数,那么它的两边就不需要引号,如果是一个字符串它的两边就必须要加上引号,

 

style与className

style操作修改的是行间样式,它的优先级比className大,所以如果对一个元素先使用了style再修改它的className将不会有效果,

总结,为了避免混乱出错,对同一个元素,要不就都使用style,要不就都使用className,两者不要混用.

 

提取行间事件

如何为一个元素添加事件,有两种方法:

第一种:给函数命名

1 2 3 4 5 6 7 8 9

< input id = "btn1" type = "button" value = "按钮" />     < script >     var obtn=document.getElementById("btn1");        //定义变量,通过id获取btn1元素     function abc()    //定义函数     {         alert("a");     }     obtn.onclick=abc;    //修改obtn的onclick(鼠标点击属性),调用函数abc     </ script

 

第二种匿名函数,其实在JS里,是可以不给函数取名字的.

1 2 3 4 5 6 7 8

< input id = "btn1" type = "button" value = "按钮" />     < script >     var obtn=document.getElementById("btn1");         //定义变量,通过id获取btn1元素     obtn.onclick=function ()   //修改obtn的onclick(鼠标点击属性),调用匿名函数     {         alert("a");     }     </ script >

 

总结,在JS里,当需要给一个元素比如按钮,添加事件的时候,有两种方法,第一种,先写一个函数,并且给这个函数取一个名字,然后把函数名字,赋值给元素调用,

1 2 3 4 5

function 名字 ( ) {      代码 } obtn.onclick=函数名字

第二种方法,不给函数命名,使用匿名函数,直接把匿名函数赋值给元素调用.

1 2 3 4

obtn.onclick= function ( ) {       代码 }

 

window.onload的意义

一般我们不会把JS代码放到body标签和行间代码之中,都是放在head头标签中,而JS的执行顺序是由上到下,为了解决加载执行顺序的问题,所以要使用window.onload事件.它的作用是当页面加载完成时,再执行JS代码.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

< script > window.onload=function () {    var obtn=document.getElementById("btn1");    obtn.onclick=function ()     {         alert("a");     }; }; </ script > < body >     < input id = "btn1" type = "button" value = "按钮" />    </ body >

 

获取一组元素

getElementsByTagName

 

while循环

1 2 3 4

while ( 条件:如饿了 )  //只要满足饿了的条件 {     语句吃饭           //就将执行吃饭语句 }

 

while循环格式

1 2 3 4 5 6

var i=0; //初始化定义i变量值为0 while (i<5) //循环,条件:当i<小于5时执行循环 {     alert(i); //弹出i的值     i=i+1;  //简化写法i++; 每循环一次i的值+1 }

 

任何一个循环都包含四个部分

1 2 3 4 5 6

var i=0;             //1。初始化,给i一个开始的值 while (i<5)           //2。条件,循环的条件 {     alert(i);       //3。语句,条件成立执行的语句     i=i+1;                //4。自增,每次循环i的值自己+1 }

 

for循环格式

1 2 3 4

for (初始化;条件;自增)     {         语句     };

 

1 2 3 4

for ( var i=0;i<5;i++) {     alert(i); };

 

用for循环为一组元素添加事件,

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

 

获取一组元素,for循环小例子

getElementsByTagName获取一组元素

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

< style >     div{         width: 100px;         height: 100px;         float: left;         border: 1px solid black;         margin: 10px;     } </ style > < script >     window.onload=function ()     {         var adiv=document.getElementsByTagName('div');       //定义变量获取页面中的div元素组         for(var i=0;i< 4 ;i++) //循环(定义循环条件初始值为0;当i<小于4执行循环;每次循环i的值+1)         {             adiv[i] .style.background = 'red' ; //循环执行语句:改变div的背景为红色.         };     }; </script> < body >     < div ></ div >     < div ></ div >     < div ></ div >     < div ></ div > </ body >

ps:计算机的计数是从0开始的,所以把i的初始值定为0.

 

getElementsByTagName获取一组元素2：根据元素组所包含元素个数,进行自动循环

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

< style >     div{         width: 100px;         height: 100px;         float: left;         border: 1px solid black;         margin: 10px;     } </ style > < script >     window.onload=function ()     {         var adiv=document.getElementsByTagName('div');         for(var i=0;i< adiv.length ;i++) //length(个数)根据元素组有多少个元素个数,自动进行循环次数         {             adiv[i] .style.background = 'red' ;         };     }; </script> < body >     < div ></ div >     < div ></ div >     < div ></ div >     < div ></ div >     < div ></ div >     < div ></ div >     < div ></ div >     < div ></ div > </ body >

附注: adiv.lengthlength(个数)根据元素组有多少个元素个数,自动进行循环次数

 

 小例子: 全选----checked属性

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

< script >     window.onload=function()     {         var obtn1=document.getElementById('btn1');  //定义变量,使用id获取btn1全选按钮         var odiv=document.getElementById('div1');  //定义变量,使用id获取div1         var ach=odiv.getElementsByTagName('input'); //定义变量,使用元素组获取div1下的input标签,这样就避免了全选按钮也被选中.                 obtn1.onclick=function () //为全选按钮添加鼠标点击事件         {             for(var i=0;i< ach.length ;i++)  //循环 定义循环i的初始值为0;当i的值小于元素组所包含ach的个数时开始循环,每次循环i自身+1             {                 ach[i] .checked = true ;  //循环时执行操作ach的checked选中属性值设为true真             };         };     }; </script> < body >     < input id = "btn1" type = "button" value = "全选" />< br />     < div id = "div1" >       < input type = "checkbox" />< br />       < input type = "checkbox" />< br />       < input type = "checkbox" />< br />       < input type = "checkbox" />< br />     </ div > </ body >

 

小例子: 反选——for循环配合if判断

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

<script>     window.onload= function ()     {         var obtn1=document.getElementById( 'btn1' );  //定义变量,使用id获取btn1全选按钮         var obtn2=document.getElementById( 'btn2' );  //定义变量,使用id获取btn2不选按钮         var obtn3=document.getElementById( 'btn3' );  //定义变量,使用id获取btn3反选按钮         var odiv=document.getElementById( 'div1' );  //定义变量,使用id获取div1         var ach=odiv.getElementsByTagName( 'input' );  //定义变量,使用元素组获取div1下的input标签,这样就避免了全选按钮也被选中.                 obtn1.onclick= function () //为全选按钮添加鼠标点击事件         {             for ( var i=0;i<ach.length;i++)  //循环 定义循环i的初始值为0;当i的值小于元素组所包含ach的个数时开始循环,每次循环i自身+1             {                 ach[i].checked= true ;  //循环时执行操作ach的checked选中属性值为true真             };         };         obtn2.onclick= function () //为不选按钮添加鼠标点击事件         {             for ( var i=0;i<ach.length;i++)  //循环 定义循环i的初始值为0;当i的值小于元素组所包含ach的个数时开始循环,每次循环i自身+1             {                 ach[i].checked= false ;  //循环时执行操作ach的checked选中属性值为false假             };         };         obtn3.onclick= function () //为反选按钮添加鼠标点击事件         {             for ( var i=0;i<ach.length;i++)  //循环 定义循环i的初始值为0;当i的值小于元素组所包含ach的个数时开始循环,每次循环i自身+1             {                 if (ach[i].checked== true ) //如果ach的checked属性值是true选中的                 {                     ach[i].checked= false ;  //那么就把它改为false不选中                 }                 else  //而反过来,如果如果ach的checked属性值不是true而是false没有选中                 {                     ach[i].checked= true ;  //那么就把它改为true选中                 };             };         };     }; </script> <body>     <input id= "btn1" type= "button" value= "全选" /><br />     <input id= "btn2" type= "button" value= "不选" /><br />     <input id= "btn3" type= "button" value= "反选" /><br />     <div id= "div1" >       <input type= "checkbox" /><br />       <input type= "checkbox" /><br />       <input type= "checkbox" /><br />       <input type= "checkbox" /><br />     </div> </body>