![](https://img-blog.csdnimg.cn/20190926184718119.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端开发
学习前端的笔记及技术分享
我本浪人--游吟世间
乖 摸摸头
展开
-
ES6箭头函数
箭头函数:语义化函数:(箭头函数的来源:lambda表达式、c++、java、coffeeScript (胖箭头、瘦箭头)、js)基础语法: <script> //传统函数 function foo(a, b) { console.log(a * b);//结果为6 } foo(2...原创 2019-10-23 13:14:34 · 235 阅读 · 0 评论 -
ES6对数字的操作
新的整形字面量: <script> let num = 0x10; //16进制 let num1 = 0b100; //2进制 let num2 = 0o15; //8进制 console.log(num1); </script>新的Number方法:Number.isNaN();...原创 2019-10-23 10:57:15 · 164 阅读 · 0 评论 -
使用Chrome浏览器时,console.log()语句无效的问题
最近使用Chrome浏览器执行console.log()语句时,无法输出。在网上大概看了下解决方法:按下图:将过滤器取消;Default levels选择Default;问题就可以解决了。...原创 2019-10-23 10:46:02 · 2267 阅读 · 0 评论 -
ES6参数的处理
ES6参数的处理:1、参数默认值问题:基本使用方法;在默认值中使用其他变量;2、剩余运算符(Rest):把散列元素的变成一个集合;使用场景:在函数或解构中使用;3、扩展运算符:把一个集合变成散元素;函数参数传递,数组和对象的复制;4、模拟命名参数:使用对象的解构赋值来模拟命名参数;参数默认值问题:①基本使用方法: function fn(a, b, c) { ...原创 2019-10-23 10:02:38 · 365 阅读 · 0 评论 -
ES6数组结构赋值与对象解构赋值
<script> //数组的解构赋值 let arr = [1, 2, 3]; // 传统方式 let a = arr[0]; let b = arr[1]; let c = arr[2]; //数组解构赋值,对应位置赋值 // 必须有初始化值 ...原创 2019-10-22 15:25:57 · 584 阅读 · 0 评论 -
jQuery整体框架封装
了解jQuery整体框架①:封装作用域(闭包) <script> //闭包 (function() { function jQuery(id) { console.log(id); } })(); jQuery('#id') ...原创 2019-10-22 11:10:08 · 169 阅读 · 0 评论 -
HTML学习——简单表格嵌套实例
TABLE嵌套<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>花房姑娘</title> <style> a { text-decoration: none; } table tr:fi...原创 2019-03-30 20:49:37 · 2994 阅读 · 0 评论 -
Animation
animation 属性是一个简写属性,用于设置动画属性。属性值详解如下: animation-name//规定需要绑定到选择器的 keyframe 名称。 animation-duration//规定完成动画所花费的时间,以秒或毫秒计。 animation-timing-function//规定动画的速度曲线。...原创 2019-09-08 15:04:51 · 407 阅读 · 0 评论 -
CSS3弹性盒子布局
水平垂直居中1、已知宽高 ①:绝对定位,50% margin挪回一半②:绝对定位四个方向为0,实现水平垂直居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>水平垂直居中</title> &...原创 2019-07-25 09:44:07 · 166 阅读 · 0 评论 -
CSS3 Columns多列布局
实例一:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...原创 2019-07-21 10:18:37 · 369 阅读 · 0 评论 -
CSS3文字溢出
文字属性:文本溢出1、text-overflow: clip|ellipsis|ellipsis-word 属性值详解如下: clip //不显示省略标记(…),而是简单裁切 ellipsis //当对象文本一出时显示省略标记(…),省略标记插入的位置是最后一个字符white-space:nowrap 文本不会换行,直到遇到 <br> 标签为止。(css...原创 2019-07-20 10:07:06 · 419 阅读 · 0 评论 -
CSS3常用属性
一、圆角:1、border-radius 圆角一个值/四个值/每个值拆分成两个方向值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圆角</title> <style> ...原创 2019-07-19 22:38:48 · 170 阅读 · 0 评论 -
JS:打印出10000以内的所有质数
JS:打印出10000以内的所有质数质数:(0和1都不是质数)在大于1的自然数中,只能被1和本身整除。自然数:(0和正整数)方法一:var count = 0;for (var i = 2; i <= 10000; i++) { for (var j = 2; j <= i; j++) { if (i % j == 0) { ...原创 2019-06-19 17:55:45 · 3718 阅读 · 0 评论 -
JS:引入及阻塞
引入JS的两种方式:①嵌入代码:在HTML中使用(可以有多个代码块)②引入外部文件:下载、解析、执行(从上往下)问题?①:为什么元素获取不到?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document&l...原创 2019-06-19 16:30:39 · 5102 阅读 · 0 评论 -
ES6字符串拓展
字符串的基本使用:多行字符串、字符串中变量的拼接。以下分别是传统和ES6字符串的换行与变量拼接的方法:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...原创 2019-10-22 10:59:32 · 129 阅读 · 0 评论 -
ES6转化为ES5
将ES6语法转化为ES5语法:使用babel工具来实现:网站链接:babel官网选择浏览器:使用方法:EG:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte...原创 2019-10-21 16:02:05 · 1315 阅读 · 0 评论 -
audio/video媒体
基本使用:<audio src="./source/song.mp3"></audio><video src="./source/video.mp4“ poster></video>var audio = new Audio(‘song.mp3’);var audio = document.createElement(‘audio’...原创 2019-10-16 19:31:32 · 224 阅读 · 1 评论 -
HTML5(概述)
HTML5概述、新特性:学习过程:HTML5基础——HTML5进阶——HTML5答疑发展历史:(之前所说的HTML指的是HTML4.0.1版本)HTML4.0.1引入了XML,制定为XHTML1.0HTML5理念:1、避免不必要的复杂2、支持已有的写法3、解决实际问题4、优雅降级5、用户优先 :用户>开发者>浏览器厂商>标准制定者>理...原创 2019-10-16 16:00:44 · 515 阅读 · 1 评论 -
CSS3选项卡
选项卡demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title> <style> .wrapper { position: rel...原创 2019-07-18 22:15:34 · 267 阅读 · 0 评论 -
CSS3常用选择器
属性选择器:E[att] 属性E[att='val'] 属性att的值为"val"的元素E[att~='val'] 属性att有多个值,val为其中一个E[att^='val'] 属性att的值以"val"开头的元素E[att$='val'] 属性att的值以"val"结尾的元素E[att*='val'] 属性att的值包含"val"的元素<!DOCTYPE htm...原创 2019-07-17 23:24:38 · 107 阅读 · 0 评论 -
CSS:前景回顾
CSS三种引入方式:①:内部样式表style:②:外部样式表link:需异步加载css文件③:行内样式:(权重最高)<body style="background:pink">若使用这三种方法给body设置背景颜色,则显示③所设置的背景颜色(行内样式的权重最高,会覆盖其余方式所设置的同种属性)若使用①、②方式设置样式,则谁先完成加载,谁的属性就会被覆盖(后完成...原创 2019-07-07 16:41:32 · 215 阅读 · 0 评论 -
CSS:position属性定位
position属性定位:position从字面意思就是指定块的位置。在CSS布局中,position属性非常重要,许多特殊容器的定位必须用到position来完成。position的属性值包括:①:absolute(绝对):相对于父级元素的位置定位②:relative(相对):③:static(静态):默认值,它表示块保持在原本应该在的位置,按照在HTML中出现的顺序显示...原创 2019-06-13 14:50:00 · 880 阅读 · 1 评论 -
CSS:浮动定位与清除
浮动定位:(浮动定位是CSS布局中非常重要的手段之一)float浮动属性可以设置对象左右移动,直到其边缘碰到父元素的边框或另一个浮动元素的边缘。CSS中包括DIV在内的所有元素都可以以浮动方式进行显示,其优点是浮动框不在文档的普通流(脱离文档流),使得排版更加简单,且具有良好的伸缩性。float属性可以设置为:left、right、none、inherit ,默认值为none。...原创 2019-06-04 18:36:05 · 970 阅读 · 0 评论 -
jQuery简介
jQuery简介jQuery是一个高效、精简并且功能丰富的JavaScript工具库。jQuery特点:语法简单、开发高效;文件够轻、短小精悍;插件丰富、拓展性强;浏览器支持性高;学习过程:——常用方法(掌握jQuery常用方法,提高开发效率)——高级方法(学会高级方法,方便开发者拓展)——熟练使用(熟练运用jQuery,轻松完成项目)——理解原理(理解原理,并能够独立...原创 2019-09-26 11:18:16 · 212 阅读 · 0 评论 -
Transition过渡动画
transition过渡动画transition: property duration timing-function delay; transition-property//规定设置过渡效果的 CSS 属性的名称。 transition-duration//规定完成过渡效果需要多少秒或毫秒。 transition-timing-fun...原创 2019-09-04 13:37:42 · 992 阅读 · 0 评论 -
Transform形状变换
Transform形状变换transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行移动、缩放、旋转或倾斜。①移动: translatetranslateX()translateY()translateZ() //有3D效果translate3d(x,y,z) //有3D效果简写:translate()——translate(x,y)<...原创 2019-09-03 18:39:25 · 518 阅读 · 0 评论 -
ES6核心语法一
1、初识ES6:ECMAScript与JavaScript区别和联系:ECMAScript实质上是JavaScript的语言规范,而JavaScript是ECMAScript的一个具体实现,只不过在实现过程中新增了DOM和BOM。(之前我们所指的JS是按照ECMAScript5规范编写的。)ECMAScript6学习步骤:背景介绍——数据——模块化——集合——异化发展背景:...原创 2019-09-26 18:43:27 · 155 阅读 · 0 评论 -
ES6核心语法二
传统字符串:传统字符串的问题:多行字符串问题、字符串中使用变量传统字符串拼接会出现许多问题,例如需要使用“ ”来连接字符串,以及在换行上容易出现许多问题。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view...原创 2019-09-27 10:56:27 · 153 阅读 · 0 评论 -
ES6核心语法三
ES5构造函数(构造函数相当于是一张图纸,通过图纸可以构造出想要的实例,而实例间是相互独立的,只是通过同一套模板实现不同的实体) function Person(name, age) { //this指向当前对象 this.name = name; this.age = age; } ...原创 2019-09-27 11:49:44 · 131 阅读 · 0 评论 -
前端框架
为什么要使用前端框架?保持UI和状态同步。当前前端主流框架:①:React:优点:虚拟DOM;更加轻量;JSX语法;Facebook支持;缺点:官方文档没有体系化;JSX语法;②:Angular(MVVM模式)优点:MVVM模式;双向数据绑定;依赖注入缺点:语法复杂,使用typescrip;没有向后兼容;③:Vue优点:使用HTML模板;详细文档并且中文化;...原创 2019-09-27 15:27:56 · 135 阅读 · 0 评论 -
CSS3:3D变换动画
CSS3:3D变换动画2D状态下,给元素设置沿着X轴旋转45deg<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...原创 2019-10-22 11:09:41 · 195 阅读 · 0 评论