黑马程序员技术交流社区
标题: 【济南中心】PHP课程同步笔记day06：JS介绍(四) [打印本页]
作者: 小鲁哥哥 时间: 2017-3-22 15:47
标题: 【济南中心】PHP课程同步笔记day06：JS介绍(四)
本帖最后由 小鲁哥哥 于 2017-3-22 15:50 编辑
【济南中心】PHP课程同步笔记day06：JS介绍(四)
对象
将一组数据与这组数据有关操作组装在一起，形成一个实体，这个实体就是对象在 JavaScript 中，对象是拥有属性和方法的数据。
属性是对象相关的值
方法是能够在对象上执行的动作。
以汽车为例，汽车就是现实中的对象。
汽车的属性包括名称、型号、重量、颜色等
汽车的方法可以是启动、驾驶、刹车等。
JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。
访问对象的属性的语法是：
objectName.propertyName
访问对象的方法的语法是：
objectName.methodName()
事件：
HTML和JS通过事件建立联系
鼠标事件：
Onclick:点击事件
Onmouseover:鼠标放上
Onmouseout:鼠标离开
键盘事件：
onkeyDown:键盘按下
onkeyUp:键盘抬起
onkeyPress:按键一次
表单事件
Onsubmit:表单提交事件
Onfocus:获得焦点
Onblur:失去焦点
窗口事件
Onload,在网页一打开的时候(必须把所有的东西都加载完成之后)
<body onload=”init()”></body>
Window.onload = init 注意：函数名init之后没有括号
Event：是指事件发生的时候(事件源)相关的一些信息
clientX：获得鼠标的X坐标
clientY：获得鼠标的Y坐标
Event.target:事件源
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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）找对对应的标签属性并赋值
a) HTML的标签属性设置
i. 取值var w=对象.HTML属性名
ii. 对象.HTML 属性名 = 值
b) CSS属性设置
i. Var ab = 对象.style.CSS 属性名
ii. 对象.style.CSS属性名 = 值
Document.getElementById(“id”);通过这种方法可以获得这个id名的标签对象
Document.getElemetsByTagName(“标签名”)通过这种方法可以获得标签名的标签对象注意：这个时候获得的是数组形式的
Document.body：获得body这个对象
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
效果：
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
