介绍
文章平均质量分 56
352328759
精通各类电子设备的开启和关闭功能
展开
-
css object-fit, object-position img 标签适应宽高
在弹性布局泛滥成灾的今天, "未知比例图片, 适应未知比例盒子"的需求已经屡见不鲜常用的方法常用的方法是用 css 的背景图div { width: 500px; height: 600px; background-image: url(cat.jpg); background-size: cover; background-position: 50% 50%;}background-size: cover; 让图片大小自适应background-position: 50% 5原创 2021-10-27 16:38:15 · 355 阅读 · 0 评论 -
css :nth-child(an + b) 的坑
css 的 nth-child 已经不是什么新概念了作用就是匹配其父元素的"某个"子元素注: 第一个子元素的序号为 1其实它还可以匹配"某些"子元素, 如::nth-child(odd) { /* 序号为奇数的子元素 */ }:nth-child(even) { /* 序号为偶数的子元素 */ }再拓展一下, 可以控制周长和偏移, 如:p:nth-child(an + b){...}使用公式 (an + b)。描述:a 表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。注原创 2021-10-21 17:26:37 · 203 阅读 · 0 评论 -
textarea 标签内换行
3个方法 回车<textarea>文字 文字 文字 文字文字</textarea>用 js 获取 textarea 的内容,换行是 “\n”document.querySelectorAll("textarea")[0].value// '文字\n文字\n文字\n文字\n文字'重新用于 HTML 的话, 要把 “\n” 替换成 <br />doc原创 2021-10-21 16:32:47 · 828 阅读 · 0 评论 -
js complete 是否完成图像加载
document.getElementById("compman").completecomplete 属性可返回浏览器是否已完成对图像的加载如果加载完成,则返回 true,否则返回 fasle判断图片是否加载完以下任意一条为true则认为图片完全加载完成:未指定 src 或 srcset 属性srcset 属性不存在且 src 属性为空图像资源已完全获取,并已排队进行渲染/合成image 元素先前已确定该映像完全可用并可供使用图像已“损坏”;即,由于错误或图像加载被禁用,图像加载失败原创 2021-09-30 11:58:13 · 748 阅读 · 0 评论 -
$._data 获取某元素通过jQuery 注册的事件
$._data 用于获取元素上注册的事件用法传入: 目标节点(原生 js 那种格式), 字符串 “events”返回: 一个记录操作名的对象, 操作下是该操作对应的事件详情, 包括方法(handler)$._data(element, "events")//var events = $._data($('#swq')[0], 'events');var events2 = $._data(document, 'events');demo'use strict';function fu原创 2021-06-28 11:40:59 · 343 阅读 · 0 评论 -
$.tmpl 简单 demo
jquery.tmpl.js 其实已经是很老旧的东西了, 奈何项目用得到, 最近又重新捡起来用其实老东西也没什么不好, 起码引入即用; 功能单一也是功能明确最近用到 {{tmpl}}, 顺理成章也涉及到传值, 作用域等问题. 遂写下点笔记, 便于以后使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jquery.tmpl 简单 demo</title&原创 2021-07-13 16:01:39 · 229 阅读 · 0 评论 -
变量提升, 函数提升之我见
最近刷面试题, 经常提到变量提升, 所以今天就这个主题整理一下思绪注: 本文所有内容基于"严格模式"(“use strict”)变量提升console.log(a) // undefinedvar a = 1代码上先输出, 后声明, 应该输出 “a is not defined”但实际上输出 a 时, a 没有报 “a is not defined”说明 a 已经被声明, 未被赋值这种声明位置被提升到作用域最高的现象, 就是所谓的变量提升同时还告诉我们一个重要信息声明 和 赋值原创 2021-02-05 16:38:33 · 118 阅读 · 2 评论 -
css text-stroke 文字描边
text-stroke 不是标准的 css 属性, 所以本篇读者可以视为娱乐text-stroke 是复合属性, 包括 text-stroke-width, text-stroke-color因为不是标准属性, 大多数情况要加上前缀text-stroke-width 指描边的宽度, 该属性的描边风格是居住描边(内边, 外边各占一半), 且只有居中描边一种结合 absolute 定位, 用未描边的内容, 遮盖已描边的内容, 可以实现只描外边的效果demo<!DOCTYPE html>原创 2020-12-22 16:06:57 · 3166 阅读 · 0 评论 -
Vue .sync 修饰符 简单实例
vue 中子传父是常有的需求, 一般我们用 $on + $emit 就能实现有时候从子组件传回来的值, 不需要再计算, 只是用来覆盖原值这时候用 $on + $emit 方法, 会占用一个事件名和一个方法名, 属于典型的资源浪费, 也增加了代码量对于传回值只用于覆盖原值的情况, 我们可以用 .sync 修饰符来简化<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event"></text原创 2020-12-17 15:52:14 · 971 阅读 · 0 评论 -
$.extend 简单实例
jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象如果只为$.extend()指定了一个参数,则意味着参数target被省略。此时,target就是jQuery对象本身。通过这种方式,我们可以为全局对象jQuery添加新的函数。如果多个对象具有相同的属性,则后者会覆盖前者的属性值。如需要保留原数据,第一个 object 使用 空对象 {}语法:$.extend( target [, object1 ] [, objectN ] )$.extend( [deep ],原创 2020-12-14 17:47:41 · 1208 阅读 · 1 评论 -
js oninput 移动端替代 keyup
在移动端, keyup 事件可能失效这时可以用 oninput 事件$('#xxx').bind('input propertychange', function() {})//document.getElementById("swq").addEventListener("input", fn, false)参考资料:总结oninput、onchange与onpropertychange事件的用法和区别//end...原创 2020-12-14 09:46:57 · 1413 阅读 · 0 评论 -
javascript jquery 插入节点方法一览
插入节点的方法一点都不难, 就是经常记不住, 或者分不清, 所以假定你已经熟练甚至精通这些方法的使用本篇旨在总结它们的差别, 用法就不详细介绍了注: before & insertBefore, after & insertAfter 目标节点和操作节点的关系应该是"兄弟关系", 但我觉得以"父子关系"描述更能表达它们的主次关系javascriptappendChild父.appendChild(子)插入位置: 父节点里的最后位置insertBefore父.insertB原创 2020-12-08 17:37:46 · 1602 阅读 · 0 评论 -
js getComputedStyle 获取对像元素的计算后样式
getComputedStyle 能取到目标节点的计算后样式(最终生效的样式), 就是所见即所得相对的 style 只能取到行内样式修改样式表后, 能获取最新有效值demo<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta na原创 2020-12-04 17:23:49 · 1860 阅读 · 0 评论 -
js 样式表入门基础及简单操作
样式表核心成员及关系表数据数据类型注释document.styleSheetsStyleSheetList相当于 style 标签的集合document.styleSheets[0]CSSStyleSheetCSSStyleSheet 继承自 StyleSheet 相当于某个 style 标签; 也就是传说中的[样式表]document.styleSheets[0].cssRulesCSSRuleList相当于某个 style 标签的规则的集合docu原创 2020-12-04 14:52:49 · 2123 阅读 · 0 评论 -
js 我猜你就是记不住的 pop, push, unshift, shift
操作过数组的码农, 应该都知道 pop, push, unshift, shift 这 4 个方法可有的时候, 就是记不住这 4 个方法谁是谁下面推荐一下我对这 4 个方法的记忆联想push: 推, 想象一个弹夹, 把子弹推(push)进弹夹, 新子弹就在弹夹的最后一项pop: 枪响, 因为弹夹是栈结构, 子弹后进先出, 所以开枪(pop)得到的是最后一颗子弹, "弹夹"里删除最后一项shift: 轮班, 想象排队轮班, 排队是队列结构, 先进先出, 轮到(shift)下一个时, 第一个离开,原创 2020-12-01 14:38:06 · 2132 阅读 · 4 评论 -
React React.createRef(), React.forwardRef() 的简单 demo
在 react 中使用 ref 是件挺麻烦的事, 首先要声明一个变量 _ref, 再把变量带到目标节点的 ref 属性中, 用箭头函数声明个临时变量 i, 并把这个临时变量 i 传给 _ref// 不完整代码...let refElement...<div ref={i => refElement = i}></div>...React.createRef() 方法可以简化这个步骤// 不完整代码...let refElement2 = React.cre原创 2020-11-26 15:44:50 · 2444 阅读 · 0 评论 -
js 报错提示三连之try...catch
try…catch 的功能就是用来捕获报错, 无论系统错误还是自定义错误(throw)都可以try…catch - JavaScript | MDNtry…catch语句标记要尝试的语句块,并指定一个出现异常时抛出的响应try…catch 用法如下try { // 被执行的语句 // 被执行的语句中触发了报错 throw "报错信息"} catch(error) { // error 返回的报错信息 // 如果在try块里有异常被抛出时执行的语句 // 没有错误则不会执行原创 2020-11-12 18:04:49 · 2310 阅读 · 0 评论 -
js 报错提示三连之throw
相信很多码农对 throw 语句并不熟悉, 因为码农的第一目标是消灭报红, 而 throw 的主要作用就是报红面向用户的项目中, 程序报错大概是个很糟糕的用户体验但事物都有双面性, 在面向开发者的框架工具中, 报错信息无疑是必不可少的重要内容throw - JavaScript | MDNthrow语句用来抛出一个用户自定义的异常。当前函数的执行将被停止(throw之后的语句将不会执行),并且控制将被传递到调用堆栈中的第一个catch块。如果调用者函数中没有catch块,程序将会终止。th原创 2020-11-12 17:38:08 · 2955 阅读 · 1 评论 -
js 报错提示三连之Error
编程过程中最常见的往往是 Error, 而不是 Success, 毕竟 JavaScript 中并没有 Success 这个对象而 Error 对象将是下面要讨论的主题Error - JavaScript | MDN通过Error的构造器可以创建一个错误对象Error 的用法很简单, Error(“报错信息”); new Error(“报错信息”);用不用 new 都可以所谓的"创建一个错误对象", 我觉得 Error() 更像是提供一个错误格式> Error()Error: 报原创 2020-11-12 16:46:46 · 2447 阅读 · 1 评论 -
js Browser 对象简介
浏览器 Browser 对象有5个Window表示浏览器中打开的窗口处于对象层次的最顶层文档中包含框架(frame, iframe), 浏览器会对每个框架创建一个 window 对象window 可以用于父子窗口间的通讯全局变量本质就是 window 的直属属性, 全局方法亦然5个 Browser 对象都是 window 的属性, 如: window === window.window; screen === window.screen;location.href, location.as原创 2020-11-09 16:53:28 · 2782 阅读 · 0 评论 -
创建对象的工厂模式, 构造函数模式, 原型模式的简单区分
工厂模式调用 Fun1 不用关键字 new创建对象时可以带参Fun1 里生成一个对象, 并返回该对象参数存在 obj1 本身实例化对象改变属性值后, 相互不影响function Fun1(value1, value2, value3) { var _obj = new Object(); _obj.value1 = value1; _obj.value2 = value2; _obj.value3 = value3; _obj.fun1 = function() { // th原创 2020-11-05 17:12:33 · 1960 阅读 · 0 评论 -
js 生成器 Generator 用法随笔
生成器对象是由一个 generator function 返回的,并且它符合可迭代协议和迭代器协议1end“符合可迭代协议和迭代器协议” 就意味着可以被 for…of 等迭代 ↩︎原创 2020-11-05 16:01:16 · 2222 阅读 · 0 评论 -
js Object.defineProperty() 描述符的特性功能详解
Object.defineProperty(obj, prop, descriptor)在对象 obj 上新建或修改一个属性 prop, 并返回新 objobj: 要定义属性的对象prop: 要定义或修改的属性的名称或 Symboldescriptor: 要定义或修改的属性的描述符descriptor.configurable: 对象的属性的描述符的特性属性的 descriptor (描述符)分两种[数据描述符, 存取描述符(访问描述符)], descriptor 只能是其中一种;desc原创 2020-11-03 11:02:43 · 2068 阅读 · 1 评论 -
js 浅析 Object.prototype.toString.call(_var) 获取数据类型原理
JavaScript 作为弱类型语言, 它的数据类型从来都是个令码农头疼的问题比如用 typeof _var 获取数据类型, 简直就是不靠谱的典型案例typeof {} // "object"typeof [] // "object"typeof null // "object"工具就这样, 作为使用者也是没有办法可言的, 能做的就只有另辟蹊径解决问题所以有些年头的老码农会用另一个方法获取数据类型信息——Object.prototype.toString.call(_var)Object.p原创 2020-10-28 15:59:10 · 2669 阅读 · 0 评论 -
React component.forceUpdate() 强制重新渲染
component.forceUpdate() 一个不常用的生命周期方法, 它的作用就是强制刷新官网解释如下默认情况下,当组件的 state 或 props 发生变化时,组件将重新渲染。如果 render() 方法依赖于其他数据,则可以调用 forceUpdate() 强制让组件重新渲染。调用 forceUpdate() 将致使组件调用 render() 方法,此操作会跳过该组件的 shouldComponentUpdate()。但其子组件会触发正常的生命周期方法,包括 shouldComponen原创 2020-10-21 14:22:59 · 9799 阅读 · 0 评论 -
关于特殊字符可能用到的方法总结
代码就是demo, 所以不啰嗦直接上代码<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maxim原创 2020-09-02 09:04:27 · 1926 阅读 · 0 评论 -
console 中%s,%d,%f,%i,%o的应用
可以在 console.log() 中控制插入的。, 插入的值与顺序对应。原创 2020-08-28 18:00:58 · 2432 阅读 · 0 评论 -
css position: sticky粘性定位
最近认识到position: sticky;这个比较新的css属性.功能就如字面意思定位: 粘性;用这个新属性做 固定顶部 的功能,简直是湿湿碎作为新属性,简单介绍下它的特性:只对最近一个的滚动环境有效没有滚动环境最后会冒泡到视图窗口,与其它position类似与最近一个的滚动环境之间可以有其它中间节点在中间节点里,定位也能有效,但受中间节点影响,影响规律不明定位是相对于最近的滚...原创 2020-03-06 11:48:11 · 1914 阅读 · 0 评论 -
js.ownerDocument 返回某元素的根元素
HTML中, HTML 文档本身是元素的根元素返回的都是html, 并没什么用 <!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Cache-Control" CONTENT="no-cache" />原创 2019-02-15 11:27:34 · 2422 阅读 · 0 评论 -
$.offset 深入剖析
offset() 方法返回或设置匹配元素相对于文档的偏移(位置)$.offset.setOffset 不是常用方法,属于jq内部方法 $("#id1").offset()//不传值//返回对象 {"top":8,"left":8}$.offset() 有值的时候, 内部会将匹配元素遍历, 并调用 $.offset.setOffset$.offset.setOffset(当...原创 2019-02-19 14:07:09 · 2264 阅读 · 0 评论 -
$.insertAfter()
insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之后。 <!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv=...转载 2019-02-14 17:18:00 · 2301 阅读 · 0 评论 -
$.closest()
返回被选元素的第一个祖先元素:$(selector).closest(filter)返回使用 DOM context 查找的 DOM 树中的第一个祖先元素:context: 上下文, 语境, 范围$(selector).closest(filter,context)filter 必需。规定缩小搜索祖先元素范围的选择器表达式、元素或 jQuery 对象context 可选。在其内可以...原创 2019-02-12 18:10:40 · 2797 阅读 · 0 评论 -
$.camelCase()
匹配连字符 ‘-’ 和其后的第一个字母或数字,如果是字母,则替换为大写,如果是数字,则保留数字匹配 IE 中的 ‘-ms-’,替换为 ‘ms-’,这是因为 IE 中,‘-ms-’ 对应小写的 ‘ms’,而不是驼峰式的 ’Ms‘字符串转"骆驼拼写法",应该是jq内部方法,不常用似乎没有还原的方法$.camelCase("s-f-gg-vvc-sd")//sFGgVvc...原创 2019-02-12 20:10:56 · 2467 阅读 · 0 评论 -
$.contains()
$.contains() 检测一个元素包含在另一个元素之内$.contains("container(父)", "contained(子)")container, contained 必须Element类型<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"> <head...原创 2019-02-13 11:28:32 · 3288 阅读 · 0 评论 -
$.end()
$.end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态注意:筛选操作 <!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="Cache-Control" CONTENT="no-cache"原创 2019-02-13 11:45:53 · 2431 阅读 · 0 评论 -
Promise 4种常规用法
Promise 4种常规用法new Promise(funA).then(funB).catch(funC)new Promise(funA).then(funB, funC)new Promise(funA).then(funB).then(funC)new Promise(funA).then(funB1, funB2).then(funC1, funC2)注:resolve, re...原创 2019-09-08 19:38:10 · 2598 阅读 · 2 评论