![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 67
huihui10086
这个作者很懒,什么都没留下…
展开
-
js编译与执行顺序
JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜。那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,原创 2015-11-20 09:26:18 · 9010 阅读 · 2 评论 -
canvas初体验
第一次尝试使用canvas来做一个有关验证码的效果接下来直接上代码,代码里有注释便于大家理解:@charset "utf-8";/* CSS Document */body{background:url(images/img10.jpg) no-repeat fixed;}body,form,ul,ol,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,tab原创 2015-07-22 10:09:36 · 838 阅读 · 0 评论 -
js闭包初体验
对于js的闭包,一直以来只有书面上的了解,却从来没有在实战中使用,最近两天看了很多关于js的博客,了解了一些js闭包的作用,于是有了以下的代码:闭包演示 p {background:gold;} function init() { var pAry = document.getElementsByTagName("p"); var Ar原创 2015-08-03 09:50:06 · 566 阅读 · 0 评论 -
css3 flex流动自适应响应式布局样式类
今天在做一个水平居中的div内部元素贴边水平均匀布局(有点绕,直接看图吧),一开始使用的都是一些比较常用的css+html方法来实现布局,感觉这样很死板(在多增加一个div,并未div设置相应的一个负的margin-left,此值需要通过计算得到),于是便想到了css3的flex流式布局,于是上网找了一些资料:1、css3 flex一旦一个容器赋予了disp原创 2015-08-28 15:44:27 · 5704 阅读 · 1 评论 -
jQuery.outerWidth() 函数详解
outerWidth()函数用于设置或返回当前匹配元素的外宽度。外宽度默认包括元素的内边距(padding)、边框(border),但不包括外边距(margin)部分的宽度。你也可以指定参数为true,以包括外边距(margin)部分的宽度。如下图:如果你要获取其它情况的宽度,请使用width()和innerWidth(),你可以点此查看三者之间的区别。该函数属于jQuery对象(实例原创 2015-07-20 13:50:37 · 1734 阅读 · 0 评论 -
使用less开发css
最近在和小伙伴讨论如何高效的编写css代码的问题,于是我们想到了使用css的预处理语言。例如(less,sass等)。最后我们决定使用less(相对于其他css预处理语言更简单,语法更接近css)。先说说什么是less?简单的说,你可以在你的css文件中使用变量、函数等方式来编写你的css。less具有哪些功能?混入(Mixins)——class中的cl原创 2015-07-30 15:00:22 · 1570 阅读 · 0 评论 -
JS的基础类型与引用类型
js两种类型:1. ECMAScript变量包含两种不同类型的值:基本类型值、引用类型值;2. 基本类型值:指的是保存在栈内存中的简单数据段;3. 引用类型值:指的是那些保存在堆内存中的对象,意思是,变量中保存的实际上只是一个指针,这个指针执行内存中的另一个位置,由该位置保存对象;两种访问方式:4. 基本类型值:按值访问,操作的是他们实际保存原创 2015-07-20 09:58:36 · 707 阅读 · 0 评论 -
字体图标你还不知道你就out啦
背景:作为一个web前端工程师,怎么可以不知道字体图标这种高大上的东西那!!?首先,我们先恶补下什么是字体图标:用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。优点:加载文件体积小统一展示风格,使用方法通过font-size,color就能自由变化大小,修改颜色,就像控制文字一样简单可以添加一些视觉效果如:阴影、旋转、透明度兼容IE6后原创 2015-07-16 10:38:58 · 940 阅读 · 0 评论 -
js正则表达式--验证表单
检测手机号码:/0?(13|14|15|18)[0-9]{9}/检测用户名:(数字,英文,汉字,下划线,中横线):/^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/密码:(数字,英文,下划线,中横线)/^[A-Za-z0-9_-]+$/身份证:/\d{17}[\d|x]|\d{15}/非空:/^\S+$/IP地址:/((?:(?:25[0-5]|2[0-4]\d|原创 2015-07-17 14:22:02 · 918 阅读 · 0 评论 -
子元素设置margin-top,父元素也受影响
这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然是CSS2.1盒模型规范……虽然很别扭,非常别扭的规定。问题如下,两层Div结构,Outer Div属性为“margin:0 auto”,本该紧贴外框顶部的,如果没有Inner Div,或者没原创 2015-08-10 15:19:54 · 1065 阅读 · 0 评论 -
js面试题--js的继承
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式1.使用对象冒充实现继承(该种实现方式可以实现多继承)实现原理:让父类的构造函数成为子类的方法,然后调用该子类的方法,通过this关键字给所有的属性和方法赋值Js代码 function P原创 2015-07-16 14:09:39 · 1569 阅读 · 0 评论 -
js获取事件源及触发该事件的对象
如何获取事件源及触发该事件的对象,方法有很多,js中可以通过event来实现,下面有个不错的示例,感兴趣的朋友可以参考下:function myfunction(event) { event = event ? event : window.event; var obj = event.srcElement ? event.srcElement : event.target; //这时o原创 2015-07-15 14:22:16 · 4720 阅读 · 0 评论 -
阿里面试题---------关于html标签中物理标记和逻辑标记区别
关于html标签中物理标记和逻辑标记区别因为两者所达到的效果一样,所以人们就没有太在意这两个到底有什么区别,那么今天我来告诉大家,是有区别的。 它们的区别就再于一个是物理标记(实体标记),一个是逻辑标记。什么是物理标记?什么是逻辑标记? 物理元素所强调的是一种物理行为,比如说我把一段文字用b标记加粗了,我的意思是告诉浏览器应该给我加粗了显示这段文字,从单词的语义也可以分析得原创 2015-07-29 11:13:20 · 2218 阅读 · 3 评论 -
完美的jquery事件绑定方法on()
在讲on()方法之前,我们先讲讲在on()方法出现前的那些事件绑定方法:.live()jQuery 1.3新增的live()方法,用法如下:$("#info_table td").live("click",function(){/*显示更多信息*/});这里的.live()方法会把click事件绑定到$(document)对象,而且只需要给$(documen原创 2015-07-23 14:40:24 · 2450 阅读 · 0 评论 -
html5 本地存储----localstorage初体验
HTML5虽未来到其鼎盛时期,但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性。就我所做的项目而言,应用的HTML5相关特性有:data-自定义属性、placeholder、以及email类型input文本框。最近了解了一下html的本地存储功能(例如cookies和localstorage),今天主要要和大家分享的是localstorage的一些基础常识:废话不多说直接上代码(有原创 2015-08-31 11:24:48 · 870 阅读 · 1 评论 -
js为字符串编码
js 提供了两组函数来进行字符串的编码与解码:escape()与unescape(),decodeURI()与encodeURI();JavaScript escape() 函数定义和用法escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。语法escape(string)参数描述原创 2015-08-17 14:25:09 · 1569 阅读 · 0 评论 -
css的架构
关于如何处理网站的CSS,各个网站做法都不一样,这随着网站的性质及大小不同,公司前人留下的规范不同,以及CSS工程师的眼界不同而有所不同。由于我从业经历有限,所知甚浅,只能说些肤浅业余的内容,不准确之处欢迎指出。就CSS文件而言,有的网站分为header.css, body.css, footer.css,不做评价;有的分为reset.css, main.css, content.cs原创 2015-10-28 15:06:15 · 741 阅读 · 0 评论 -
frame实现部分刷新
最近在找新的实习工作,所以面试了很多的公司,各个公司的面试问题基本相同,但也会针对自己公司要使用的产品技术来问一些有针对性的问题,例如下面一题,实现类似微信页面中,底部4个按钮,点击之后,底部按钮不刷新,但是上面的内容要相应的进行刷新。解决这个问题有很多方法,我想到了两个,一个是ajax,一个就是框架(frame),最后决定选择使用frame,接下来看部分核心代码: * {原创 2015-09-22 15:28:53 · 1991 阅读 · 0 评论 -
jquery插件开发基础知识点
学习了一段时间的jquery,感觉已经是时候开始更进一步啦,于是开始学习并尝试开发jquery插件,扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。一、入门编写一个jQuery插件开始于给jQuery.fn加入新的功能属性,此处添加的对象属性的名称就是你插件的名称:.代码如下:原创 2015-10-08 11:38:12 · 463 阅读 · 0 评论 -
js实现表格的排序功能
之前的阿里线上笔试最后一道就是实现表格的排序功能,但当时由于时间有限没能完成,于是今天趁着午休时间完成了这个功能。下面附上代码(有注释):(该功能是完成了对age的升序(从小到大)的排序) Document table { border: 1px solid #ccc; width: 1000px; margin: 20px auto; borde原创 2015-09-06 14:59:15 · 7104 阅读 · 0 评论 -
jquery有用却不常用的方法分享
工具方法$.isArray(obj); //检测一个对象是否是数组$.isFunction(obj); //检测一个对象是否是函数$.trim(str); // 去除string 的空格$.( value, array [, fromIndex ] )$.inArray(value, array); // 返回value 在array 中的下标, 如果没有找到则返回-1$.in原创 2015-08-21 14:33:56 · 852 阅读 · 0 评论 -
jq优化法则25条
1. 从Google Code加载jQueryGoogle Code上已经托管了多种JavaScript类库,从Google Code上加载jQuery比直接从你的服务器加载更有优势。它节省了你服务器上的带宽,能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是,如果用户访问那些发布在Google Code上的站点后它会被缓存下来。这样做很有意义。有多少站点使用了没有原创 2015-09-06 16:47:35 · 709 阅读 · 0 评论 -
Angular.js初体验
首先什么是 AngularJS?"AngularJS 是专门为应用程序设计的 HTML。"AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。AngularJS 把应用程序数据绑定到 HTML 元素。AngularJS 可以克隆和重复 HTML 元素。AngularJS 可以隐藏和显示 H原创 2015-09-10 11:02:59 · 733 阅读 · 0 评论 -
很火的ES5(js数组函数)初体验
今早看到一篇关于一道面试题(原文链接),发现评论区有人使用ES5中的方法来解决,我发现此方法比传统的js方法更简单于是查找了相关资料加以了解。 ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,比如数组这块,我们可能就不需要去有板有眼地for循环了。ES5中新增了写数组方法,如下:forEach (js v1.6)map (js v1.6)filter原创 2015-09-05 11:04:01 · 1403 阅读 · 0 评论 -
对比jQuery和AngularJS的不同思维模
对比jQuery和AngularJS的不同思维模Question假设我已经熟悉了如何使用jQuery来开发客户端应用,我现在打算使用AngularJS。请描述一下有那些思维模式方面的东西需要转变吗?下面是举出一些具体的问题,用来帮助你回答我的这个问题:我应该以何种不同的方式来架构和设计客户端web应用?最大的不同点是什么?我应该停止使用哪些东西;又应该开始使用哪些东原创 2015-08-18 16:17:22 · 780 阅读 · 0 评论 -
js核心--------作用域链了解
最近公司事情少,于是今天花了一上午时间去学习有关js函数作用域的知识点,查看了很多资料并且写了一些简单的demo加以验证与学习,接下来我为大家分享总结一下我一上午的有关作用域链的成果:当定义一个函数时(注意,是定义的时候就开始了),它实际上保存一个作用域链。当调用这个函数时,它创建一个新的对象来储存它的参数或局部变量,并将这个对象添加保存至那个作用域链上,同时创建一个新的更长的表示函数原创 2015-09-01 14:12:23 · 1129 阅读 · 0 评论 -
视差滚动---parallax.js
最近在看视差滚动的原理和实现方法。最简单的是使用css的属性background-attachment: fixed || scroll || local,使用这个便可以实现简单的视差滚动效果,但是想完成一些更加炫酷的效果。就得使用js啦,其中最简单的莫过于使用parallax。js插件。下面有个使用该插件的html代码(ps:这个代码是从网上扒的,里面的一些js的引用还有图片原创 2015-08-05 14:34:29 · 6623 阅读 · 0 评论 -
js基础及面试重点--------this
this的查找this的查找是很多人迷茫的一点,也似乎有很多人抱有this不稳定这样的看法,实在令人无语。this的查找可以说是3种对象查找中最为简单的,因为其实this对象的确定根本没有一个“查找”的过程。首先,this对象只会在一个函数中需要确定,如果是在全局域下,this永远为Global对象,在浏览器中通常就是window对象。而在javascript中,函数的调用一共有4种方式:原创 2015-08-24 11:35:25 · 1411 阅读 · 0 评论 -
html5 canvas 实现简易马祖小游戏
参考妙趣课堂的视频,做了这个游戏,通过这个游戏可以了解到canvas的强大。废话不多说,直接上代码。html代码: 马祖 css代码:这里我用的是less@black:#000;@white:#fff;* { margin: 0; padding: 0;}body { background-color:@black;}#box {原创 2015-08-10 11:28:43 · 1611 阅读 · 0 评论 -
html canvas 常用api基础
HTML 5 Canvas 参考手册 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。本手册提供完整的 getContext("2d") 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。浏览器支持Intern原创 2015-08-09 15:06:30 · 816 阅读 · 0 评论 -
什么才是真正的json
前言写这篇文章的目的是经常看到开发人员说:把字符串转化为JSON对象,把JSON对象转化成字符串等类似的话题,所以把之前收藏的一篇老外的文章整理翻译了一下,供大家讨论,如有错误,请大家指出,多谢。正文本文的主题是基于ECMAScript262-3来写的,2011年的262-5新规范增加了JSON对象,和我们平时所说的JSON有关系,但是不是同一个东西,文章最后一节会讲到新增转载 2015-06-28 23:50:32 · 586 阅读 · 0 评论 -
前端开发学习随笔-------jquery.data()
前端开发学习随笔-------jquery.data() 前几天在写推箱子游戏中为了保存游角(即推箱子的人物角色的x,y坐标),第一次使用到了data()方法(使用该方法需要先引入jquery)先上我的代码:oP.data('x',this.nowJson.me.x);//将人物的坐标分别赋值给“x”和“y”oP.data('y',this.nowJson.me.y);原创 2015-06-27 16:02:57 · 516 阅读 · 0 评论 -
js,jq获取浏览器宽度,高度等值(多浏览器)
js,jq获取浏览器宽度,高度等值1.使用js方法IE 中: document.body.clientWidth ==> BODY 对象宽度 document.body.clientHeight ==> BODY 对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentEle原创 2015-06-26 21:27:51 · 888 阅读 · 0 评论 -
css属性区分---------word-break与word-wrap
css属性---------word-break与word-wrapword-break与word-wrap这连个属性作用都是控制文本的换行,但是很多人却不太清楚这两个属性的区别,往往是将两个方法一起使用:例如: word-wrap:break-word; word-break:break-all;但其实上述两个属性还是存在一些小区别的,废话不多说原创 2015-06-27 20:45:21 · 552 阅读 · 0 评论 -
前端工程师修炼之道(转载)
前端简介Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。随着人们对用户体验的要求越来越高,前端开发的技术难度越来越大,Web前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。早期的前端其实就是Table布局,后来发展到所谓的Div + CSS网站重构,再到现在的让人眼花转载 2015-06-25 19:33:42 · 2830 阅读 · 1 评论 -
jq游戏----推箱子
jq游戏----推箱子参考妙趣课堂视频所写的游戏,练练手还是很不错的,下面附上代码:index.html Document index.js$(document).ready(function(){ Game.init($('#div1')); //初始化 // alert("a");});var Game = { gk原创 2015-06-24 15:27:16 · 1017 阅读 · 0 评论 -
前端开发学习随笔---------$.proxy()
前端开发学习随笔---------$.proxy()今天在学习编写推箱子游戏时,用到了一个新的jquery方法------------proxy();下面我将介绍一下$.proxy()的具体使用方法:jQuery.proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context )语境。jQuery.原创 2015-06-24 13:56:28 · 685 阅读 · 0 评论 -
web前端面试常见问题二 ------css布局(position)
web前端面试常见问题二 ------css布局(position) 前言:博主我今年大三,web前端学了也有小半年啦,因为大四没课啦,所以已经开始找实习,面试了很多大大小小的公司,有失败也有成功。接下来我将和大家分享一下我在各个公司遇到的一些常见面试题,希望能和大家相互探讨,共同进步。 二.position p原创 2015-06-22 14:02:16 · 3679 阅读 · 0 评论 -
web前端面试常见问题三------浮动原理和清除浮动
web前端面试常见问题三 ------浮动原理和清除浮动 面试的时候浮动也是面试官经常问面试者的基础问题之一,浮动(float)也是大家平常在网页开发中经常使用的属性,(主要是为了让一些标签并排显示)。 下面我先讲一下浮动原创 2015-06-23 11:23:52 · 6077 阅读 · 1 评论 -
纯css实现多行文本省略号显示
首先传统的单行文本实现省略号显示代码如下:overflow: hidden;text-overflow: ellipsis;white-space: nowrap;注意点:部分低版本浏览器需要加上固定宽度才支持text-overflow属性。纯css实现多行文本省略号显示:方法一text-overflow: -o-ellipsis-lastline; o原创 2015-06-22 15:36:20 · 1373 阅读 · 0 评论