front_end_fan-CSDN博客

原创解决ios4下不支持position:fixed的问题

前言：参考1 参考2 参考3自以为解决了所有IOS系统关于position:fixed的所有问题，看来还是没有，特在此补充！！！一、注意：不要在 fixed 元素中使用 input / textarea 元素。在 android 手机下 fixed 表现要比 iOS 更好，软键盘弹出时，不会影响fixed元素定位；还是保留之前的态度，依然不推荐在 Android下使用 iS

2018-02-06 14:42:40 496

原创利用jquery mobiscroll插件选择日期、select、treeList的具体运用

mobiscroll是个很好用的用于移动端滑动选择的插件，可以用来选择日期，也可以用来选择简单选项或者一些复杂的树形结构的选项，简单分享下。　　依赖也比较简单，引入一个mobiscroll-2.13.2.full.min.js文件和一个mobiscroll-2.13.2.full.min.css文件即可。可直接下载mobiscroll-2.13.2 ，官网 http://docs.mobiscro

2018-01-22 16:51:09 1153

原创实用插件（十一）table数据导出插件——tableExport

先引入3个js文件：点我下载script src="Blob.js">script>script src="FileSaver.js">script>script src="tableExport.js">script>1.html:table class="table table-striped table-hover" id="table2" style="display:

2018-01-16 16:46:47 4139

原创实用插件（十）ajax图片上传插件——fileupload

前言刚开始使用的是ajaxFileUpload插件，但是按照其他人的博文所说，直接使用data来传入参数，会报错跨域。如图：已经尝试网上各种方法，然而都是徒劳，比如修改域名，修改jsonp，修改ajaxFileUpload.js的代码…… 表示很绝望！！！希望看见本博文的大神多多指教，感谢！ajaxFileUpload实现原理：它是动态的去创建一个iframe和一个form，

2018-01-15 10:53:37 3570

原创实用插件（九）手机日历插件——Mobiscroll

1、点我下载2、使用方法： <link href="../Mobiscroll/mobiscroll.android-ics-2.5.2.css" rel="stylesheet"><link href="../Mobiscroll/mobiscroll.animation-2.5.2.css" rel="stylesheet"><link href="../M

2017-12-28 16:22:57 1577

原创实用插件（八）20行代码轻松搞定分页——kkpager

前言说是轻松搞定，但是今天也是花了半天的时间，其实也是我在网上找了将近10个分页插件，都不满意。（之前项目里自己写的分页插件有瑕疵，也没有封装，所以就想着去网上找个封装好的）。结果，要么不方便使用ajax，要么就是功能不够齐全，要么就是各种bug。“山重水复疑无路，柳暗花明又一村”，最终经过寻找+对比+研究，才发现一个简单实用的分页插件kkpager，分享在此！1、点我下载2、使用方法：<!--引入

2017-12-18 15:46:23 1991 1

原创史上最完美最简单实用的解决文本溢出方法（tooltip/popover）

直接上代码：(Talk is cheap. Show me the code)<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="bootstrap.min.css"/> <style> .

2017-12-15 16:31:09 4934

原创 ajax相关总结

1.所有公共的变量和方法统一放在一个js文件，目的是方便修改。比如： i.公共路径：比如：Ajax请求路径的前缀… ii.公共变量：比如：token、pageNumber、pageSize… iii.公共方法：比如：时间格式转换的方法，存/读cookie的方法… 2.每个页面都不要出现同一个接口重复的ajax调用，只要同一个接口重复使用都需要用function来声明，使用的地方直接调用，

2017-12-14 17:22:41 298

原创读《ECMAScript 6 入门 —— 阮一峰》（下）

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

2017-09-18 10:29:31 1408

原创读《ECMAScript 6 入门 —— 阮一峰》（上）

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

2017-09-18 10:13:19 1935

原创不要过度依赖JQuery（三）

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

2017-09-15 11:22:21 418

原创不要过度依赖JQuery（二）

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

2017-09-15 11:11:10 327

原创不要过度依赖JQuery（一）

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

2017-09-15 11:03:02 481

转载统一回复《怎么学JavaScript？》

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

2017-09-12 13:55:18 782

原创 table表格合并第一列中相同的内容（优化+注解）

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

2017-09-06 17:42:17 2174 1

原创 table表格合并第一列中相同的内容！

