最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

最新发布 第2页

Rockyxia Web技术博客研究学习当前网页前端技术,一起分享学习的快乐!

Vue第二节:简易安装 和 快速入门Vue.js
Vuejs

Vue第二节:简易安装 和 快速入门Vue.js

rockyxia 7年前 (2017-03-23) 7475浏览

写在前面 上一节我们介绍了Vue.js框架,这一节,我们可以来试着动手写点小代码了。 1 简易安装 要使用Vue.js,我们得先把它安装到我们的项目中,说明了简易安装,我们讲解的肯定是最简单的方法,先不管那些高大上的费时间的安装方法,直接引入一个js文件,先把代码敲代码再说。 <head> <meta charset="UTF-8"> <title>简易...

Vue第一节:Vue.js框架是什么,为什么选择它?
Vuejs

Vue第一节:Vue.js框架是什么,为什么选择它?

rockyxia 7年前 (2017-03-16) 9344浏览

写在前面 “大白话,讲编程”系列又回来了,这个系列我们一起学习的是Vue.js基础知识。你没看错,是基础知识。所以,哪怕你入行不久,相信你在的大白话风格下,也能学会。 但还是希望你有开发过html,css,javascript的项目经验,如果你连一点项目经验都没有,亦或者你早已掌握Vue.js的知识,那么这个系列不适合你当前的学习阶段。 这一个系列的Vuejs连载教程是同步转载自 web前端教程 微信公众号...

尝鲜一下微信小程序的开发过程
web综合

尝鲜一下微信小程序的开发过程

rockyxia 7年前 (2017-01-11) 7764浏览

写在前面 随着1月9日微信小程序的正式上线,小程序的热度达到了一个顶峰,虽然我不并不是太看好小程序的发展,但是新的事物的诞生,去了解下也是没有坏处的吗。近日尝试了一个小程序的开发,了解下小程序的开发过程,非常的简洁的一个页面,里面有三个tab页,内容都是静态的,引入了微信提供的WEUI样式库。 如果,我是说如果后续还有兴趣的话,我会把数据变成动态的,从博客上开个接口来取数据。 下面来简单介绍下这个简单的小...

我的知识库

基于HTML模板和JSON数据的JavaScript交互

rockyxia 7年前 (2016-12-22) 6843浏览

写在前面 近日在协助研发一个系统的时候,项目研发对js比较陌生,很多数据的操作都被交给前端来做,所以遇到了json数据绑定到html模版的问题,搜了一圈的确没有找到好的办法,突然眼前一亮看到大神zhangxinxun之前的一篇文章,正是写的这个东西,虽然该文章只展示一个简单的json数据绑定,但是在思路上却给了我很大的启示,不管是简单还是复杂的json,原理都是这样的,在此记录一下,顺便分享推荐一下张大神的...

CSS

具有《CSS禅意花园》情节的读书笔记

rockyxia 7年前 (2016-11-16) 6520浏览

写在前面 对于前端来说,CSS Zen Garden这个网站相信大家都是不陌生的,当年我刚接触网页制作(对,那时还不叫前端)的时候,CSS Zen Garden经常会出现在我的视野中,有些年头了,现在前端工程师不知道还会不会看到这个网站。翻译成中文就是“CSS禅意花园”,同一套html结构,仅通过不同的css来改变网站的样子。 2007年出版的一本名叫《CSS禅意花园》的书,主要讲解 http://cssz...

web综合

DOCTYPE 与浏览器模式分析

rockyxia 8年前 (2016-10-18) 6325浏览

DOCTYPE 的诞生 DOCTYPE,或者称为 Document Type Declaration(文档类型声明,缩写 DTD)。通常情况下,DOCTYPE 位于一个 HTML 文档的最前面的位置,位于根元素 HTML 的起始标签之前。因为浏览器必须在解析 HTML 文档正文之前就确定当前文档的类型,以决定其需要采用的渲染模式,不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本...

web综合

清理浮动的几种方法以及对应规范说明

rockyxia 8年前 (2016-10-18) 6286浏览

