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. android_view自定义中的几个方法

    1.onDraw ,改变View绘制的图像 2.onMeasure,改变View的大小 3.onLayout,改变View在父控件的位置

  2. JVM监控和Java应用程序调试

    JConsole.VisualVM监控JVM(JMX) JAVA_OPTS后加:-Dcom.sun.management.jmxremote.port=8999 -Dcom.sun.managemen ...

  3. mysql中取日期的一部分

    DATE_FORMAT(date,format) 根据format字符串格式化date值.下列修饰符可以被用在format字符串中: %M 月名字(January……December) %W 星期名字 ...

  4. Gradle Cheat Sheet

    加快编译速度 使用 gradle 2.4 及以上版本 ~/.gradle/gradle.properties 加入如下配置 org.gradle.daemon=true org.gradle.jvma ...

  5. ASP.NET c# Redis 开发

    Redis简介 Redis是一个开源的,使用C语言编写,面向“键/值”对类型数据的分布式NoSQL数据库系统,特点是高性能,持久存储,适应高并发的应用场景.Redis纯粹为应用而产生,它是一个高性能的 ...

  6. java反射基本使用操作

    反射的基本原理:反射的机制是通过类加载器将字节码文件读入到内存中,然后通过解析器在内存中解析出这个类的所有东西,当我们需要用到的时候我们可以拿出来使用. 一.反射一个类的构造函数 person类 pa ...

  7. JVM参数设置、分析（转发）

    JVM参数的含义 实例见实例分析 参数名称 含义 默认值   -Xms 初始堆大小 物理内存的1/64(<1GB) 默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40%时,J ...

  8. Excel应该这么玩——2、命名列：消除地址引用

    命名列:通过名称引用列,让公式更容易理解. 下面继续举上次的栗子. 1.历史遗留问题 之前虽然把数字编成了命名单元格,但其中还是有单元格地址B2.C2之类,要理解公式需要找到对应的列标题. 特别是像下 ...

  9. 批处理命令——for

    [1]for命令简介 先把for循环与for命令类比一下,这样学习理解快. for 循环语句,一般格式如下: for (表达式1;表达式2;表达式3) { 循环体; } 1. 表达式1 一般为初始状态 ...

  10. VS2010调试Qt5的相关设置

    1.windows环境,下载离线安装包安装: 2.安装Qt5 Visual Studio Add-in并安装: 3.环境变量里设置QTDIR=D:\LIB\Qt\Qt5.3.2\5.3\msvc201 ...