4篇笔记搞定JavaScript—-第四篇
- 2019 年 10 月 29 日
- 笔记
对象
将一组数据与这组数据有关操作组装在一起，形成一个实体，这个实体就是对象。
在 JavaScript 中，对象是拥有属性和方法的数据。
- 属性是对象相关的值
- 方法是能够在对象上执行的动作。
以汽车为例，汽车就是现实中的对象。
- 汽车的属性包括名称、型号、重量、颜色等
- 汽车的方法可以是启动、驾驶、刹车等。
JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。
访问对象的属性的语法是：
objectName.propertyName
访问对象的方法的语法是：
objectName.methodName()
事件
HTML和JS通过事件建立联系
1、鼠标事件：
- onClick:点击事件
- onMouseover:鼠标放上
- onMouseout:鼠标离开
2、键盘事件：
- onkeyDown:键盘按下
- onkeyUp:键盘抬起
- onkeyPress:按键一次
3、表单事件
- onSubmit:表单提交事件
- onFocus:获得焦点
- onBlur:失去焦点
4、窗口事件
- onLoad：在网页一打开的时候(必须把所有的东西都加载完成之后)
<body onload=”init()”></body> . . Window.onload = init
注意：函数名init之后没有括号
- event：是指事件发生的时候(事件源)相关的一些信息
- clientX：获得鼠标的X坐标
- clientY：获得鼠标的Y坐标
- event.target:事件源
<!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获取标签元素：
- Document.getElementById(“id”) : 通过这种方法可以获得这个id名的标签对象
- Document.getElemetsByTagName(“标签名”)：通过这种方法可以获得标签名的标签对象注意：这个时候获得的是数组形式的
- Document.body：获得body这个对象
<!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对比
- innerHTML：所有在这个对象内的内容都是innerHTML的内容
- value：一般情况input的时候都是value,双标签都需要用到innerHTML
<!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>
效果：
