前端随笔
文章平均质量分 84
记录一些前端技术,基础知识点
杀死一只知更鸟debug
幻想成为全栈工程师,接着努力!手敲博客 https://www.robindeblog.cn/
展开
-
JSON对象的stringify()和parse()方法使用
JSON 迅速被接受,已经成为各大网站交换数据的标准格式,并被写入标准。JSON 格式(JavaScript Object Notation 的缩写)是一种用于数据交换的文本格式,2001年由 Douglas Crockford 提出,目的是取代繁琐笨重的 XML 格式。reviver 可选,转换器,如果传入该参数 (函数),可以用来修改解析生成的原始值,调用时机在 parse 函数返回之前。每个 JSON 对象就是一个值,可能是一个数组或对象,也可能是一个原始类型的值。正则对象也会被转换为空对象。原创 2023-07-16 10:37:51 · 431 阅读 · 0 评论 -
JavaScript 中 五种迭代数组的方法 every some map filter forEach
some() 也是对数组的每一项进行迭代,只要数组元素中任意一个满足迭代器中设定的条件,那么就会返回ture,一项也不满足则返回false。every() 是对数组的每一项进行迭代,然后如果每个数组元素都满足迭代器中设定的条件,那么返回ture,反之返回false。filter它会对数组的每一项进行迭代遍历,然后如果满足filter迭代器设置的条件,则会将这些满足要求的元素重新组成一个数组返回。map比较好玩,它是将数组的每一项进行迭代,然后根据迭代器的结果重新返回一个数组。forEach就是一个for循环原创 2023-07-16 08:49:39 · 263 阅读 · 0 评论 -
JavaScript 数组中splice()的用法
splice() 是数组中的一个最灵活和最强大的数组方法,因为不同的参数它会执行不同的功能。splice() 方法通过移除或者替换已存在的元素和/或添加新元素就地改变一个数组的内容.splice( index , size ) 数组删除元素,splice (index,size,param) 数组插入元素,splice(index,size,param1,param2) 数组替换元素.原创 2023-07-16 08:02:47 · 1186 阅读 · 0 评论 -
轮播图,用vue来写一个简单的轮播图
写的很简单,就是一个小练习,哈哈哈,下面的几张图分别是轮播图的第一张,中间图,最后一张的效果图。使用了vue 中的属性绑定 v-bind ,v-show 以及 事件监听 v-on 指令。1.vue实例中声明一个data属性imgArr,用于存放每张轮播图的地址,4.最后通过v-show判断一下第一张和最后一张就不再显示左右箭头即可。2.同时定义一个默认起始索引index=0,3.然后给两边的箭头监听点击事件,// 图片url 数组。原创 2023-07-15 15:47:58 · 640 阅读 · 0 评论 -
php中Ajax的简单使用,登录表单调用Ajax判断是否正确登录利用layer.msg进行提示
jQuery 中封装了两个方法 get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。GETPOSTGET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。原创 2023-05-19 20:13:23 · 703 阅读 · 2 评论 -
jQuery 操作 DOM 及 CSS
jQuery(获取修改DOM元素的文本值及属性值:text() - 设置或返回所选元素的文本内容;html() - 设置或返回所选元素的内容(包括 HTML 标签)val() - 设置或返回表单字段的值;attr()- 方法用于获取属性值。jQuery对DOM元素的增加和删除,append(),prepend(),remove(),empty(),before()。jQuery操纵CSS的方法,addClass(),removClass(),hasClass(),css(),toggleClass().原创 2023-05-18 20:08:40 · 470 阅读 · 1 评论 -
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery使用,可以下载官网的jQuery库,也可以使用在线cdn的方式。原创 2023-05-18 14:58:12 · 504 阅读 · 0 评论 -
Layui layer 弹出层的使用【笔记】
layer即弹出层组件,集众多弹层功能为一体,灵活而多样,是许多开发者的网页弹出层的首选交互方案,在各类业务场景都能发挥重要作用。首先,为了方便直接通过在线cdn引入对应的css和js。// 按钮组对应的每个按钮的函数。// 按钮组,可以有无限个按钮。原创 2023-05-18 13:55:37 · 4075 阅读 · 0 评论 -
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
话不多说,先看看效果,使用了js+css+html,页面布局采用div+css盒模型布局,以及绝对定位和相对定位,首页页面有轮播图,导航搜索栏目可以进行中英文切换,一些css效果就不过多赘述…tip:每个页面的导航条以及页脚和中间主体的布局基本一致,其css为公共的css,图片的话去香港中文大学就可以找到。1.2 navbar.css1.3 footer.css1.4 index.css1.5 arts.css1.6 book.css2.js部分change.js3.html部原创 2023-02-10 18:52:35 · 108 阅读 · 1 评论 -
导航条下拉菜单的实现及思路
导航条的导航项话,最简单的对于初学者就使用float浮动,使其导航项横向排列,当然如果学了flex,gird布局,这些会更简单实现。下拉菜单的思路其实就是其父盒子选择,从而使它的子盒子显示,并且还要将下拉菜单脱离文档流,从而自定义其宽高。好嘞,话不多说,上代码!CSS部分今天的分享到此结束啦,各位uu,点个赞再走QAQ…原创 2023-01-02 09:11:46 · 1293 阅读 · 0 评论 -
css布局-弹性布局学习笔记
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。如果项目只有一根轴线,该属性不起作用。flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。原创 2022-12-01 20:35:26 · 451 阅读 · 0 评论