2024 蓝桥杯Web赛道JS、ES6基础/前端基础

1,格式操作

display:flex

弹性布局

flex-wrap: wrap (flex布局的方式,如果超出则换行)

默认是nowrap不换行,不进行溢出或者挤压

transfrom (是css中用于对元素进行变换的属性，通过这个属性可以实现元素的平移，旋转，缩放，倾斜等效果，从而改变元素页面的展示方式)

下面是一些常用的transfrom的变换函数的应用

translate(x,y):平移元素，其中x和y分别表示水平和垂直方向的偏移量

rotate(angle)：旋转元素，angle表示旋转的角度

scale(x,y):缩放元素，x和y分别表示水平和垂直方向上的缩放比例

skew(x-angle,y-angle)倾斜元素 x-angle代表水平和垂直方向上的倾斜角度

DOM操作

document.creatElement(‘元素名’),是js中的dom对象的一个方法，用于动态创建指定类型的html元素

创建一个元素

1. 选取元素：

   • document.getElementById('id'): 通过元素的 id 选择元素。

   • document.getElementsByClassName('class'): 通过类名选择元素。

   • document.getElementsByTagName('tag'): 通过标签名选择元素。

   • document.querySelector('selector'): 使用 CSS 选择器选择元素。

   • document.querySelectorAll('selector'): 选择所有匹配 CSS 选择器的元素。

2. 操作元素属性：

   • element.textContent: 设置或获取元素的文本内容。

   • element.innerHTML: 设置或获取元素的 HTML 内容。

   • element.setAttribute('attribute', 'value'): 设置元素的属性。

   • element.getAttribute('attribute'): 获取元素的属性值。

3. 操作样式：

   • element.style.property = 'value': 设置元素的行内样式属性。

   • element.classList.add('class'): 添加类名。

   • element.classList.remove('class'): 移除类名。

   • element.classList.toggle('class'): 切换类名的状态。

4. 创建和插入元素：

   • document.createElement('tag'): 创建一个新元素。

   • parentElement.appendChild(newElement): 将新元素添加到父元素的末尾。

   • parentElement.insertBefore(newElement, referenceElement): 在参考元素之前插入新元素。

5. 事件处理：

   • element.addEventListener('event', callback): 添加事件监听器。

   • element.removeEventListener('event', callback): 移除事件监听器。

   • event.preventDefault(): 阻止事件的默认行为。

对块元素的操作

gap:10px;

gap的应用常用来操作网格布局中的子元素之间的间距，这个属性用于设置行与列之间的间距，而不是元素本身的间距，通常需要借助display:flex等属性后才可以使用

CSS3

<8n为有8列，+1则是控制第一列>

.seat:nth-chilld(8n+1) {

}

Flexbox 弹性盒子模型,通过display属性创建弹性盒子，之后通过justify-content和align-items等属性来控制子元素的排列和对齐方式

Grid网格布局，通过display:grid可以创建网格布局，使用grid-template-columns和grid-template-rows等属性来定义网格的列和行，以及grid-column和grid-row等属性来控制元素在网格中的位置。

Transfroms 变换通过transform属性可以对元素进行旋转、缩放、倾斜和平移等变换操作。

ES6

将二维数组转为一维数组的方法flat

let one=[[2,3,1,4],[4,5,6,400]];
let newone=one.flat();//进行拍平，将二维数组转化为一维数组

//将收集到的二维数组转为一维数组之后，可以将其放入set方法进行去重
let two=new set(newone);
//得到two集合之后，将其转化为数组之后便可通过循环进行输出

扩展运算符

“...”，通过扩展运算符可以将集合进行转化为数组

web逻辑算法

双重循环解二维数组

js{



let newpuzzle=[];

const puzzle=[

{ “sss”,”ssss ,”sssjka },

{“shhwjhd”,”sdkjad},

{“sjikduw”,”shjdha”}

]	

for(let i=0;i<puzzle.length;i++){

for(let j=0;j<puzzle[i];j++){

if(!newpuzzle.inculed(puzzle[i][j])){

newpuzzle.push(puzzle[i][j])

}

}

}



}