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的更多相关文章

  1. JavaScript学习笔记及知识点整理_2

    1.一般而言,在Javascript中,this指向函数执行时的当前对象.举例如下: var someone = { name: "Bob", showName: function ...

  2. JavaScript学习笔记及知识点整理_1

    一.js的基础部分 1.==和===的区别:==在判断是否相等的时候会进行类型转换,有时会得到非常奇怪的结果,因此一般情况下都是用===判断是否相等2.strict模式:在js中,如果一个变量没有用v ...

  3. 大数据 -- kafka学习笔记：知识点整理（部分转载）

    一 为什么需要消息系统 1.解耦 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险.许多 ...

  4. kafka学习笔记：知识点整理

    一.为什么需要消息系统 1.解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险. ...

  5. [Big Data - Kafka] kafka学习笔记：知识点整理

    一.为什么需要消息系统 1.解耦: 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余: 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险. ...

  6. JavaScript学习笔记——对象知识点

    javascript对象的遍历.内存分布和封装特性 一.javascript对象遍历 1.javascript属性访问 对象.属性 对象[属性] //字符串格式 //javascript属性的访问方法 ...

  7. 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要三

    最近工作较忙,手上有几个项目等着我独立开发设计,所以平时工作日的时候没有太多时间,下班累了就不想动,也就周末有点时间,今天我花了一个下午的时间来继续总结与整理书中要点,在整理的过程中,发现了书中的一些 ...

  8. Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  9. 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要系列文章索引

    从发表第一篇文章到最后一篇文章,时间间隔有整整一个月,虽只有5篇文章,但每一篇文章都是我吸收<LEARNING HARD C#学习笔记>这本书的内容要点及网上各位大牛们的经验,没有半点废话 ...

随机推荐

  1. P1941 飞扬的小鸟

    此题很容易写出方程,由以前的知识可以迁移得,本题可以用完全背包的方法进行优化,使用滚动数组即可得到答案. //莫名奇妙60分.不知道什么细节出了错. #include <bits/stdc++. ...

  2. Python之编写函数

    Python之编写函数 在Python中,定义一个函数要使用 def 语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用 return 语句返回. 我们以自定 ...

  3. Trace-跟踪高消耗的语句需添加哪些事件

    通常接手一台数据库服务器后,我们会开启Profiler跟踪来了解SQL Server的繁忙情况.我们首先会想到的是监控CPU或Duration超过某一阈值的语句/过程.那么所创建的Trace添加哪些事 ...

  4. [SLAM] GMapping SLAM源码阅读（草稿）

    目前可以从很多地方得到RBPF的代码,主要看的是Cyrill Stachniss的代码,据此进行理解. Author:Giorgio Grisetti; Cyrill Stachniss  http: ...

  5. iOS10 app连接不上网络的问题

    http://jingyan.baidu.com/article/29697b917f2069ab20de3c33.html

  6. Scrum4.0＋5.0

    1.题目: 1.准备看板. 形式参考图4. 2.任务认领,并把认领人标注在看板上的任务标签上. 先由个人主动领任务,PM根据具体情况进行任务的平衡. 然后每个人都着手实现自己的任务. 3.为了团队合作 ...

  7. jQ HTML之捕获 设置 元素添加与删除

    捕获 设置修改 添加元素 删除元素

  8. property_自己编写一个读取Property文件的Util类

    读取property文件的Util类: 所需jar包: 编写PropertiesUtil类: package com.west.util.property; import java.io.InputS ...

  9. JQuery基础一

    1.在浏览器点击F12,调出源码设置端点F11进行调试 2.要操作DOM对象,首先要把DOM对象封装成juery对象: jQuery(document).ready(function () { ale ...

  10. swift uiview弹出动画

    UIView.animateWithDuration(0.5, delay: 0.0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0.0, ...