前端
文章平均质量分 57
早睡冠军王
早睡的意思是早上再睡
展开
-
前端学习记录(十五) jsonbird解决跨域请求问题
最近在用vuecli框架搭建一个项目练习,其中一个页面需要猫眼电影的数据接口,想实现的最终效果如下: 打开chrome浏览器的network,在XHR下可以快速找到相应的url地址:在项目文件夹下安装axios工具包,便可以通过axios.get()方法获取猫眼返回的数据:(此接口不支持传...原创 2021-09-15 16:40:06 · 652 阅读 · 0 评论 -
前端学习记录(十四) Vue生命周期函数
在Vue框架中,从Vue实例的创建、运行到销毁,所产生的事件称之为生命周期有四类八种常用的生命周期函数: beforeCreate() { console.log('beforeCreate') }, created() { console.log('created'); }, beforeMount() { console.log('beforeMount'); },原创 2021-09-05 14:50:22 · 115 阅读 · 0 评论 -
前端学习记录(十三) 深拷贝的递归实现
由于在引用类型的属性仍是引用类型时,普通的浅拷贝方式的拷贝深度不够,比如用for in 的方式拷贝对象: let obj1 = { name:"小明", age:19, person:{ name:"小红" } } let obj3 = {}; for(let ele in obj1){ o原创 2021-08-21 16:41:57 · 350 阅读 · 0 评论 -
前端学习记录(十二) jquery中使用off()时的小问题
使用jquery中的on()方法绑定事件时,我习惯将要执行的匿名函数作为on的最后一个参数,比如按下按钮输出“hello”的功能: $(".btn").on("click",function(){ console.log("hello");//hello })使用off()解除绑定时,只有与之前的on()中所有参数完全匹配,绑定的事件处理函数才会被完全移除;所以开始我认为以这种方式便可以移除on绑定的click功能: $原创 2021-08-17 15:47:33 · 286 阅读 · 0 评论 -
前端学习记录(十一) 一个“屡教不改”的错误
今天在学习jquery的contains用法,想利用contains控制表格内元素的显示与隐藏(在input内输入字符,对表格中的内容进行筛选)刚开始,想在contains()的括号内之内填入input进来的value$("tr:contains(str)").css({display: "block"});//这种方式是错误的但是contains内只能填入字符串,直接填入字符型变量的做法显然是行不通的这种方式下,contains会认为传入的是“str”这一字符串,而不是一个变量,在原创 2021-08-14 19:14:43 · 182 阅读 · 0 评论 -
前端学习记录(十) CSS3动画实现旋转立方体
前端时间学习了CSS3的动画,今天利用动画实现一个旋转立方体效果,在实现过程中碰到了几点问题:原本想将立方体的六个面直接定位在页面的同一个点,然后利用rotate旋转与translate位移实现立体效果,但这个思路的问题在于,六个面共同围绕的y轴难以掌握,并且一旦绑定keyframes动画开始让六个面旋转,动画的旋转效果会与将六个面分别“立起来”的旋转效果冲突;所以最后的解决方式是:将六个面放进同一个<div>里,六个面相对于<div>进行定位与旋转、位移,实现立体效果,最后原创 2021-08-11 18:33:28 · 344 阅读 · 0 评论 -
前端学习记录(九) 利用call手动实现bind()方法
最近学习到了改变this指向的三种方式:call、apply与bind,一个经典题目就是用call或者apply手动实现bind方法,下面就来实现一下:手动实现的bind除了做到改变前方函数的this指向之外,还要拥有bind本来拥有的两个功能:在执行xxx.bind()时,不进行函数调用,仅仅将函数值传过来,后再接括号才进行调用; bind后的括号中,除第一个值为this的新指向,其余的几个值均为向函数内传入的参数有一个问题值得注意:再利用arguments读取参数时,因为arguments读原创 2021-08-10 00:01:40 · 217 阅读 · 0 评论 -
前端学习记录(八) JS事件委托
让我们先看这样的一个例子:创建一个一组<li>标签,实现鼠标点击哪个li标签时,便输出被点击标签内部字符的功能;点击元素输出对应内部字符: 按照常规思路,我们需要读取标签长度,然后循环绑定onclick事件: var omain = document.querySelector("#main"); for(var i=0;i<omain.children.length;i++){ omain.children[i]..原创 2021-08-07 15:01:48 · 101 阅读 · 0 评论 -
前端学习记录(七) select元素转移练习
今天学习到了select标签的几种简单用法,以及使用DOM对其中的option元素进行转移练习样式如下图,要做到以下功能:单击选中后按“选中添加到左/右边“按钮,将选中选项转移到另一侧; 多选选中后按“选中添加到左/右边“按钮,将多选选项转移到另一侧; 按”全部添加到左/右边“按钮,将方框内选项全部转移到另一侧; 双击任一元素,直接转移到另一侧实现思路首先使用querySelectorAll与querySelector方式选中对应元素,接着通过读取每个select中option元素.原创 2021-08-06 20:31:13 · 142 阅读 · 0 评论 -
前端学习记录(六) JS对象与构造函数相关(待补充)
构造函数的格式为:function 构造函数名(传入的数据){函数体},且构造函数名首字母一般大写, 构造函数与对象在内容格式上的区别是:构造函数属性:this.属性名 = 内容;构造函数方法:this.方法名 = function(传入的数据){函数体} 使用构造函数创建对象的格式:对象名 = new 构造函数名(传入的数据); new关键字执行过程:1.new一个构造函数时,相当于在内存中创建了一个空对象,2.构造函数中...原创 2021-08-06 11:15:41 · 66 阅读 · 0 评论 -
前端学习记录(五) JS数据类型与数据类型转换
目录数据类型显式类型转换1.转换为数值2.转换为字符串3.转换为布尔值隐式类型转换数据类型在javascript语言中,有五种包含值的数据类型(使用typeof时,返回值为此五种中一种或undefined):字符串(string) 数字(number) 布尔(boolean) 对象(object) 函数(function)有两种不包含值的数据类型:null undefined而以下几种数据的数据类型较为特殊:NaN 的数据类型是数值(number原创 2021-07-28 18:54:37 · 236 阅读 · 0 评论 -
前端学习记录(四) JS语言小知识点总结(待补充)
最近学习了javascript语言的一部分基础内容,将了解到的一些小知识点总结在这篇文章当中:1.一般将<script>标签括起来的内容放在body标签临近结束的上方,因为如果将JS代码或外部代码链接放在最开头<head>里,就会导致将所有JS代码都加载完成后,web页面才能开始渲染加载的问题,在此期间浏览器窗口完全空白;而如果将JS代码放在最后,就可以在处理JS代码之前渲染画面,对于用户会感觉网页加载更快了 2.如果想在页面...原创 2021-07-27 00:15:11 · 89 阅读 · 0 评论 -
前端学习记录(三) CSS浮动、定位与居中
目录浮动清除浮动方法1:清除浮动方法2:CSS定位relative定位absolute定位fixed定位浮动现在我们想在页面中创建两个矩形元素,使其在页面的最左端与最右端。这时候可以使用CSS的浮动功能实现这一效果:float:leat(向左浮动),float:right(向右浮动);除此之外,浮动还实现了使多个块元素显示在同一行的效果,比如使三个矩形显示在同一行: .div1{ width: 100px;原创 2021-07-19 23:45:36 · 460 阅读 · 0 评论 -
前端学习记录(二) CSS选择器、常用方法与盒子模型
CSS选择器CSS选择器通常用于对网页中(<body>中)元素样式进行整体控制,写在<head></head>标签中的<style></style>标签下将常用的CSS选择器按优先级可以进行如下的排列:!important>内联样式>id选择器>类选择器>标签选择器>*选择器当有多个同类型选择器时,为累加方式计算权重。比如两个标签选择器进行嵌套操作时,权重优先级大于一个单独的标签选择器标签选择器:根原创 2021-07-19 12:16:10 · 157 阅读 · 0 评论 -
前端学习记录(一) 常见html标签
目录前言html标签行标签与块标签块标签行标签行内块标签前言才华需配得上野心,对吧本文创作于2021/7/17晚,同时也是本人开始进行前端学习的第一天,希望通过写专栏博客的方式,将自己学习到的知识点持续记录下来,这样也可以当做一个巩固的过程,不过作为一个还没入坑的新人来说,写的肯定是漏洞百出,如果能得到大家的纠正,不胜感激;接下来让我们开始吧html标签html标签由一对<>符号所扩起来,大部分标签为成对出现的,也有单个出现的标签,成对出现原创 2021-07-18 01:26:01 · 185 阅读 · 0 评论