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

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

Java Script

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

const num = BigInt(9007199254740991);
console.log(num); // 9007199254740991n
AI 代码解读

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

const value = null;
const result = value ?? "Default Value";
console.log(result); // "Default Value"
AI 代码解读

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

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

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"}]
AI 代码解读

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

const obj = {
   
  prop: {
   
    value: "Hello World"
  }
};
const {
    prop: {
    value } = {
   } } = obj;
console.log(value); // "Hello World"
AI 代码解读

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
AI 代码解读

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

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

Reflect.apply(greet, null, ["Alice"]); // 输出:Hello, Alice!
AI 代码解读

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); // 输出:!
AI 代码解读

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

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

console.log(obj[sym]); // 输出:Hello
AI 代码解读

HTML

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

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

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

<p contenteditable="true">可编辑的内容</p>
AI 代码解读

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

<p hidden>隐藏的文本</p>
AI 代码解读

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

<pre>
  多行文本
  格式被保留
</pre>
AI 代码解读

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

<input type="text" autofocus>
AI 代码解读

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

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

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

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

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

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

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

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

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

<video src="video.mp4" autoplay></video>
AI 代码解读

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

<form autocomplete="off">
  <!-- 表单字段 -->
</form>
AI 代码解读

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

<button title="长按操作">长按我</button>
AI 代码解读

CSS

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

p::first-letter {
   
  font-size: 2em;
  color: red;
}
AI 代码解读

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

.container:focus-within {
   
  background-color: yellow;
}
AI 代码解读

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

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

h1 {
   
  color: var(--primary-color);
}
AI 代码解读

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

.container {
   
  display: flex;
  justify-content: center;
  align-items: center;
}
AI 代码解读

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

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

.box {
   
  animation: slide-in 1s ease-in-out;
}
AI 代码解读

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

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

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

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

<input type="text" value="默认值" oninput="this.setAttribute('value', this.value)">
AI 代码解读

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

img {
   
  filter: blur(5px);
}
AI 代码解读

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

.container {
   
  column-count: 3;
  column-gap: 20px;
}
AI 代码解读

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

.nav {
   
  position: sticky;
  top: 0;
}
AI 代码解读

本文同步我的技术文档

目录
打赏
0
0
0
0
51
分享
相关文章
|
1月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
48 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
153 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
66 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
70 34
|
2月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
103 33
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
40 2
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
403 14
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
137 6
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
158 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等