拓宽你的 前端知识:掌握JS、HTML、CSS那些少有人知的应用技巧

简介: 这篇文章的主题是拓宽你的 前端知识:掌握JS、HTML、CSS那些少有人知的应用技巧,帮你了解、熟悉一些鲜为人知的知识点,它或许在你的工作中不会那么有用,但是能够丰富你的阅历,在面试中脱颖而出。

Java Script

BigInt 数据类型:BigInt 是 ES2020 中新增的数据类型,用于表示任意精度的整数。它可以处理大于 Number.MAX_SAFE_INTEGER 的整数值。

const num = BigInt(9007199254740991);
console.log(num); // 9007199254740991n

Nullish 合并运算符:Nullish 合并运算符(??)用于检查变量是否为 nullundefined,如果是,则返回默认值。

const value = null;
const result = value ?? "Default Value";
console.log(result); // "Default Value"

可选链操作符:可选链操作符(?.)可以在访问对象的属性或调用方法时,避免出现 TypeError 错误,如果属性不存在或方法未定义,则返回 undefined

const obj = {
   
  prop: {
   
    value: "Hello World"
  }
};
const result = obj.prop?.value;
console.log(result); // "Hello World"

Promise.allSettled():Promise.allSettled() 方法返回一个 Promise,只有在所有给定的 Promise 都已经 fulfilled 或 rejected 后,它才会被 resolved,并返回包含每个 Promise 结果的数组。

const promise1 = new Promise((resolve, reject) => reject("Error"));
const promise2 = new Promise((resolve) => resolve("Success"));
Promise.allSettled([promise1, promise2])
  .then((results) => console.log(results));
// [{status: "rejected", reason: "Error"}, {status: "fulfilled", value: "Success"}]

Optional Chaining in Object Destructuring:在对象解构中使用可选链操作符。

const obj = {
   
  prop: {
   
    value: "Hello World"
  }
};
const {
    prop: {
    value } = {
   } } = obj;
console.log(value); // "Hello World"

Proxy 对象可以包装另一个对象并拦截对它的各种操作,例如属性访问、函数调用等。

const obj = {
   
  name: "Alice",
  age: 25
};

const proxyObj = new Proxy(obj, {
   
  get(target, prop) {
   
    console.log(`Getting ${
     prop}`);
    return target[prop];
  },
  set(target, prop, value) {
   
    console.log(`Setting ${prop} to ${value}`);
    target[prop] = value;
  }
});

console.log(proxyObj.name); // 输出:Getting name   Alice
proxyObj.age = 30; // 输出:Setting age to 30

Reflect(反射):
Reflect 是一个内置对象,提供了可用于操作 JavaScript 的低级别方法。

// 使用 Reflect 调用函数,可以实现更灵活的函数调用方式
function greet(name) {
   
  console.log(`Hello, ${
     name}!`);
}

Reflect.apply(greet, null, ["Alice"]); // 输出:Hello, Alice!

Generator(生成器):
Generator 函数是一种特殊的函数,可以通过迭代器协议来控制函数的执行过程。

function* generatorFunc() {
   
  yield "Hello";
  yield "World";
  yield "!";
}

const generator = generatorFunc();

console.log(generator.next().value); // 输出:Hello
console.log(generator.next().value); // 输出:World
console.log(generator.next().value); // 输出:!

Symbol(符号):
Symbol 是一种原始数据类型,表示唯一的标识符。它可以用作对象属性的键。

const sym = Symbol("mySymbol");
const obj = {
   
  [sym]: "Hello"
};

console.log(obj[sym]); // 输出:Hello

HTML

自定义数据属性(data attributes)
可以通过 data-* 属性为 HTML 元素添加自定义数据,以便在 JavaScript 中进行访问。

<div data-id="123" data-name="Alice"></div>
const div = document.querySelector("div");
console.log(div.dataset.id); // 输出:123
console.log(div.dataset.name); // 输出:Alice

contenteditable 属性
contenteditable 属性设置为 true 可以使元素可编辑,就像一个富文本编辑器一样。

<p contenteditable="true">可编辑的内容</p>

隐藏元素
使用 hidden 属性或 CSS 的 display: nonevisibility: hidden 将元素隐藏起来。

<p hidden>隐藏的文本</p>

富文本格式化
通过 <pre> 标签可以保留文本中的空格、换行符等格式。

<pre>
  多行文本
  格式被保留
</pre>

自动聚焦
使用 autofocus 属性在页面加载完成后自动将焦点设置到指定的表单元素上。

<input type="text" autofocus>

