小虾仁she-CSDN博客

原创模板引擎art-template

使用方法使用script标签引入通过script标签使用在线版本<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>在webpack中使用语法基本语法使用script标签定义模板。type属性需修改为text/html，需要定义id属性在js中，使用template方法使用模板。需要传入的参数为：模板id，数据对象通过 {{对象属性}} 使用

2021-03-06 15:08:08 229

原创 JavaScript-12.解构赋值

数组解构模式结构要匹配，等号运算符两边的结构要一样索引值相同的完成赋值const [a,b,c]=[1,2,3];console.log(a,b,c); //1 2 3const [a,,b]=[1,2,3];console.log(a,b); //1 3const [a,[,b],c]=[1,[2,3],4];console.log(a,b,c); //1,3,4默认值生效条件：当数组成员严格等于undefined时，对应的默认值才会生效const [a

2021-03-06 15:07:50 104

原创 JavaScript-11. localStorage

概述localStorage是一种本地存储数据的方式，并且不会发送到服务器localStorage是持久化的本地存储。除非手动清除，否则数据不会过期操作localStorage.setItem(key,value);localStorage.getItem(key);localStorage.remove(key);localStorage.clear();localStorage.length;注意localStorage的键和值只能是字符串类型。不是字符串类型的会被转化为字符串。

2021-03-06 15:07:36 109

原创 JavaScript-10.cookie

