华清远见-重庆中心-前端阶段技术总结/知识点梳理/个人总结/关于前端技术的解析（看法）

最新推荐文章于 2024-07-18 18:43:34 发布
最新推荐文章于 2024-07-18 18:43:34 发布
阅读量260 收藏
点赞数
文章标签： 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bukaopuH/article/details/128402534
版权

CSS

Cascading Style Sheets 层叠样式表

用于控制HTML中标签样式的语言。可以精确到像素，美化修饰HTML标签。

CSS语法

样式名：样式值；

color:red;

font-size:20px;

选择器

用于选择页面中元素(标签)的工具。

id选择器

1.给标签添加id属性，对其命名

2.在style标签中通过**#id**名获取

通常用于选择某一个元素

class选择器

1.给标签添加class属性，对其命名

2.在style标签中通过**.class**名获取

通常用于选择一组元素

元素/html/标签选择器

直接通过标签名获取。

通常用于选择一组元素。

将CSS写在哪里

1.写在标签的style属性中

style=“样式:值;样式:值;”

<body style="background-color:red;">

</body>

2.写在<style>标签中，通过选择器获取标签后控制样式

style标签通常放在head标签中

CSS优先级

如果某个元素同时拥有id、class以及style属性时。

优先级从高到低

style属性==>id选择器==>类选择器==>元素选择器

常用样式

尺寸

只能对块级元素设置尺寸。

如果要对行内元素设置尺寸，需要先将其改为块级元素。

样式名作用值
width设置块级元素的宽度px像素或百分比或vw
height设置块级元素的高度px像素或百分比或vh

设置为像素时，元素不会根据浏览器的窗口大小变化而变化，是固定值。

设置为百分比或vh/vw时，元素会根据浏览器的窗口大小变化二变化，都是百分比。

如果元素需要根据实际窗口变化，宽度建议使用百分比，高度建议使用vh。

背景background

