事件的默认行为、冒泡行为
事件对象: event
属性:Target: 获取触发事件对象
如:大框套按钮,给大框绑定点击事件;若点击大框触发事件,此时对象是大框;若点击按钮触发事件,此时对象时按钮;
属性: currentTarget: 获取绑定触发事件的对象,谁绑定获得谁;
例:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px black solid;
}
</style>
</head>
<body>
<div id="wai" onclick="show1(event)">
<button type="button">按钮</button>
</div>
</body>
<script type="text/javascript">
function show1(e){
var a=e.currentTarget; //谁绑定了事件,点击谁才会使下面代码有效;
a.style.background="red";
}
</script>
</html>
冒泡行为:是指多层嵌套时,都定义点击事件时,点击内层,会由内向外依次执行点击事件的操作;
stopPropagation() :阻止冒泡行为
例:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px black solid;
}
</style>
</head>
<body>
<div id="wai" onclick="show1(event)">
<div id="nei" style="width: 40px; height: 40px; border: 1px black solid;" onclick="show2(event)">
</div>
</div>
</body>
<script type="text/javascript">
function show1(e){
alert("wai");
e.stopPropagation();
}
function show2(e){
alert("nei");
e.stopPropagation();
}
</script>
</html>
事件的默认行为
如:点击链接后,会进行页面跳转;
preventDefault():阻止默认行为;
例:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="boke5.html" onclick="show(event)" >点击进入</a>
</body>
<script type="text/javascript">
function show(e){
alert("点击一次")
e.preventDefault();
}
</script>
</html>
什么是 JSON?
- JSON 英文全称 JavaScript Object Notation
- JSON 是一种轻量级的数据交换格式。
- JSON是独立的语言 *****
- JSON 易于理解。
- JSON 是用于存储和传输数据的格式。
- JSON 通常用于服务端向网页传递数据 。
JSON 语法规则
- 数据为 键/值 对。
- 数据由逗号分隔。
- 大括号保存对象
- 方括号保存数组
JSON 数据 - 一个名称对应一个值
JSON 数据格式为 键/值 对,就像 JavaScript 对象属性。
键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:
“name”:“Runoob”
JSON 对象
JSON 对象保存在大括号内。
就像在 JavaScript 中, 对象可以保存多个 键/值 对:
{“name”:“Runoob”, “url”:“www.runoob.com”}
Var student ={name:"zhangsan",age:30} /// student为一个JSON对象
获取JSON中的值,采用for in循环
for(key in json对象)
{
Alert(json[key]);
}
JSON 数组
JSON 数组保存在中括号内。
就像在 JavaScript 中, 数组可以包含对象:
“sites”:[ {“name”:“Runoob”, “url”:“www.runoob.com”}, {“name”:“Google”, “url”:“www.google.com”}, {“name”:“Taobao”, “url”:“www.taobao.com”} ]
在以上实例中,对象 “sites” 是一个数组,包含了三个对象。
JSON 字符串转换为 JavaScript 对象
JSON 在JS中看作的是对象
Java 把JSON格式看成是字符串
JSON字符串语法:外面必须是单引号,键是双引号
JSON字符串的格式必须是紧凑格式,不能美化
首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:
var text = ‘{ “sites” : [’ + ‘{ “name”:“Runoob” , “url”:“www.runoob.com” },’ + ‘{ “name”:“Google” , “url”:“www.google.com” },’ + ‘{ “name”:“Taobao” , “url”:“www.taobao.com” } ]}’;
然后,使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text); //obj为一个JSON对象
var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
对象转字符串
JSON.Stringify(json对象)
JavaScript 对象转换为 JSON 字符串
1.获得JSON对象
var a ={name :“张三” , age :30};
2.调用JSON内部方法:JSON.stringify()
var b=JSON.stringify(a)
此时:b为一个JSON 字符串;
相关函数
函数 | 描述 |
---|---|
JSON.parse() | 用于将一个 JSON 字符串转换为 JSON对象。 |
JSON.stringify() | 用于将 JSON对象转换为 JSON 字符串。 |