Web前端有用的一些方法/属性

HTML篇

input输入框输入时去除前后空格

<input type="text" name="test" οnkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')">

input 输入框限制只能输入纯数字

<input type="text" name="test" oninput="value=value.replace(/[^\d]/g,'')">

Vue篇

点击手机号码唤起拨号功能

第一步：在vue项目的index.html中添加如下代码

<meta name="format-detection" content="telephone=yes" />

第二步：在需要调起手机拨号功能的页面，写如下函数

callPhone (phoneNumber) {
   
	window.location.href = 'tel://' + phoneNumber
}

实现搜索功能且关键字高亮

主要设计到axios和promise

点击按钮动态创建与删除组件

主要功能需求点

• 点击左侧组件库按钮创建对应的不同的组件，并在右侧区域展示
• 点击右侧创建的组件中的删除按钮，删除对应的组件
• 删除对应的组件之后，下方的组件位置自动上移
  

获取节点的父节点、兄弟节点、子节点

<span @click="getClickInfo"></span>

getClickInfo (e) {
   
	const clickDom = e.currentTarget; // currentTarget获取绑定点击事件的节点
	const currentDom = e.target; // target获取当前点击节点
	const parent = clickDom.parentElement; // parentElement获取绑定事件节点的父节点
	const previous = clickDom.previousElementSibling; // previousElementSibling获取绑定事件节点的前一个节点
	const previousInner = previous.innerHTML; // 获取绑定事件节点的前一个节点的内容
	const next = clickDom.nextElementSibling; // nextElementSibling获取绑定事件节点的后一个节点
	const firstChild = clickDom.firstElementChild; // firstElementChild获取绑定事件节点的第一个子节点
	const childNodes = clickDom.childNodes; // childNodes获取子节点，包括元素节点和文本节点
	const children = clickDom.children; // children获取子节点，只获取元素节点
	const childElementCount = clickDom.childElementCount; // childElementCount获取子节点的个数
	const lastElementChild = clickDom.lastElementChild; // lastElementChild获取最后一个子节点
	const lastChild = clickDom.lastChild; // lastChild获取最后一个子节点，包括元素节点和文本节点
}

CSS篇

object-fit属性

object-fit: cover;

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

background-attachment属性

background-attachment: fixed;

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

table-layout属性

table-layout: fixed; /* 列宽由表格宽度和列宽度设定 */

table-layout属性为表设置表格布局算法。可取值automatic（列宽度由单元格内容设定）、fixed（列宽由表格宽度和列宽度设定）和inherit（规定应该从父元素继承该属性的值）。

pointer-events属性（使上层遮住的元素依然可以点击）

pointer-events: none;

该属性主要的用途是穿透元素。

多种纯CSS loading效果

使用 CSS3 实现超炫的 Loading（加载）动画效果：

JS篇

检测数组中的元素是否满足指定条件（every方法 || some方法）

const arr = [{
    isChecked: false }, {
    isChecked: true }, {
    isChecked: true }];
arr.every((item) => item.isChecked) // false
arr.some((item) => item.isChecked) // true

• 以上两个方法均返回Boolean值
• every方法必须是数组中的所有元素均满足条件才返回true
• some方法只要数组中的元素有一项满足条件就能返回true

简单数组去重

Array.from(new Set([1, 4, 3, 4, 1])); // [1, 4, 3]

对象数组根据某个属性去重（reduce方法）

let data = [
   {
    id: 1, name: 'obj' },
   {
    id: 3, name: 'string' },
   {
    id: 2, name: 'arr' },
   {
    id: 1, name: 'num