样式名作用值
background-color背景色颜色的单词、十进制RGB、十六进制RGB
background-image背景图url(图片路径)
background-repeat背景重复默认重复。
no-repeat不重复
repeat-x表示x轴重复
repeat-y表示y轴重复
background-size背景尺寸默认加载原图。
100%表示完整显示图片。
cover表示覆盖元素。
如body的背景如果设置为cover，随着页面高度变大，背景也会变大，100%则会完整显示图片。
background-position背景位置可以同时设置x轴和y轴的距离。
如10px 20px表示向右移动10px，向下移动20px
也可以通过background-position-x或-y只移动具体轴
通过使用right left top bottom center设置指定方向
background-attachment背景固定方式fixed表示固定背景，scroll或默认表示跟随滚动条移动
background背景属性简写可以同时设置图片路径、是否重复和图片位置，无关顺序。如
background:url(图片地址) no-repeat right top
表示图片不重复位于容器右上角
background渐变函数linear-gradient(to left, #7a28c1, #a17fe0, #59C173)

边框border

边框会"套"在元素外层，元素原本大小不变，但所占区域会变为原本大小+边框宽度

样式作用值
border-style边框线型solid单线，double双线，dotted点线，dashed虚线
border-width边框宽度像素
border-color边框颜色颜色的三种写法
border同时设置边框线型、宽度和颜色1px solid red
border-方向-样式某个方向的style或width或color。方向可以是left、right、top、bottomborder-bottom-color:red
border-方向同时设置指定方向边框线型、宽度和颜色border-right:1px solid red;
border-上下-左右-radius设置某个方向为圆角
border-radius同时设置四个角为圆角。如果正方形，值设置为边长的一半变为圆形
outline轮廓。input文本框获得焦点时，会自动显示一个轮廓，通过将该属性设置为none去除轮廓
border-collapse合并相邻边框。通常用于表格设置边框时，将其值改为collapse，表示合并相邻td边框。collapse

字体font

样式名作用值
font-size字体大小像素。默认16px，最小12px
font-family字体字型默认微软雅黑
font-weight字体粗细lighter细，bolder粗

文本text

样式作用值
color文本颜色颜色的三种写法
text-align文本对齐方式默认left，right右对齐，center居中
line-height行高像素。如果希望文字“垂直居中”，设置行高为所在容器的高度。
letter-spacing字符间距像素。
text-indent首行缩进像素。如果缩进2个字，默认设置为32px
text-shandow文本阴影颜色 水平位置 垂直位置 模糊程度。如gray 4px 4px 3px 表示向右下角移动4px，模糊3px
text-decoration文本修饰under-line下划线，over-line上划线，line-through删除线。通常将a标签设置该样式为none表示去掉默认的下划线
word-break英文换行方式默认以单词为单位换行，不会拆分单词。break-all表示以字母为单位换行，会拆分单词。

列表list

样式名作用值
list-style-type列表符号通常用none去掉。
list-style-image使用图片替换列表符号url(图片路径)
list-style-position列表符号位置默认outside表示符号和文本分离。inside表示符号和文本绑定。

伪类

表示某个元素的某种状态。

用于对某些元素在不同的情况下呈现不同的效果。

如a标签在访问前、悬停时、访问时、访问后的四个状态对应四个伪类

a标签伪类作用
a:link未访问时
a:hover鼠标悬停
a:active鼠标按住
a:visited访问后

以上的:hover可以适用于很多标签，如div:hover。

但其余伪类只适用于a标签。

鼠标样式cursor

值效果
pointer光标呈现为指示链接的指针（一只手）
crosshair光标呈现为十字线。
move此光标指示某对象可被移动。
text此光标指示文本。
wait此光标指示程序正忙（通常是一只表或沙漏）。
help此光标指示可用的帮助（通常是一个问号或一个气球）。
progress载入

显示方式display

值
block将元素设置为块级元素，能设置尺寸，独占一行
inline将元素设置为行内元素，不能设置尺寸，占一行中的一部分，尺寸由内容决定
inline-block将元素设置为行内块，能设置尺寸，占一行中的一部分
none不显示，不保留自身位置，后续元素会顶替其位置

浮动float

让某个元素脱离原本的位置，朝某个方向对齐。

值作用
left向左浮动
right向右浮动
none清除浮动

float:left和display:inline-block的区别

相同点：都能让多个独占一行的块级元素位于同一行

display:inline-block

多个元素最终会位于同一行内，保留该行位置，元素以下线对齐，保留元素间的缝隙，后续元素是新的一行。

float:left

多个元素脱离自身的位置向指定方向贴合，不保留该行位置，元素向上线对齐，不保留元素间的缝隙，后续元素会顶替之前元素的位置

JavaScript

JavaScript通常简称为JS，由网景(NetScape)公司推出。

是一门面向对象、轻量级、弱类型的解释型脚本语言。

弱类型：没有数据类型的限制，变量甚至可以不同定义就能使用。

解释型：无需编译，通过解释器解释运行。浏览器就是一个JS解释器。

script脚本：按指令顺序执行。

JS的作用

HTML用于定义页面中的内容

CSS用于控制HTML元素的外观和样式

JS用来操作HTML元素

HTML+CSS+JS组成前端基本三要素。

可以在页面中控制任意元素

可以在页面中动态嵌入元素

可以操作浏览器

可以与用户进行数据交互

JS写在哪里

1.写在某个标签的某个事件中

事件如鼠标单击onclick，鼠标移入onmouseenter等

2.写在

该标签是一个双标签，可以放在页面的任何位置，通常放在head标签中或body标签结束之前

3.写到一个独立的.js文件中，再通过script标签导入

1.新建一个.js文件，将js代码保存在其中

2.在也中通过script标签引入

JS中的输出语句

1.弹警告框

2.控制台输出

3.打印在新页面中

JS中的注释

同java一样

JS的组成

1.ECMAScript

简称为ES，是JS的标准，也是JS的核心语法。

包含了数据类型、定义变量、流程控制语句等语法内容。

2.BOM

浏览器对象模型

3.DOM

文档对象模型

ECMAScript核心语法

数据类型

原始类型

引用类型

定义变量

var name;

var age;

let sex;

标识符的命名规则

由字母、数字、下划线和$符号组成

不能以数字开头

不能使用js

JS中的输出语句

1.弹警告

2.控制台输出

3.打印在新页面中

循环、数组、正则表达式等

都于java相差不大

自定义函数等

window对象

对象里面有许多常用到行为

如

window.innerWidth

window.innerHeight

window.screen获取当前页面screen对象，保存了屏幕相关信息

window.location获取当前页面location对象，保存了浏览器地址栏相关信息

window.history获取当前页面history对象，保存了浏览器历史记录相关信息

window.alert()警告框

window.prompt()输入框

window.confirm()确认框

var wid=window.open()弹出新窗口，返回值为弹出的窗口对象

wid.close()window.close()关闭窗口。如果通过open()方法的返回值调用，关闭打开

的新窗口；如果通过window调用，关闭当前窗口

var myTimeout=window.setTimeout(函数,毫秒)设置延时生效，在指定毫秒后执行一次指定数。通常是一个匿名函数

window.clearTimeout(myTmeout)取消指定的延时生效

varmyInterval=window.setInterval(函数,毫秒)设置重复生效，在指定的毫秒后重复执行指定函数，通常是一个匿名函数

window.clearInterval(myInterval)取消指定的重复生效

screen对象

[window.]screen.width

获取当前屏幕设置的宽度

[window.]screen.height

获取当前屏幕设置的高度

[window.]screen.availWidth

获取当前屏幕除任务栏之外的宽度

[window.]screen.availHeight

获取当前屏幕除任务栏之外的高度

location对象

[window.]location.href

获取或设置当前浏览器地址，能回退

[window.]location.assign(“地址”)

设置当前浏览器地址，能回退

[window.]location.replace(“地址”)

设置当前浏览器地址，不能回退

[window.]location.reload()

重新加载当前页面

history对象

不一一举例

DOM

Document Object Model

文档对象模型

每个页面都是一个文档树document tree

页面中的每个标签都是这个树的节点node

根节点是html

document对象是DOM中的核心对象，表示当前页面对象

DOM用于操作(获取设置内容、更改样式等)页面中的节点

标签元素节点==DOM对象

获取节点的方式有很多

更具class id等 可设置节点的属性、样式、

可创建节点、删除、添加子节点、删除子节点

获取父节点 子节点

能够给节点添加事件

event对象

表单相关、输入框、按钮、菜单、选项框等

jQuery

jQuery是一个轻量级的javascript函数库，封装了很多javascript中的内容。jQuery的本质依然是javacript(一个.js文件)。

作用

jQuery的宗旨：”write less,do more"，意味写更少的代码，做更多的事情。

  • 用于获取文档中的元素，对元素进行操作

  • 更强大的选择器

  • 支持链式写法

  • 封装了ajax，更方便使用

    …

使用

1.下载jQuery.js文件，导入到项目中

  • 官网下载https://jQuery.com/download/

    • 通过右键另存为下载

  • 使用HBuilder中自带的创建

    • 新建项目，在js文件夹下右键新建.js文件，选择jQuery，修改名称

2.在页面中导入jQuery.js文件

<script src="jQuery.js文件路径"></script>

3.在页面中加入另一个script标签，在该标签中写jQuery代码

  • 通常将jQuery代码写在文档就绪函数中，表示在页面所有内容加载成功后开始执行
    • 文档就绪函数类似于js中的onload事件
<script src="jQuery.js文件路径"></script>
<script>
    //文档就绪函数
    jQuery(document).ready(function(){
        //jQuery代码
    });
    //简化版文档就绪函数
    $(function(){
        //jQuery代码
    });
</script>

jQuery对象和js对象(dom对象)

在js中，使用document.getElementXXX获取到的是dom对象。

dom对象只能使用如.style、.innerText等属性修改样式或内容，不能使用jQuery对象中的属性或函数。

在jQuery中，使用jQuery选择器获取到的是jQuery对象。

jQuery对象只能使用jQuery中的属性或函数，不能使用dom对象中的属性或函数。

通常在jQuery对象命名时，使用$符号作为前缀，方便区分jQuery对象和dom对象。

两者之间转换

jQuery对象转换为dom对象
  • jQuery对象[0]
  • jQuery对象.get(0)
dom对象转换为jQuery

$(dom对象)

<html>

    <body>
        <h1 id="test"></h1>
    </body>

    <script src="jQuery.js"></script>
    <script>
        $(function(){
            //通过js的方式获取的对象，称为dom对象，只能使用dom对象操作节点的属性和方法
            var test= document.getElementById("test");
            test.innerText="修改文本"；
            //通过jQuery的选择器获取的对象，称为jQuery对象，只能使用jQuery对象操作节点的属性和方法
            //$("#test").innerText="xxx"//无效
            $("#test").text("修改文本");

            //将jQuery对象转换为dom对象
            $("#test")[0].innerText="修改文本";
            //将dom对象转换为jQuery对象
            $(test).text("修改文本");
        });
    </script>
</html>

$符号冲突问题

在页面中引入jQuery.js后，$符号相当于"jQuery"这个单词，有特殊的含义。

如果一个页面中，会引入多个js函数库，并且这些函数库都会用到 符号时，就会造成 符号时，就会造成 符号时，就会造成符号冲突。

jQuery提供了一个**noConflict()**函数用于释放对$的使用权。

//直接调用该方法，释放对$的使用权，之后只能使用默认的"jQuery"
$.noConflict();
//$("#md")//这时会无效
jQuery("#md")//只能这样使用

//调用该方法，使用变量接收，释放对$的使用权，用指定的变量名代替$
var jq=$.noConflict();
jq("#md")//将jq当做$使用

jQuery中的选择器

基本选择器

基本选择器
$(“#id名”)id选择器，根据id名获取某个节点
$(“.class名”)class选择器，根据class名获取某些节点
$(“标签名”)元素选择器，根据标签名获取某些节点
$(“#id名，.class名，标签名”)群组选择器，根据指定的选择器获取所有满足的节点
$(“a.test”)获取class名为test的a标签
$(“a#test”)获取id名为test的a标签
$(“*”)获取所有节点

层次选择器

层次选择器
$(“#test空格*”)得到id为test节点中的所有子节点。
$(“#test空格div”)得到id为test节点中的所有div子节点。
$(“#test>*”)得到id为test节点中的第一层所有子节点。
$(“#test>.test”)得到id为test节点中的第一层class为test的子节点
$(“#test+p”)得到id为test节点后紧邻的第一个p节点
$(“#test~p”)得到id为test节点后同级的p节点

注意

  • $(“p .test”)表示得到p标签下的class为test的标签。有空格

    <p>
    <div class="test"></div>
    <p class="test"></p>
</p>
//可以得到p标签中的两个

  • $(“p.test”)表示饿到class为test的p标签。无空格

    <p>
    <div class="test"></div>
    <p class="test"></p>//只能得到这一个
</p>

过滤选择器

普通过滤

$(“选择器:特定单词”)

普通过滤
$(“tr:odd”)奇数索引。得到索引为1,3,5…的tr标签，按自然顺序为偶数
$(“tr:even”)偶数索引。得到索引为0,2,4…的tr标签，按自然顺序为奇数
$(“tr:first”)得到所有tr标签中的第一个
$(“tr:last”)得到所有tr标签中的最后一个
$(“tr:eq(索引)”)得到指定索引的tr
$(“tr:gt(索引)”)得到大于指定索引的tr
$(“tr:lt(索引)”)得到小于指定索引的tr
$(“li:nth-child(3n+1)”)
$(“#test p:first-child”)
$(“#test p:last-child”)
$(“div:not(.test)”)得到class不为test的div
$(“div:not(:eq(3))”)得到索引不为3的div

表单元素过滤

表单元素过滤
$(“:input”)得到所有表单元素，包含input、select、textarea
$(“:text”)得到文本框
$(“:password”)得到密码框
$(“:radio”)得到单选按钮
$(“:checkbox”)得到复选框
$(“:checked”)得到被选中的表单元素，包含radio、checkbox、select
$(“:checkbox:checked”)得到被选中的复选框
$(“:selected”)得到被选中的下拉菜单选项
( " : r e s e t " ) / (":reset")/ (":reset")/(“:submit”)得到重置/提交按钮

属性过滤选择器

属性过滤
$(“a[href]”)得到所有包含href属性的a标签
$(“a:not([href])”)得到所有不包含href属性的a标签
$(“div[属性=值]”)得到指定属性和值的div
$(“div[属性!=值]”)得到指定属性不等于指定值的div
$(“div[属性^=值]”)得到以指定值开头的指定属性的div
( " d i v [ 属性 ("div[属性 ("div[属性=值]")得到以指定值结尾的指定属性的div
$(“div[属性*=值]”)得到包含指定值的指定属性的div
$("div[属性1=值][属性2=值]")得到既包含指定值的属性1且包含指定值的属性2的div

内容(文本)过滤选择器

内容过滤选择器
$(“p:contains(文字)”)得到带有指定文字的p标签
$(“p:not(:contains(文字))”)得到不带有指定文字的p标签
$(“p:empty”)得到没有任何文本的p标签

操作节点

获取、设置节点内容

函数
节点.text()获取节点中的文本。相当于js中的var text=x.innerText；
节点.text(“内容”)设置节点中的文本。相当于js中的x.innerText=“内容”；
节点.html()获取节点中的内容。相当于js中的var text=x.innerHTML；
节点.html(“内容”)设置节点中的内容。相当于js中的x.innerHTML=“内容”；
节点.val()获取某节点中的value属性值。相当于js中的var val=x.value;
节点.val(“内容”)设置某节点中的value属性值。相当于js中的x.value=“内容”;

获取、设置节点样式

函数名
节点.css(“样式名”)获取某个节点的某个样式值
节点.css(“样式名”,“值”)设置某个节点的某个样式
节点.css({样式名:“值”,样式名:“值”…})同时设置多个样式
节点.css(“样式名”,“值”).css(“样式名”,“值”)同时设置多个样式

获取、设置节点属性

函数名
节点.attr(“属性名”)获取某个属性的值
节点.attr(“属性名”,“值”)设置某个属性的值
节点.removeAttr(“属性名”)移除指定属性
节点.addClass(“class名”)给某个节点追加class值
节点.removeClass(“class名”)移除某个节点的某个class值
节点.toggleClass(“class名”)添加或移除某个class值。如果没有则添加，有则移除。
节点.hasClass(“class名”)判断是否存在某个class值

打地鼠游戏核心原理

1.使用js画div和开始按钮

2.写好显示图片的样式，如“show”，使用setInterval，每隔一段时间，随机一个div，让其拥有该样式

3.每次只能有一个div有该样式：可以每次先清除“show”后，再添加"show"

4.给每个div添加单击事件，点中了图片(带有"show"的div)，移除样式"show"

创建节点

$(“完整标签”)

如

//js写法
var h1=document.createElement("h1");
h1.innerText="创建出的h1";
//jquery写法
var $h1=$("<h1>创建出的h1</h1>");

//以上两种方式创建出的节点都是处于游离态，需要添加到已有的某个节点上

添加节点

添加子节点
父节点.append(子节点)将子节点添加到父节点中的最后
子节点.appendTo(父节点)将子节点添加到父节点中的最后
父节点.prepend(子节点)将子节点添加到父节点中的最前
子节点.prependTo(父节点)将子节点添加到父节点中的最前
添加兄弟节点
原始节点.before(新节点)添加新节点到原始节点之前
新节点.insertBefore(原始节点)添加新节点到原始节点之前
原始节点.after(新节点)添加新节点到原始节点之后
新节点.insertAfter(原始节点)添加新节点到原始节点之后

移除节点

移除节点
某节点.remove()移除某节点
某节点.empty()移除某节点中的子节点

复制节点

复制节点
某节点.clone()复制某节点，不复制节点的事件
某节点.clone(true)复制某节点，复制节点的事件

修饰节点

替换节点
旧节点.replaceWith(新节点)用新节点替换旧节点
新节点.replaceAll(旧节点)用心节点替换旧节点
包裹节点
原节点.wrap(指定节点)使用指定节点包裹原节点，如果原节点是集合，会逐一包裹
原节点.wrapAll(指定节点)使用指定节点包裹原节点，如果原节点是集合，会整个用一个节点包裹
父节点.wrapInner(指定节点)使用指定节点对父节点中的所有子节点整个包裹

通过节点获取节点

函数名
某节点.next()得到某节点的下一个节点
某节点.prev()得到某节点的上一个节点
某节点.nextAll(参数)得到某节点之后的所有或指定节点。参数为标签名的字符串，如nextAll(“a”)表示得到后续所有a标签
某节点.prevAll(参数)得到某节点之前的所有或指定节点
某节点.siblings(参数)得到某节点同级所有或指定节点
父节点.children(参数)得到某父节点的所有或指定子节点
节点集合.first()得到节点集合中的第一个子节点
节点集合.last()得到节点集合中的最后一个子节点
子节点.parent()得到某节点的父节点
某节点.index()得到节点所在集合的索引

预设动画

函数名
show()同时将宽度和高度从0变为原始值，最终display:block
hide()同时将宽度和高度从原始值变为0，最终display:none
toggle()切换show/hide
fadeIn()将不透明度从0变为1，淡入，最终display:block
fadeOut()将不透明度从1变为0，淡出，最终display:none
fadeToggle()切换fadeIn/fadeOut
slideUp()将高度从原始值变为0，最终display:none
slideDown()将高度从0变为原始值，最终display:block
slideToggle()切换slideUp/slideDown
以上所有函数都可以给两个参数。第一个参数为动画执行所需毫秒，第二个参数为动画执行结束后的回调函数，表示在动画执行后执行。
$("#md").click(function(){
    //如果希望在动画执行后执行，不能这样写
    /*
    $(this).fadeOut(500);
    alert("消失后弹出");
    */
    //正确写法
    $(this).fadeOut(500,function(){
        alert("消失后弹出");
    })
});

自定义动画

启用自定义动画

  • 使用animate()函数，该函数有四个参数分别为样式组、所需事件、动画函数、回调函数
  • animate()函数支持链式写法
  • 只支持数值型样式。如尺寸、位置等。字符串型样式不支持，如颜色等
节点.animate({
    "样式":"值",
    "样式":"值"
},2000,linear,function(){
    //动画执行结束后执行
}).animate(...)

停止动画

停止当前动画

节点.stop();

停止所有动画

节点.stop(true);

事件

绑定事件

  • js中的事件绑定方式为：

    //dom节点.on事件=function(){}
document.getElementById("md").οnclick=function(){

}

  • jquery中的事件绑定方式为：

    //jquery节点.事件(function(){});
$("#md").click(function(){

});
或
//jquery节点.bind("事件名",function(){})
$("#md").bind("click",function(){

})
事件函数作用
click()单击
hover()鼠标悬停/离开。该事件可以传入两个函数，分别表示悬停时触发第一个函数，离开时触发第二个函数。如果只有一个函数，悬停离开均触发这一个函数。
focus()获得焦点
blur()失去焦点
change()改变。适用于各种能发生变化的节点，如文本框、单选、复选、下拉等
mouseup/down/over/move/enter/leave/out()鼠标相关
submit()表单提交
…将js中的事件名去掉on变为函数

前端框架

设计者提供给用户该框架的css文件和js文件。

用户只需导入css文件和js文件后，通过对应的class值呈现相应的样式和效果。

任何前端框架都有对应的开发文档API，只需参考其使用使用说明即可。

JSON

JavaScript Object Notation JS对象简谱

是一种数据交换格式，可以理解为保存数据、交换数据的一种格式。

JSON数据通常以键值对的形式保存。

键:值

键的类型为字符串，值的类型可以是普通类型、对象或数组。

值的数据类型

值的数据类型符号示例
字符串“”“name”:“wanghai”
数值直接写数字“age”:20
逻辑值true/false“married”:false
空null“car”:null
对象{}“pet”:{“petName”:“小汪”,“petAge”:2}
数组[]“family”:[{“relation”:“父亲”,“name”:“xxx”},{“relation”:“弟弟”,“name”:“xxx”}]

举例

使用Json格式如保存一个人的信息

属性：姓名、年龄、性别、宠物、婚姻状况、房产、家庭成员

{
    "name": "张明",
    "age": 20,
    "sex": "男",
    "pet": {
        "petName": "刀乐",
        "petType": "猫"
    },
    "married": true,
    "house": null,
    "family": [{
        "name": "赵鑫",
        "relation": "配偶"
    },{
        "name": "张明亮",
        "relation": "父亲"
    }]
}

在HTML中读取JSO文件

  • $.getJSON(“json文件路径”,回调函数)
  • $.ajax({url:“访问的资源路径”,success:function(){访问成功后的回调函数}})

个人心得

对于本次对于前端的学习，我收获颇多，虽然之前在学校的时候也系统的学习过前端这门课程，但是和大部分的同学一样，当时学习的时候大多数问题都能够解决，遇到一些难题可以上网去查一下，但是这次的学习我觉得我对于前端这门课程的理解比之前更加深刻，对于前端的学习，因为我本人并不是很擅长，但是我知道万变不离其宗，不论做什么事情，都需要日积月累的练习，所以想学好前端需要我们不听的去巧，去做，同时我们不能变成愣头青，什么都自己敲，在老师的推荐下，我们应该学会利用别人的代码加以改正，从而变成自己的代码，完成自己所需要达成的效果，这样才算是合格学习了前端这门课程。并且也要熟练的运用我们所学的css、js、jQuery等等便于我们方便完成前端的这些工具，并且能够灵活变通才是学到精髓。

Baylike
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
华清远见-重庆中心-前端技术总结/知识点梳理/个人总结/面试题解析
liu_sisi_的博客
02-13 203
前端
华清远见-重庆中心-Java web段技术总结/知识点梳理
m0_51785393的博客
03-05 195
Servlet 是 sun 公司制定的一种用于扩展web服务器的功能的组件规范。
华清远见-重庆中心-数据库阶段技术总结/知识点梳理/个人总结/关于JavaWeb技术的解析（看法）
bukaopuH的博客
01-11 264
使用Java开发Web服务的技术，统称为JavaWeb。用户通过浏览器访问某个域名或IP地址时，浏览到的综合性页面实际就是发布在服务器上的一个应用程序，用户通过浏览器访问该程序。网站中的一个页面JavaWeb就是B/S模式下的软件开发，开发综合性的服务网站。部署Web项目的平台。由Apache、Sun和其他公司及个人共同开发的web服务器。免费、开源、轻量级，在中小型系统中普遍被使用。是开发和调试Web项目的首选。官网https://tomcat.apache.org/选择合适的版本下载。当前Java版本是
华清远见-重庆中心-java web/知识点梳理/个人总结
liu_sisi_的博客
03-06 157
java
华清远见-重庆中心-框架阶段技术总结/知识点梳理/个人总结/关于框架技术的解析（看法）
bukaopuH的博客
02-15 271
一套规范。实际是他人实现的一系列接口和类的集合。通入导入对应框架的jar文件(maven项目导入对应的依赖)，进行适当的配置，就能使用其中的所有内容。开发者可以省去很多模板代码，如dao中的CRUD，MVC模式下层与层之间的关联。只需要集中精力实现项目中的业务逻辑部分。Spring、SpringMVC、MyBatis、MyBatisPlus、Hibernate、JPA等。SSH:最初是Spring+Stucts2+Hibernate组成，之后Stucts2被SpringMVC取代。SSM:Spring+Sp
华清远见-重庆中心-框架阶段技术总结/知识点梳理/个人总结
weixin_62297963的博客
02-15 158
框架阶段技术总结/知识点梳理/个人总结
华清远见-重庆中心-框架阶段技术总结/知识点梳理
ggk911的博客
02-20 378
javaEE、JDBC、SpringJDBC、MyBatis、MyBatisPlus、Postman、JPA、LayUI、SpringMVC、Spring、SpringBoot
华清远见-重庆中心-JAVA高级技术总结/知识点梳理/个人总结
qq_64008133的博客
01-20 156
JAVA高级总结
华清远见-重庆中心Java Web阶段/知识点梳理/个人总结
qq_56576430的博客
03-03 113
，
vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染
yrldjsbk的博客
07-18 317
除了必要的import导入之外，剩余的就是直接调用了，赋值了。经历过上一次的，新鲜好物的栏目渲染之后，我们已经熟练了，vue3的接口调用，数据渲染到页面中的整体流程。如图，我们已经做好了，列表的渲染赋值。里面可以看见，顶部是脚本，中间是模板，底部是样式。在首页面，内容里面，会看见很多内容，上期内容我们已经完成了新鲜好物的渲染操作。1：打开接口文档，查询：人气推荐栏目的接口地址信息和参数，返回值对象信息等。以上内容就是，已经写好的，HomeHot的模板代码了。如图，地址信息和调用的方式已经清楚了。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1233
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
浏览器的卡顿与react的解决思路
weixin_45575944的博客
07-18 258
众所都周知，js是单线程，当react处理vdom相关工作的时候，会阻塞浏览器的渲染过程，阻塞了渲染过程，那么页面就卡着。结合上面所述，1秒60hz，相当于16.67ms至少需要渲染出1张新图，才不会觉的卡顿。我理解这里的卡顿，并不是说优化的怎么怎么好让总工作量少了，处理的快了，而是可能虽然每次渲染出来的新内容少，但是他仍然在生成，而不会在处理过程中一直不变，然后突然渲染出来，这种抖动的、掉帧的渲染方式，容易让人觉的他卡了，而一直在变化，虽然每次变化的不多，但总体是‘流畅的’
中间件的理解
modi000的博客
07-15 329
直接返回，前置服务可以支持更高流量的并发，后置的需要耗时、耗力的，需要IO操作的服务，可以通过MQ慢慢处理。前端写消息的速率比后端处理消息的速率要快很多的。a.快递员角度：快递员无需将快递直接交到用户手里，放在菜鸟驿站即可走了，增加了送快递的数量，提高了送快递的效率；b.用户角度：快递到达的时候在上班，当时无时间取快递，当有了菜鸟驿站后，用户可以在下班闲暇时间去取快递。所以，中间件可以多个可能互相调用的系统耦合程度，提升接口的响应速度，。c.双十一的时候，快递量暴增，快递员不会手忙脚乱、用户可排序取快递。
【前端】JavaScript入门及实战6-10
weixin_45980065的博客
07-17 563
如果使用Number表示的数字超过了最大值，则会返回一个Infinity，表示正无穷，typeof是number。NaN是一个特殊的数字，不是数字：not a number，是一个字面量，typeof是number。但是注意，null和undefined这两个值没有toString()方法，如果调用会报错。它会将null直接转换为"null"，将undefined直接转换为"undefined"当声明一个变量，但是并不给变量赋值时，它的值就算undefined。该方法不会影响原变量，它会将转换的结果返回。
cookies,sessionStorage和localStorage都有什么区别
qq_51856496的博客
07-17 229
cookies,sessionStorage和localStorage都有什么区别 cookies在请求数据传输的时候会携带至后台，sessionStorage,localStorage是纯客户端缓存 cookies有过期机制,sessionStorage是会话级缓存，窗口关闭后会销毁，localStorage是本地持久缓存手动才会清除 cookies只能存储4KB并且不推荐前端用js直接操作，sessionStorage,localStorage存储有5MB
(三)js前端开发中设计模式之工厂模式
峰会路转的博客
07-17 220
工厂模式是一种创建型设计模式，它可以帮助我们根据需求创建对象。
ReactRouter v6升级的步骤
feixin369的博客
07-14 411
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
最新发布
m0_62996549的博客
07-18 149
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
华清远见《USB应用实例》：A/D转换与USB数据采集详解
《USB应用开发实例详解》是一本专注于介绍USB技术在嵌入式系统中的实际应用的书籍，特别关注于第17章的USB控制A/D转换数据采集实例。该章节深入探讨了模拟量数据采集在现代系统中的重要性，因为许多工业和科研应用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值