分享一个简单实用的jquery小插件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .a{ transition:.5s; transform: rotate(-45de

2017-09-06 11:06:35 6084 6

原创如何自己开发一款js或者jquery插件

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

2017-09-05 09:28:14 4055 1

原创实用插件（七）视频播放插件——ckplayer

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

2017-09-04 15:41:40 13043

原创实用插件（六）手机日历插件——LCalendar

1、点我下载2、使用方法：  <link rel="stylesheet" type="text/css" href="../css/LCalendar.css" />  <script src="../js/LCalendar.js" type="text/javascript" charset="ut

2017-09-01 10:46:47 9202 1

转载我对知乎前端相关问题的十问十答

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

2017-08-24 15:56:12 1788

原创实用插件（五）弹出操作提示框artdialog

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

2017-08-17 15:11:55 1125

原创实用插件（四）图片上传前预览插件

注：该插件app项目，pc项目都可使用1、由于插件为轻量级，直接附上源码和demo<!doctype html><html><head><meta charset="utf-8"><title>jQuery图片上传前预览</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><styl

2017-08-04 15:09:36 2297

原创实用插件（三）通讯录插件

1、下载：点我下载 2、使用：引入1个css文件，2个js文件<link href="css/style.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="js/zepto.js"></script><script type="text/javascript" src="js/city.js" s

2017-08-04 14:50:07 2519

原创实用插件（二）图片全屏预览插件——PhotoSwipe

注：该插件app项目，pc项目都可使用1、下载：先下载插件压缩包免费下载2、使用：步骤：1、html结构： <ul id="gallery" class="upload-pics gallery"> <li><a href="../../images/p1.png"> <img src="../../images/p1.png" /></a></li

2017-08-04 14:42:01 2260

原创实用插件（一）日历插件——My97DatePicker

1、下载：My97DatePicker组件包免费下载 2、使用：步骤 1. 把My97DatePicker文件夹拷贝到项目根目录下 2. body前面引入一个css文件：<link rel="stylesheet" href="skin/default/datepicker.css"/>body前面引入后面一个js文件：<script type="text/javascript"

2017-08-04 14:23:05 5984 1

原创文本溢出省略号

最近开发过程中，经常遇到文本溢出的显示问题。现归纳一下几种方法。早在2012年，所有浏览器都已经支持text-overflow:ellipsis; 一、单行文本溢出 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title>

2017-07-19 11:30:04 543

转载秒懂Vuejs、Angular、React原理和前端发展历史

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

2017-07-17 11:05:25 663

原创 vue-cli webpack全局引入jquery、elment-ui

一、引入jquery1.首先在package.json里加入:dependencies:{ "jquery" : "^2.2.3"}然后 nmp install（或者使用命令行：npm install jquery –save-dev） 2.在webpack.base.conf.js里加入:var webpack = require("webpack")...//在mod...

2018-06-26 10:31:53 739

原创学习webpack

博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目;流程webpack安装Step 1: 首先安装Node.js, 可以去Node.js官网下载.Step2: 在Gi...

2018-06-21 16:47:14 552

原创学习git和github

一、git命令行使用（目标：深入理解git和github，使用Git Bash工具和git命令行语句实现本地新建仓库-增删改还原更新整合）[学习网址](https://www.liaoxuefeng.com)带着几个问题：1.搞清楚几个概念：git、github；分布式版本管理、集中式版本管理；仓库（repository）、分支(branch)、标签（tag）？2.分布式相比集中式的优势有...

2018-06-20 14:25:02 531

转载原生js封装ajax

hey,guys!今天我们一起讨论下ajax吧！此文只适合有一定ajax基础，但还是模糊状态的同志，当然高手也可以略过~~~一、概念Ajax(Asynchronous Javascript + XML（异步JavaScript和XML ）) 二、效果实现无刷新效果，向后台异步的取数据（不是只有AJAX才能实现这样的效果的哦...

2018-06-15 17:23:33 342

转载 Promise 的基础用法

Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说...

2018-06-14 17:51:21 503

原创 CommonJS、AMD/CMD、ES6 Modules 以及 webpack 原理浅析

CommonJSNode.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用module.exports定义当前模块对外输出的接口，用require加载模块。// 定义模块 area.jsfunction area(radius) { return Math.PI * rad...

2018-06-14 16:10:34 1500

转载前端重构方案了解一下

前言前端技术发展很快，很多项目面临前端部分重构，很开心可以让我进行这次项目前端的重构方案编写，在思考的同时参考了网上很多资料，希望本篇重构方案有一定的完整性，可以带给大家一些在面临重构时有用的东西，同时希望路过的大牛小牛不领赐教，能给我略微指点下重构相关的点，在下感激不尽~...

2018-06-08 16:23:15 1657

原创手机端页面在项目中遇到的一些问题及解决办法

1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题?首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案是：(1) 看是否能把body和html的height: 100%去除掉。(2) 在滚动的容器中增加：-webkit-overflow-scrolli...

2018-06-07 14:19:19 2251

原创最简单的JavaScript模板引擎

 在小公司待久了感觉自己的知识面很小，最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿，完全没有概念，网上一搜这是08年开始流行起来的。。。本来以为这是很高深的知识，后来在网上看到jQuery作者John Resig，研究了一下，算是明白了最简单的javaScript模版引擎...

2018-02-24 16:46:29 705

原创 arttemplate入门

arttemplate是JavaScript模板引擎，使用时需引入其对应的js文件：arttemplate.js 简洁语法版arttemplate-native.js 原生语法版arttemplate有两种语法格式（简洁语法和原生语法），本文记录简介语法的使用。...

2018-02-24 16:26:20 1015

原创在把table表格中的数据导出到Excel的时候，以科学计数法显示位数多的数字时怎么解决？（已解决）

网上查了各种方法，貌似不是存在bug，就是无效。自己想出了一个，史上最简单方法：tbodyHtml += '<td><span> </span>'+v.overComment+'</td>';

2018-01-30 15:28:45 2885 2

原创 IE10+删除input后面的叉

从IE 10开始，type=”text” 的 input 在用户输入内容后，会在后面自动产生一个小叉（X），方便用户点击清除已经输入的文本对于type=”password”的 input 则会在右方显示一个小眼睛的图标，占击这个图标可以显示已经输入的内容。大多数情况下，为了和其他浏览器呈现相同的效果，需要将input文本输入框右方的X给去掉，将密码输入框右边的小眼睛也给去掉。只要使用以

2018-01-26 15:22:00 1917