操作元素属性
获取页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。
操作属性的方法
1."."操作
2."[]"操作
属性写法
1.html的属性和js里面的属性写法一样
2."class"属性写成"classname"
3."style"属性里面的属性,有横杠的改成驼峰式,比如:"font-size",改成"style.fontSize"
通过"."操作属性:
<script type="text/javascript">
window.onload = function () {
var oInput = document.getElementById('input1')
var oA = document.getElementById('link1')
//读取属性值
var sValue = oInput.value;
var sType = oInput.type;
var sName = oInput.name;
var sLinks = oA.href;
//写属性
oA.style.color = 'red';
oA.style.fontSize = sValue;
}
</script>
innerHTML
innerHTML可以读取或者写入标签包裹的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
var oDIV = document.getElementById('box');
//读取
var sTxt = oDIV.innerHTML;
alert(sTxt);
//写入
oDIV.innerHTML = '<a href="http://www.baidu.com">百度</a>'
}
</script>
</head>
<body>
<div id="box">TEST</div>
</body>
</html>
JavaScript嵌入页面的方式
1.行间事件(主要用于事件)
<input type="button" name="" οnclick="alert('OK!');">
2.页面script标签嵌入
<script type="text/javascript">
alert('OK!');
</script>
3.外部引用
<script type="text/javascript" src="js/index.js"></script>
变量
JavaScript是一种弱类型语言,JavaScript的变量类型由它的值来决定。定义变量需要用关键字'var'。如果需要同时定义多个变量可以使用逗号隔开。
变量的类型:
5种基本数据类型:
1.number数字类型
2.string字符串类型
3.Boolean布尔类型true或者false
4.underfined类型,变量声明未初始化,它的值就是underfined。
5.null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回值就是null。
6.复合类型,object
变量、函数、属性、函数参数命名规范:
1.区分大小写
2.第一个字符必须是字母、下划线或者美元符号$
3.其他字符可以是字母、下划线、美元符号或者数字
获取元素
可以使用内置对象document上的getEelementById方法来获取页面上设置了ID属性的元素,获取到的是一个html对象,然后将他赋值给一个变量,比如:
<script type="text/javascript"> var oDiv = document.getElementById('div1') </script>
上面的语句,如果把JavaScript写在元素的上面,就会出现错误,因为页面是从上往下加载执行的,JavaScript去页面上获取元素的时候div1还没有进行加载,解决的方式有:一是将JavaScript放到页面最下面,二是使用Windows.online等网页加载完成之后再执行。
函数
函数就是重复执行的代码片。
函数定义与执行:
<script type="text/javascript"> //函数定义 function fnAlert() { alert("hello"); } fnAlert() </script>
变量和函数预解析
JavaScript解析的过程分为两个阶段,首先是编译的阶段,然后才是执行的阶段,在编译的阶段会将function定义的函数提前,并且将var定义的变量声明提前,将它赋值为undefined。
函数传参:
<script type="text/javascript"> function fnAlert(a) { alert(a); } fnAlert(123); </script>
函数'return'关键字
函数return关键字的作用:
1.返回函数执行的结果
2.结束函数的运行
3.阻止默认行为
<script type="text/javascript"> function fnAdd(iNum01,iNum02) { var iRs = iNum01 + iNum02; return iRs; alert("hello"); } var iCount = fnAdd(3,4); alert(iCount); </script>
条件语句
通过条件来控制程序的走向,就需要利用条件语句
运算符
1.算术运算符:+、-、*、/、%
2.赋值运算符:=、+=、-=、*=、/=、%=
3.条件运算符:==、===、>、>=、<、<=、!=、&&、||、!
if语句
var iNow=1;
if (iNow==1){
......;
}
else if(iNow==2){
......;
}
else{
....;
}
switch语句
var iNow=1;
switch(iNow){
case 1:
.....;
break;
case2:
......;
break;
default:
......;
}
数组及操作方法
数组就是一组数据的集合,JavaScript中,数组里面的数据可以是不同类型的。
定义数组的方法
//对象的实例创建
var aList = new Arry(1,2,3);
//直接创建
var aList2 = [1,2,3,'asd'];
操作数组中数据的方法
1.获取数组的长度:aList.length;
var aList = [1,2,3,4];
alert(aList.length);
2.用下标操作数组的某个数据:aList[0];
var aList = [1,2,3,4];
alert(aList[0]);
3.join()将数组成员通过一个分隔符合并成字符串
var aList[1,2,3,4];
alert(aList.join('-')); //弹出1-2-3-4
4.push()和pop()从数组最后增加成员或者删除成员
var aList[1,2,3,4];
aList.push(5);
alert(aList); // 弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出12,3,4
5.unshift()和shift()从数组的前面增加或者删除成员
var aList[1,2,3,4];
aList.unshift(5);
alert(aList)//弹出5,1,2,3,4
aList.shift();
alert(aList); //弹出1,2,3,4
6.reverse()将数组反转
var aList[1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1
7.indexOf()返回数组中元素第一次出现的索引值
var aList[1,2,3,4,1,3,4];
alert(aList.indexOf(1));
8.splice()在数组中增加或删除成员
var aList[1,2,3,4];
aList.splice(2,1,7,8,9); // 从第二个元素开始,删除1个元素,然后在此位置增加'7,8,9'三个元素
alert(aList); // 弹出1,2,7,8,94
多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2
批量操作数组需要使用循环语句
循环语句
程序循环中进行有规律的重复性操作,需要用循环语句
for循环
for (var i=0; i<len; i++)
{
.......
}
while循环
var i=0;
while(i<0){
....
i++;
}
数组去重
var aList[1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
var aList2 = [];
for (var i=0;i<aList.lenth; i++){
if(aList.indexOf(aList[i])==i){
aList2.push(aList[i]);
}
}
alert(aList2);