前端基础7g.-CSDN博客

原创【新知实验室TRTC】

腾讯发布的实时音视频（Tencent RTC）产品，是基于腾讯多年来在网络与音视频技术上的深度积累，让开发者能快速上手搭建高质量的音视频场景。

2022-11-27 19:31:56 221 1

原创初学Vue，vue指令

二、安装vue1.script标签引入2.npm下载三、vue基本模板语法1.插值（1）{{}}双花括号（2）v-text显示文本内容，不能对标签进行转义（3）v-html显示文本内容，可以对标签进行转义

2022-07-04 21:47:35 184

原创 Canvas API（画布）简介

一、使用画布必需要写的（1）获取画布：（2）规定绘图方法：（1）canvas画布默认宽高为300*150，不可在css中修改，可直接在canvas标签中添加width，height属性设置画布宽高（2）清除画布的使用：（3）绘制弧线时角度用Π来表示...

2022-06-21 21:59:23 452

原创 AJAX介绍及jQuer写法

使用ajax可以在不刷新网页的情况下更新数据，局部数据更新。1.创建var ajax = new XMLHttpRequest()2.配置xhr.open(请求方式，请求地址，是否异步)3.响应xhr.onreadystatechange = function () {}4.发送ajax.send()

2022-06-14 21:43:38 118

