JavaScript 对象

javascript 对象

数组Array

数组定义如下图所示:

数组的长度可变,类型可变。

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>

</body>
	<script> 
		var array=new Array(1,2,3,4);
		var arr=[1,2,3,4];
		arr[10]=50;
		arr[9]="22";
		alert(arr);
	</script>
</html>

运行效果如下图

Array的性质和常用方法

forEach遍历方法(需要一个函数做参数):

javascript 复制代码
arr.forEach(function(e){alert(e)});

省略function 关键字,箭头函数简化上面的语句:

javascript 复制代码
arr.forEach((e)=>{alert(e)});

字符串对象

我们常用的接口:

我们获得字符串的某一个词

html 复制代码
<script> 
		var array="abcdefgh";
		alert(array.charAt(3));
	</script>

我们检索一个字符串在原字符串的位置:

html 复制代码
<script> 
		var array="abcdefgh";
		alert(array.charAt(3));
		alert(array.indexOf("a"));
	</script>

去除字符串两边的空格同时截取字符串

html 复制代码
<script> 
		var array="   abcdefgh ";
		alert(array.charAt(3));
		alert(array.indexOf("a"));
		var s=array.trim();
		alert(s);
		alert(s.substring(0,3));
	</script>

自定义对象

和java的类极其相似

我们下面学习 JSON对象。

BOM对象

window浏览器窗口对象

定时器

javascript 复制代码
var i=0;
setInterval(function(){
consolve.log("第"+i);
i++;
},2000);

地址栏

javascript 复制代码
alert(window.location);

DOM

HTML DOM (文档对象模型)。

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

我们举一个例子,像下面这样的

html 复制代码
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
	{
		element.src="/images/pic_bulboff.gif";
	}
	else
	{
		element.src="/images/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" 
	 src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
	<div class="cls"> 灰灰的</div>
	<div class="cls">黑马程序员</div>
	<input type="checkbox" name="hobby">电源
	<input type="checkbox" name="hobby">电压
	<input type="checkbox" name="hobby">电闸
</body>
	<script >
	<-!我们把div的数组挑出来>
	var divs=document.getElementsByTagName('div');
	for(let i=0;i<divs.length;i++){
		const div=divs[i];
		div.innerHTML+="<font color='red'>very good</font>";
	}
	var ins=document.getElementsByName('hobby');
	for(let i=0;i<ins.length;i++){
		const check=ins[i];
		check.checked=true;
	}
	</script>
</html>
相关推荐
Nebula_g11 分钟前
JavaSE项目实践:红包雨-线程池/线程
java·开发语言
外收内放11 分钟前
Python基础语法练习题(56优化版补充)
开发语言·python
小羊没烦恼!12 分钟前
jQuery1.5的改进细节
java·服务器·开发语言·前端·c#
创世虚拟世界28 分钟前
我做了一个 3D 虚拟世界基底,基于这个再做 3D 虚拟世界或者元宇宙,会事半功倍
javascript·人工智能·3d·gitee·虚拟现实
程序员老陆43 分钟前
C++ 未定义行为全景:对象模型、优化边界与工程防御
开发语言·c++·程序设计
嵌入式er1 小时前
影石系统组 一二面OC面经
java·开发语言
徐小黑ACG1 小时前
Golang 基础06 接口interface
开发语言·后端·golang
半杯咖啡半行码1 小时前
Qt 开发基础:版本演进、常用工具与多平台安装
开发语言·qt
下页、再停留1 小时前
【C#桌面客户端系列学习-8】批量导出数据为csv格式
开发语言·c#·visual studio
菜鸟~noob2331 小时前
【电子战】 第26篇:大气衰减——氧气与水汽吸收【含matlab代码】
开发语言·matlab