前端教程

首页>前端教程

JavaScript基础7:数组Arrays常用的迭代方法

这些新增的方法只有IE9或者Edge及chrome等现代浏览器才支持,IE8及以下就不支持了。不过,老的东西肯定是要被抛弃的,学习新东西是常态。技术总是一波接一波更新,所以持续学习是技术人必须的技能。不然很容易被拍死在沙滩上。数组迭代方法对每个数组项都要进行操作。1、forEach()为每个数组元素...

JavaScript基础6:数组Arrays和常用属性与方法

数组是JavaScript中一个很重要的概念。数组是一种特殊的变量,因为它一个变量里面可以存储多个值。一、创建数组var array_name = [item1, item2, ...];  比如: var imgURL=[&...

移动端利用js改变html的font-size值达到适配的方法

移动端适配主要有两种方法,一种是用css,一种是用js,但是根本都是通过修改html的font-size的大小,然后换算成rem倍数关系的值,从而适配不同设备尺寸。关于css的适配方法,这篇文章已经介绍。利用calc()函数计算文字大小进行适配rem和em的区别在于,rem始终是html根的文字大小...

JavaScript基础5:NaN和isNaN到底是啥?

NaN和isNaN(),还有ES6提供的Number.isNaN(),真的把脑袋都绕晕了,觉得计算机的世界真的好笨,人看一眼就知道的事情,它们要有一套各种转换逻辑才能得出结论。好吧,其实它们的逻辑都是人设计的,最终还是人笨了 : )一、什么是NaN?number数据类型包括有效数字和一个NaN,所以...

JavaScript基础4:Strings 及String Methods

字符串是JavaScript中最常用的数据类型,主要用来存储和操作文本,当然,这个文本指的是带有引号的字符。1、定义一个变量,为其赋值一个字符串,字符串用双引号和单引号包含起来。var str1="hello world!"; var str2=&...

JavaScript基础3:运算符和表达式

运算符和被运算的对象(操作符)构成表达式,表达式能产生一个具体的值。JavaScript的运算符包括:算术运算符、赋值运算符、字符串运算符、比较运算符、逻辑运算符、类型运算符、按位运算符。一、算术运算符算术运算符用于对数字执行算术运算。运算符描述例子+加var x = 100&n...

JavaScript基础2:数据类型

JavaScript是一门弱语言,不像大学时候学的C语言,用一个变量,还要先定义数据类型,定义成了int整型,就不能放字符串进去。JavaScript定义的变量,就是你先放了数字进去,它就变成了数字类型,后面改放了字符串进去,也就变了字符串类型。所以,在进行一些运算的时候,虽然灵活,但也会出毛病,这...

JavaScript基础1:JavaScript的前世今生

JavaScript,我们喜欢简称为js,这是一门基于浏览器就可以解释的脚本语言。随着移动端的火爆,JavaScript也是借着东风扶摇直上,成为了这几年上升势头最猛的编程语言。不过,JavaScript的出身不太好。1995年,网景公司,也就是开发出第一款最流行的Navigator浏览器的公司,为...

CSS3第十八课:响应式web布局——grid 栅格布局基础介绍

一、什么是栅格布局一提到响应式布局,很多人都会使用框架,比如熟知的bootstrap,但是框架大而全,相应的代码就冗余,有时候开发一个小应用根本不用上框架,直接自己搭建一个小的栅格系统就可以用了。其实栅格,说直白一点就是把页面划分成很多等分的列。比如,经典的12grid,就是把网页划分成等分的12列...

CSS3提供的一个计算函数calc(),在响应式的计算上很有帮助

CSS3提供的函数calc(),是calculate(计算)的缩写,具有计算的能力,允许通过+ - * / 运算符构成一个数学表达式,最终产生一个具体的value值。 calc()是动态计算,任何数值都可以用这个函数计算,比如width,height,font-size...

css3第十七课:filter滤镜,真美颜

