正文

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

大胡龙的小圈子  2022-02-06  599

关键词：

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}

kafka学习笔记：知识点整理

阅读目录1.为什么需要消息系统2.kafka架构　　2.1拓扑结构　　2.2相关概念　　2.3zookeeper节点3.producer发布消息　　3.1写入方式　　3.2消息路由　　3.3写入流程　　3.4producerdeliveryguarantee4.broker存储消息　　4.1存储方式　　4.2存... 查看详情

我的博客笔记汇总版

...置详解_小仙儿-CSDN博客2、前端知识学习2.1、Html+Css+JavaScript2.1.1、我的html学习笔记（一）_小仙儿-CSDN博客2.1.2、我的html学习笔记（二）_小仙儿-CSDN博客2.1.3、HTML5详细介绍及使用_小仙儿-CSDN博客_html52.1.4、HTML5... 查看详情

javascript学习笔记整理（事件）

一、事件驱动1.事件javascript侦测到的用户的操作或是页面的一些行为(怎么发生的)2.事件源引发事件的元素(发生在谁的身上)3.事件处理程序对事件处理的程序或是函数(发生了什么事)二、事件的分类1.鼠标事件onclick　　　　　　... 查看详情

kafka学习笔记：知识点整理

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

菜鸟的javascript自学笔记整理(代码片段)

整理学习了JavaScript的相关知识，因为笔者学过C++，所以感觉上手javascript比较容易，故本博文整理了一些JavaScript的特殊之处。（虽然笔者还没有学习过java,但是我知道它两应该是老婆和老婆饼的关系。）... 查看详情

javascript学习笔记整理day9

一.JavaScript定时器：　　1.单次定时:setTimeout（fn，time）;　　2.多次定时:setInterval(timer);　　3.停止单次定时:clearTimeout(timer);　　4.停止多次定时:clearInterval(timer);实例1:使用单次和多次定时写倒计时<!doctypehtml><htmllang="en"><... 查看详情

javascript学习笔记整理day15

...5.Navigator一.window　　window概述：　　　　1.window是客户端JavaScript的全局对象　　　　2.它表示web浏览器的一个窗口或窗体，并且用标识符window来引用　　1.innerHeight 返回窗口的文档显示区高度IE9以下不兼容　　2. 查看详情

raid及mdadm命令_学习笔记

关于Raid及Mdadm命令的学习笔记：课前小知识：关于case的小脚本笔记： cat << 查看详情

javascript学习笔记整理day10

...1.使用直接量　　2.使用构造函数　　3.转换函数四.使用JavaScript进行正则验证　　步骤一：准备字符串　　步骤二：准备正则表达式　　步骤三：执行匹配查看详情

javascript学习笔记整理day5

#数组##一：数组的定义 1. 数组是值的有序集合 2. 每一个值叫做一个元素 3. 每个元素在数组中都有一个位置，以数字表示，叫做索引。索引从0开始。##二：特点 ... 查看详情

javascript易错知识点整理

前言本文是我学习JavaScript过程中收集与整理的一些易错知识点，将分别从变量作用域，类型比较，this指向，函数参数，闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解，其中也涉及了一些ES6的知识点。JavaScript... 查看详情

javascript易错知识点整理

本文是我学习JavaScript过程中收集与整理的一些易错知识点，将分别从变量作用域，类型比较，this指向，函数参数，闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解，其中也涉及了一些ES6的知识点。JavaScript知识... 查看详情

javascript易错知识点整理

javascript学习笔记整理day4

##函数####函数是一段在一起，可以做某件事的程序。###优点：控制程序设计的复杂性 1. 提高软件的开发可靠性 2. 提高软件的开发效率 3. 提高软件的可维护性&nb... 查看详情

javascript及angularjs1.x版本学习笔记

本人学习JS和AngularJS时做的笔记。JavaScript：基础知识：定义变量：var（全局或函数作用域）；let、const（块作用域、不提升变量）；Tips：直接使用x=1会将x转换为全局变量，严格模式（“usestrict”）报错；数据类型：Boolean、Number... 查看详情