jQuery封装了js常用的功能代码，优化了DOM的操作、事件处理、动画设计和Ajax交互（2）学习jQuery的本质就是：学习调用这些函数（方法）1.代码风格：$(“***”)选取元素、2.选择器除标准选择器之外还有:(1)第一个：（：first）（2）最后一个（：last）(3) 所有偶数：（：even）(4)所有奇数：（：odd）(5)根据下标：（：eq(n)）3.属性：attr(‘title’)获取属性值。addclass(’ ‘) 添加class的值。removeclass(

2022-06-14 21:25:15 386

原创 JavaScript中碰撞检测的理解及说明

碰撞检测可用一张图来理解，如下图中间盒子看作参照物四条边分别为 l1 t1 r1 b1。碰撞检测就是当某一个盒子四条边的任意一边与其他盒子的距离

2022-06-14 19:55:38 808 1

原创 js（Javascript）数组操作及数组去重

js（Javascript）数组操作及数组去重一、数组操作添加删除：（1）push(x) 将元素添加到数组最末尾（2）unshift(x) 将元素添加到开头（3）pop(x)删除最后一个元素（4）shift(x)删除第一个元素返回字符串：join()二、数组去重操作 var arr = [1, 2, 2, 3, 4, 5, 5, 4, 8, 5, 1, 6, 1]; function singleArray(array) { var newArr = [];

2022-05-19 11:54:28 362

原创 js(JavaScript)中数组的反转及字符串的反转

js(JavaScript)中的数组的反转及字符串的反转一、数组的反转数组的反转可利用其排列规则:reverse（）颠倒数组中元素顺序array = array.reverse();二、反转字符串js基础反转字符串的操作可利用数组反转、字符串和数组间的转换来实现var str = '123456';//将上述字符串进行反转function reverseString(string) { // 1、string-->array（字符串转数组） v

2022-05-08 11:11:50 1068

原创初级js(JavaScript)中函数(函数定义、调用、参数)及随机函数的介绍

js函数使用及随机函数一、函数的定义 function 函数名(){ return...}二、函数的调用函数在定义后不会自动执行，需要在特定的地方调用函数三、函数的参数1、形参：函数后小括号后的内容2、实参：在调用函数时小括号后的内容四、随机函数js中随机函数必须说明的，有此函数后，方可使用rand()调用随机函数，从而实现随机数的获取。function rand (min,max) { return Math.round (Math.random(

2022-05-05 21:09:22 590

原创 js（ES5）中数组及冒泡排序

js（ES5）中数组及冒泡排序一、数组var arr =new Array(5) 一个值代表的是数组长度var arr =new Array(1，2，3，4，5) 多个值代表数组内容二、ES5实现冒泡排序 <script> for (var i=0; i<arr.length-1; i++){ //i是走几遍（-1是因为最后一个元素没必要在比较） for (var j=0; j<arr.length-i-1; j++){

2022-05-04 11:59:30 445

原创 js（JavaScript）中常见数据类型及数据类型的转换

js（JavaScript）中常见数据类型及数据类型的转换一、常见数据类型(1)数字型（Number）(2)字符串型（String）(3)布尔型（Boolean）(4)未定义型（Undifined）(5)空类型（Null）(6)特殊类型（Object）二、数据类型转换(1)强制类型转换 parseI nt(n) 把n转换为整型 parseFloat(n)n转为浮点数 Number（n转为数字）（2）隐式类型转换四则运算的四种符号中只有+是把结果转为字符串，

2022-05-02 21:02:14 975 2

原创弹性盒子及导航栏小规模布局常用属性

弹性盒子一.弹性盒子的作用弹性盒子让父级有能力改变子级的对齐，分布，以填满可用空间。特点：1.父级使用弹性盒子后，子级元素的布局将与自身方向属性无关。2.适合小规模布局。display：flex写在父级，声明使用弹性盒子。二、常用属性1、flex-directionflex-direction:rowflex-direction:row使子级盒子横向排列使子级盒子纵向排列2、 flex-wrap该属性会检索子级是否超出父级，如果超出则根据值

2022-04-28 19:53:32 373

原创前端学习第七天——响应式布局

响应式布局1.响应式布局简而言之就是一个网站能够兼容多个终端（pc、pad、phone）2.响应式布局必须的两点：1.viewportviewport可使不同屏幕下的终端设备都能够使网页正常实现2.media媒体元素响应式布局中使用media可使网页完成在不同屏幕尺寸下的变换，应用于同一网页在不同终端下的变化media only screen and (min-width:~~ ) 为页面接受最小尺寸多用于pc端或media only screen and (max-width:~~

2022-04-25 21:53:46 98

原创前端学习第六天——定位position及万能居中公式

定位（position）一、静态定位（static）默认都是静态定位，相当于没有。二、相对定位（relative）偏移时的参考物：定位前自己本身的位置。特点：1、定位后不影响元素本身的特性。2、元素不会脱离文档流。3、相对于原位置进行偏移。三、绝对定位（absolute）偏移时的参照物：最近一级使用了定位的父级，没有找body.特点：1、元素会脱离文档流。2、行元素支持所有的CSS样式。3、块元素默认内容撑开宽高。4、清楚子级浮动。四、固定定位（fixed）参照物：浏览器特点

2022-04-24 20:28:47 204

原创前端学习第五天——表单form input标签

表单form input标签一、表单元素<input type="" name=" " value="" >input中type类型常用的几种有：text文本框password密码框radio单选checkbox多选框submit提交按钮reset重置hidden隐藏二、表单的其他常见属性name：关键词，作用域value：表单元素的值type：表单元素的类型action：表单提交的地址method：表单数据提交的方式placeholder：提示文本chec

2022-04-22 19:58:04 121

原创表格table及单元格合并

表格table表格常用标签：table:表格th:表头tr:表格行td:单元格数据注意：boder:1; 给表格加边框。表格常用CSS样式：boder-collpase:collpase;清除表格间隙单元格合并行合并：colspan列合并：rowspan合并方法：1看起点 2使用合并 3删除被合并的单元格例：表格 1 2 3 4

2022-04-22 19:41:25 729

原创前端学习第三天：CSS基础之关于居中的三种方法

CSS基础之关于居中的三种方法1.文本垂直居中在CSS中当行高等于盒子高度时，文本可垂直居中。line-height=height文本垂直居中。注意：如果文字过多使标签中的文本形成了两行或多行，则对应行高应成比例变化。2.text-align:center这句写到父级，可使子级中的行元素，行块元素，文本内容水平居中。3.块元素居中margin: 0 autoＣＳＳ基础中可使用此句来实现块元素水平居中。...

2022-04-16 20:47:12 286

原创浮动和清除浮动

浮动和清除浮动一、浮动float:left(左浮动)float:right（右浮动）2.浮动的特点（1）所有标签都可以同排显示。（2）使用浮动之后，行标签可以支持CSS所有样式。(3) 不给宽高情况下，默认内容撑开宽高。（4）元素可能会脱离文档流。二、清除浮动所谓清除浮动，就是浮动后可能导致元素脱离了文档流，此时可使用清除浮动来解决。（1）overflow：hiddenoverflow：hidden常见有三种用途：1.溢出隐藏。2.解决塌陷问题。3.就是清除浮动被用在父级（2）

2022-04-14 21:21:33 376

原创前端学习第二天——CSS基础以及制作简单的图文结合时可能遇到的问题

前端学习第二天——CSS基础以及制作简单的图文结合时可能遇到的问题一、CSS基础1.CSS的引入方式外部：使用link元素引入例：内部: 在头部中添加style标签写入样式内联（行内）：在标签中写入style2.文本字体样式：font -family字体大小：font-size字体粗细：font-weight行高：line-height文本装饰线：text-decoration3.常用选择器通配选择器：*{}id选择器：#{}class选择器： .XX{}标签名选择器：

2022-04-13 20:15:04 77

原创 Web学习第一天

盒模型1.什么是盒模型？每个标签都是一个矩形，类似一个盒子，所以HTML页面布局可以理解为多个盒子嵌套排列而成。2.盒模型的组成。（1）width宽度（2）height高度（3）padding（内边距）1~4个值例：padding:10px 20px 30px 40px;顺时针赋值上右下左值的改变会改变盒模型的面积（4）boder(边框)包含三个符合属性：boder-width(宽度), boder-style（样式）, boder-color(颜色)会增加盒模型的面积

2022-04-12 18:06:28 196

weixin_58280614的博客