自定义右键菜单
通过 JavaScript 监听 contextmenu 事件,并取消默认菜单,可以创建自定义的右键菜单。

<div oncontextmenu="showCustomMenu(event)">
  右键点击我
</div>
function showCustomMenu(event) {
   
  event.preventDefault();
  // 自定义菜单的逻辑
}

自定义光标样式
可以使用 CSS 的 cursor 属性自定义鼠标悬停在元素上时的光标样式。

<style>
  .custom-cursor {
    
    cursor: url('custom-cursor.png'), auto;
  }
</style>

<div class="custom-cursor">
  鼠标悬停时会显示自定义光标
</div>

响应式图像
使用 srcset 属性可以根据设备的像素密度加载不同分辨率的图像。

<img src="low-res.jpg" 
     srcset="high-res.jpg 2x, extra-high-res.jpg 3x"
     alt="响应式图像">

自动播放音频/视频
使用 autoplay 属性可以使音频或视频在页面加载完成后自动播放。

<audio src="music.mp3" autoplay></audio>

<video src="video.mp4" autoplay></video>

禁止表单自动填充
通过设置 autocomplete 属性为 "off" 可以阻止浏览器自动填充表单字段。

<form autocomplete="off">
  <!-- 表单字段 -->
</form>

长按提示
使用 title 属性可以为元素添加长按提示文本,当用户长按该元素时会显示提示。

<button title="长按操作">长按我</button>

CSS

伪元素 ::first-letter
可以用 ::first-letter 选择器来选择文本块的首字母,并对其应用特定的样式。

p::first-letter {
   
  font-size: 2em;
  color: red;
}

选择器 :focus-within
使用 :focus-within 选择器可以选择包含有焦点元素的父级元素。

.container:focus-within {
   
  background-color: yellow;
}

变量(Variable)
使用 CSS 变量可以定义和重用值,使样式更易于维护和修改。

:root {
   
  --primary-color: blue;
}

h1 {
   
  color: var(--primary-color);
}

Flexbox 布局
Flexbox 是一种强大的布局模型,可以方便地在一维空间中对齐、分布和重新排序元素。

.container {
   
  display: flex;
  justify-content: center;
  align-items: center;
}

动画 @keyframes
使用 @keyframes 关键帧规则可以创建动画效果并控制其过渡和延迟。

@keyframes slide-in {
   
  from {
   
    transform: translateX(-100%);
  }
  to {
   
    transform: translateX(0);
  }
}

.box {
   
  animation: slide-in 1s ease-in-out;
}

滚动渐变(Scrolling Gradient)
使用渐变和背景图像属性结合,可以在滚动时创建渐变效果。

body {
   
  background: linear-gradient(to right, red, yellow) fixed;
  background-image: url('gradient-mask.png');
  background-size: cover;
  background-blend-mode: multiply;
}

通过使用 content 属性和属性值 "attr()" 结合,可以将元素的属性值自动复制到元素的内容中。

a::after {
   
  content: attr(href);
}

<input type="text" value="默认值" oninput="this.setAttribute('value', this.value)">

滤镜(Filter)
使用 CSS 滤镜属性可以对元素应用各种视觉效果,如模糊、饱和度、对比度等。

img {
   
  filter: blur(5px);
}

多列文本布局
通过使用 column-countcolumn-gap 属性,可以将文本分为多列进行布局。

.container {
   
  column-count: 3;
  column-gap: 20px;
}

粘性(Sticky)定位
使用 position: sticky; 可以创建一个在特定位置固定的元素,当用户滚动时会保持固定位置。

.nav {
   
  position: sticky;
  top: 0;
}

本文同步我的技术文档

相关文章
|
1月前
|
存储 监控 JavaScript
基于布隆过滤器的 Node.js 算法在局域网电脑桌面监控设备快速校验中的应用研究
本文探讨了布隆过滤器在局域网电脑桌面监控中的应用,分析其高效空间利用率、快速查询性能及动态扩容优势,并设计了基于MAC地址的校验模型,提供Node.js实现代码,适用于设备准入控制与重复数据过滤场景。
67 0
|
3月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
3月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
1月前
|
资源调度 负载均衡 JavaScript
使用PM2工具部署Vue.js应用于服务器
以上步骤完成之后,你就成功利⽤ PM⼆工具将 Vuejs 应⽰程序部署至服 务 器,并且配合反向代理实现了高效稳定访问及负载均衡功能。
77 0
|
3月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
3月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
前端开发
CSS简单理解与应用
一、CSS基本概念: CSS——级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。
1088 0
|
3月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
3月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
3月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习

热门文章

最新文章