因为Edge13支持这个属性了,所以打算写出来,毕竟已经看到有项目使用这个CSS3的新属性了。CSS3 filter 属性是用来为一个元素(通常是图片)添加特殊的效果。一、语法结构filter: none | blur() | brightness(...

html5提供的picture标签可以更好地解决图片响应式的问题

一、图片响应式设计的老方法。在以前为图片做响应式设计的时候,一般用三种方法。第一种,直接让图片和父容器保持100%:img {     width: 100%;     height: ...

CSS3第十六课: Media Queries媒体查询——响应式布局的关键

其实在CSS2的规范就提出了@media的规则,就是根据不同的设备使用不同的css样式。遗憾的是很多设备媒介没有得到支持。所以在CSS3中,关于媒体查询的含义发生了改变,不再是查看设备的类型,而是查看设备的功能。媒体查询主要可以查看设备的功能如下:设备视口的宽度和高度设备本身的宽度和高度。横屏竖屏(...

CSS3第十五课:flex弹性布局,一维布局最好的方法(下)

过年最大的好处就是可以和孩子出门疯玩,不到天黑不回家。一晃眼,又坐在教室里,开始上课写文章了。一直写博客,但是今年想尝试一下自媒体,写写教育类的文章,算是新年的一个flag吧。进入正题……上一篇讲了作用在flex container上的6个属性,这篇文章讲解作用在flex items上面的6个属性。...

CSS3第十五课:flexbox弹性布局,一维布局最好的方法(上)

都9102年了,还使用float布局呢,是时候了解一下被IE11以及谷歌、火狐等浏览器都支持的flex弹性布局了。flexbox布局从最早的2009年开始,历经了各个不同的版本,还有各路浏览器早期的前缀时期,现在在IE11上已经没有问题了,虽然pc端因为IE9的存在还没有彻底普及,但是移动端已经是没...

CSS3第十四课:box-sizing、outline-offset、resize用户界面几个特性介绍

CSS3中,新增了如下的user interface(用户界面)特性:但是,除了box-sizing,outline-offset,resize的支持度不错之外,其他几个特性浏览器全部不支持。曾经早期的Opera还支持,自从被Chrome收编之后,也都不支持了。所以,这篇文章只谈被浏览器支持的三个特...

kalendae.js强大的可以多选日期的日历纯js插件

最近做一个小项目,需要用到多选日期,筛选了好一番,最终还是觉得kalendae.js这个不依赖jQuery的插件挺好用的。具体效果可以点开demo查看:华信智原教师签课时系统页面这个插件不仅可以多选日期,还可以选择某个范围,还可以按周来选,纯js代码,不依赖任何框架,兼容性好,值得推荐。有需要的朋友...

ps调色的混合匹配法,俗称红外线调色法,色感不好的童鞋有救了!

李涛老师的混合匹配法,俗称叫红外线调色法,对于色调感觉不太好的人来说,可以快速发现图片合成的过程中,物体之间色调的协调性是否和谐。图片合成的过程中,因为素材的光源不同,导致色温色调不一样,用色彩平衡可以改变色调,但是到底调的合不合适,有没有调过分,靠肉眼感觉不出来,就可以利用红外线的原理来帮我们判断...

checkbox复选框样式美化的问题

复选框,单选框都不好直接用css样式美化,总得用点奇思妙想才行。如果只考虑谷歌内核的浏览器的话,那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持,这就逼得大家另想办法了。利用label挂钩checkbox的特点来实现。当html代码中,labe...

select下拉菜单的兼容性问题,支持IE10以上的方法

对于表单控件的样式修改一直是个老大难的问题,如果不做大手术,还是很好兼容IE10和谷歌等现代浏览器的。有两种常规方法。第一种:直接干掉select旁边的小箭头,用图片或者border绘制三角形代替。chrome下面需要利用谷歌的私有属性-webkit-appearance完成。这个appearanc...
Top