前端
文章平均质量分 76
李元芳芳芳
这个作者很懒,什么都没留下…
展开
-
JS random() 方法
random方法可返回介于 0(包含)~1(不包含)之间的一个随机数Math.random()实例1:取得介于1到10之间的一个随机数Math.floor((Math.random()*10)+1);实例2:取得介于1到100之间的一个随机数Math.floor((Math.random()*100)+1);实例3:以下函数返回min(包含)~ max(不包含)之间的数字:function getRndInteger(min,max) {return Math.floor原创 2022-02-07 17:28:17 · 2141 阅读 · 0 评论 -
JS中slice,splice,split的区别
1.slice :定义:接收一个或两个参数,它能够建立一个由当前数组中的一项或多项组成的新数组,注意是新数组哦~ 也就是说它不会修改原来数组的值。用法:slice( para1 ),会截取从para1开始的到原数组最后的部分;slice(para1,para2)会截取原数组的从para1开始的para2-para1个数组。】注意:当两个参数中存在负数时,用原数组的长度加上两个负数的参数做为相应的参数来计算。2. splice :定义:强大的数组操做方法用法 : splice( para1原创 2022-01-27 12:46:43 · 782 阅读 · 0 评论 -
CSS单位总结
单位描述em相对长度单位,相对于自身元素的字号大小,如果没有设置即参照父容器的字号大小或浏览器默认字号大小;举例:如一个div#box的宽度设置为#box{ width:10em },其字号大小#box{ font-size:14px },则此div的宽度为140px。remrem是css3的新标准也是一种相对长度单位,其相对于HTML根标签的字号大小。举例: 如有css: html{ font-size:14px},此根标签内有元素div#box的宽度为:#box{ widt...原创 2022-01-25 13:44:13 · 579 阅读 · 0 评论 -
快速入门Vue
1.Vue基础1.1 Vue简介1.JavaScript框架2.简化Dom操作3.响应式数据驱动1.2 第一个Vue程序文档传送门:https://cn.vuejs.org1.导入开发版本的Vue.js2.创建Vue实例对象,设置el属性和data属性3.使用简洁的模板语法把数据渲染到页面上el挂载点:<div id="app"> {{message}}</div>var app = new Vue({ el:"#app", data:{原创 2021-11-07 21:02:47 · 93 阅读 · 0 评论 -
Ajax学习之路
1.原生Ajax1.1 Ajax简介Ajax全称为Asynchronous JavaScript And XML,就是异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。 AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。1.2 XML简介XML 可扩展标记语言XML 被设计用来传输和储存数据XML和HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签,用来表示一些数据。比如说我有一个学生数据原创 2021-11-02 19:38:47 · 140 阅读 · 0 评论 -
jQuery
1.jQuery概述1.1 JavaScript库JavaScript库:即library,是一个封装好的待定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。简单理解:就是一个JS文件,里面对原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)1.2 jQuery的概念2.jQu原创 2021-10-30 21:16:14 · 208 阅读 · 0 评论 -
PC端网页特效
1.元素偏移量offset系列1.1 offset概述我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等· 获得元素距离带有定位父元素的位置· 获得元素自身的大小(宽度高度)注意:返回的数值都不带单位1.2 offset与style区别...原创 2021-10-26 13:40:24 · 74 阅读 · 0 评论 -
BOM 浏览器对象模型
1.BOM概述1.1 什么是BOMBOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是windowBOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性1.2 BOM的构成window对象是浏览器的顶级对象,它具有双重角色。1.它是JS访问浏览器窗口的一个接口2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成wndow对象的属性和方法。在调用的时候可以省略window,比如alert()、pro原创 2021-10-24 16:18:01 · 1650 阅读 · 0 评论 -
JS事件高级
1.注册事件(绑定事件)1.1 注册事件概述给元素添加事件,称为注册事件或者绑定事件注册事件有两种方式:传统方式和方法监听注册方式传统注册事件利用on开头的事件onclick <button onclick="alert('hi~')"></button> btn.onclick=function(){}特点:注册事件的唯一性同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c标准 推荐方式ad原创 2021-10-22 00:08:58 · 119 阅读 · 0 评论 -
移动WEB开发之响应式布局
1.响应式开发1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的1.2 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化平时我们的响应式尺寸划分超小屏幕(手机,小于768px):设置宽度为100%小屏幕(平板,大于等于768px):设置宽度为750px中等屏幕(桌面显示器,原创 2021-10-11 10:22:14 · 74 阅读 · 0 评论 -
移动WEB开发之rem适配布局
引入1.页面布局文字能否随着屏幕大小变化而变化2.流式布局和flex布局主要针对宽度布局,那高度如何设置3.怎样让屏幕发生变化的时候元素高度和宽度等比例缩放1.rem基础rem单位rem(root em)是一个相对单位,类似于em, em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如,根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。2.媒体查询2.1 什么是媒体查询媒体查询(Media Que原创 2021-10-07 17:59:03 · 70 阅读 · 0 评论 -
移动WEB开发之flex布局
1.传统布局与flex布局传统布局兼容性好布局繁琐局限性,不能再移动端很好的布局flex弹性布局操作方便,布局极为简单,移动端应用很广泛PC端浏览器支持情况较差IE 11或更低版本,不支持或仅部分支持建议:1.如果是PC端页面布局,我们还是传统布局2.如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局。2.flex布局原理任何一个容器都可以指定为flex布局。当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-alig原创 2021-09-30 16:01:37 · 92 阅读 · 0 评论 -
前端入门教程(六)
1.盒子模型网页布局要学习三大核心,盒子模型,浮动和定位,学习好盒子模型能非常好的帮助我们布局页面1.1 看透网页布局的本质网页布局过程:1.先准备好相关的网页元素,网页元素基本都是盒子Box2.利用CSS设置好盒子样式,然后摆放到相应位置3.往盒子里面装内容网页布局的核心本质:就是利用CSS摆盒子1.2 盒子模型(Box Model)组成所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它原创 2021-08-18 09:55:03 · 301 阅读 · 0 评论 -
前端入门教程(五)
1.CSS的三大特征CSS有三个非常重要的特性:层叠性、继承性、优先级1.1 层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会重叠 <style> div { color: red; font-size: 80px;//仍执行 }原创 2021-08-15 12:57:58 · 150 阅读 · 1 评论 -
前端入门教程(四)
1.CSS 的复合选择器1.1 什么是复合选择器在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基础选择器进行复合形成的。复合选择器可以更准确、更高效地选择目标元素(标签)复合选择器是由两个或者多个基础选择器,通过不同的方式组合而成的常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等1.2 后代选择器(重要)后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格原创 2021-08-09 11:28:48 · 217 阅读 · 1 评论 -
前端入门教程(三)
1. Emmet 语法Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法。1.1快速生成HTML结构语法1.生成标签 直接输入标签名 按tab键即可2.如果想要生成多个相同标签 加上*就可以了 比如div*3 就可以快速生成3个div3.如果有父子级关系的标签,可以用 > 比如 ul>li就可以了4.如果有兄弟关系的标签,用 + 就可以了,比如div + p5.如果生成带有类名或者id名字的,直接写原创 2021-08-04 18:46:09 · 185 阅读 · 1 评论 -
前端入门教程(二)
1.CSS简介CSS的主要使用场景就是美化网页,布局网页的。1.1 HTML的局限性说起HTML,这其实是个非常单纯的家伙,他只关注内容的语义。比如<h1>表明这是一个大标题,<p>表明这是一个段落,<img>表明这儿有一个图片,<a>表明此处有链接。很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点:丑。虽然HTML可以做简单的样式,但是带来的是无尽的臃肿和繁琐…1.2 CSS-网页的美容师CSS是层叠样式表(Cascading St原创 2021-08-04 17:04:00 · 279 阅读 · 0 评论 -
前端入门教程(一)
1.网页1.1 什么是网页网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”,通常是HTML格式的文件,它要通过浏览器来阅读。网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以.htm或.html后缀结尾的文件,因此将其俗称为HTML文件。1.2 什么是HTMLHTML指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。HTML不是一原创 2021-07-22 21:42:10 · 1736 阅读 · 1 评论 -
关于前端的一些基本了解
什么是前端前端即网站前台的部分,通俗的讲就是我们平时在浏览器搜索出来的网页都属于前端,前端分为移动端(手机端)和PC端(电脑端)两部分。前端页面又分为静态页面和动态页面,在最开始时,前端页面主要是静态网页,所谓的静态网页就是没有与任何用户进行交互,仅仅只是供读者浏览的网页。随着时代的发展、技术的提升,单一的图片和文字并不能满足用户的需求,动态网页就慢慢的演变而来,所谓动态网页是指用户不仅仅可以浏览网页,还可以与服务器进行交互。怎么与服务器交互呢?比如用户想在网站登录自己的账户,在登录表单中故意输错账号密原创 2021-07-17 15:36:03 · 762 阅读 · 0 评论