博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

javascript-智能社-笔记

Posted on 2013-09-09 10:55  素衣79  阅读(1048)  评论(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">
    #div1{
        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>
onmouseover="div1.style.display='block';"
事件:当鼠标移入=修改div1的样式的display改变为=block
onmouseout="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">
    #div1{
        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">
    鼠标移入显示div1内容.....
</div>
 
例子制作更复杂的效果（DIV的颜色、大小都变化）
  
1
2
3
4
5
#div1{
        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">
    #div1{
        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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 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>