将一组数据与这组数据有关操作组装在一起,形成一个实体,这个实体就是对象。
在 JavaScript 中,对象是拥有属性和方法的数据。
以汽车为例,汽车就是现实中的对象。
JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。
访问对象的属性的语法是:
objectName.propertyName
访问对象的方法的语法是:
objectName.methodName()
事件
HTML和JS通过事件建立联系
1、鼠标事件:
2、键盘事件:
3、表单事件
4、窗口事件
<body onload=”init()”></body>
.
.
Window.onload = init
注意:函数名init之后没有括号
<!DOCTYPE>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
window.onload = init;
function init(){
alert(123);
}
</script>
</head>
<body>
hello
</body>
</html>
Js控制改变标签的html属性和css属性
1、首先获取标签
2、找对对应的标签属性并赋值
1) HTML的标签属性设置
i. 取值var w=对象.HTML属性名
ii. 对象.HTML 属性名 = 值
2) CSS属性设置
i. var ab = 对象.style.CSS属性名
ii. 对象.style.CSS属性名 = 值
HTML | CSS | JS |
---|---|---|
Width | background-colr | backgroundColor |
height | margin-left | marginLeft |
Document获取标签元素:
<!DOCTYPE >
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
#div{
width:200px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
function change(){
var obj = document.getElementById("div");
obj.style.backgroundColor="black";
}
</script>
</head>
<body>
<div id="div"></div>
<input type="button" value="改变">
</body>
</html>
效果:
innerHTML和value对比
<!DOCTYPE>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
function show(){
var m = document.getElementById("d1");
var str = m.innerHTML;
alert(str);
}
</script>
</head>
<body>
<div id="d1">
<div>这是汉字</div>
</div>
</body>
</html>
效果: