BOM:浏览器对象模型
DOM:文档对象模型
自定义函数与数据类型
定义的时候称为形参,调用的时候称之为实参
以标准的方法可以先使用后定义
数据类型及类型转换
定义的时候不区分,使用的时候区分
第一行是自动转换,第二行是强制转换
优先使用number进行转换
parseInt和parseFloat能忽略后面的字母,直接转换成123,而Number转换得到的是NaN,前面是字母的话得到的都是NaN
parseInt和parseFloat的结果都是NaN,Number的结果为:0
以下两个图片结果一致
结果都为false
有内容时为true。如果是数值0,结果也为false。
变量与运算符
:
函数
split:按照一定的规律将字符串转换为数组
concat:连接
replace:替换并不是替换所有,而只是替换一个。
substring()函数可以提取到字符串的某个部分,它有两个参数,当这两个参数的值为负数的时候,将自动转换为0。
Math.round :四舍五入取整
四舍五入保留两位小数:
Math.abs() 求绝对值
min()返回指定的数组中最小的那个数字,如果参数是不能转换成数字的非数字值,则返回NaN。
数组
创建数组的四种方法:
创建时注意A是大写的
遍历数组:
表单元素设置
按照元素的ID来获取
document.getElemnentById:根据id来获取,之哟啊是能设置ID的都能获取
页面刷新的时候执行:
ondblick:鼠标双击
onkrydown:按下键盘时触发
根据名字获取:加了s表示数组,即多个属性的name相同
利用js设置列表框里面的内容
第一个参数显示的名字,第二个是value的值
删除列表框里所有的内容:
删除列表框条目;
for循环中是删除所有的
更换列表中的头像:
html中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="tupian.js"></script>
<style type="text/css">
img{
height: 50px;
width: 50px;
}
</style>
<title>Document</title>
</head>
<body onload="touXiangChange()">
<img src="../touxiang/image1.jpg" id="touxiang" >
<select id="touxiangid" onchange="touXiangChanges()"></select>
</body>
</html>
js中:
function touXiangChange(){
var id=document.getElementById("touxiangid");
for(var i=1;i<=6;i++){
id.options.add(new Option("第"+i+"个",i));
}
}
function touXiangChanges(){
var touXiang=document.getElementById("touxiang");
var id=document.getElementById("touxiangid");
**var m=id.value;**
touXiang.src="../touxiang/image"+m+".jpg"
}
注意js中的value和value()
实现全选和反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" >
var flag=true;
function aquanxuan(){
var xuanze=document.getElementsByName("check");
for(var i=0;i<xuanze.length;i++){
xuanze[i].checked=flag;
}
if(flag){
document.getElementById("xuanze").value="取消全选"
}else{
document.getElementById("xuanze").value="全选"
}
flag=!flag;
}
function quxiaoquanxuan(){
var xuanze=document.getElementsByName("check");
for(var i=0;i<xuanze.length;i++){
xuanze[i].checked=!xuanze[i].checked;
}
}
</script>
<title>全选与反选</title>
</head>
<body>
<form>
<input type="checkbox" name="check" value="1">游泳
<input type="checkbox" name="check" value="2">学习
<input type="checkbox" name="check" value="3">唱歌
<input type="checkbox" name="check" value="4">运动
<input type="checkbox" name="check" value="5">比赛<br>
<input type="button" id="xuanze" value="全选" onclick="aquanxuan()">
<input type="button" id="fanxuan" value="反选" onclick="quxiaoquanxuan()">
</form>
</body>
</html>
事件:什么时候发生过,发生什么事