前端学习系列
随风丶逆风
这个作者很懒,什么都没留下…
展开
-
前端学习系列——(一)AJAX
一、AJAX是什么? AJAX(读法:阿贾克斯,我之前还真不知道)是一种异步请求数据的技术,因为谷歌大佬才广为人知,其实IE早在这之前几年就已经实现了这个特性。这个技术的诞生,使得用户体验和程序性能得到了非常大的改善。二、AJAX的使用1. 创建AJAX核心XMLHttpRequest对象var xhr;if(window.XMLHttpRequest) { //兼容I...原创 2018-04-18 15:51:27 · 375 阅读 · 0 评论 -
前端学习系列——(十三)轮播图
轮播图是常用的一种页面动画效果,这里给出两种不同效果的实现方式和基本原理。一、利用CSS3transition属性实现主要思路:通过改变opacity的值去实现图片的出现与消失。结合setInterval实现定时轮播。当然这只是一个demo,没有实现前一张图,后一张图的功能,如果有需要,可以在这个demo上进行添加即可。实现起来并不复杂,关键地方进行了注释。<!doctyp...原创 2018-08-29 00:06:55 · 768 阅读 · 0 评论 -
前端学习系列——(十二)JS获取元素大小及懒加载应用实现
1、滚动大小scrollHeight: 在没有滚动条的情况下,元素内容的总高度。scrollWidth:在没有滚动条的情况下,元素内容的总宽度scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。scrollTop:被隐藏的内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。scrollHeight和scrollWidth主要用于...原创 2018-08-20 21:41:52 · 614 阅读 · 0 评论 -
前端学习系列——(十一)JavaScript的模块化
早期前端没有模块化的概念,基本就是直接在HTML页面上写或者JSP/PHP等页面上写。后面出现了传统的模块化方法通过添加全局变量、命名空间方式、闭包封装的形式实现模块化,但是不能解决依赖困难问题。后来出现了commonJS(同步加载)和AMD(异步加载)两种模块化规范,其中AMD主要用于前端开发,流行库为RequireJS,而commonJS用于后台和Node.js,CMD是SeaJS在推广时形成...原创 2018-07-19 17:40:27 · 241 阅读 · 0 评论 -
前端学习系列——(十)JavaScript的继承
这里主要讲4种ES5继承以及ES6的class语法糖的继承。这里给出父类的定义:function SuperType(name) { this.name = name;}SuperType.prototype.sayName = function () { console.log(this.name);};1、原型链继承核心:将父类的实例作为子类的原型...原创 2018-07-19 17:02:31 · 223 阅读 · 0 评论 -
前端学习系列——(九)理解什么是ID选择器的“唯一性”
在学习CSS样式的时候,我们肯定会遇到ID选择器。用法一类的这里就不说了,说一说对ID选择器可能存在的一个误区。误区:id选择器具有唯一性?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</tit...原创 2018-06-14 15:32:05 · 4838 阅读 · 0 评论 -
前端学习系列——(八)CSS样式优先级
不知道你有没有遇到这样一种情况,语法正确、单词正确,但是样式就是无法应用,而是使用的不知道在哪写过的一个样式,然后你就偷懒使用!important让样式生效。哈哈哈,反正我遇到过,而且这么做了。其实这个问题的出现,是因为样式存在优先级规则。如果了解了样式的优先级,就可以避免写出无法复用的样式,同时可以快速定位样式冲突无法应用的问题的根源。一、样式优先级规则: 1....原创 2018-04-29 00:09:25 · 10047 阅读 · 3 评论 -
前端学习系列——(七)水平居中和垂直居中
居中是对称美的一种形式,所以在布局时经常要涉及到居中显示。以下为了方便展示,直接在使用内联样式,正常情况推荐使用外部css文件。一、水平居中(1)行级元素 方法:父元素设置text-align:center<div style="width:300px;height: 100px;border: 1px solid #f00;text-align: center"> ...原创 2018-04-28 23:16:30 · 813 阅读 · 0 评论 -
前端学习系列——(六)清除浮动的影响
确切的说是清除浮动造成的影响,但是清除浮动这个说法一传十、十传百,就将错就错,都这么说了。为子元素设置浮动效果后,会导致父元素的高度坍塌。什么意思呢,就如下面的图所示。.parentBox{ width: 300px; margin: 0 auto; border: 10px solid #f00;}.childBox{ width: 200px;...原创 2018-04-27 16:47:58 · 479 阅读 · 0 评论 -
前端学习系列——(五)JS正则表达式
正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。一、正则表达式的语法二、修饰符修饰符描述g全局匹配(查找所有匹配而非在找到第一个匹配后停止)i对大小写不敏感的匹配m多行匹配u(ES6新增)“Unicode”模式,用来正确处理大于\uFFFF的Unicode字符y(ES6新增)“粘黏”(sticky)修饰符,与g修饰符类似,也是全局匹配,但是g修饰符只要剩余位置中...原创 2018-04-26 11:39:25 · 686 阅读 · 0 评论 -
前端学习系列——(四)JS脚本文件加载优化
一、原因(1)JS引擎 早先时候浏览器的内核由两部分构成,分别是渲染引擎和JS引擎,但是谷歌推出V8引擎后,使得JS运行速度加快不少,所以导致JS引擎独立出来,目前说到浏览器内核一般都只谈论渲染引擎。(2)JS引擎工作原理 1、获得服务器传回的文档后,浏览器渲染引擎开始解析文档 2、当解析是遇到script标签时,会暂停解析,将控制权移交到JS引擎 3、根据script引用...原创 2018-04-24 11:32:01 · 496 阅读 · 0 评论 -
前端学习系列——(三)盒子模型
一、盒子模型的分类 盒子模型如下图所示,其中分为两类,分别是W3C标准盒子模型和IE盒子模型。二、两种盒子模型的区别 1)W3C标准盒子模型 包括margin、border、padding、content,盒子的width=content(内容)的宽度,height=content的高度。 2)IE盒子模型 其他和W3C标准盒子模型差不多,只有盒子的w...原创 2018-04-23 10:14:47 · 620 阅读 · 0 评论 -
前端学习系列——(二)cookie、sessionStorage、localStorage
一、cookiehttp协议是无状态的协议,即一次数据交互完成后,服务器与客户端断开连接,并不会记录此次会话的状态,所以出现了cookie,用于跟踪交互双方的会话状态。cookie的内容:采用key1=value1;key1=value1...键值对的方式存储,键名可以自定义,但是有部分键名为保留字段,如expires、path等;cookie的过期时间:使用键名expires设置;cookie的...原创 2018-04-18 16:57:15 · 500 阅读 · 0 评论 -
前端学习系列——(十四)原型(属性)、原型对象和原型链
一、原型(属性)__proto__每个实例对象(obj)的私有属性,在ECMAScript中规定obj.[[Prototype]]符号表示实例对象的原型。但早期并没有统一规范,所以大部分浏览器自己实现了该私有属性,多以__proto__的方式进行访问,该属性指向实例对象obj的构造函数的原型对象(prototype)。二、原型对象 prototype每个构造函数(本身也是对象)有一个p...原创 2019-08-22 20:32:32 · 654 阅读 · 0 评论