获得徽章 7
- #每天一个知识点# CSS媒体查询（Media Queries）是响应式设计（Responsive Design）中的重要组成部分，它允许我们根据不同设备的特性，调整页面的样式。
CSS媒体查询由一个条件语句和一个样式规则组成。当条件语句的返回值为真时，样式规则会被应用。
一个简单的CSS媒体查询的例子：
/* 当设备的宽度小于600px时，应用以下样式 */
@media (max-width: 600px) {
body {
background-color: #f00;
}
}
上面的代码表示当设备的宽度小于600像素时，将网页的背景颜色设置为红色。
CSS媒体查询的一些常见条件：
1.设备宽度（Device Width）：使用width关键字可以指定设备屏幕的宽度。例如：
@media (width: 768px) { ... }
上面的代码表示当设备的宽度等于768像素时，应用样式规则。
2.设备高度（Device Height）：使用height关键字可以指定设备屏幕的高度。例如：
@media (height: 480px) { ... }
上面的代码表示当设备的宽度等于480像素时，应用样式规则。
3. 设备方向（Orientation）：使用orientation关键字可以指定设备屏幕的方向（横屏或竖屏）。例如：
@media (orientation: landscape) { ... }
上面的代码表示当设备处于横屏模式时，应用样式规则。
4. 设备像素比（Pixel Ratio）：使用-webkit-pixel-ratio关键字可以指定设备屏幕的像素比（即每英寸点数）。例如：
@media (-webkit-pixel-ratio: 2) { ... }
上面的代码表示当设备的像素比为2时，应用样式规则。
5. 设备类型（Type）：使用type关键字可以指定设备的类型，如手机、平板、电视等。例如：
@media (type: tv) { ... }
```上面的代码表示当设备类型为电视时，应用样式规则。展开赞过
评论1 - #每天一个知识点# 常用的CSS动画技巧：
1.使用animation属性：animation属性是一个复合属性，可以用来定义动画的持续时间、延迟、重复次数、缓动函数等属性。
/* 定义动画 */
@keyframes example { 0% {background-color: red;} 50% {background-color: yellow;} 100%{background-color: blue;} }
/* 应用动画 */
div { animation: example 5s ease-in-out infinite; }
以上代码定义了一个名为example的动画，它将一个div元素的背景色在红色、黄色和蓝色之间渐变。然后将动画应用到div元素上，使其以5秒的持续时间、缓动函数为ease-in-out、无限重复地播放动画。
2.使用过渡效果：CSS过渡效果是一种简单的动画效果，它可以在元素状态改变时产生平滑的过渡效果。
/* 定义过渡效果 */
@keyframes transition { 0% {opacity: 0;} 100% {opacity: 1;} }
/* 应用过渡效果 */
div { transition: opacity 1s ease-in-out; }
以上代码定义了一个名为transition的过渡效果，它将一个div元素的透明度在1秒内从0渐变到1。然后将过渡效果应用到div元素上，使其在状态改变时产生平滑的过渡效果。
3.使用transform属性：CSS transform属性可以用来旋转、缩放、位移元素，可以与动画结合使用，实现更加复杂的效果。
/* 定义动画 */
@keyframes example { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
/* 应用动画 */
div { animation: example 5s linear infinite; }
```以上代码定义了一个名为`example`的旋转动画，它将一个`div`元素以线性格式旋转360度。然后将动画应用到`div`元素上，使其以5秒的持续时间、无限重复地旋转。展开赞过 评论1 - #每天一个知识点# CSS伪类和伪元素是用于在某些特定状态下为元素添加样式的方式。以下是一些常见的CSS伪类和伪元素：
1.伪类（Pseudo-classes）：
:hover伪类：当鼠标悬停在一个元素上时，会触发:hover伪类，从而可以改变元素的样式。
:active伪类：当鼠标点击一个元素时，会触发:active伪类，从而可以改变元素的样式。
:focus伪类：当元素获得焦点时，会触发:focus伪类，从而可以改变元素的样式。
:visited伪类：当用户访问一个链接时，会触发:visited伪类，从而可以改变元素的样式。
2.伪元素（Pseudo-elements）：
::before伪元素：在元素的内容前面添加内容。
::after伪元素：在元素的内容后面添加内容。
::first-letter伪元素：选择元素内容的第一封信。
::first-line伪元素：选择元素内容的第一行。
使用伪类和伪元素可以给元素添加特殊的效果和样式，例如在按钮上添加阴影、在链接上添加样式、在文本框中添加默认文本等。
使用伪元素的例子：
p::before {
content: "提示："; /* 在p元素内容前面添加“提示：”文本 */
color: red; /* 设置文本颜色为红色 */
margin-right: 10px; /* 在添加的文本和p元素内容之间添加10像素的右边距 */
}
以上代码将在每个段落前面添加一个红色的“提示：”文本，并添加10像素的右边距。展开赞过 评论2 - #每天一个知识点# CSS（层叠样式表）是用于网页样式设计的语言，以下是一些CSS技巧：
1.使用CSS缩写：CSS缩写可以使代码更简洁和易于阅读。例如，可以将margin属性的四个值缩写为一条规则，例如margin: 10px 20px 30px 40px;。
2.使用CSS伪类和伪元素：CSS伪类和伪元素可以帮助您添加特殊的效果和样式。例如，可以使用:hover伪类在鼠标悬停时改变链接的样式，使用::before和::after伪元素添加内容。
3.使用CSS动画：CSS动画可以使元素在页面上产生有趣的效果。您可以使用@keyframes规则创建动画，并使用animation属性将其应用于元素。
4.使用CSS媒体查询：CSS媒体查询可以使您根据设备的特性来改变样式。例如，您可以使用媒体查询来为不同的屏幕尺寸指定不同的样式。
5.使用CSS命名空间：CSS命名空间可以使您将样式应用于特定的元素或组件。例如，您可以使用一个命名空间为所有的按钮元素指定样式。
6.使用CSS预处理器：CSS预处理器可以使您的样式更加可维护和可扩展。例如，您可以使用Sass或Less来创建变量、混合器和函数，这些可以使您的样式更加易于维护。展开赞过 评论2 - #每天一个知识点# 箭头函数
1.语法形式：
箭头函数的语法形式比较简单，它可以看作是一种简化的函数定义方式。以下是箭头函数的语法形式：
const func = (parameters) => {
// function body
}
其中，parameters是函数的参数列表，function body是函数的主体部分。
2.箭头函数的特点：
简洁的语法形式，可以避免一些常见的代码模式，例如使用this关键字。
不具有自己的this值，它是根据函数所在的上下文自动确定的。
不可以作为构造函数使用，即不能使用new关键字来调用箭头函数。
不具有arguments对象，可以使用rest参数来代替。
不具有prototype属性，因为箭头函数不能被实例化。
3.箭头函数的例子：
// 箭头函数使用rest参数
const add = (...numbers) => numbers.reduce((total, num) => total + num, 0);
// 箭头函数作为回调函数使用
const onclick = (event) => {
console.log(event.target);
};
// 箭头函数作为事件处理程序
const input = document.querySelector('#input');
input.addEventListener('input', (event) => {
console.log(event.target.value);
});展开赞过 评论1 - #每天一个知识点# ECMAScript 6（ES6）是JavaScript的第六个版本，于2015年发布。ES6引入了许多新的特性，以下是其中的一些：
1.let和const关键字：用于声明变量。let用于声明可重新赋值的变量，而const用于声明常量。
2.箭头函数：ES6引入了箭头函数，它是一种更简洁的函数定义方式。箭头函数可以省略function关键字，并且可以自动绑定this值。
3.模块化：ES6支持模块化编程，可以使用import和export关键字来导入和导出模块。
4.类：ES6引入了类（class）的概念，它是一种更简洁的对象创建方式。类可以包含构造函数、方法、属性和继承等。
5.模板字符串：ES6引入了模板字符串，它是一种更方便的字符串拼接方式。模板字符串可以使用反引号（`）来定义，并可以包含变量和表达式。
6.解构赋值：ES6引入了解构赋值，它是一种更方便的变量赋值方式。可以同时将数组或对象的多个值赋值给多个变量，例如：let [a, b, c] = [1, 2, 3];。
7.扩展运算符：ES6引入了扩展运算符（...），它可以将数组或对象转换为逗号分隔的表达式，例如：let arr = [1, 2, 3]; let sum = arr.reduce((a, b) => a + b, 0);。
8.Set和Map：ES6引入了Set和Map数据结构，它们都是集合类型，可以存储一组键值对或唯一值。
9.Promise和async/await：ES6引入了Promise和async/await关键字，它们都是用于处理异步操作的工具。Promise可以更好地处理回调地狱问题，而async/await则可以让异步操作更加简洁和易于理解。
以上只是ES6的一部分新特性，还有其他一些较小的改进和新特性，如Symbol、Proxy和Reflect等。展开赞过 评论1 - #每天一个知识点# JavaScript Bubble Sort（冒泡排序）是一种简单的排序算法，它通过不断比较相邻的元素并交换它们的位置来排序数组。这个过程会重复进行，直到整个数组变得有序。
简单的冒泡排序实现：
function bubbleSort(arr) {
let len = arr.length;
for (let i = 0; i < len - 1; i++) {
for (let j = 0; j < len - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
// 交换相邻元素的位置
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
这个算法的时间复杂度为 O(n^2)，其中 n 是数组的长度。虽然它的性能不如其他高级排序算法（如快速排序、归并排序等），但它的实现非常简单和直观，适合对小规模数据进行排序。展开评论点赞 - #每天一个知识点# 使用迭代器可以解决深拷贝问题，下面是使用迭代器实现深拷贝的示例代码：
function deepCopy(obj) {
if (typeof obj !== "object" || obj === null) {
return obj;
}
let copy = Array.isArray(obj) ? [] : {};
for (let Iterator of obj.entries()) {
let [key, value] = Iterator.next();
copy[key] = deepCopy(value);
}
return copy;
}
在上面的代码中，我们使用 entries() 方法将对象转换为迭代器，然后遍历迭代器的每一项，并递归地调用 deepCopy 函数，将其值复制到新对象中。需要注意的是，如果对象中包含循环引用，使用迭代器也可能会导致栈溢出。因此，在实际应用中，需要谨慎处理循环引用的情况。展开赞过 评论2
![[灵光一现]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_25.51e6984.png)