关闭

[置顶] 重温Flex布局

Flex布局,可以简便、完整、响应式地实现各种页面布局。浏览器支持:得到所有浏览器的支持。(注:Flex布局将成为未来布局的首选方案)一. Flex布局的概念:Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。div{ display: flex; }/*行内元素*/div{ display: inline-fl...
阅读(186) 评论(1)

[置顶] 读《ECMAScript 6 入门 —— 阮一峰》(下)

编程风格块级作用域字符串解构赋值对象数组函数Map结构Class模块ESLint的使用本章探讨如何将ES6的新语法,运用到编码实践之中,与传统的JavaScript语法结合在一起,写出合理的、易于阅读和维护的代码。多家公司和组织已经公开了它们的风格规范,具体可参阅jscs.info,下面的内容主要参考了Airbnb的JavaScript风格规范。块级作用域 § ⇧(1)let 取代 varES6提出...
阅读(274) 评论(0)

[置顶] 读《ECMAScript 6 入门 —— 阮一峰》(上)

前言ES6的出现是为了提高 javascript 的严谨性,安全性等方面,它代表着js的发展方向。网站开发的人员,无论前后端都必须熟稔 ES6 语法规范。带着问题看书1. ES6 新增的关键词 let 和 var 区别?a. 使用let声明的变量,只在它所在的代码块内有效。即如果使用let,声明的变量仅在块级作用域内有效。 b. var命令会发生”变量提升“现象,即变量可以在声明之前使用,值为u...
阅读(200) 评论(0)

[置顶] 读《jQuery技术内幕》(03)

jQuery构造函数init参数分析(一)       在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用jQuery的原型方法,就好像是jQuery的实例一样。下面就来看看...
阅读(102) 评论(0)

[置顶] 读《jQuery技术内幕》(02)

在我的上一篇文章里面 阐述了jQuery的大致框架,知道了所有代码都是写在了一个自调用匿名函数里面,并且传入了window对象,源码是这样的:(function( window, undefined ) {...})( window );  我们通过alert(jquery) 知道它是一个对象,那么这个对象是怎么构造出来的呢?我们使用$(document)类似的写法获取元素,就好像直接调用了普通的方...
阅读(95) 评论(0)

[置顶] 读《jQuery技术内幕》(01)

第一章  总体架构 1、设计理念 jQuery的理念就是“写更少的代码,做更多的事”,而且做到代码的高度兼容性。 2、总体架构 大致可以分为三个部分:构造模块,底层支持模块和功能模块。 3、使用自调用匿名函数  (function( window, undefined ) { ... })(window)    这里先分析一下匿名函数:匿名函数的作用是创建一块封闭区域,外面不能够访问里面的变量和方法...
阅读(141) 评论(0)

[置顶] 不要过度依赖JQuery(三)

前言 在不要过度依赖JQuery(一)和不要过度依赖JQuery(二)两篇文章中已经列举了大量的使用原生JavaScript替代JQuery的例子,在本文中将继续列举! 1、表单 获取焦点$('#test').focus(); $('#test').focus(function(){}); var t = document.getElementById('test'); function...
阅读(109) 评论(0)

[置顶] 不要过度依赖JQuery(二)

前言 为什么说不要过度依赖JQuery呢?从项目方面来讲,一些项目在开发中实际用到JQuery内置功能不多,这样会造成项目臃肿;另一方面,目前的主流已经倾向于原生开发。 而在之前一篇《不要过度依赖JQuery(一)》一文中已经介绍了部分使用原生JavaScript实现JQuery功能的代码,这一章将继续列举。 1、位置 获取相对于文档的位置$('#test').offset() functi...
阅读(104) 评论(0)

[置顶] 不要过度依赖JQuery(一)

前言 毫无疑问,JQuery是一款非常优秀的JavaScript库,它让我们开发项目变得更加便捷容易。 不过,当你准备在一个项目(特别是移动项目)中使用JQuery时,你真的该好好思考一下,你会用到JQuery的哪些功能,是否真的需要jQuery。因为随着JavaScript的不断改善进化,现在它内置的功能已经非常强大,在很大程度上,已经可以实现以前需要在JQuery中才能实现的技术(如果你的...
阅读(119) 评论(0)

[置顶] 读《JavaScript 标准参考教程(alpha)阮一峰》(下)

24.说说下列属性的具体含义?window.screenX window.screenX window.innerWidth window.innerHeight window.outerWidth window.outerHeight window.pageXOffset window.pageYO...
阅读(167) 评论(0)

[置顶] 读《JavaScript 标准参考教程(alpha)阮一峰》(中)

12.js正则表达式有哪些操作方法?正则常用的修饰符?test() exec() 字符串对象的正则: match() search() replace() split() 正则常用的修饰符:g,i,m 13.谈谈下列js正则表达式的区别?贪婪模式和非贪婪模式?捕获组和非捕获组?先行断言和先行否定断言?/^abc/ 匹配以abc开头的字符 /[^abc]/ 表示除了a、b、c之外的所有其他字符。...
阅读(150) 评论(0)

[置顶] 读《JavaScript 标准参考教程(alpha)阮一峰》(上)

想要知道下列问题的答案,就去看看这本书吧!1.怎么获取数据类型? typeof xxx xxx instanceof Array Array.isArray(xxx) 2.字符串和数组的api区别? 字符串本质是类数组对象,字符串为只读,只能用length访问长度,[key]来取值,不能修改,不能使用slice(),forEach()...等数组API. 3.原生js...
阅读(154) 评论(0)

[置顶] 统一回复《怎么学JavaScript?》

鉴于时不时,有同学私信问我怎么学前端的问题。 这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了。 首先说句题外话。关于有人管我叫大神的事情。 个人感觉这跟你买东西时,人家管你叫帅哥一样,你答应与否都无妨。 正题开始,前端怎么学,应该因人而异,别人的方法未必适合自己。 就说说我的学习方法吧。 我把大部分时间放在学习js上了。因为这个js的学习曲线,先平后陡。 项目实践和练...
阅读(351) 评论(0)

[置顶] table表格合并第一列中相同的内容(优化+注解)

jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件 console.log(this); return this.each(function(){ console.log(this) var that;//用来保存含 有重复内容的列中的第一个td console.log(that);//...
阅读(205) 评论(0)

[置顶] table表格合并第一列中相同的内容!

分享一个简单实用的jquery小插件: Document .a{ transition:.5s; transform: rotate(-45de...
阅读(162) 评论(0)

[置顶] 读《Web前端开发工程师编程能力飞升之路》感触

引子最近在某博客上看到一篇‘Web前端开发工程师编程能力飞升之路’的文章,写的很不错。前端的水真的很深。之前逛百度贴吧的时候,也看到又问提问前端工程师的薪水问题,前端工程师根据你的能力,薪水可以很高!但是那些初级的入门前端,薪资还是不高的。下面我将这篇博客转载在我的博客上面,由于本篇博客转载次数太多,原文作者已经无法考究。博客内容如下: 背景 如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看...
阅读(136) 评论(0)

[置顶] 如何自己开发一款js或者jquery插件

引子现在网上关于js和jquery封装的插件很多,我刚刚接触前端的时候,就很敬佩那些自己写插件的大牛们!因为是他们给网站开发更多的便利,很多网页效果,网上很多现成的插件!那么这些插件是如何写的呢?首先是有扎实的js和jquery技术基础,其次还有一些写插件的方法和技巧。关于js和jquery的技术基础,那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧,本文可以略微介绍一下,方便以后写插件的时候...
阅读(128) 评论(0)

[置顶] 实用插件(七)视频播放插件——ckplayer

ckplayer插件下载地址:http://pan.baidu.com/s/12HYH4(如果不在了,自己找地址下载,下载后添加到网站根目录) ******特别提醒:解压后不要忘了把js文件夹也添加到你的网站根目录。这个主要是为了各浏览器的兼容性的,如果不添加, 在ie,Firefox上有可能不能用! 1,首先在页面头部引入: 2,在body部分放一个div:...
阅读(276) 评论(0)

[置顶] 读《JavaScript高级程序设计》

祖师爷——Brendan Eichjavascript诞生于1995年。 Brendan Eich被指定为这种”简化版Java语言”的设计师。 但是,他对Java一点兴趣也没有。为了应付公司安排的任务,他只用10天时间就把Javascript设计出来了。 由于设计时间太短,语言的一些细节考虑得不够严谨,导致后来很长一段时间,Javascript写出来的程序混乱不堪。如果Brendan Eich...
阅读(108) 评论(0)

[置顶] 实用插件(六)手机日历插件——LCalendar

1、点我下载2、使用方法: <script src="../js/LCalendar.js" type="text/javascript" charset="ut...
阅读(608) 评论(0)

[置顶] 我对知乎前端相关问题的十问十答

之前知乎上有不少同行邀请我回答一些前端相关问题,但是,大家都知道了,要认真回答一个问题是需要大量时间和精力的,对于还在不断学习积累阶段的我,时不时分散原本的精力,打乱自己原本的节奏,实际上是一件不划算的事情。就好像邮件或者微信,来一条信息,你就去看一下,时间和精力都会大大分散,工作和学习效率必然会大打折扣。所以我的策略是一段时间后专门花时间统一处理,这样时间利用率会更高,投入产出比会更大。对于知乎上...
阅读(737) 评论(0)

[置顶] 实用插件(五)弹出操作提示框artdialog

注意事项:因为artdialog的布局方式是tabble>table,所以自己的项目要是也有table必须要给个class或者id,以免自己的样式影响到弹出框样式(artdialog的html布局图见文章末尾!)(by wangxiaozan)artDialog是一个精巧的web对话框组件,压缩后只有十多KB,并且不依赖其他框架。 在页面head引入artDialog,注意如果文件带有skin参数将...
阅读(178) 评论(0)

[置顶] 实用插件(四)图片上传前预览插件

注:该插件app项目,pc项目都可使用1、由于插件为轻量级,直接附上源码和demo jQuery图片上传前预览 <styl...
阅读(100) 评论(0)

[置顶] 实用插件(三)通讯录插件

1、下载:点我下载 2、使用:引入1个css文件,2个js文件 <script type="text/javascript" src="js/city.js" s...
阅读(100) 评论(0)

[置顶] 实用插件(二)图片全屏预览插件——PhotoSwipe

注:该插件app项目,pc项目都可使用1、下载:先下载插件压缩包 免费下载2、使用:步骤:1、html结构: </li...
阅读(189) 评论(0)

[置顶] 实用插件(一)日历插件——My97DatePicker

1、下载:My97DatePicker组件包 免费下载 2、使用:步骤 1. 把My97DatePicker文件夹拷贝到项目根目录下 2. body前面引入一个css文件: body前面引入后面一个js文件:<script type="text/javascript"...
阅读(110) 评论(0)

[置顶] app项目经验总结

我写app的10条小经验:1、关于整体布局:app项目可以不使用bootstrap,不使用jquery mobile等框架,直接当作普通的pc端来写,但是一定要注意响应式布局,因为手机的尺寸实在太多,必须要保证各种分辨率下都要能够正常显示。      所以,要多用百分比等相对单位,少用浮动,先打好脚手架,保证整体布局在页面放大缩小后不会乱。2、关于文本域的问题:app好多地方是要用...
阅读(264) 评论(0)

[置顶] js监听手机端的touch滑动事件

实现原理:获取触摸首尾2点的坐标,Math.atan2获得2点连成的直线与x轴正方向的夹角,从而得到滑动的方向! 原理图: javascript判断手指在移动端上滑动的方向 <script src="http://libs.baidu.com/jquery/1....
阅读(209) 评论(0)

[置顶] textarea 高度自适应

提出问题:作为多行文本域功能来讲,textarea满足了我们大部分的需求。然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条,高度固执地岿然不动。所以,有时候,为了增加交互体验想让文本域高度自适应的时候,就会遇到麻烦。解决方法:利用div模拟textarea (contenteditable=”true” + word-...
阅读(100) 评论(0)

[置顶] 文本溢出省略号

最近开发过程中,经常遇到 文本溢出 的显示问题。现归纳一下几种方法。 早在2012年,所有浏览器都已经支持text-overflow:ellipsis; 一、单行文本溢出 ...
阅读(120) 评论(0)

[置顶] js 获取前一个月的日期

js 获取前一个月的日期,加详细注解 <script src="http://libs.baidu.co...
阅读(219) 评论(0)

[置顶] 刷新页面所有方法

手动刷新Javascript 刷新页面window.location.reload();使用window.open()弹出的弹出窗口,刷新父窗口非模态刷新父页面 :window.opener.location.reload()使用window.showDialog弹出的模式窗口模态刷新父页面   :window.dialogArguments.location.reload(); 先来看一个简单的例...
阅读(165) 评论(0)

[置顶] 秒懂Vuejs、Angular、React原理和前端发展历史

今天来说说 “前端发展历史和框架” 「前端程序发展的历史」「 不学自知,不问自晓,古今行事,未之有也 」我们都知道现在流行的框架:Vue.js、AngularJs、ReactJs,已经逐渐应用到各个项目和实际应用中,它们都是MVVM数据驱动框架系列的一种。在了解MVVM之前,我们先回顾一下前端发展的历史阶段,做到心中有数,才会更好理解。这段回顾历史,由于网上就可查不少资料,但都篇幅很长,晦涩难懂。所...
阅读(158) 评论(0)

[置顶] 一劳永逸的搞定 flex 布局

jQuery Ajax 实例 (.ajax、.ajax、.post、$.get)...
阅读(206) 评论(0)

table:设置边距,td内容过长用省略号代替

table:设置边距,td内容过长用省略号代替 1.table:设置边距 合并表格边框border-collapse: collapse,然后用th,td的padding设置内容和边框之间的空隙padding。 2.td内容过长用省略号代替 在table中必须设置style:table-layout: fixed;这条属性就是让table的内部布局固定大小。这个时候就用width属性调节td的长度。...
阅读(50) 评论(0)

解决IE浏览器下:td标签上有position: relative;与background-color属性时td边框消失

发句牢骚:少兼容IE能多活10年!!! 今天发现,在IE浏览器上出现一个现象(edge下也有):table下的td,加了背景色后td的边框消失,如下图 出现这种情况的原因是: td标签同时有position: relative;属性与背景色。 解决办法: 在td标签下加个div,把所有内容放在这个div中,给div加position: relative; (不让position: relative;...
阅读(54) 评论(0)

IOS5中的Safari不兼容Javascript中的Date问题

在做Mobile终端的Website开发中,我遇到一个很懊恼的问题。      在IOS5以上版本(不包含IOS5)中的Safari浏览器能正确解释出Javascript中的 new Date(‘2013-10-21’) 的日期对象。      但是在IOS5版本里面的Safari解释new Date(‘2013-10-21’) 就不正确,在IOS5的Safari中返回的永远是”Invalid Da...
阅读(24) 评论(0)

Date.parse()的兼容性问题

今天写代码发现?123viewValue = "2014-04-04 23:33:34" f = new Date(viewValue).getTime();   在谷歌上可以正确解析,而在ie与edge上缺解析不了,经查询是兼容性问题,只要把"-"替换为"/"就可以解决,如下 f = new Date(Date.parse(viewValue.replace(/-/g,"/"))).getTime...
阅读(74) 评论(0)

在div里输入一串数字/字母导致内容超出

图1. 图2. 图3. 总结:div在不考虑包含英文单词的情况下,全都加上属性:word-break:break-all;...
阅读(41) 评论(0)

利用swiper插件做点击相应slide块居中

css: .swiper-container .swiper-wrapper{ transition: all 1s; } ---------- js: var mySwiper = new Swiper ('.swiper-container', { slidesPerView : 3 }); var windowWidth = $(window).width...
阅读(82) 评论(0)

window配置hosts

先找到这个文件,再添加 IP 和 url。例如:即可通过host来打开合作同事的本地部署的项目,例如http://oa.teacher.jyjyapptest.com:3080/cms-teacher/index/localloginpage...
阅读(64) 评论(0)

js css+html实现简单的日历

web页面中很多地方都会用到日历显示,选择等,本文用html、css、javascript实现简单的日历。完成以后的效果与页面左侧的效果差不多,可以切换上个月、下个月。也可以根据实际情况进行扩展。  html html部分比较简单,声明一个div,具体的html用javascript生成。整体内容大概是这样的:  <meta charse...
阅读(111) 评论(0)

vue学习笔记04——vue2.0的变化

vue2.0: bower info vue http://vuejs.org/ 到了2.0以后,有哪些变化?1. 在每个组件模板,不在支持片段代码 组件中模板: 之前: 我是组件我是加粗标签 </templa...
阅读(47) 评论(0)

新手入门指导:Vue 2.0 的建议学习顺序——尤雨溪

起步 1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。 2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具,就只用最简单的 ,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础。 3. 照着官网上的示例,自己想一些类似的例子,模仿着实现来练手,加深理解。 4....
阅读(87) 评论(0)
280条 共28页1 2 3 4 5 ... 下一页 尾页
    声明

    本博客专注于前端技术!欢迎关注、评论、交流。

    联系方式:QQ:759498442
    个人资料
    • 访问:39212次
    • 积分:2694
    • 等级:
    • 排名:第14842名
    • 原创:212篇
    • 转载:65篇
    • 译文:3篇
    • 评论:3条
    文章分类
    最新评论