- 博客(51)
- 收藏
- 关注
RSS订阅原创 jquery日历插件daterangepicker全面详解汇总
引入插件库<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script><script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterange
2020-06-02 18:06:10
7211
原创 自定义事件与触发 Event()
参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/Event浏览器支持：Event() 构造函数, 创建一个新的事件对象 Event。语法new Event(type, option);参数说明：type 是DOMString 类型，表示所创建事件的名称。option 可设置以下属性：bubbles 默认值为 false，表示该事件是否冒泡。cancelable 默认值为 false， 表示该事件能否被取消。com
2020-05-14 15:36:07
849
原创 H5开发中需要掌握的基础知识总结
什么是H5开发？有人说H5就是html5，H5开发就是HTML5开发。我以前也是这么认为，后来在一个直播课中听了老师对H5的讲解，感觉比较客观全面。大意义是，H5开发不仅仅是使用 html 和 html5 的技术写一个简单的网页那么简单。而是指前端技术不断发展，到HTML5这个节点的时候，各方面技术已经成熟。所以，就以此节点命名，代表所有的前端技术栈，统称"H5开发"。 H5开发涉及多端领域，...
2020-02-18 18:07:14
2003
原创 JS/HTML 与后台数据交互基础案例详解
文章目录1. form 表单提交2. ajax 原生代码提交3. Jquery 中的 ajax 封装使用下面列举 3 种常用的方法。1. form 表单提交普通的 form 表单提交数据时，页面会跳转到提交地址页。这里提交的地址 http://localhost/index.php 代码为:<?php echo 'GET--'.json_encode($_GET).'<b...
2020-02-11 23:56:33
2076
原创 ajax 版本L1L2知识点全面收集整理
文章目录什么是AjaxXmlHttpRequest 对象属性XmlHttpRequest 对象方法XmlHttpRequest 对象事件什么是AjaxAjax 全称：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）AJAX 不是新的编程语言，而是一种使用现有标准的新方法。是一种用于创建快速动态网页的技术。其优点是在不重新加载整个页面的...
2020-02-11 23:26:49
236
原创 容易被忽略的函数相关知识收集整理
文章目录函数的 name 属性双冒号运算符尾调用尾调用优化尾递归尾递归优化函数的 name 属性新增函数的 name 属性，返回该函数的函数名。//这个属性早就被浏览器广泛支持，但是直到 ES6，才将其写入了标准。function foo() {}foo.name // "foo"//如果将一个匿名函数赋值给一个变量时：//ES5 的name属性，会返...
2020-02-07 14:17:25
173
原创 ES6 函数参数默认值处理
ES6 新规范中可以给函数的参数指定默认值。//ES5 的一种变通方法function run(x){ x = x === undefined ? 0 : x; console.log(x)}run(); //0run(false); //falserun(8); //8//ES6 新增function run(x=0...
2020-02-07 14:08:16
500
原创 ES6 箭头函数语法大全
es6 箭头函数和参数文章目录箭头函数箭头函数ES6 允许使用箭头函数 =>。它表达式的语法比函数表达式更简洁，它没有自己的 this，arguments，super，new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。箭头函数有几个使用注意点：1.函数体内的 this 指向该函数定义时当前作用域中的 this。2.不可以当作构造函数，...
2020-02-07 13:48:20
315
原创 Range 对象
文章目录对象只读属性对象方法Range 对象表示一个包含节点与文本节点的一部分的文档片段。浏览器支持：IE9+ 及主流浏览器都支持，其中有少数几个方法个别浏览器不支持。获取 Range 对象1.Document.createRange 方法创建 Range。var range = document.createRange();2.通过 Document 对象的构造函数 Range()...
2020-01-27 00:55:17
758
原创 Selection 对象
获取 Selection 对象var selObj = window.getSelection();//或者 document.getSelection();Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。术语锚点（anchor）：锚指的是一个选区的起始点（不同于HTML中的锚点链接）...
2020-01-26 01:14:12
983
原创 contentEditable 中光标控制
文章目录简易 div 输入框1.获取光标位置2.设置光标位置3.设置选中区域4.获取选中内容5.在光标处插入内容简易 div 输入框HTML5规范引入了 contenteditable 属性，它几乎可以用在任何元素上，只要添加这一属性 即可变为可编译区域。查看详情一个简单的 <div> 输入框： <style> .editdiv{ min-heigh...
2020-01-22 17:59:33
5118
1
原创 textarea 高度自适应和光标控制
文章目录相关知识点封装工具相关知识点textatea 输入框特点具有默认的宽度和高度，输入内容到边会自动换行，可设置 white-space:pre; 使其水平不会自动换行除非按下enter键。无论是否设置高度，输入内容高度超过会出现滚动条，可监听其 scrollHeight 使其高度随内容高度自适应。输入中按下enter换行时根据浏览器不同会在光标处插入换行符 ‘/r/n’ 或 ‘/...
2020-01-22 12:33:23
1137
原创 光标与光标位置
文章目录设置光标的颜色光标控制基础API封装方法设置光标的颜色输入框光标默认颜色和输入框文字颜色相同，高度随字体大小改变。1.利用文字镂空模拟实现input,textarea { color: red; /* 光标的颜色随文本颜色*/ -webkit-text-fill-color: transparent; /*让文本颜色透明*/ text-shadow: 0px...
2020-01-21 18:06:37
3455
原创 移动端软键盘遮挡问题
文章目录scrollIntoView 介绍防遮挡具体使用利用 scroll 实现防遮挡scrollIntoView 介绍移动端的H5页面，当输入框元素获取焦点时，会吊起软键盘，如果输入框被软键盘遮挡了，则页面会发生滚动使输入框显示在可视区。浏览器这种默认处理机制在元素设置了绝对定位或设置了html,body{height:100%;}时可能会失效，通常需要手动处理。防软键盘遮挡的处理思路：...
2020-01-21 12:36:52
1129
原创 页面编辑器API
当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。当使用 contentEditable时，调用 execCommand() 将影响当前活动的可编辑元素。简单说，就是 document 具有 execCommand 方法，可以操纵具有属性 contentEditable 的元素中的内容。contentEdita...
2020-01-20 18:49:46
620
原创 vue中px自动转rem插件使用
在用vue写移动端的项目时会用到rem适配，而将px计算转换rem比较麻烦也不好修改，并且许多UI插件使用的单位仍然是px,这时我们可以使用 postcss-pxtorem 工具帮助我们自动转换。以 vue-cli2.0 创建的项目为例：1.在 src/assets/js/ 文件夹下创建 rem.js 文件，自定义 html 的 font-size 大小，例：/* 移动端适配 */;(fu...
2020-01-20 12:18:54
5394
原创 移动端文件上传和图片压缩
HTML5中，input 元素新增 accept，capture 属性可用于在手机端调用相册和相机。accept 允许选择的文件类型。详情capture 调用设备的摄像头或麦克风。详情浏览器支持：Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 6 都支持。大致规范如下：1.当 accept=“image/*” 时，capt...
2020-01-20 10:58:25
786
原创 JS 对象 Object
文章目录Object 对象的属性和方法Object 静态方法Object 是一个构造函数，当然他也是一个对象。ECMAScript 中的所有对象都由这个对象继承而来，Object 对象中的所有属性和方法都会出现在其他对象中。创建实例对象var obj1 = { a:1, b:2 }; //1.字面量语法，内部自动调用了 new Object()var obj2 = ...
2020-01-17 11:28:36
155
原创 Object.create 方法
Object.create(proto,prop) 创建一个新对象，使用现有的对象来提供新创建对象的原型对象。/*参数 proto 新创建对象的原型对象 prop 可选。如果没有指定为 undefined，是要添加到新创建对象的可枚举属性(设置属性描述)*/-------------------------------------------------------------...
2020-01-17 11:25:35
2240
原创 JS 对象概念与数据类型
文章目录对象的概念数据类型对象的概念对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，称之为对象里面的属性和方法）。JavaScript中的3大对象，分别是本地对象、内置对象和宿主对象。1.本地对象与宿主无关，独立于宿主环境的ECMAScript实现提供的对象。本地对象就是 ECMA-262 定义的类（引用类型）。需要通过new来创建所需的实例对象。包括：Object、...
2020-01-17 09:46:25
149
原创 ES6 解构赋值
文章目录数组解构赋值对象解构赋值字符串的解构赋值数值和布尔值的解构赋值函数参数的解构赋值圆括号使用解构赋值常见用途ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。数组解构赋值只要等号两边的模式相同，左边的变量就会被赋予对应的值let [a, b, c] = [1, 2, 3]; // a = 1, b = 2...
2020-01-16 12:46:51
107
原创 JS 变量
文章目录ES5 基础ES6 新增变量声明ES5 基础变量是存储信息的容器。命名规则如下：1.变量必须以字母开头2.变量也能以 $ 和 _ 符号开头（不推荐这么做）3.变量名称对大小写敏感（y 和 Y 是不同的变量）声明（创建） JavaScript 变量：var name; //未赋值的变量，其实际值是：undefinedname = "aaa"; ...
2020-01-16 11:03:10
101
原创 https证书失效时图片加载问题
如果 <img> 标签载入一个 地址协议是以 https 开头的网络图片时，可能会报错证书失效网络不安全二导致图片加载不出来，这时可以添加一个 <mete> 标签如下：<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">可以理解为向服务器端发送信...
2020-01-14 15:47:01
2292
原创 @namespace 规则(命名空间)
@namespace 是用来定义使用在CSS样式表中的XML命名空间的@规则。定义的命名空间可以把通配、元素和属性选择器限制在指定命名空间里的元素。@namespace规则通常在处理包含多个namespaces的文档时才有用，比如HTML5里内联的SVG、MathML或者混合多个词汇表的XML。例如，html 中的超链接标签是 a, SVG中的超链接标签也是 a。当通过标签获取 a 元素或者通...
2020-01-09 09:14:12
3807
原创 SVG 文本元素
文章目录text 定义文本tspan 定义分组文本textPath 定义文本路径text 定义文本专有属性：属性描述x,y可选，文本起始位置坐标。dx可选，文本在水平方向上的偏移量。dy可选，文本在垂直方向上的偏移量。text-anchor可选，设置文本对齐方向。可能值是start(默认),middle,end。textLength可选，...
2020-01-08 17:55:08
294
原创 SVG 图形元素
文章目录rect 创建一个矩形circle 创建一个圆ellipse 创建一个椭圆line 创建一个直线polygon 创建多边形polyline 创建折线条path 定义一个路径text 定义文本rect 创建一个矩形主要属性：x,y 可选，矩形的左上角的坐标，省略则默认(0,0)。rx 可选，x轴的半径（round元素）。ry 可选，y轴的半径（round元素）。width 必需，...
2020-01-07 17:09:01
599
原创 CSS @media 查询
文章目录@media 查询，用于针对不同的媒体类型定义不同的样式。浏览器支持：css语法：@media 媒体类型 and|not|only (媒体功能) { css样式代码 }html中针对不同的媒体使用不同样式：<link rel="stylesheet" media="媒体类型 and|not|only (媒体功能)" href="test.css">媒体类型：...
2020-01-06 11:57:38
151
原创 CSS 颜色
1600多万个不同的颜色红，绿，蓝值从0到255的结合，给出了总额超过1600多万不同的颜色（256 × 256 ×256）。现代大多数显示器能够显示至少16384种颜色。灰阶灰阶代表了由最暗到最亮之间不同亮度的层次级别网络安全色很早的时候计算机支持最大256个不同的颜色，一个216"网络安全颜色"列表被建议作为Web标准，保留了40个固定的系统颜色。由rgb值由00 33 66 9...
2020-01-03 17:11:42
1005
原创 CSS 单位
CSS 有多种不同的单位用于表示长度，例如 10px, 2em等。数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。有两种类型的长度单位：相对和绝对。相对长度相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。单位描述em相对于当前元素的字体尺寸。一般浏览器字体大小默认为16px，则2em = 32px。rem相对于...
2020-01-03 16:00:36
159
原创 CSS 多列属性
文章目录column-countcolumn-gapcolumn-spancolumn-widthcolumnscolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-rule属性说明版本column-count指定元素应该分为的列数CSS3column-gap指定列之间的差距CSS3colum...
2020-01-03 11:03:57
220
原创 CSS 弹性盒子模型
文章目录flexflex-growflex-shrinkflex-basisflex-flowflex-directionflex-wrap属性说明版本flex复合属性。设置子元素如何分配空间。CSS3flex-grow设置弹性盒子项的扩展比率。CSS3flex-shrink设置弹性盒子项的收缩比率。CSS3flex-basis设置弹性盒子项...
2019-12-30 18:49:33
366
原创 CSS 动画
文章目录@keyframesanimationanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state属性说明版本@key...
2019-12-30 10:53:15
188
原创 CSS 2D/3D转换
文章目录transform属性说明版本transform适用于2D或3D转换的元素CSS3transform-origin允许您更改转化元素位置CSS3transform-style3D空间中的指定如何嵌套元素CSS3perspective指定3D元素是如何查看透视图CSS3perspective-origin指定3D元素底部位置...
2019-12-27 18:29:05
488
原创 CSS 过渡
文章目录transitiontransition-propertytransition-durationtransition-timing-functiontransition-delay属性说明版本transition复合属性，可以一次声明所有过渡属性。CSS3transition-property设置用来进行过渡的 CSS 属性。CSS3transi...
2019-12-27 15:51:31
717
原创 CSS 列表和表格
文章目录list-stylelist-style-typelist-style-positionlist-style-imageborder-collapse属性说明版本list-style在一个声明中设置所有的列表属性CSS1list-style-type设置列表项标记的类型CSS1list-style-position设置列表项标记的放置位置CS...
2019-12-27 11:51:38
206
原创 CSS 定位
文章目录displayvisibilityfloatclearpositionleftrighttopbottomz-indexclip属性描述版本display规定元素应该生成的框的类型CSS1visibility规定元素是否可见CSS2float规定框是否应该浮动CSS1clear清除浮动CSS1position规定元素的定位类...
2019-12-26 18:57:56
283
原创 CSS 其他属性
文章目录属性描述版本cursor规定要显示的光标的类型（形状）CSS2opacity设置一个元素的透明度级别CSS3content与 :before 以及 :after 伪元素配合使用，来插入生成内容CSS2counter-increment递增或递减一个或多个计数器CSS2counter-reset创建或重置一个或多个计数器CS...
2019-12-26 09:26:47
399
原创 CSS 盒子和内外边距
文章目录paddingpadding-bottompadding-leftpadding-rightpadding-topmarginmargin-bottommargin-leftmargin-rightmargin-top属性描述版本padding在一个声明中设置所有内边距属性CSS1padding-bottom设置元素的下内边距CSS1paddin...
2019-12-25 18:30:08
663
原创 CSS 边框和轮廓
文章目录borderborder-colorborder-styleborder-widthborder-方位border-方位-类型outlineoutline-coloroutline-styleoutline-widthborder-radiusborder-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusbord...
2019-12-25 18:00:53
505
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人