
web前端
幸福璐
欲戴王冠,毕承其重!***知世故而不世故!!
展开
-
json和jsonp
为了理解json和jsonp,先提一下ajax;提到ajax就会不可避免的面临两个问题: (1)ajax以何种格式来交换数据? (2)跨域的需求如何解决? ajax不允许跨域,可以用jsonp来解决 目前有很多方法来解决解决这个问题,但现在比较推崇的方法是,用json来交换数据,并靠jsonp来跨域。 json:是一种数据交换格式;优点:1)基于纯文原创 2017-06-25 19:22:29 · 332 阅读 · 0 评论 -
利用nodejs的简单web聊天
今天,学习了一个最基本的基于web的实时聊天,用到的技术有nodejs,html,css,socket.io(WebSocket),sco.js,Message.js,express搭建;知识点:1、当我们提到实时推送这个概念时,就会涉及到WebSocket技术,这是Html5定义的一套WebSocket协议,为了更好的解决实时推送,并消耗带宽的问题;WebSocket协议是一个基于TCP原创 2017-07-14 22:38:43 · 617 阅读 · 0 评论 -
js跨域总结(jsonp,postMessage,CORS)
跨域当协议,子域名,主域名,端口中任何一个不相同的时候,都算做不同域。不同域之间相互请求资源,就是属于跨域。Js处于安全方面考虑,不允许跨域调用其他页面的对象。简单的说,跨域因为js同源策略的限制。a.com域名下的js无法操场b.com或c.a.com域下的对象。现实生活中,一个公司有多个子公司,或者一个公司和另一个公司合作。这就不可避免的要出现跨域情况。为了在必要的时候实现跨域原创 2017-08-02 14:42:16 · 2328 阅读 · 0 评论 -
css优化,js优化以及web性能优化
Css优化总结 对于css的优化可以从网络性能和css语法优化两方面来考虑。Css性能优化方法如下:1、css压缩Css 压缩虽然不是高端的知识,但是很有用。其原理也很简单,就是把我们css代码中没有用的空白符等删除,达到缩减字符个数的目的。 压缩css代码的工具:A、YUI compressor,可以在线压缩css和js代码。B、gulp自动化构建工具,原创 2017-07-27 00:09:07 · 13141 阅读 · 0 评论 -
css reset总结
Css resetHtml标签在浏览器中都有默认的样式,不同的浏览器的默认样式之间存在差别。如:ul默认带有缩进样式。在ie下它的缩进是由margin实现的。而在fireforx下却由padding实现的。开发时,浏览器的默认样式可能会给我们带来很多兼容性问题,影响开发效率。现在流行的解决方法是一开始就浏览器的默认样式全部覆盖掉。工具:reset.css Normalize原创 2017-07-27 07:47:29 · 385 阅读 · 0 评论 -
css预处理器
Css预处理器Css预处理定义了一种新的语言,其思想是一种专门的编程语言,为css增加了一些编程的特性。将css作为目标生成文件。开发者可以使用这种语言进行编码工作。Css预处理器是一种专门的编程语言,进行web页面样式设计,然后再编译成正常的css文件,以供项目使用。Css预处理器为css增加了一些编程特性,无需考虑浏览器的兼容性问题。可在css中使用遍历,简单的逻辑程序,函数等编程语言原创 2017-07-27 07:57:12 · 396 阅读 · 0 评论 -
float浮动的原理和工作方式,以及浮动造成的问题总结
浮动float浮动元素是脱离文档流的,不占据空间。浮动元素碰到包含它的元素的边框或者其他浮动元素的边框会停留下来。 浮动元素会引起的问题:1)父元素的高度无法撑开,影响与父元素的同级元素。2)与浮动元素同级的非浮动元素(内联元素)会跟随其后。3)若非第一个元素浮动,则该元素之前的元素也需要跟随其后,否则会影响页面的显示的结构。清除浮动的几种方法:1)”clear原创 2017-07-27 08:09:42 · 5007 阅读 · 0 评论 -
css常用布局
Css布局你了解哪些布局,你平时都使用什么布局方式:1)两行布局(头部高度固定,尾部高度为剩余高度)html,body{ width:100%; height:100%; margin:0; padding:0;}#top{ width:100%; height:100px; ba原创 2017-07-27 08:58:03 · 317 阅读 · 0 评论 -
基本数据类型,引用类型的总结
数据类型 基本数据类型:指简单的数据段;引用数据类型,指的是多个值构成的对象。常见的基本数据类型:Number,string,boolean,null和undefined基本数据类型是按值访问的,因为直接操作保存在变量中的实际值;Var a=10;Var b=a;b=20;b获取的是a值的一份拷贝,虽然两个变量的值相等,但两个变量保存了两个不同的基本数据类型原创 2017-07-27 09:23:11 · 421 阅读 · 0 评论 -
原型和原型链
原型和原型链原型:JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型是一个对象,其他对象可以通过它实现属性继承。原型链:原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链Prototype和_proto_的区别:原创 2017-07-27 10:30:10 · 265 阅读 · 0 评论 -
函数表达式和函数声明
函数表达式和函数声明函数声明举例:function shenlu(type){ return type==="decloartion";}解释:在js解析时,进行函数提升,因此在同一个作用域内,不管函数声明在哪里定义,该函数都可以进行调用。Eg:shenlu("decloartion");//turefunction shenlu(type){ retu原创 2017-07-27 10:40:47 · 300 阅读 · 0 评论 -
html5和css3新增的常用知识点
H5新增的离线应用:(1)当要开发基于h5的离线应用时,先确定服务器是否支持对manifest文件的解析。(2)若不支持,需要用户手动设置,在服务器mime.types文件中添加;(3)为什么要求服务器一定要支持manifest文件? 答:因为离线存储必须要有一个manifest文件来存储需要缓存在用户机器上的资源路径,且这个路径将在html的文件中使用。原创 2017-03-31 20:45:04 · 772 阅读 · 0 评论 -
常用鼠标事件,键盘事件总结
-moz-:firefox浏览器特有属性;-webkit-:chrome,sa原创 2016-12-11 17:02:47 · 5146 阅读 · 0 评论 -
前端:css页面布局总结
W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html、xml),表现标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成。这个标准倡要将结构,样式,行为分离。在网页制作中,面对设计图,网页制作人员一般要遵循的原则:先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后在考虑布局和表现形式。今天主要对css的页面布局做过总结:css的页面布局模型分为三大种模式:(1)流动模型(标准文档流)(2)浮动模型(定位)原创 2016-12-05 22:11:24 · 7157 阅读 · 0 评论 -
css:z-index总结
z-index知识总结:1、z-index的概念:z-index属性指定了元素及其子元素的z顺序,而z顺序可以决定当元素发生覆盖的时候,哪个元素在上,通常较大的z-index值的元素会覆盖值较低的那个。2、z-index:auto;这是默认值 z-index:; z-index:inherit;3、z-index只对定位元素起作用; 例如:{p原创 2016-12-06 15:15:38 · 851 阅读 · 0 评论 -
JavaScript:DOM事件流总结
每次听课或看书之后,都会对自己学的知识做个小总结,希望有助于自己能力的提高,真的发现,学习技术,动手还是最重要的,自己听一遍课或看完书,总是理解不透彻,或者以为懂了东西,真正实践时才发现有很多与自己想的不一样的地方。希望每一次的总结都让自己里前端高级工程师更进一步。JavaScript和html之间的交互是通过事件来进行交互的。一、事件流 概念:事件流描述的是从页面中接受事件的顺序。原创 2016-12-09 08:01:57 · 582 阅读 · 0 评论 -
html的canvas使用,时钟绘图总结
用html5中的canvas来绘制时钟。绘制时钟的大体思想,1、绘制最外层圆圈。2、绘制内部小圈。3、标记小时数。4、标记小时之间的点点。5、绘制表帧。6、让时钟动起来。一、绘制外层大圈:用到的知识点:a、canvas标签,常用的是将其设置出画布的宽高,如b、getContext(参数);该方法返回用于在画布上绘图的环境(即画布的上下文);参数代表的是:该参数指定要在画布上原创 2016-12-18 09:55:24 · 1116 阅读 · 0 评论 -
jquery实现网页定位导航特效
实现网页定位导航特效需要的几个知识点: 1、锚点:是网页制作中超链接的一种又叫命名锚点。锚点是一种网页内的超级连接,可以在网页页面内部迅速定位,使用锚点可以在文档中设置标记,这些标记通常放在文档的顶部。html5中已经全部使用id进行锚点连接了。 2、scroll([data],fn):当用户滚动指点的元素时会发生scroll事件,scroll事件适用于所有可滚动的元素和windo原创 2016-12-27 13:46:53 · 1327 阅读 · 0 评论 -
reflow和repaint理解总结
repaint就是重绘,reflow就是回流 严重性: 在性能优先的前提下,reflow的性能消耗要比repaint的大。 体现: repaint是某个dom元素进行重绘,reflow是整个页面进行重排,也就是对页面所有的dom元素渲染。 如何触发reflow和repaint repaint的触发: 1)不涉及任何dom元素的排版问题的变动为repai原创 2017-01-06 22:26:32 · 3638 阅读 · 0 评论 -
Jquery之事件(三)
一、鼠标事件A、click()监听用户单击操作,dbclick()监听用户双击操作B、mousedown和mouseup事件这两者的用法和click方法一样,三种形式。Click是由mousedown和mouseup两个事件构成的。C、mousemove 监听用户移动操作,使用方式与上面相同。D、mouseover 鼠标移入时触发原创 2017-03-17 19:28:56 · 461 阅读 · 0 评论 -
Jquery之动画(四)
Jquery动画篇一、动画的隐藏和显现1、hide()方法,隐藏.hide(参数):快捷参数:.hide(“fast/slow”)这是一个动画设置的快捷方式,‘fast’和’slow’分别代表200和600毫秒的延时,就是元素会执行200、600毫秒的动画在隐藏;注意:jQuery在做hide操作的时候,是会保存本身的元素的原始属性值,再之后原创 2017-03-17 20:05:38 · 590 阅读 · 0 评论 -
this原型理解
1.thisthis对象 引用的是函数据以执行的环境对象。在全局作用域中调用函数,this指向window;当函数被作为某个对象的方法调用时,this指向 此对象; 匿名函数的执行环境具有全局性,其this对象通常指向window。通过将外部作用域的this对象保存到一个闭包可以访问的变量里 闭包,可以让闭包访问非全局变量的值。call()、apply()可改变函数执行环境,从而改原创 2017-03-17 20:07:03 · 954 阅读 · 0 评论 -
JavaScript原型和原型链详解
JavaScript原型和原型链详解Javascript中的每个对象都有一个内置的属性prototype,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。意思是是prototype属性保存着对另一个JavaScript对象的引用,这个对象作为当前对象的父对象。理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解原创 2017-03-17 20:35:59 · 660 阅读 · 0 评论 -
JavaScript中的作用域与变量声明
JavaScript中的作用域与变量声明提升相信大家也都发现了,在网上关于JS的变量和作用域的文章有很多,但真正能讲清楚,能深入理解的文章很少。在阅读了很多人的文章以后,我决定综合起来,结合实际代码,希望能够以一个比较清楚完整的方式让大家真正理解。有需要的朋友们下面来一起看看吧。作用域(Scoping)对于Javascript初学者来说,一个最迷惑的地方就是作用域;事实上,不光是初学者原创 2017-03-17 20:55:55 · 730 阅读 · 0 评论 -
Jquery之样式篇(一)
Jquery样式篇Jquery框架是一个轻量级的JavaScript库,核心是JavaScript,该框架不仅兼容了css3还兼容各种浏览器(ie,firefox,chrome等);使用jquery可以让代码写的少,但是可以做的多。为什么引入jquery框架:最初开发人员使用JavaScript+DHTM进行编程,传统的客户端编程,使得开发有冗长的代码,并且为了兼容不同浏览器要编写很多原创 2017-03-14 20:56:51 · 1149 阅读 · 0 评论 -
Jquery之DOM(二)
jQuery之DOM篇jQuery引入创建节点及节点属性的原因:通过JavaScript可以方便的获取DOM节点元素,从而进行一系列的DOM操作,但实际上,一般开发者都习惯性的先定义html结构,就很不灵活。JavaScript中创建节点元素,添加节点属性,并把节点加入到文档中。document.creatElement setAttribute innerHTML原创 2017-03-14 21:04:48 · 627 阅读 · 0 评论 -
css:margin,border,padding总结
css中一个重要的模型,即盒子模型;如下图 一、margin I、 margin是外边距,一个元素到另一个元素的之间的距离。 a、 margin可以改变容器的尺寸(即元素的可视属性),但有一定的适用范围: 1、要想改变容器的尺寸,margin适用于没有设定width/height的普通得块级水平元素。 2、只能用于对水平方向的尺寸进行修原创 2016-12-07 08:03:31 · 1484 阅读 · 0 评论