您的位置：首页 > Web前端 > JavaScript

JavaScript学习笔记及知识点整理_3

2016-10-20 23:15 513 查看

1.js的事件冒泡及阻止方法:
事件冒泡的概念:
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
换言之,也就是说,如果子类对象的事件被激活,那么父类对象的同类事件也会被激活,并按照有子类对象一直向外延伸的顺序执行.例如下面的代码:

<div onclick="outSideWork()" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="inSideWork()" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
function outSideWork() {
alert('My name is outSide,I was working...');
}

function inSideWork() {
alert('My name is inSide,I was working...');
}
//冒泡使得大盒子和小盒子都发生命令,并且按照由内到外的顺序执行
</script>

阻止事件冒泡的代码如下,即将事件对象传入,并且调用stopPropagation方法,代码如下(针对不同浏览器进行了优化):

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function demo(id,e) {
alert(id);
stopBubble(e);
}

function stopBubble(e) {
if (e && e.stopPropagation){//判断有没有stopPropagation属性
e.stopPropagation();//停止传播
}
else {
window.event.cancelBubble = true;
}
}
</script>
</head>
<body id="body" onclick="demo(this.id , event);">
<div id="outer" onclick="demo(this.id , event);">
<div id="inner" onclick="demo(this.id , event);">点击</div>
</div>
</body>
</html>

2.跨页面通讯之frameset内部页面如何交互:
window.frames 返回窗口中所有命名的框架
parent是父窗口（如果窗口是顶级窗口，那么parent==self==top）
top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe）
self是当前窗口（等价window）
window.opener返回用open方法打开当前窗口的那个窗口

3.JSON

JSON的语法规则:数组用[]表示,对象用{}表示,名称.值对组成数组对象.名称置于双引号中,值有字符串,数值,布尔值,null,对象和数组.并列的数值之间用对象分割.

序列化JSON对象:

var xiaoming = {
name: '小明',
age: 14,
gender: true,
height: 1.65,
grade: null,
'middle-school': '\"W3C\" Middle School',
skills: ['JavaScript', 'Java', 'Python', 'Lisp']
};

JSON.stringify(xiaoming);
// '{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"middle-school":"\"W3C\" Middle School","skills":["JavaScript","Java","Python","Lisp"]}'

第二个参数可以用于输出对象的指定属性:
JSON.stringify(xiaoming, ['name', 'skills'], ' ');
输出结果

{
"name": "小明",
"skills": [
"JavaScript",
"Java",
"Python",
"Lisp"
]
}

还可以传入一个函数,利用函数来处理预先处理键值对:

function convert(key, value) {
if (typeof value === 'string') {
return value.toUpperCase();
}
return value;
}

JSON.stringify(xiaoming, convert, '  ');
/*
{
将value全部变成大写.
"name": "小明",
"age": 14,
"gender": true,
"height": 1.65,
"grade": null,
"middle-school": "\"W3C\" MIDDLE SCHOOL",
"skills": [
"JAVASCRIPT",
"JAVA",
"PYTHON",
"LISP"
]
}
*/

将JSON字符串转化为js对象
直接用JSON.parse即可将JSON字符串转化为一个js对象.如下面的代码所示:

JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]
JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}
JSON.parse('true'); // true
JSON.parse('123.45'); // 123.45

parse也可以接受一个函数,用来在解析的时候对key和value完成对应的操作:

JSON.parse('{"name":"小明","age":14}', function (key, value) {
// 把number * 2:
if (key === 'name') {
return value + '同学';
}
return value;
}); // Object {name: '小明同学', age: 14}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航