JavaScript函数
函数
函数就是重复执行的代码片。
函数定义与执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//函数的定义
function fnMyalert()
{
alert('hello world!');
}
//函数调用执行
// fnMyalert();
function fnChange(){
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
}
</script>
</head>
<body>
<!-- 标签内调用 -->
<div id="div1" onclick="fnMyalert()">这是一个div元素</div>
<input type="button" name="" value="改变div" onclick="fnChange()">
</body>
</html>
变量与函数预解析
JavaScript解析过程分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段会将function定义的函数提前,并且将var定义的变量声明提前,将它赋值为undefined。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 预解析会让变量的声明提前
alert(iNum); //弹出undefined
// 预解析会让函数的声明和定义提前
myalert();
// 使用一个未声明的变量,出错!
//alert(iNum02);
var iNum = 12;
function myalert(){
alert('hello world!');
}
</script>
</head>
<body>
</body>
</html>
提取行间事件
在html行间调用的事件可以提取到javascript中调用,从而做到结构与行为分离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn01');
// 将事件属性和一个函数关联,函数不能写小括号,写了会马上执行
oBtn.onclick = fnChange;
function fnChange(){
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
}
}
</script>
</head>
<body>
<!-- 标签内调用 -->
<div id="div1">这是一个div元素</div>
<input type="button" name="" value="改变div" id="btn01">
</body>
</html>
匿名函数
定义的函数可以不给名称,这个叫做匿名函数,可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn01');
/*
oBtn.onclick = fnChange;
function fnChange(){
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
}
转化成匿名函数的写法:
*/
oBtn.onclick = function(){
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
};
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<input type="button" name="" value="改变div" id="btn01">
</body>
</html>
网页换肤
skin01.css
body{
background-color:green;
}
input{
width:200px;
height:50px;
background-color:gold;
border:0;
}
skin02.css
body{
background-color:#ddd;
}
input{
width:200px;
height:50px;
border-radius:25px;
background-color:pink;
border:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/skin01.css" id="link01">
<script type="text/javascript">
window.onload = function(){
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
var oLink = document.getElementById('link01');
oBtn01.onclick = function(){
oLink.href = "css/skin01.css";
}
oBtn02.onclick = function(){
oLink.href = "css/skin02.css";
}
}
</script>
</head>
<body>
<input type="button" name="" value="皮肤一" id="btn01">
<input type="button" name="" value="皮肤二" id="btn02">
</body>
</html>
函数传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
function fnMyalert(a){
alert(a);
}
//fnMyalert('hello world!');
function fnChangestyle(mystyle,val){
var oDiv = document.getElementById('div1');
oDiv.style[mystyle] = val;
}
fnChangestyle('fontSize','30px');
fnChangestyle('color','red');
fnChangestyle('backgroundColor','pink');
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
函数’return’关键字
函数中’return’关键字的作用:
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function fnAdd(a,b) {
var c = a + b;
// 返回c的值,然后结束函数的运行
return c;
alert("内部的c="+c);
}
var iResult = fnAdd(2,5);
alert(iResult);
</script>
</head>
<body>
</body>
</html>
条件语句
通过条件来控制程序的走向,就需要用到条件语句。
运算符
1、算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符:=、 +=、 -=、 *=、 /=、 %=
3、条件运算符:==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload =function(){
var oInput01 = document.getElementById('input01');
var oInput02 = document.getElementById('input02');
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var iVal01 = parseInt(oInput01.value);
var iVal02 = parseInt(oInput02.value);
alert(iVal01+iVal02);
}
}
</script>
</head>
<body>
<input type="text" name="" id="input01"> +
<input type="text" name="" id="input02">
<input type="button" name="" value="相加" id="btn">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var iNum01 = 11;
var iNum02 = 2;
//alert(iNum01%iNum02); // 弹出1
var iNum03 = 0;
var iNum04 = 10;
alert(iNum03%iNum04); // 弹出0
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var iNum01 = 12;
// iNum01 = iNum01 + 2; 可以简写成下面的写法:
iNum01 += 2;
alert(iNum01); // 弹出14
// iNum01 = iNum01 - 5; 可以简写成下面的写法:
iNum01 -= 5;
alert(iNum01);
//iNum01 = iNum01*2; 可以简写成下面的写法:
iNum01 *= 2;
alert(iNum01);
//iNum01 = iNum01/2;
iNum01 /= 2;
alert(iNum01);
//iNum01 = iNum01%2;
iNum01 %= 2;
alert(iNum01);
iNum01++ // 等同于 iNum01 += 1 ;
alert(iNum01);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var iNum01 = 2;
var sNum01 = '2';
/*
用“==” 弹出相等
if(iNum01==sNum01){
alert('相等');
}
else{
alert('不相等');
}
*/
// 先比较类型在比较值
if(iNum01===sNum01){
alert('相等');
}
else{
alert('不相等');
}
if(3!=4)
{
alert(true);
}
else
{
alert(false);
}
// 将逻辑运算的结果取反,比如运算是true,取反后就是false
if(!4>3){
alert('大于')
}
else
{
alert('不大于')
}
// 多个条件运算,都是true,最终结果才是true
if(4>3 && 5>6)
{
alert('都是大于')
}
else
{
alert('不是都大于')
}
// 多个条件运算中只要有一个是true,最终结果就是true
if(4>3 || 5>6)
{
alert('只有部分大于')
}
else
{
alert('都不大于')
}
</script>
</head>
<body>
</body>
</html>
if else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var iNum01 = 12;
var iNum02 = 24;
if(iNum01>iNum02){
alert('大于');
}
else{
alert('不大于');
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var iWeek = 2;
var oBody = document.getElementById('body01');
if(iWeek==1){
oBody.style.backgroundColor = 'gold';
}
else if(iWeek==2)
{
oBody.style.backgroundColor = 'green';
}
else if(iWeek==3){
oBody.style.backgroundColor = 'pink';
}
else if(iWeek==4){
oBody.style.backgroundColor = 'yellowgreen';
}
else if(iWeek==5){
oBody.style.backgroundColor = 'lightblue';
}
else{
oBody.style.backgroundColor = 'lightgreen';
}
}
</script>
</head>
<body id="body01">
</body>
</html>
按钮切换元素显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn01');
var oDiv = document.getElementById('box01');
// oDiv.style.display 是读取的标签里写的display属性值,如果没有写,这个值为空
oBtn.onclick = function(){
if(oDiv.style.display=='block'||oDiv.style.display=='')
{
oDiv.style.display = 'none';
}
else
{
oDiv.style.display = 'block';
}
}
}
</script>
<style type="text/css">
.box{
width:200px;
height:400px;
background-color:gold;
}
</style>
</head>
<body>
<input type="button" name="" value="切换" id="btn01">
<div class="box" id="box01"></div>
</body>
</html>
switch语句
多重if else语句可以换成性能更高的switch语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var iWeek = 2;
var oBody = document.getElementById('body01');
if(iWeek==1){
oBody.style.backgroundColor = 'gold';
}
else if(iWeek==2)
{
oBody.style.backgroundColor = 'green';
}
else if(iWeek==3){
oBody.style.backgroundColor = 'pink';
}
else if(iWeek==4){
oBody.style.backgroundColor = 'yellowgreen';
}
else if(iWeek==5){
oBody.style.backgroundColor = 'lightblue';
}
else{
oBody.style.backgroundColor = 'lightgreen';
}
}
</script>
</head>
<body id="body01">
</body>
</html>
数组
数组及操作方法
数组就是一组数据的集合,javascript中,数组里面的数据可以是不同类型的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 通过类实例化来创建数组
var aList01 = new Array(1,2,3);
// 通过直接量的方式创建数组
var aList02 = ['a',2,3];
// 通过length来获取数组成员的个数
//alert(aList02.length);
// 通过下标操作数组的某个成员
//alert(aList02[0]);
// 通过push方法在数组的后面增加成员
aList02.push('b');
//alert(aList02); // 弹出a,2,3,b
aList02.pop();
//alert(aList02); // 弹出a,2,3
aList02.unshift('b');
//alert(aList02); // 弹出b,a,2,3
aList02.shift();
//alert(aList02); // 弹出a,2,3
aList02.reverse();
//alert(aList02); // 弹出3,2,a
var aList03 = ['a','b','c','d','a','b'];
//alert(aList03.indexOf('b')); //弹出1
// 第一个参数是开始的位置,第二个参是从起始位置删除多少个成员,第三个(包括第三个)之后是要增加的成员的值
aList03.splice(1,0,'e');
//alert(aList03); // 弹出 a,e,b,c,d,a,b
aList03.splice(1,2,'f','g');
//alert(aList03); // 弹出 a,f,g,c,d,a,b
var sTr = aList03.join("-"); // 数组执行方法后返回一个字符串
alert(sTr);
var sTr2 = aList03.join("");
alert(sTr2);
</script>
</head>
<body>
</body>
</html>
多维数组
多维数组指的是数组的成员也是数组的数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var aList = [[1,2,3,4],['a','b','c'],[6,7,8]];
//alert(aList.length);
alert(aList[0].length);
alert(aList[1][0]);
</script>
</head>
<body>
</body>
</html>
批量操作数组中的数据,需要用到循环语句
循环语句
程序中进行有规律的重复性操作,需要用到循环语句。
for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
/* for(var i=0;i<5;i++)
{
alert('ok!');
}*/
var aList = ['a','b','c','d'];
var iLen = aList.length;
for(var i=0;i<iLen;i++)
{
alert(aList[i]);
}
</script>
</head>
<body>
</body>
</html>
循环将数据放入到页面中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('list');
var aList = ['美人鱼','疯狂动物城','魔兽','美国队长3','湄公河行动'];
var iLen = aList.length;
var sTr = '';
for(var i=0;i<iLen;i++)
{
sTr += '<li>'+ aList[i]+ '</li>';
}
oUl.innerHTML = sTr;
}
</script>
<style type="text/css">
.list{
list-style:none;
margin:50px auto 0;
padding:0;
width:300px;
height:305px;
}
.list li{
height:60px;
border-bottom:1px dotted #000;
line-height:60px;
font-size:16px;
}
</style>
</head>
<body>
<ul class="list" id="list">
<!-- <li>美人鱼</li>
<li>美人鱼</li>
<li>美人鱼</li>
<li>美人鱼</li>
<li>美人鱼</li> -->
</ul>
</body>
</html>
while循环
var i=0;
while(i<8){
......
i++;
}
数组去重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var aList = [2,3,4,3,5,6,7,8,3,4,5,2,7,8,9,3,4,5,6,3,4,8,9];
var iLen = aList.length;
var aList2 = [];
for(var i=0;i<iLen;i++)
{
if(aList.indexOf(aList[i])==i){
aList2.push(aList[i]);
}
}
alert(aList2);
</script>
</head>
<body>
</body>
</html>
获取元素方法二
可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签,获取的是一个选择集,不是数组,但是可以用下标的方式操作选择集里面的标签元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过标签获取元素</title>
<script type="text/javascript">
window.onload = function(){
// 通过标签名称获取li元素,生成一个选择集,赋值给aLi
var aLi = document.getElementsByTagName('li');
// 读取选择集内元素的个数
//alert(aLi.length); // 弹出13
var iLen = aLi.length;
//给一个li设置背景色
//aLi[0].style.backgroundColor = 'gold';
// 不能给选择集设置样式属性
//aLi.style.backgroundColor = 'gold';
/*
同时给所有的li加背景色
for(var i=0;i<iLen;i++)
{
aLi[i].style.backgroundColor = 'gold';
}
*/
var oUl = document.getElementById('list1');
var aLi2 = oUl.getElementsByTagName('li');
var iLen2 = aLi2.length;
for(var i=0;i<iLen2;i++)
{
if(i%2==0)
{
aLi2[i].style.backgroundColor = 'gold';
}
}
}
</script>
</head>
<body>
<ul id="list1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul id="list2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
Javascript组成
1、ECMAscript javascript的语法(变量、函数、循环语句等语法)
2、DOM 文档对象模型 操作html和css的方法
3、BOM 浏览器对象模型 操作浏览器的一些方法
字符串操作方法
1、字符串合并操作:“ + ”
var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02); //弹出36
alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr); // 弹出12abc
2、parseInt() 将数字字符串转化为整数
var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02); //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36
alert(sNum03) //弹出数字12 将字符串小数转化为数字整数
3、parseFloat() 将数字字符串转化为小数
var sNum03 = '12.32'
alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数
4、split() 把一个字符串分隔成字符串组成的数组
var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");
alert(aRr); //弹出['2017','4','2']
alert(aRr2); //弹出['2','0','1','7','-','4','-','2','2']
5、charAt() 获取字符串中的某一个字符
var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //弹出 #
6、indexOf() 查找字符串是否含有某字符
var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2
7、substring() 截取字符串 用法: substring(start,end)(不包括end)
var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);
alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl
8、toUpperCase() 字符串转大写
var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //弹出ABCDEF
9、toLowerCase() 字符串转小写
var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //弹出abcdef
字符串反转
var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');
alert(str2);