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"><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.length
length(个数)根据元素组有多少个元素个数,自动进行循环次数
小例子: 全选----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> |