写在前面 浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间,这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是,由于浮动特性,容器如果没有明确设定高度,会依照普通流内元素高度设置,这样就会导致脱离普通流的浮动元素溢出容器,影响其后元素布局。 我们将现有已知的清除浮动元素方法罗列下: 采用一个HTML标签,以及cs...

Javascript

JS判断浏览器类型,手机移动端iOS、Android大全

rockyxia 8年前 (2016-09-12) 6354浏览

判断手机是否是ios和Android客户端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端。网上搜索来的,比较简单: var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !...

利用sass的compass自动合并icon图标形成css sprite雪碧图和对应css样式
web综合

利用sass的compass自动合并icon图标形成css sprite雪碧图和对应css样式

rockyxia 8年前 (2016-08-30) 15203浏览

写在前面 css sprite是广大页面仔(前端开发攻城狮)在页面制作经常使用到的一种图片拼合技术,又称css雪碧图或css精灵,能够减少页面请求数、减小图片尺寸,从而达到提升页面访问速度的效果。但是这种技术的缺点也是相当的明显,就是拼图和后期维护的成本比较大,所以经常的使用的时候需要非常的注意,还要保留拼图的psd文件。虽然svg以及iconfont等新技术的出现改善了一些,但是svg和iconfont的...

后台开发语言

ASP自动获取汉字首字母函数(UTF-8/GB2312)

rockyxia 8年前 (2016-08-04) 6401浏览

写在前面 ASP获取汉字首字母函数分享,分GB2312编码和UTF-8编码两种,每次传入一个汉字或一个字符。(具体如何获得字符串中的一个字符,就大家自己想啦,(*^__^*) ) UTF-8编码函数 utf-8编码应该是当前使用最多的编码方式了。 'UTF-8获取汉字首字母 function GetPy4utf(char) if char=null or len(trim(char))=0 ...

ES6

ES6第二十节:一个缺失已久的特性 — module模块

rockyxia 8年前 (2016-07-28) 6277浏览

写在前面 在ES6之前,Javascript还不支持原生的模块化。如果要实现模块化,我们要借助一些框架,比如:requireJS或者seaJS等;什么?没用过也没听过这些框架?没关系,它们不是我们今天要讲的重点。 今天的主角是:ES6自带的模块化。 模块化的初衷 也许你要问了,好端端的,为什么要模块化? 现在的web系统越来越庞大、复杂,需要团队分工,多人协作,大型系统的javascript文件经常存在复...

ES6

ES6第十九节:终于,JavaScript也有了类(class)的概念

rockyxia 8年前 (2016-07-28) 6282浏览

写在前面 类class这个概念,在其他编程语言中很早就实现了,而JavaScript语言并没有实现,一直以来,开发者都是使用函数function和原型prototype来模拟类class实现面向对象的编程。 接下来的学习,前端君默认大家都了解传统的模拟类的写法,如果你已经忘记了,ES6系列的第九节有介绍JavaScript的面向对象,点击可以查看。 现在,ES6给我们带来了好消息,它给JavaScript...

ES6

ES6第十八节:教你如何使用ES6的Promise对象

rockyxia 8年前 (2016-07-28) 6749浏览

写在前面 Promise对象,ES6新增的一个全新特性,今天我们要好好学习一下它。 Promise的设计初衷 首先,我们先一起了解一下,为什么要设计出这么一个玩意儿,用它是为了解决什么问题? 带着这个问题,我们来回想一下日常开发中,经常需要用到ajax请求数据,拿到数据后,再进行一些处理。 可有一次,你需要用ajax进行多次请求,而且,每次请求都依赖上一次请求返回的数据来作为参数,然后继续发出请求,你把代...

ES6

ES6第十七节:ES6新增的Map和WeakMap 又是什么东西?

rockyxia 8年前 (2016-07-27) 6284浏览