cookie概述cookie属性只有name、domain、path三个属性的属性值相同，才是同一个cookieName和Value最重要的两个属性，创建cookie时必须填写，其他属性可以使用默认值在js中，如果名称或者值包含非英文字母，写入时必须使用encodeURIComponent()，读取时使用decodeURIComponentdocument.cookie='username=kobe';document.cookie=`username=${encodeURIComponent

2021-03-06 15:07:04 86

原创 JavaScript-9. 网络相关知识

ip、域名、URLip：每一台连接到Internet的主机都会分配一个ip地址域名：ip地址符号化，比如www.baidu.com就是域名。一个域名可以对应多个ip地址，比如百度网站被部署到多个服务器；一个ip地址可以对应多个域名，比如一个服务器部署了多个网站DNS：域名解析服务器，用于将域名解析为ip地址URL：俗称网站，格式为协议://域名[:端口号]/路径/文件名[参数=值]。在URL中，可以用ip地址作为域名使用参考博客HTTP状态码定义服务器对请求的处理结果100

2021-03-06 15:06:45 73

原创 JavaScript-8. 事件

目录事件监听事件监听就是让计算机随时发现事件发生，从而执行对应的程序。设置的方式有：设置对象的on****属性通过addEventListener方法设置设置on****属性设置on****属性都是监听冒泡阶段，为DOM 0级事件监听鼠标事件事件名描述onclick当鼠标点击时ondbclick当鼠标双击时onmousedown当鼠标被按下时onmouseup当鼠标被松开时onmousemove当鼠标移动时onmouseente

2021-03-06 15:06:21 78

原创 JavaScript-7. DOM

目录概述document对象概述DOM：Document Object Model(文档对象模型)，是JS操作网页的接口作用是将网页转化为一个JS对象，从而可以进行脚本操作浏览器会根据DOM模型，将HTML和XML解析为节点，由这些节点组成一个树状结构，称为节点树节点DOM的最小组成单元叫做节点。包括多种类型节点，这些节点继承于Node节点树document是文档的根节点，代表整个文档树根节点的两个子节点分别为文档类型节点(<!doctype html>)；顶层容器标签

2021-03-06 15:05:45 107

原创 Javascript-6. 面向对象编程

目录概述document对象概述DOM：Document Object Model(文档对象模型)，是JS操作网页的接口作用是将网页转化为一个JS对象，从而可以进行脚本操作浏览器会根据DOM模型，将HTML和XML解析为节点，由这些节点组成一个树状结构，称为节点树节点DOM的最小组成单元叫做节点。包括多种类型节点，这些节点继承于Node节点树document是文档的根节点，代表整个文档树根节点的两个子节点分别为文档类型节点(<!doctype html>)；顶层容器标签

2021-03-06 15:05:28 68

原创 JavaScript-5. 运算符

目录算术运算符比较运算符算术运算符加法运算符基本用法加法运算符有两个作用：数值相加、字符串连接如果其中一个运算子为字符串，则加法运算符的作用是连接字符串。这时候非字符串会转化为字符串其他情况为数值相加，其他类型的值会转化为数值指数运算符使用**完成指数运算，前一个运算子是底数，后一个运算子是指数指数运算符是右结合，多个指数运算相连时，先进行最右边的运算2**3**2// 等价于2**(3**2)比较运算符关系运算符如果两个运算子都是字符串，按照Unicode码点比

2021-03-06 15:05:15 56

原创 JavaScript-4. 数据转化

目录强制转化自动转化强制转化Number()将任何类型的值转化为数值原始类型// 字符串：如果可以被转化为数值，则转化为相应的数值Number('123'); //123// 字符串：如果不能转化为数值，则转化为NaNNumber('123abc'); //NaN// 空字符串：转化为0Number(''); //0// 布尔值：true转化为1，false转化为0Number(true); //1Number(false); //0// un

2021-03-06 15:03:58 48

原创 Javascript-3. 数据类型

目录简介null和undefined布尔类型数字类型字符串类型对象类型数组函数简介JS的每一个值，都属于一种数据类型。JS的数据类型分为基本数据类型和引用数据类型（对象类型）基本数据类型：数字类型、字符串类型、布尔类型、undefined类型、null类型引用数据类型：对象、数组、函数null和undefinedundefined表示一个“无”的原始值，null表示一个“无”的对象undefinedundefined类型只有undefined这个值。当使用var声明

2021-03-05 12:48:21 215

原创 Javascript-2. 基本语法

值JavaScript包括字面量（混合值）和变量，字面量相当于常量变量JS使用var定义变量JS是一门动态类型语言，变量的类型可以随时修改不带值的变量，它的值是undefined重复声明某个变量，它的值不会丢失。即第二次声明是无效的变量提升JS的工作方式是先解析代码，获取所有被声明的变量，再逐行运行。所以所有变量的声明都会提升到代码的头部，这就是变量提升。eg：第一行在控制台显示未声明的变量a，理论上是错误的，但实际上不会报错。因为变量提升会把a的定义提升到console语句的前面。

2021-03-05 12:47:37 74

原创 JavaScript-1. 语言特性与内存机制

JavaScript语言特性解释性不像C、C++都是先编译后执行的，JavaScript是在程序运行时逐行进行解释。弱类型与动态性JavaScript的变量在定义时不需要指定数据类型。变量的类型在运行时再确定。单线程基于原型的面向对象语言参考JavaScript之语言特性(CSDN)JavaScript语言特性-IBM Developer内存机制参考JavaScript内存机制...

2021-03-05 12:46:57 39

原创 css-17.flex布局

基本概念flex容器使用flex布局的元素，称为flex容器其方式是将display属性设置为flex、inline-flexflex项目flex容器的子元素称为flex项目flex容器的属性displayflex：容器为块级元素inline-flex：容器为行内元素flex-direction设置主轴的方向属性值：row、row-reverse、column、column-reverse默认值：rowflex-wrap设置项目如何换行属性值：wrap、wrap-reve

2021-03-05 12:36:36 90 1

原创 css-16. BFC和IFC

相关概念块级元素CSS属性值display为block、list-item、table的元素块级盒每个块级元素都会至少生成一个块级盒，称为主块级盒；一些元素可能会生成额外的块级盒，比如 li ，用来存放项目符号行内元素CSS 属性值 display 为 inline、inline-block、inline-table 的元素。行内盒所有的非替换元素（ display 值为 inline ）生成的盒都是行内盒所有的可替换行内元素（ display 值为 inline-block 或 inli

2021-03-05 12:36:21 78 1

原创 css-13. 定位

定位脱离文档流的常用三种方式：浮动、绝对定位、固定定位position：设置定位方式relative：相对定位absolute：绝对定位fixed：固定定位static：静态定位（默认值）相对定位相对定位：相对元素原有位置进行定位设置position为relative后，会激活top、bottom、left、right四个属性。其中top和left的优先级更高top、bottom、left、right：正值：向中心方向偏移赋值：向边缘方向偏移特性：相对定位元素没有脱离文档流

2021-03-05 12:35:56 1102 1

原创 css-15. css单位

桌面浏览器浏览器窗口、视口等相关概念视口：包括滚动条html根元素：视口可以看成html元素的父容器，默认情况下，html的宽度等于视口的宽度CSS单位%：相当于父容器宽高的百分比px：像素单位in：英寸单位cmmmptpcem：取决于容器的字体大小，1em=容器.font-sizerem：取决于根元素html的字体大小，1rem=html.font-sizeex：取决于x字母的高度，1ex=x-heightvw：取决于视口宽度，1vw=视口宽度的1%vh：取决于视口高度，

2021-03-05 12:35:34 114 1

原创 css-12. 背景

背景属性background-color：设置背景颜色，应用到borderbackground-image：设置背景图片，从padding开始渲染，设置平铺后会应用到borderbackground-repeat：设置背景平铺no-repeatrepeat默认值repeat-xrepeat-ybackground-position：用于背景定位（从padding开始定位）数值法：background-position:100px 200px; 向右平移100px，向下平移200

2021-03-05 12:35:16 134 1

原创 css-11. 浮动

浮动规则块级元素的盒子会发生遮盖现象元素的内容不会发生遮盖（可以用以实现文字环绕）浮动特征浮动的元素从左到右（从右到左）紧密排列浮动的元素具有块级元素的特征（可以设置宽高、margin、padding），但没有换行符浮动的元素不存在margin塌陷问题浮动的元素脱离了标准流，不再占有原来的位置–>子元素设置浮动之后，父元素如果没有设置高度，会呈现塌陷的效果浮动的元素自适应宽度为包裹内容的宽度以上特性不止针对块级元素<!DOCTYPE html><html

2021-03-05 12:34:55 55 1

原创 css-10. 伪元素与伪类

伪元素不在文档树，但用户可以看到CSS2.1提供了两个伪元素:before 在元素前面插入文本:after 在元素后面插入文本注意：伪元素必须添加content样式，伪元素可以像普通文本元素一样设置样式例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

2021-03-05 12:34:35 95 1

原创 css-9. 标准文档流

特征文本类的内容有空白折叠现象文本类的内容基于底线(中文)或baseline基线(英文)对齐文本类的内容超过了盒子宽度会自动换行标签分类标签可以以两种方式分类：容器级和文本级块级和行内级块级元素所有容器级标签和p标签都是块级元素，eg：div，h1-h6，p可以设置宽高如果没有设置宽度，宽度将会是父级宽度的100%。如果设置了宽高，容器宽高将是设置的大小。如果内容宽度大于所设置的宽高，容器实际宽高将时内容的宽度（容器width和height还是设置的宽高）默认具有换

2021-03-04 23:08:30 51 1

原创 css-8. 盒模型

所有html元素都可以看成盒模型组成content 内容padding 内边距border 边框margin 外边距分类css3中可以利用box-sizing定义盒子模型类型属性content-box：标准盒模型border-box：怪异盒模型（IE低版本会使用）标准的盒模型设置width、height为内容content的宽高元素的宽度和高度：width|height+padding+border+margin大多情况下，默认margin不为0px，padding和bo

2021-03-04 23:06:31 118 1

原创 css-7. 列表样式

列表样式list-style-type：设置列表项目符号类型list-style-image：设置列表项目符号为图片，使用url(“图片路径”)引入list-style-position：设置列表项目符号相对li的位置list-style：复合属性以上属性可以为ul、ol、li设置...

2021-03-04 23:05:13 97 1

原创 css-6. 文字样式

文字样式color：文字颜色font-size：文字大小。可以使用单位(px,em,rem)，也可以使用英文large 、larger、small、smaller、mediumfont-family：字体。设置字体时，可以设置多个字体，用逗号隔开。如果第一个字体有效，则使用第一个字体的样式font-family:"隶书"，"宋体";font-style：字体样式。italic为斜体，normal为正常font-weight：设置文字加粗效果。bold为加粗，normal为正常line-hei

2021-03-04 23:04:17 152 1

原创 css-5. 颜色表示法

颜色表示法十六进制以#开头，每两位代表一种颜色，分别是三原色red、green、blue例如：#000000 黑色#ff0000 红色#ffffff 白色简写法：0=00,f=ff,a=aa#000=#000000#f00=#ff0000rgb表示法rgb(r,g,b)：其中r，g，b是0-255之间的数字来表示例如：rgb(0,0,0) 黑色rgb(255,0,0) 红色rgb(255,255,255) 白色r，g，b也可以用百分比表示，但是不建议使用，因为浏览器兼容性不好

2021-03-04 23:02:26 141 1

原创 css-4. 继承与层叠

继承性在css中，有一些属性，如果给父级元素设置了，那么它的后代元素将会继承这个属性。文字属性可以继承，盒子属性不可以继承文字属性：color、font-系列、line-系列、text-系列盒子属性：background-系列、width、height、border-系列、浮动、定位等选择器的权值选择器的针对性越强，权值越高–>优先级越高权值排序：!important>行内样式>id>类|伪类|属性>标签>通配符选择器权值通配符0

2021-03-04 23:01:22 65 1

原创 css-3. 代码规范

css代码规范选择器与 { 之间必须加一个空格属性与 : 之间不能有空格，而属性值则必须有 font-size: 50px;当一组样式包含多个选择器时，每组选择器必须独占一行 p, .news, .iphone{ }属性必须独占一行，以分号结尾...

2021-03-04 22:59:50 41 1

原创 css-2. css选择器

css选择器用于筛选符合条件的标签通配符（全局）选择器格式： *{ 样式:样式值; }常用用法：清除默认样式 *{  list-style:none;  list-style-type:none; }标签选择器匹配文档中该类型的元素格式：标签名{

2021-03-04 22:57:30 88 1

原创 css-1. 引入CSS

引入CSS的四种方式行内式：直接使用html标签的style属性<h1 style="color: green;text-align: center;">hello</h1>内嵌式：在head标签内，使用style标签引入css<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&l

2021-03-04 22:56:39 69 1

原创 HTML重点内容

前言从今年1月份左右我开始跟着慕课网的前端课程学习前端，断断续续学习了两个多月了。期间一直使用有道云笔记记录学习的内容，现在集中发布在csdn中，供大家参考。主体DTDDocType Definition文档类型定义：用来定义文档的规范。指明浏览器使用的是哪个版本的html书写规范。内部声明：<!DOCTYPE html>外部声明：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR

2021-03-04 22:50:19 108 2

原创 Hadoop集群部署

该教程部署的版本为Hadoop2.7.7用户名：amax集群机器：node01：masternode05~node10：slave节点大致流程选定一个节点作为master(本次部署使用node01作为master，node05~10作为slave节点）配置节点间可以免密ssh，以及免密ssh到localhost在所有节点安装配置java环境在master配置hadoop，然后将配置好的hadoop包复制到其他slave节点在master开启hadoop免密ssh一般情况下，.ss

2020-11-10 20:50:56 187

原创 synchronized在线程同步的作用

引言：不同于《Java核心技术》的顺序，我第一篇先介绍volatile，在介绍synchronized。因为我看完volatile后，对synchronized又有了一些困惑。这一篇将我的这些困惑写出来。synchronized锁的是什么？...

2020-02-27 22:52:08 113

原创 volatile在线程同步的作用

引言：近期在家通过《Java核心技术》学习Java基础，遇到了一些理解不了并且在书里找不到答案的问题，于是想通过博客记录并且复现这些问题。希望可以给大家带来帮助。这也是我写的第一篇博客，如果有错误的话，欢迎大家指正。JVM在运行时候如何分配内存首先我想介绍一下Java虚拟机（JVM）在运行时候内存分配的问题，这有助于理解volatile在线程同步的作用。Java内存模型将内存分为主内存和工作内...

2020-02-25 22:42:09 283

weixin_43552734的博客