JavaScript

最新推荐文章于 2020-08-06 18:52:49 发布

半墓尘沙゜

最新推荐文章于 2020-08-06 18:52:49 发布

阅读量111

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45611051/article/details/106850862

版权

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。结果为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>

在这里插入图片描述

事件：什么时候发生过，发生什么事