写在前面 上节介绍了Set和WeakSet,这节咱就讲Map和WeakMap是什么?当然,两者之前并没什么必然的联系,仅仅是用法类似。 什么是Map 介绍什么是Map,就不得不说起Object对象,我们都知道Object对象是键值对的集合: //Object对象 {"name":"前端君","gender":1} ES5中的key键名的类型要求一定是字符串,当然,ES6已经允许属性名的类型是Sy...

ES6

ES6第十六节:ES6新增的 Set 和 WeakSet 是什么东西?

rockyxia 8年前 (2016-07-25) 6275浏览

写在前面 题外话:往后的章节,跟前面的章节联系越来越紧密,很多知识的讲解建立在前面章节的学习基础上,如果是新来的同学,建议从第一节学起。如果是忘记了前面的内容,前端君也会在适当的时候,加上跳转链接。 什么是Set结构 Set是ES6给开发者带来的一种新的数据结构,你可以理解为值的集合。我们平时见到的数组Array也是一种数据结构,但是Set跟其他数据结构不同的地方就在于:它的值不会有重复项。 基本用法 我...

ES6

ES6第十五节:有一种特殊的函数叫:Generator函数

rockyxia 8年前 (2016-07-22) 6272浏览

写在前面 今天我们来学习ES6给我们带来的一种新函数,在学习它之前,前端君希望你已经阅读并初步了解了上一节的内容:iterator遍历器。因为本节的内容,是建立在iterator遍历器知识的基础上。 如果是新来的童鞋,或者您还未了解iterator遍历器,我希望你可以先学习上一节的内容,点击可查看:第十四节iterator遍历器的介绍。 既然你都看到这里来了,就咱们就接着往下讲… 声明Gene...

ES6

ES6第十四节:ES6的 Iterator 遍历器到底是什么?

rockyxia 8年前 (2016-07-22) 6623浏览

写在前面 第十三节我们讲了简单又实用的for…of,我们可以使用它来遍历数组,字符串,Set和Map结构,但是有没有发现,我们并没有说它可以遍历Object对象,为什么不试试用它来遍历Object对象呢? for…of为啥不遍历Object对象 我们试试看: //定义一个的Object对象 let obj = {"name":"前端君"}; //咱们来for...of一...

ES6

ES6第十三节:易学又实用的新特性:for…of

rockyxia 8年前 (2016-07-21) 6285浏览

写在前面 前面几节的内容稍微偏长,代码也不少,估计有基础的同学才会跟得上,不知道大家有没有看懵了。这节来点简单但又很实用的知识,没错,就是for…of。 for…of 是什么 for…of 一种用于遍历数据结构的方法。它可遍历的对象包括数组,对象,字符串,set和map结构等具有iterator 接口的数据结构。 (上面这句话如果有看不懂的地方,自动忽略即可,后续会有章...

ES6

ES6第十二节:ES6 Proxy代理 和 去银行存款有什么关系?

rockyxia 8年前 (2016-07-20) 6291浏览

写在前面 ES6给开发者提供了一个新特性:Proxy,就是代理的意思。也就是我们这一节要介绍的知识点。 以前,ATM还没有那么流行的时候(暴露年纪),我们去银行存款或者取款的时候,需要在柜台前排队,等柜台工作人员帮我们办理业务,这也是一种代理,我们自己无法修改我们银行账户上的数据,需要代理给柜员,帮我们办理存钱或者取现业务,而Proxy也是这样的一种机制。 Proxy的实现 我们先来看看Proxy的实现:...

CSS居中问题的各种解决方案(水平、垂直)
CSS

CSS居中问题的各种解决方案(水平、垂直)

rockyxia 8年前 (2016-07-19) 10831浏览

写在前面 页面中CSS居中的问题我们经常能遇到,有简单的行内元素水平居中、块级元素水平居中,也有较为复杂的未知高度宽度的垂直居中问题,下面我们来把所有有关CSS居中的情况都总结一下,欢迎补充。 曾经的一篇文章:DIV未知高度垂直居中的CSS解决方法(2011-09-29) 水平居中 行内元素 把行内元素嵌套在一个DIV中,并且在DIV中设置以下样式 div { text-align: cen...