![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
HTML+CSS+JS+JQ+LayUI+VUE
是洋洋a
男的
展开
-
利用JS、CSS实现列表自动滑动滚动
这几天在做,对于大屏有很多信息需要实时滚动,废了点力气学的明明白白的,特来记录供大家学习。原创 2024-04-05 21:12:09 · 3749 阅读 · 0 评论 -
JS自动获取城市、天气预报【基于高德地图】
最近开发个人网站,有个需求是可以,并且,用来展示,查阅了很多资料,发现,因此作者费劲功夫终于做好,特别在这里记录一下,用来供小伙伴们使用~先放一个。原创 2024-05-24 10:49:57 · 1794 阅读 · 0 评论 -
CSS实现前端小组件随笔
该登录界面中使用了“layui”组件制作标签以及前缀等,在使用时可以根据自己的需要,酌情删减,带有“layui-xx类的地方使用了layui组件不使用layui组件库并不会对登录界面造成影响。原创 2024-06-16 22:45:39 · 397 阅读 · 0 评论 -
CSS(一)---【CSS简介、导入方式、八种选择器、优先级】
CSS全称:“”,中文名:“层叠样式表用于定义网页样式和布局的样式表语言。通过CSS可以指定页面中各个元素的颜色、字体、大小、间距、边框等等样式。如果HTML是一个房子的骨架,那么CSS就是对房子进行精装修!选择器是使用CSS的基础,不会使用选择器就不会使用CSS。“元素(标签)选择器”、“类选择器”、“ID选择器”、“通用选择器”、“子元素选择器”、“后代(包含)选择器”、“兄弟(并集)选择器”、“伪类选择器选择器常在“内部样式表”、“外部样式表”中使用,内联样式默认就是“ID选择器。原创 2024-03-28 20:09:35 · 1065 阅读 · 0 评论 -
JavaScript(一)---【js的两种导入方式、全局作用域、函数作用域、块作用域】
重要什么是交叉定义?很简单,就是我先用var(let)定义一个变量x,再用let(var)重新定义变量x,这就叫交叉定义。在相同作用域中使用var和let交叉定义相同变量是不允许的let x = 10;// 允许var x = 6;// 不允许//允许let y = 60;//不允许let x = 10;// 允许var x = 6;// 不允许//允许let y = 60;//不允许这样会使程序崩溃报错都没有!原创 2024-03-30 22:10:34 · 1102 阅读 · 0 评论 -
JavaScript(二)---【js数组、js对象、this指针】
的时候,我们通常也使用“原创 2024-03-31 20:26:37 · 587 阅读 · 0 评论 -
HTML(二)---【常见的标签使用】
粗体、斜体的实现可以在CSS中实现,不过如果实在想利用HTML实现也不是不可以,就是比较反人类。粗体、斜体、斜体三个标签都是双标签。其中和在本质上是一样的,都是斜体。不过我们更偏向于使用是一个单标签定义输入字段,通常为创建一个输入框用来获取用户输入是单标签通常与、、、、标签结合使用。是双标签。使用原创 2024-03-26 22:17:03 · 966 阅读 · 0 评论 -
CSS(二)---【常见属性、复合属性使用】
对于字体大小、字体高度、窗口宽度等等,只要涉及大小的都需要我们给定一个属性值单位。那么属性值的单位可以是:“px(像素)”、“%(百分比)其中,百分比是相较于整个窗口的大小。原创 2024-03-28 23:13:15 · 1106 阅读 · 0 评论 -
HTML(一)---【基础】
HTML是:“超文本标签语言”(HTML不是一种编程语言,而是一种“标记语言HTML使用标记标签元素)来描述网页。XHTML是HTML更严谨和更纯净的版本。HTML5是HTML的下一代版本。标签表示HTML文档的根(根元素),用来表示文档中HTML的开始。标签是所有其他HTML元素的容器,除了。标签是“元数据”(关于数据的数据)的容器,元数据是有关HTML的数据,元数据不会被显示。浏览器工具栏中的标题在搜索引擎结果中显示标题。原创 2024-03-26 18:59:56 · 969 阅读 · 0 评论 -
HTML(三)---【列表、表格、块元素、行元素的使用】
li>是双标签<li>不单独使用,用于<ul>(无序列表)、<ol>(有序列表)、<menu>(菜单列表)中。<ul>是双标签<ul>需搭配<li>实现效果<ol>是双标签<ol>相较于<ul>最大的区别就是,对所有的列表项进行了编号处理,编号可以是:“数字”、“字母<menu>是无序列表,本质上和<ul>并无不同,即使使用<menu>浏览器也会当做<ul>处理。顾不再赘述。因<table>表格一般与<tr><th><td>标签结合使用,故我们先介绍<tr><th><td>,最后再介绍。原创 2024-03-27 20:47:20 · 1171 阅读 · 0 评论 -
CSS(四)---【链接美化、浮动布局、三种定位】
浮动属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘,这样即可使得元素进行浮动。语法选择器;使用场景:“当我们使用多个行内块元素摆放到一行时,彼此之间是会有空隙的,这时我们就可以使用浮动布局用来消除空隙浮动是是相对于父元素浮动,只会在父元素内部移动。原创 2024-03-30 17:07:16 · 1036 阅读 · 0 评论 -
JavaScript(五)---【DOM】
当网页被加载时,浏览器会创建页面的文档对象模型,也就是DOM每个HTML都可以被视为一个文档树DOM为这个文档树提供了一个编程接口,开发者可以使用JS来操作这个树。原创 2024-04-03 17:32:00 · 947 阅读 · 0 评论 -
JQuery(二)---【使用JQuery对HTML、CSS进行操作】
上面四种改变元素的方法,都有回调函数。删除元素和内容,一般可以使用以下两个。我们来看一个例子,用来区分“我们仍然使用上面所说的:“下面我们创建两个CSS类(添加内容,也可以在“原创 2024-04-07 20:26:20 · 1394 阅读 · 0 评论 -
JavaScript(四)---【执行上下文、hoisting(提升)、严格模式、事件】
执行上下文”(execution context 简称CE)是指:“当js引擎解析到可执行代码片段的时候,就会做一些执行前的准备工作,这个准备工作就是执行上下文”。这么说可能难以理解,通俗点来说:“将变量、函数声明提升到全局变量层次,从而可以使所有的代码段都可以使用这些变量、函数hositing提升用于将某个(变量、函数)提升到全局变量提升只能提升“声明”,不能提升它的初始化,这也意味着:“如果提升一个没有值的变量,那么值会是undefined1.2使用方法那具体什么时候会用到呢?原创 2024-04-02 21:15:50 · 1001 阅读 · 0 评论 -
JQuery(三)---【使用JQuery动态设置浏览器窗口尺寸、JQuery的遍历】
JQ遍历,意为:“移动”,用于根据其相对于其他元素的关系来“查找HTML元素下面是一个“家族树”,JQ的遍历将会在“家族树”上进行:在“家族树”中,有三种关系:“父子关系”、“兄弟(同胞)关系”、“祖孙关系元素是的父元素,同时是其中所有内容的祖先元素是元素的父元素,同时是的子元素左边的元素是的父元素,的子元素,同时是的后代元素是的子元素,同时是和的后代两个原创 2024-04-08 19:16:32 · 1046 阅读 · 0 评论 -
CSS(三)---【盒子模型、边框、外边距合并】
在CSS中,所有的标签都被认为是一个盒子,这个盒子有内容、盒子中的空隙、盒子的厚度、盒子外的距离。对应于CSS术语就是:“内容(content)”、“内边距(padding)”、“边框大小(bord)”、“外边距(margin)如下图所示:通过盒子模型,我们可以更精确的控制标签。所以使用CSS来进行页面布局,可以认为就是将盒子摆在合适的位置。不过值得注意的是,盒子模型只是人为抽象出来的概念,实际在CSSHTML中并不存在盒子模型,但对于上述四个属性却是实际存在的。原创 2024-03-29 16:09:37 · 1084 阅读 · 0 评论 -
JavaScript(三)---【this指针,函数定义、Call、Apply、函数绑定、闭包】
<script></script>原创 2024-03-31 23:14:56 · 1011 阅读 · 0 评论 -
JavaScript(六)---【回调、异步、promise、Async】
回调”是作为参数传递给另一个函数的函数这种技术允许函数调用另一个函数回调函数可以在另一个函数完成后运行如果大家接触过“多线程”的概念,那么“异步”应该是非常好理解的。一个相对好理解的说法就是:“异步就是在同一时间运行多个代码段(函数、代码块等)而官方的说法:“与其它函数并行运行的函数称为异步给大家举一个例子:“在某一时刻,我们需要同时获得a+b和a*b的值该怎么办?如果顺序执行a+b和a*b终究会有时间差,并不是同时获得。那么此时就用到了异步了,将a+b和a*b两个运算过程,同时进行promise。原创 2024-04-03 22:52:28 · 853 阅读 · 0 评论 -
JQuery(一)---【JQuery简介、安装、初步使用、各种事件】
JQuery是一个JavaScript的“函数库”,不是JavaScript的一个框架,与“VUE、REACT”有本质区别!为方便起见,后续的JQ全部代指JQueryJQuery设计的初衷是:“方便对DOM对象的操作以及对DOM对象进行更精细的操作在“VUE、REACT”等框架出现之前,JQ曾经统治过一整个时代,即使现在JQ相对落后,但学习JQ仍然是有必要的,学习JQ后可以帮我们精简代码偷偷懒)JQueryHTML元素选取HTML元素操作CSS操作HTML事件函数设计、绑定。原创 2024-04-06 20:41:16 · 836 阅读 · 0 评论 -
CSS单位px、rem、em、vw、vh的区别
这几天在写个人网站,因为要适配和,因此了解到了一个:“”(),现在我们来讨论一下中的单位,只有掌握好了这些单位,我们才可以熟练使用“不同的单位修改盒子的宽度。原创 2024-05-22 19:34:46 · 1202 阅读 · 0 评论 -
AJAX(JavaScript版本)
XMLHttpRequests对象是AJAX的基石使用XMLHttpRequests对象允许前端向后端发送一个数据请求用来获得数据这个数据请求的过程可以分为下面"四大步”:创建XMLHttpRequests对象定义回调函数打开XMHttpRequests对象向服务器发送请求回调函数是作为参数传递给另一个函数的函数定义回调函数我们可以使用XMLHttpRequests对象提供的“onload()”函数,该函数用来指定当请求响应后应该执行的函数//当相应准备就绪时要做什么方法描述。原创 2024-05-20 14:35:51 · 997 阅读 · 0 评论 -
AJAX(JQuery版本)
方法是简单且强大的AJAX方法load()方法从服务器加载数据,并把返回的数据放入被选元素中语法参数说明URL:文件所在的路径data:与请求一同发送的查询字符串键/值对集合callback:load()方法完成后执行的函数名称$.get()方法通过远程HTTP GET请求载入信息这是一个简单的GET请求功能,用来取代复杂的$.ajax语法,dataType)参数说明参数描述url必需。规定将请求发送的哪个 URL。data可选。规定连同请求发送到服务器的数据。可选。原创 2024-05-20 17:54:41 · 884 阅读 · 0 评论 -
CSS中的Flex布局
Flexflex-direction:内部元素的排列方式:从左到右、从右到左、从上到下、从下到上flex-wrap:子元素的换行方式:不换行、换行(第一行在上面、第二行在上面)flex-flow:子元素的排列方式和换行方式的简写justify-content:子元素的水平对齐方式align-items:子元素的垂直对齐方式align-content:设置多个元素组成的整块的对齐方式order:按照数字大小设置各个元素之间的排列方式flex-grow:按照权重分配剩余空间进行等比例放大。原创 2024-05-21 19:43:55 · 5873 阅读 · 0 评论 -
【一】ECharts----【基本概念、基本实例】
本博客记录学习:“ECharts的知识点,方便回顾查询”基于EChart官方文档制作:Documentation - Apache EChartsECharts的安装有三种方法:“独立版本”、“使用CDN”、“使用NPM”直接下载“echarts.min.js”并用script标签引入:下载地址:下载 - Apache ECharts独立版本也有三个版本:CDN的安装相对简单,可以直接通过API调用:常见的CDN有以下三种:NPM的安装需要NPM版本大于3.0:二.ECharts实例原创 2024-04-20 11:42:00 · 907 阅读 · 0 评论 -
JS+JQ+Layui菜单栏点击URL跳转后保持选中状态
用户观感并不是很好,因此我们需要判断当处于当前选项卡对应的页面时,再次点击选项卡不会执行跳转操作。点击这个选项卡再次跳转到这个页面,这就导致用户体验极差且不会保留缓存数据。)时,页面切换到另一个页面,但是此时我。最近在开发个人网站,其中使用了“解决方式很简单,只需要在添加“”的函数处,同时设置该标签是“”选项卡成功被选中且保持高亮。”官方文档可知,当我们对“问题的解决有两种,可以使用。那么我们是不是可以通过“在我点击一个选项卡(解决,两种方式都行,原创 2024-05-16 14:40:57 · 1030 阅读 · 0 评论 -
【二】ECharts----【异步加载数据】
ECharts的数据设置通常借助setOption方法实现,如果需要异步加载数据,可以使用JQuery等工具在异步获取数据后通过setOption填入数据和配置项就行。原创 2024-04-21 10:54:42 · 969 阅读 · 0 评论 -
JQuery(四)---【使用JQuery实现动画效果】
JQuery允许我们将方法链接起来,使用链接可以方便我们对某些方法的复用例如:“假设我们有一个id为p1的段落,我们想要它执行slideDown方法和slideUp方法可以看到,我们写了两条语句,让这个元素执行这个两个功能但是如果一个元素需要执行非常多的功能,假设有100个,我们就要写100条语句,这对于“程序员”来说很不方便!为此,我们可以使用链接来简化书写!原创 2024-04-16 15:12:02 · 1312 阅读 · 0 评论 -
CSS学习【margin为负值】
不全是正值,则两者相加,得到的结果为最终移动距离。都为负值,则取绝对值最大的那个。全部为正值,取最大值。原创 2024-08-24 17:13:38 · 1023 阅读 · 0 评论 -
CSS盒子模型【怪异盒模型、定位看这一篇就够了!!!】
也就是盒子里面能留给子元素的宽度和高度大小,也就意味着盒子里面的内容的最大面积就是width和height形成的矩阵面积。将盒子的左右两边的margin都设置为auto,盒子将水平居中。原创 2024-08-26 19:57:53 · 720 阅读 · 0 评论 -
CSS-径向渐变【看这一篇就够了!!!】
style>.box3 {/*blue 代表蓝色0% 表示蓝色出现的位置yellow 代表黄色50% 表示黄色出现的位置red 代表红色100% 表示红色出现的位置*/上面出现的位置仅代表颜色出现的地方,在颜色出现的地方会水平自动的向左右延伸,直到碰到其他的颜色从而形成渐进,在两个颜色发生转换的地方我们叫做“转换中点我们可以将中点移动到这两个颜色之间的任意位置。方法:“在两个颜色之间添加未标记的 % ,以知识颜色的转换中点。原创 2024-08-29 22:00:39 · 564 阅读 · 0 评论 -
CSS-background属性【看这一篇就够了!!!】
padding区域是有背景颜色的。原创 2024-08-28 16:52:17 · 1407 阅读 · 0 评论 -
JQuery异步请求与Flask后端通信、this和event指针汇总
根据HTTP的“get”与“post”两种请求,JQuery提供“$.get()”、“$.post()”、“$.ajax()”三种方式通信。使用$.ajax()可以很方便的与后端交换数据,不过当我们传入的数据是一个JS对象时,我们需要使用“JSON.stringify(object)”方法来将JS对象转换为JSON数据。除此之外,我们还需要修改“请求头格式”为“application/json”,如果不修改“请求头格式”,那么会报错:“415 (Unsupported Media Type)”而解决办法就是原创 2024-07-29 18:21:08 · 1043 阅读 · 1 评论 -
CSS-display属性【看这一篇就够了!!】
块级元素行内元素行内块元素互相转换和对比隐藏元素空白间隙。原创 2024-08-27 18:15:32 · 602 阅读 · 0 评论 -
Flask中的session
点击“添加session”按钮,服务端会创建一个:“session["test"] = this is test”的session。点击“获取session”按钮,服务端会返回session的值,前端用console.log()打印出这个值。在这里,我们创建了一个简单的前端页面,并且添加了三个按钮,方便为下面的功能做说明。在这里我们推荐使用第二种和第三种,并且定期更新密钥,防止数据泄露。点击“删除session”按钮,服务端会删除所有session。”用来再此请求的时候验证。中的字典一样,我们可以使用。原创 2024-08-22 10:55:19 · 886 阅读 · 0 评论 -
在Flask中使用Jinjia2
简单来说,在web应用开发中,为了实现前后端的解耦分离前后端逻辑,就可以将表现逻辑分离出来交由模板通过模板引擎来实现。其实模板就是包含静态与动态内容的网页内容。Jinja2是一种现代的、对设计人员友好的Python模板语言。具有快速广泛使用和安全的特性。所谓渲染,其实就是向网页中加载静态内容及动态内容值的过程。原创 2024-06-16 15:50:56 · 660 阅读 · 0 评论 -
制作网页底部以及<footer>置底
我们制作网页时,少不了会给网页制作底部,用来注明作者信息也好,底部导航栏也好。最近作者在制作个人网站,制作网页底部踩了不少坑,因此来分享一下经验。原创 2024-08-23 09:58:09 · 1069 阅读 · 0 评论 -
CSS文本【关于文本看这一篇就够了!!!】
【代码】CSS文本【关于文本看这一篇就够了!!!原创 2024-08-25 22:12:40 · 938 阅读 · 0 评论 -
CSS选择器【关于选择器看这一篇就够了!】
下面的代码用来选择类名为“原创 2024-08-25 13:52:55 · 889 阅读 · 0 评论 -
CSS-常用属性【看这一篇就够了】
属性规定当内容移除元素框时该做什么。,其用法和border属性一样。原创 2024-08-30 14:18:18 · 575 阅读 · 0 评论