关闭

[置顶] 重温Flex布局

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[置顶] app项目经验总结

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

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

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

[置顶] textarea 高度自适应

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

[置顶] 文本溢出省略号

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

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

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

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

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

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

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

js基础-canvas

Canvas二、canvasHTML5元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。标签只是图形容器,您必须使用脚本来绘制图形。要使用Canvas API,首先需要新建一个网页元素 您的浏览器不支持canvas! ...
阅读(11) 评论(0)

js基础-富文本编辑器

富文本编辑器1、富文本编辑器简介富文本编辑(WYSIWYG(What You See Is What You GET,所见即所得))。最先的富文本编辑,就是在页面中嵌入一个包含空HTML页面的iframe,然后通过设置designMode属性,这个空白的HTML页面就可以编辑了,编辑对象则是该页面元素的HTML代码。 designMode属性有两个可能的值:“off”和“on”,默认为...
阅读(43) 评论(0)

js基础-表单

表单Web表单是开发人员与用户交互的重要控件。1、form1.1 form独有的属性和方法在HTML中,表单是由来表示的,而在JavaScript中,表单对应的是HTMLFormElement类型。HTMLFormElement继承了HTMLElement,因此它跟其他HTML元素具有相同的默认属性。也有自己独有的属性和方法:acceptCharset:服务器能够处理的字符集...
阅读(34) 评论(0)

js基础-AJAX、file、http进度、同源策略

AJAX超文本传输协议(HyperText Transfer Protocol,HTTP)是用于从WWW服务器传输超文本到本地浏览器的传输协议(transport)。它可以使浏览器更加高效,使网络传输减少。Ajax(Asynchronous JavaScript and XML)描述了一种主要使用脚本操纵HTTP的Web应用架构。Ajax的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换,不...
阅读(30) 评论(0)

js基础-引用类型-console对象 ★☆

console对象console对象是JavaScript的原生对象,可以将信息输出在控制台。1、打开控制台不同系统平台打开浏览器的控制台可能有些不一样,下面以chrome浏览器为例,可以使用下列方式打开:按F12鼠标右键里选择“检查”在右上角的菜单中点击“更多工具/开发者工具”打开控制台以后,你可以看到下列不同的面板:Elements:查看网页的HTML源码和CSS代码。 Resources:查...
阅读(15) 评论(0)

js基础-单体内置对象(Global、Math)

单体内置对象(Global、Math)内置对象也就是我们不必显示地区实例化,直接就可以使用了,因为它们已经实例化了。1、Global 对象Global对象是一个全局对象。所有在全局作用域中定义的属性和函数,都是Global对象的属性,比如:isNaN()、isFinite()、parseInt()以及parseFloat(),实际上都是Global对象的方法,它还包括了其他一些方法:1.1 Glob...
阅读(15) 评论(0)

js基础-基本包装类型(Boolean、Number、String )★☆

基本包装类型(Boolean、Number、String)1、基本包装类型简介ECMAScript提供了三个基本包装类型:Boolean、Number、String。实际上,每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能过调用一些方法来操作这些数据。执行步骤如下:创建S提让那个类型的一个实例在实例上调用指定的方法销毁这个实例var s1 = new String...
阅读(16) 评论(0)

js基础-引用类型-Date对象 ★☆

Date类型在JavaScript中,Date类型是用来保存日期的,它能精确到1970年1月1日之前或之后的285616年。1、创建日期对象要创建一个日期对象,使用new操作符和Date构造函数即可:var now = new Date();//Thu Sep 21 2017 08:41:51 GMT+0800 (中国标准时间) 在调用Date构造函数而不传递参数时,新创建的对象自动获得当前日期和...
阅读(20) 评论(0)

js基础-引用类型-Array对象 ★★★☆

Array类型ECMAScript数组的每一项可以保存任何类型的数据,也就是说,而且数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。var colors = [1, 'tg', {}]; 在上面的例子中,数组中保存了数值、字符串和对象。1、初始化数组实例创建数组的基本方式有多种:(1)使用Array构造函数当传递一个参数时,如果传递的参数是数值,则会按照该数值创建包含给定项...
阅读(21) 评论(0)

js基础-引用类型-Object对象 ★★★☆

Object类型1. 实例化对象所有其他对象都继承Object。创建object实例的方式有两种:第一个种是使用new操作符后跟Object构造函数var person = new Object() 注意:O是大写第二种是使用对象字面量:var person = { name: 'tg' }; 访问对象属性使用的是点表示法,也可以用方括号表示法来访问。var person = {...
阅读(22) 评论(0)
246条 共25页1 2 3 4 5 ... 下一页 尾页
    声明

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

    联系方式:QQ:759498442
    个人资料
    • 访问:18886次
    • 积分:2117
    • 等级:
    • 排名:第19863名
    • 原创:159篇
    • 转载:64篇
    • 译文:3篇
    • 评论:2条
    文章分类
    最新评论