- 博客(289)
- 收藏
- 关注
RSS订阅原创 排他思想详解
核心思路一1. 获取目标元素，得到一个存储元素对象数的组； 2. 我们先把所有目标元素的指定样式初始化 （干掉所有人）；3. 再重新给指定的元素对象添加自己想要的样式（留下我自己）；
2022-05-31 20:47:18
905
原创 WebAPI-修改元素样式的方法汇总
设置/修改元素样式 1方式一通过元素的 style 属性来设置样式；元素对象的 style 属性也是一个对象，可以通过 . 的方式来设置或修改样式。语法：元素对象.style.样式属性 = 属性值注意：通过该方式操作样式时，样式属性要使用驼峰命名法。通过该方式产生的样式是行内样式，权重比较高。<div>div标签</div>// 获取元素let el = document.querySelector('div');// 设置样式el.style
2022-05-29 20:43:34
636
原创 Ajax-发送请求的五个步骤
概述Asynchronous Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。ajax 是一种技术方案，依赖浏览器提供的 XMLHttpRequest 对象发出 HTTP 请求和接收 HTTP 响应；实现了在页面不刷新的情况下和服务器进行数据交互。本质是在HTTP协议的基础上以异步的方式与服务器进行通信。同步和异步概念：同步是阻塞模式，异步...
2020-03-14 12:45:19
1834
原创 CSS3-字体图标的使用
字体图标具有轻量、灵活、兼容性强的特点；比图片有较好的可编辑性，占用空间小、可复用性强，从而被广泛使用。下面详细介绍一下字体图标的下载：首先要到一些字体图标库网站去下载需要的字体图标，一般 阿里巴巴矢量图标库 中都能找到自己需要的图标进入网站后进行登录，没有账号注册后再登录即可登录完成后在搜索栏中搜索自己需要的图标或直接在图标库 中查找找到需要的图标后将其加入购物车...
2020-03-12 11:21:50
709
1
原创 CSS3-flex伸缩布局
概述CSS3 中在布局方面做了非常大的改进，新增了伸缩布局通过该布局方式开发人员对块级元素的布局排列会变得十分灵活，其强大的伸缩性，在响应式开中发挥极大的作用。将指定元素的 CSS 样式中的 display 属性设置为 flex，这个元素就是一个伸缩布局的容器，其内部的子元素会从左到右水平排列（效果很像浮动）。简单例子：.box { width: 800px; /* 设置父级盒子为...
2020-03-09 21:51:03
367
原创 CSS3-@keyframes动画
在 CSS3 中可以通过 @keyframes 来创建动画，由当前样式逐渐变为新样式的动画效果。创建动画的语法就像创建 JS 函数函数一样，动画需要指定动画的名称，使用时需要通过名称来调用。创建语法一：@keyframes 动画名称 { /* 从 from 指定的样式 */ from { css样式 } /* 过渡到 to 指定的样式 */ to { css样式 }}创...
2020-03-08 19:29:53
439
原创 React-高阶组件
高阶组件是 React 中复用组件逻辑的一种技巧，高阶组件是一个函数，接收需要包装的组件，返回值为增强后的组件。实现思路：高阶组件内部创建一个类组件，在这个类组件中去提供复用状态的逻辑代码，通过 prop 将复用的状态组件传递给被包装组件。创建高阶组件步骤：创建一个函数，名称约定以 with 开头给函数设置形参用于接收传过来的组件，参数以大写字母开头（作为参数组件使用）在函...
2020-02-18 14:49:33
184
原创 React-render props模式
React 中组件复用主要有两种模式，一种是高阶组件另一种就是 render props 模式这两种方式并不是新的 API ，而是利用 React 自身特点的编码技巧，演化而来的固定模式render props 模式是一种非常灵活并且复用性非常高的模式，可以将一些特定的行为或功能封装成一个组件供别的组件使用。主要实现思路：将要复用的 state 状态和操作 state 的方法封装到一个...
2020-02-18 09:49:56
716
原创 React-propTypes类型校验
有时在组件之间进行传递数据时需要对数据的类型进行校验，react 中提供了类型检查的模块 prop-types 通过该模块可以对传递的数据进行类型检测，出于性能方面的考虑，propTypes 仅在开发模式下进行检查。使用方法：使用时首先要导入该模块：import PropTypes from 'prop-types'导入完成后，为接收数据的组件设置类型检查：// myCompo...
2020-02-15 09:35:50
956
原创 React-defaultValue设置默认值
在 react 中给 input 添加了 value 属性这个表单控件就会成为受控组件，如果不想成为受控组件又想设置默认的 value 值，可以通过 react 提供的 defaultValue 属性来设置import React from 'react'import ReactDOM from 'react-dom'class CommentList extends React.Comp...
2020-02-15 08:57:22
2785
原创 React-context上下文
非父子之间的通信可以通过状态提升的方式来解决，但是当组件嵌套太深时就比较麻烦了，这时可以使用 react 中的上下文来解决（实际开发中使用状态管理工具 redux）通过 react 的 createContent() 方法创建一个 context（上下文）；这个上下文里面有两个组件 Provider 和 ConsumerProvider：提供者，用于提供数据Consumer：消费者，使用数...
2020-02-15 08:42:50
223
原创 React-非受控组件
没有受 React 控制，没有设置 value 属性的组件就是非受控组件；如果想要获取非受控组件中的值需要通过 DOM 操作，通过 ref 属性来获取。步骤：首先在 constructor 构造中创建一个引用let iptRef = React.createRef()在组件中通过 ref 将表单和引用绑定在一起<input ref={this.iptRef} />...
2020-02-13 17:16:37
136
1
原创 React-修改状态
在 React 中不能直接修改组件的状态，需要通过 setState() 来进行修改语法：setState(updater[, callback])updater 更新器callback 更新后执行的回调函数修改状态比如想要将 state 中的 content 值修改为 ‘香香’state = { content: '大熊'}通过直接修改的方式并不能触发视图的更新:...
2020-02-13 13:36:54
1047
原创 React-特殊标签属性
在 React 中，标签的 class 属性要用 className 代替；行内的样式属性需要使用对象的形式书写，多个单词组成的属性使用驼峰式命名；最终要用 {} 在最外层对样式进行包裹；<able 标签的 for 属性要替换成 htmlFor。示例：main.css* { margin: 0; padding: 0;}.box { width: 200px; ...
2020-02-12 21:52:02
964
原创 React-受控组件
所谓的“受控组件”简单来说就是组件的状态受 React 控制。在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。...
2020-02-12 17:58:59
222
原创 React-注册事件
文章目录注册事件事件处理函数中 this 问题事件传参获取事件对象注册事件React 元素的事件处理与 DOM 元素有些不同，React 通过事件绑定属性的方式注册事件时要采用驼峰式命名，其对应的属性值为一个函数而不是字符串。示例：import React from 'react'import ReactDOM from 'react-dom'class Hello extends ...
2020-02-11 12:27:13
622
原创 React-创建组件、父传子、子传父
组件是 React 的核心，是 View 的重要组成部分；React 中的组件分为两种：一种是函数组件（使用函数来创建组件），另一种是类组件（通过类创建的组件）。通过函数来定义组件通过函数定义的组件被称为无状态组件，在定义时函数名称的首字母必须要大写，React 在解析时会按照组件的形式去解析函数值必须要有返回值，返回值为 jsx 语法；使用时将函数名作为标签使用，可以是单标签 <ta...
2020-02-09 14:47:16
380
原创 ES6-class关键字
class 关键字es6 新增了 class 关键字，这是 es6 的新语法，用来实现 es6 中面向对象编程；可以通过该关键字来定义类。class不存在变量提升，所以需要先定义再使用。ES5:// 定义一个构造函数function Preson(name, age) { this.name = name this.age = age}// 创建 preson 实例...
2020-02-07 15:21:27
514
原创 React-虚拟DOM
打开浏览器控制台，在 Elements 中会发现，只有数据改变的部分 DOM 才会进行更新；是因为在 react 中，数据发生改变时是通过虚拟 DOM 更新的；当数据发生改变时，会用最新的数据去修改模板形成新的虚拟 DOM，新的虚拟 DOM 和旧的 虚拟DOM 通过 diff 算法进行比较找到需要更新的地方进行更新#### Diff 算法在 React 中有两种假设：两个不同类型的元素会产生不同的树开发者可以通过 key 属性指定不同树中没有发生改变的子元素
2020-02-06 09:29:59
150
原创 React-jsx语法
jsx语法是 react 的模板语法，是 react 的灵魂；通过该语法可以很方便的创建 react 对象jsx 不是字符串也不是 html，就是 react 对象，其底层就是 React.createElement()；所以使用 jsx 语法时还是要引入 react 核心包jsx 只能有一个根节点；所以多个根节点时要再用一个元素将其包起来或者使用 <> </> 将其包...
2020-02-05 00:16:47
231
原创 React-渲染元素
渲染 react 元素，首先要引入相关的包// 导入核心包；用于创建 react 对象import React from 'react'// 用于将 react 对象渲染成 DOMimport ReactDOM from 'react-dom'创建 react 元素语法：React.createElement(type, [props], [....
2020-02-04 15:50:42
166
原创 React-使用脚手架初始化项目
全局安装 yarn（Yarn是facebook发布的一款取代npm的包管理工具）npm install yarn -g查看版本号：yarn --version使用脚手架初始化一个项目的步骤安装相关的脚手架：create-react-app执行全局安装命令：yarn global add create-react-app或npm install create-react-...
2020-02-04 14:23:10
423
原创 CSS3-3D转换效果
CSS3 中是通过 transform-style 样式属性来实现 3D 立体效果的，为父元素设置了该属性其子元素就会具有 3D 效果，对应的属性值如下：flat 所有子元素在2D平面呈现preserve-3d 所有子元素在3D空间中呈现举个例子：CSS:.box { width: 300px; height: 300px; margin: 20px auto; /*...
2020-02-02 20:22:25
260
原创 CSS3-透视效果
CSS3 中的 perspective 属性用于设置元素距视图的距离，单位为像素（px）； 设置了 perspective 属性的子元素可以实现透视效果（就是由远及近的效果），设置该属性的元素本身没有。透视只是视觉上呈现出有近大远小的效果， 实际上还是在一个平面中；透视并不是真正的 3D 盒子， 无法构成真正 3D 空间。示例：CSS:.box { width: 400px; he...
2020-02-02 14:45:22
5367
原创 CSS3-transform 2D转换
transform 转换，是CSS3最具颠覆性的特性之一，既可以应用2D转换，也可以应用3D转换。2D转换：通过该属性可以对元素在平面上进行缩放、旋转、移动和斜切等操作。通过 transform 中的方法对元素进行缩放，移动等不同于传统方法（设置 width、height等）会影响页面的布局，transform 中的方法并不会影响页面的布局。缩放通过 scale() 方法将元素根据中心原点...
2020-01-31 17:52:40
257
原创 CSS3-过渡动画
CSS3 中的 transition 属性用于实现元素从一种样式变换为另一种样式时为元素添加过渡效果。transition 属性是一个综合属性，可以简写也可以单独设置某个单一的属性。综合设置语法：transition: property duration timing-function delay;property 需要过渡的样式属性（必要）；值为 ...
2020-01-30 16:31:03
269
原创 CSS3-径向渐变
径向渐变就是从一个中心点开始向四周产生渐变的效果；CSS3 中提供了实现径向渐变的 radial-gradent() 函数；使用该函数时，至少需要两个终止色。语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);shape 用于设置径向渐变的的形状；未指定渐变形...
2020-01-29 16:37:01
510
原创 CSS3-背景原点、背景裁剪
background-origin 用于设置背景图像相对于什么位置来定位（背景图的起点）。语法：background-origin: padding-box|border-box|content-box;属性值作用border-box背景相对于元素边框来定位； 从 border 区域（含border）开始显示背景图像padding-box背景相对于内边距来定位...
2020-01-26 16:42:55
386
原创 CSS3-文本阴影
文本阴影是通过 text-show 样式属性来设置；通过该属性可以向文本添加一个或多个阴影。语法：text-shadow: h-shadow v-shadow blur color;h-shadow 水平阴影的位置（可以是负值，正值向右偏移）v-shadow 垂直阴影的位置（可以是负值，正值向下偏移）blur 阴影模糊距离clor 阴影的颜色示例：CSS:h1 { te...
2020-01-26 14:35:16
1699
原创 CSS3-线性渐变
CSS 通过 linear-grandient() 函数来创建一个表示两种或多种颜色的线性渐变的“图像”；其结果属于 <gradient> 数据类型，是一种特别的 <image>数据类型。语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);direction...
2020-01-26 11:11:35
387
原创 CSS3-:empty、:not()选择器的用法
`:empty` 用于选择指定的没有子元素（包括文本节点）的元素。`:not(selector)` 选择每个元素不是指定的元素或选择器部分；就是取非。
2020-01-25 00:14:44
1122
原创 CSS3-属性选择器
属性选择器通过标签中存在的属性来选择特定的 HTML 元素语法：element[Attribute_Name]element HTML 元素Attribute_Name 属性名分类描述示例E[att]选择属性为 att 的 E 元素input[name]E[att = “val”]选择 att 的属性值为 val 的 E 元素input[auto...
2020-01-24 18:41:44
141
原创 HTML5-自定义属性
HTML5 中规定所有的自定义属性必须以 data- 开头；通过 el.getAttribute() 和 el.setAttribute() 方法可以获取和设置自定义属性。在 HTML5 中，所有以 data- 开头的属性都会存储在标签的 dataset 属性中，通过该属性也可以获取所有的自定义属性。<section data-id="123" data-intro="section 标...
2020-01-24 18:26:14
302
原创 HTML5-新增classList属性
HTML5 为标签新增了 classList 属性，通过该属性可以获取指定标签中 class 属性对应的值，获取到的值为一个伪数组，伪数组中存储的就是类名。classList 属性的 __proto__ 上有许多方法，比如：add()、move()、toggle() 等，通过这些方法可以对类名进行添加、移除、切换等操作。<header class="one two three">&...
2020-01-24 17:54:38
180
原创 HTML5-IE9以下不支持 html5 标签的解决办法
2008年W3C 发布了HTML5 的工作草案，HTML5 尽可能的为开发者提供了许多急需的功能；这些功能包括更强大的 CSS3、表单验证、音频视频、本地存储、地理定位、绘画（Canvas）、Web 通信等等。对于 IE 来说，H5 的相关内容在IE9以下的浏览器普遍存在兼容性问题，对于html5的语义标签的兼容问题，可以通过 htmlshiv.js 来解决。使用时在页面中通过 script ...
2020-01-24 16:32:32
448
原创 Node.js-Nodejs操作mongodb数据库
Node.js 操作 mongodb 数据库首先要通过 npm i mongodb 命令安装第三方包 mongodb，安装完成后通过如下示例中的相关步骤即可操作 mongodb 数据库了。const mongodb = require('mongodb')// 1. 获取客户端对象const mongodbClient = mongodb.MongoClient// 连接数据库的地址（...
2020-01-21 22:21:27
224
原创 Node.js-post请求
客户端发送 POST 请求时请求的内容全部的都在请求体中，http.ServerRequest 并没有提供内容为请求体的属性，这是因为等待请求体传输可能是一件耗时的工作，并且恶意的 POST 请求会大大消耗服务器的资源，所以 Node.js 默认不会解析请求体，当需要的时候，需要手动来获取。data 事件当请求传递的时候会触发该事件end 事件当参数传递完成后会触发该事件...
2020-01-20 17:50:11
197
原创 2019最新Web前端面试、视频讲解
链接: https://pan.baidu.com/s/1P6b-sp8X80xhzmLNhYY-XQ 提取码: w1d4
2019-12-25 15:08:44
752
原创 2018年11月黑马java
链接: https://pan.baidu.com/s/1k9HGIPKUVyqYQGo0AejBIA 提取码: 9b5s
2019-12-25 15:03:28
276
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人