![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 78
编码要得劲
努力学习
展开
-
前端网络必备知识
www(万维网)Internet提供了很多的服务,其中包括www(网页服务)、FTP(文件传输)、E-mail(电子邮件)、Telnet(远程登陆)等等,www是用浏览器访问网页的服务,所以网站主页的域名前需要加www。而随着网站服务类型的增加,不同的二级或三级域名对应不同的业务,而业务的处理任务会分配到多个服务器,所以,不再需要使用www来标注主页,很多网站都还会做DNS解析www,原因是尊重用户习惯。DNS解析DNS:Domain Name Server (域名服务器)作用:使域名与对应的IP原创 2021-07-07 11:22:22 · 138 阅读 · 0 评论 -
项目常用配置(慢慢更新)
Vue3中保存自动格式化代码在eslint的setting.json中添加/* *这一段是Vue3的配置,勿删!!! */ "vetur.format.defaultFormatter.js": "vscode-typescript", "vetur.format.defaultFormatter.html": "js-beautify-html", /* *eslint是JavaScript的语法规则校验器! */原创 2020-12-10 15:40:17 · 122 阅读 · 0 评论 -
工作常用工具(方法)
方法数组方法Promise方法数组方法es5// 几个超级简单的就不解释了(push,pop,shift,unshift,sort,reverse,join,toString,concat)自己常忘了的两个: slice, spliceslice(index, length) // 从第index位置开始截取length个元素,不改变原数组splice(index, length, value1, value2, ...)// 从index位置开始,删除length个元素,插入...va原创 2020-12-08 11:01:39 · 258 阅读 · 0 评论 -
总结CSS常用
常用样式flex布局箭头css选择器flex布局flex布局 (阮一峰教程语法)(阮一峰实战)父元素设置flex-direction: 设置主轴的方向 row: 主轴为水平方向,起点在左端(默认) row-reverse: 起点在右端 column: 主轴为垂直方向,起点在上沿 column-reverse: 起点在下沿 flex-wrap: 设置子元素是否换行及换行的风格 nowrap: 不换行(默认值) wrap: 换行 wrap-reverse: 换行并且新的一行在上 f原创 2020-11-13 14:03:21 · 150 阅读 · 0 评论 -
移动端布局配置rem
在普通浏览器下配置;(function(psdWidth,dividendFontSize,maxRootFontSize){ // 为了代码更短 var d = document var de = d.documentElement var w = window var on = 'addEventListener' var gbcr = 'getBoundingClientRect' var ps = 'pageshow' var head = d.h原创 2020-10-21 22:44:10 · 173 阅读 · 0 评论 -
axios的使用
在vue中使用axios需要先下载npm install axios在vue项目中使用需要导入一般在main.js文件中导入import axios form 'axios因为axios不是vue的插件,所以不能使用Vue.use()的方式来挂载,把axios放到Vue的原型上,方便将来所有的Vue实例都能使用Vue.prototype.axios = axio初始化一些常用的...原创 2019-10-26 19:44:57 · 329 阅读 · 0 评论 -
js中ES5新方法
1,循环数组,过滤数组,检查数组循环: forEach(),map()这两个都是循环数组,但是forEach没有返回值,而map有返回值;forEach可以理解为让在遍历每个元素的时候,去做一件事,而不用返回值,在遍历是return会不起作用,不会中断遍历,除非程序异常map可以理解为让每个元素去做一件事,然后返回这个新值,返回的是一个数组的形式,必须有返回值,如果没有return,则默认...原创 2019-08-11 23:09:23 · 191 阅读 · 0 评论 -
js对象
3种创建对象的方式对象字面量:var obj={name: value, name2,value2};new object:var obj=new Object();构造函数创建 :function obj(){ this.name=value; //实例成员 this.name2=value2; //实例成员 this.fn1=function(){}; //实例...原创 2019-08-11 21:39:30 · 112 阅读 · 0 评论 -
ES6中类的创建于继承
ES6中的类需要使用class来声明,语法:class Father{ constructor(x,y){ //这个相当于构造函数 this.x=x; this.y=y; } sum(){ console.log(this.x+this.y); //注意,这里面的this永远指向的是Father这个类 //即使继承的调用这个方法,也都将指向Father类 }}...原创 2019-08-11 21:23:16 · 90 阅读 · 0 评论 -
jQuery中拷贝对象和多库共存
拷贝对象$.extend([deep],target,object,[objectN]deep:如果设为true为深拷贝,默认为false浅拷贝target:要拷贝的目标对象object 被拷贝的对象objectN:待拷贝到第N个对象的对象浅拷贝目标对象引用的是被拷贝的对象地址,修改目标对象会直接影响到被拷贝对象深拷贝,前面加true,完全克隆,修改目标对象不会影响到被拷贝对象...原创 2019-08-10 22:05:53 · 119 阅读 · 0 评论 -
jQuery尺寸和位置操作
1.offset()设置获取元素偏移offset()方法设置或返回被元素相对于文档的偏移坐标,跟父级没有关系,即使父级元素有定位,也没有关系该方法有2个属性,left 和 top。使用方法offset().left/ offset().top设置元素的偏移:offset({top : 0, left : 0});2.position()获取元素偏移该方法用于返回被选元素相对于带有定...原创 2019-08-10 19:00:33 · 136 阅读 · 0 评论 -
jQuery事件处理
1.$(ele).on(),绑定一个或多个事件处理程序1.绑定单个事件:$('ele').on({'click':function(){}});2. 绑定多个事件$('ele').on({'click':function(){},'mouseover':finction(){}}); 3. 绑定两个处理程序相同的事件$('ele').on({'mouseenter mouseleave...原创 2019-08-10 00:33:29 · 218 阅读 · 0 评论 -
jQuery中的类数组操作和隐式迭代
类数组操作 .length属性 - 获取jQuery对象中包含(DOM)的个数 .get(index) - 根据索引值获取DOM元素 .eq(index) - 根据索引值获取DOM元素 .index([obj]) - 有参数就根据(DOM)对象返回对应的索引值 无参数就返回调用对象的索引值隐式迭代对象:$ ("").each(callback); &nb...原创 2019-08-09 18:02:26 · 135 阅读 · 0 评论 -
jQuery动画
动画:有三个预定义的速度字符产值 slow(慢的) normal(默认) fast(快的) 第一个参数是速度(时间) 第二个参数是在做了动画以后执行的一个方法 直接切换动画: show() 显示效果,可传值设置时间,还可以传一个回调函数,等动画执行完毕以后调用这个函数 hide() 隐藏效果,可传值设置时间,还可以传一个回调函数,等动画执行完毕以后调用这个函数 toggle...原创 2019-08-09 17:32:23 · 95 阅读 · 0 评论 -
jQuery中的操作节点常用的方法
我这里的$(this)是代表当前对象1,获取非自身的元素方法需求方法获取第一个父元素(无法获取多级父元素)$(this).parent()获取指定父及元素$(this).parents(".className")获取所有的兄弟元素(可传参获取指定的兄弟元素),不包含自身$(this).siblings()获取指定子元素(通过传参获取指定的子元素)$...原创 2019-08-09 17:21:24 · 430 阅读 · 0 评论 -
js中call,apply,bind的区别
使用方法3个都相同,函数后面直接调用call: fn.call(); apply:fn.apply() bind: fn.bind();相同点都可以改变函数内部this的指向区别点1,call和apply都会立马调用,并改变函数里this的指向 2,call和apply传递的参数不一样,第一个相同,都是传递你要把原来函数里的this指向改变为你所需要的那个对象,第二个参数不同点如下:...原创 2019-08-12 11:09:57 · 64 阅读 · 0 评论 -
ES5新增的严格模式
严格模式的作用1, 消除了 Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为。2, 消除代码运行的一些不安全之处,保证代码运行的安全。3, 提高编译器效率,增加运行速度4, 禁用了在 ECMAScript 的未来版本中可能会定义的一些语法,为未来新版本的 Javascript 做好铺垫。比 如一些保留字如:class, enum, export, extends, i...原创 2019-08-12 11:52:25 · 80 阅读 · 0 评论 -
SPA单页面应用开发
SPA概念SPA就是单页的web应用,简单理解为:仅仅在web页面初始化时加载相应的HTML,JavaScript,CSS,一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转,而是利用JavaScript动态的变换HTML的内容(采用的是div切换和隐藏),从而事件UI与用户的交互优点和缺点优点: 由于避免了页面的重载,SPA可以提供较为流畅的用户体验,得益于Ajax,我...原创 2019-09-21 17:52:27 · 435 阅读 · 0 评论 -
vue组件之间的传值
组件之间的传值分为3种:父 —>子 父组件给子组件传值子 —>父 子组件给父组件传值非父子组件传值方法:父—>子//父组件通过给子组件定义属性传值<div id='app'> //通过绑定属性的方式,money是你自己定义的,msg是要传给子组件的值 <son :money='msg'></son></di...原创 2019-09-21 11:18:58 · 74 阅读 · 0 评论 -
js中的节流与防抖
防抖总结:只会在最后一次触发的时候去执行 <script> var btn=document.querySelector('button'); var time=null; btn.onclick=function() { if(time)clearTimeout(time); time...原创 2019-09-20 19:13:52 · 99 阅读 · 0 评论 -
vue中动态添加属性与复杂类型数据更改的更新检测
vue中动态添加属性如果一个属性是通过后期动态添加的,那么这个属性将不是响应是的,也就是说如果它发生了改变或者你添加上去了,页面中也是不知道的,因为在vue中,响应式的属性都在vue的生命周期中通过Object.defineProperty修饰过的,所以它是响应式的,如果在后期你要添加一个属性,它还要是响应式的,那么需要使用Vue.set(vm,属性名,属性值)方法进行添加//比如说在某个方法...原创 2019-09-20 15:03:41 · 684 阅读 · 0 评论 -
Vue.js基础
vue 的使用1,(1)可以使用npm下载vue包,npm install vue (2),也可以去官网下载,https://cn.vuejs.org/v2/guide/installation.html ,有生产版本和开发版本,初学和开发中建议使用开发版本,因为它会提示你某些错误和警告,在生产版本中删除了一些常用的错误和警...原创 2019-09-20 14:40:46 · 93 阅读 · 0 评论 -
Vue的生命周期与钩子函数
生命周期1,new Vue() 第一步会先创建一个vue实例2,开始初始化事件,同使vue的生命周期就开始了3,初始化数据,把data中所有的数据都通过Object.defineProperty添加到vm身上4,判断vue的监管范围,判断是否指定了el属性;//如果指定了,el中的html就是它的监管范围//如果没指定,等待vm.$mount(el)添加监管范围//如果一直没有添加,...原创 2019-09-20 11:21:54 · 81 阅读 · 0 评论 -
ES6中对let cons的解释
let :代码块内有效,相当于{}内有效,使用let声明的不存在变量声明提升,所以不能再定义前使用,即使再代码块外部有相同名的变量,也无法再里面提前使用比如:var one=10;if(true){ console.log(one); //会报错,因为再这个代码块中,下面有let 声明one这个变量,所以不能这样用 let one=20; console.log(one) //...原创 2019-08-13 10:47:53 · 174 阅读 · 0 评论 -
ES6剩余参数的接收于使用
通常再一个函数中要接受多个参数,可能是已知的个数,可能是为止的个数,所以再写形参的时候会比较麻烦,再ES6中有新的方式来写这个形参使用格式 …name name自定义名字//格式function fn(a,b,...arr){//表示前面两个形参接受相对应位置的实参,然后剩下的实参都有 ...arr来接收 console.log(a+b,...arr) //3 3 4 5 6 7 8...原创 2019-08-13 12:04:44 · 830 阅读 · 0 评论 -
js闭包和递归函数解释加案例
闭包的概念:在一个作用域里调用另外一个作用域的局部变量闭包的作用:扩大局部变量的使用范围闭包的缺点:使用过多可能会造成内存的泄露,因为原来函数内部的变量使用完后就应该被销毁,释放内存,但是由于闭包里的函数还得要继续使用某一些变量,所以这些变量不会被销毁,闭包使用过多的话就会导致内存的泄露了总结:闭包不一定是好的,使用前要考虑好是否有必要使用闭包...原创 2019-08-12 18:55:15 · 213 阅读 · 0 评论 -
jQuery选择器
基础选择器的使用再jQuery的工厂函数中,里面的选择器使用与css大部分相同,比如说通过类名查找,直接 .类名 就行了。1,基本选择器 --类似于css-- (.)类(#)id(element)元素(*)所有(,)复合2,层级选择器 --类似于css-- (, ,)并列 (A+B)选择所有紧接着A元素之后的B元素 (A > B)子类选择器,A元素内所有的B元素3,过滤选择器 -...原创 2019-08-09 16:03:11 · 96 阅读 · 0 评论 -
js原生轮播图
思路:首先要知道需求,先从简单的地方入手,然后一步一步的去改进,但是首先要想好做每一步目的,原因,不要只知道代码是这么写的,而不去想为什么要这么做。动画函数封装 function animate(obj, target, callback) { //做动画的对象,需要移动的距离,回调函数 clearInterval(obj.timer); obj...原创 2019-08-07 09:58:20 · 134 阅读 · 0 评论 -
navigator与history的使用
navigator通常使用navigator.userAgent可以获得用户所使用的浏览器的版本与系统信息//判断用户使用的浏览器,打开不同的页面if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios| iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC |F...原创 2019-08-05 23:12:26 · 345 阅读 · 0 评论 -
location对象
location对象的属性属性返回值location.hreflocation.host返回域名 比如(www.baidu.com)location.port返回端口号,如果未写返回,则为空字符串location.pathname返回路径location.search返回参数,?后面的location.hash返回片段,#后面内容,常...原创 2019-08-05 22:26:24 · 95 阅读 · 0 评论 -
DOM事件委托
事件委托的原理就是利用事件的冒泡行为,不用给每个子节点单独设置事件监听器,而是在它们的父节点上设置事件监听器,然后利用冒泡原理影响设置每个子节点,这就是事件委托,这样只需要操作一次DOM,提高了程序的性能案例:只要给ul注册鼠标经过事件,然后利用对象的target来找到当前的li,然后改变它的背景颜色,这样就不用给每个li添加事件了<ul> <li>知否...原创 2019-08-05 14:46:46 · 72 阅读 · 0 评论 -
DOM操作经典案例
DOM操作经典案例百度换肤案例鼠标移进移出变色(行变色)表单全选全取消案例tag导航栏切换案例百度换肤案例百度换肤案例就是当你点击一张图片时,当前的背景图片就为你所点击的这张图片,实现起来也比较简单,就是更改一下backgroundImage的url路径js代码: <script> var img=document.querySelectorAll('img')...原创 2019-08-05 14:34:43 · 1922 阅读 · 0 评论 -
DOM的事件对象(event)的常见属性和方法
事件对象属性方法说明e.type返回事件的类型,比如click mouseover 返回的不带one.target返回触发事件的对象e.preventDefault()阻止事件对象的默认行为,比如说不让连接进行跳转e.stopPropagation()阻止冒泡行为,标准的e.srcElement返回触发事件的对象 ie6-8中使用e....原创 2019-08-05 14:24:47 · 640 阅读 · 0 评论 -
DOM中this与e.target的区别
<div>123</div> <ul> <li>abc</li> <li>abc</li> <li>abc</li> </ul> <script> // 1. e.target 返...原创 2019-08-05 14:12:33 · 385 阅读 · 0 评论 -
DOM三种动态创建元素的区别
1,document.write();它是直接将内容写入页面的内容流,但是文档流执行完毕,会导致页面全部重绘 一般不使用这种方式2,innerHTML= “” ;它是将内容写入某个DOM节点,不会导致页面全部重绘注意: 创建少量的元素可以直接使用,但是一旦创建多个,则效率会非常低,比如创建1000个节点就需要3000毫秒左右的时间,效率很低,创建大量的元素建议先将所需要创建的元素放入一...原创 2019-08-05 11:04:07 · 115 阅读 · 0 评论 -
HTML5总结
HTML5的总结新增的属性与元素表单-type新增选项功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入新增的属性与元素...原创 2019-07-22 19:53:46 · 151 阅读 · 0 评论 -
DOM中常用的操作元素属性
操作元素1,操作元素内容innerText2,操作常用属性3,操作表单元素属性4,操作元素样式属性原创 2019-08-04 11:20:16 · 226 阅读 · 0 评论 -
js数据类型传参的区别
简单数据类型传参简单数据类型它们之间传参是直接传值的,如果发生修改,则直接改变原值例1、var num = 10;num = 20; //在这里就直接修改原来的num的值了, //但是在内存中并没有把原来的10给删除,而是在内存中新建了一个内存来存放这个新值console.log(num) //很简单 = 20例2、function fn(a) { a++;...原创 2019-08-04 10:11:43 · 148 阅读 · 0 评论 -
js里的堆和栈
堆和栈空间分配的区别1,栈(操作系统) :由操作系统自动分配释放存放函数的参数值、局部变量的值等,其操作方式类似于数据结构中的栈;简单数据类型存放到栈里面2,堆(操作系统):存储复杂类型(对象),一般有程序员分配释放,若程序员不释放,由垃圾回收机制回收。复杂数据类型存放到堆里面注意:js中并没有堆栈的概念,通过堆栈的方式,可以让打击更容易理解代码的一些执行方式,便于将来的学习...原创 2019-08-04 09:36:15 · 629 阅读 · 0 评论 -
js中的基本包装类型
为了方便操作基本数据类型,JavaScript还提供了三个特殊的引用类型:String Number Boolean基本包装类型 就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性何方法 var str = "andy"; console.log(str.length);按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面代码却可以执行,这是应为js会把基...原创 2019-08-02 15:33:27 · 79 阅读 · 0 评论