JavaScript学习笔记及知识点整理_3
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}
JavaScript学习笔记及知识点整理_3的更多相关文章
- JavaScript学习笔记及知识点整理_2
1.一般而言,在Javascript中,this指向函数执行时的当前对象.举例如下: var someone = { name: "Bob", showName: function ...
- JavaScript学习笔记及知识点整理_1
一.js的基础部分 1.==和===的区别:==在判断是否相等的时候会进行类型转换,有时会得到非常奇怪的结果,因此一般情况下都是用===判断是否相等2.strict模式:在js中,如果一个变量没有用v ...
- 大数据 -- kafka学习笔记：知识点整理（部分转载）
一 为什么需要消息系统 1.解耦 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险.许多 ...
- kafka学习笔记：知识点整理
一.为什么需要消息系统 1.解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险. ...
- [Big Data - Kafka] kafka学习笔记：知识点整理
一.为什么需要消息系统 1.解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险. ...
- JavaScript学习笔记——对象知识点
javascript对象的遍历.内存分布和封装特性 一.javascript对象遍历 1.javascript属性访问 对象.属性 对象[属性] //字符串格式 //javascript属性的访问方法 ...
- 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要三
最近工作较忙,手上有几个项目等着我独立开发设计,所以平时工作日的时候没有太多时间,下班累了就不想动,也就周末有点时间,今天我花了一个下午的时间来继续总结与整理书中要点,在整理的过程中,发现了书中的一些 ...
- Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要系列文章索引
从发表第一篇文章到最后一篇文章,时间间隔有整整一个月,虽只有5篇文章,但每一篇文章都是我吸收<LEARNING HARD C#学习笔记>这本书的内容要点及网上各位大牛们的经验,没有半点废话 ...
随机推荐
- nodejs 80端口监听失败及NODE_PATH不起作用的问题
nodejs做web服务器,打开80时报错:Error: listen EACCES 0.0.0.0:80 80端口监听失败,是因为1024以下的端口需要root权限,需要sudo或su之后执行.但这 ...
- 并发两个Thread的怪事——已解决
截图是马士兵视频的代码.我这样试了下,的确可行. 但是一般来说,主线程就是用来启动子线程的,所以我用了下图的形式,运行了3次.结果运行结果一直在变化,并且都没有正确的显示内容.这个截图里面编号11的线 ...
- 关于preg_match输出多个数组的解释，使用（）时
第一个数组显示的是所有的匹配,第二个显示的是第一个括号里的内容,第三个显示的是第二个括号里的内容
- Python开发程序：FTP程序
作业:开发一个支持多用户在线的FTP程序 要求: 用户加密认证 允许同时多用户登录 每个用户有自己的家目录 ,且只能访问自己的家目录 对用户进行磁盘配额,每个用户的可用空间不同 允许用户在ftp se ...
- mongoDB（1）
1.查询时,不写条件的查询,速度要远远大于有条件的查询. 2.消除重复数据: 3.db.listCommands() 查看mongo的runCommand支持哪些功能了. db.runCommand( ...
- C#中Brush、Color、String相互转换WPF/Silverlight
//部分方法只适用于WPF,在SL中不能用 using System.Windows.Media; 1.String转换成Color Color color = (Color)ColorConvert ...
- JQuery对象操作支持链式法则源码分析
JQuery链式法则 何为链式法则?先给出非链式写法的例子 //非链式写法 $("div").css("width", 45px); $("div&q ...
- gradle基础的build文件模板_jetty
group '组织名' version '版本号' /* 支持的插件 */ apply plugin: 'java' // 项目基础变成语言支持为java apply plugin: 'war' // ...
- UCenter整合登陆时出现’Authorization has expired’错误（2014-03-13记）
原因之可能是两台机子的时间不一致导致.
- linux内核常识
找到了一个阅读linux源码的在线工具woboq,但是不能很好地用来阅读live555代码. 比如,我们要阅读epoll实现,可以访问此网址:https://code.woboq.org/linux/ ...