JavaScript + jQuery 常用方法整理

JavaScript 方法大全 元素操作 方法名 套路 注释 elementFromPoint() document.elementFromPoint(x,y) 通过点坐标来获取元素 classList element.classList element.classList 返回 一个包含所有 CLASS 类名的数组 属性: length,返回 class 类的个数; 方法: add(class1, class2, …) // 添加一个或多个 CLASS 类,若存在则不添加。 remove(class1, class2, …) // 删除一个或多...

2017
03-19

文字换行处理 word-wrap word-break white-space 用法及区别

作为前端的你,浏览器默的文字处理方式估计不用我再多说一句了。这里有两种情况我们需要知道的,但在实际中出现的机率不大,请看图: 前面的换行是因为我加了<br>标签,第一行我们不用管,只需关注第二行文字,第二行文字为什么会超出盒子? 我猜:在处理文字的时候浏览器会把它们看成一个整体(如:单词),并且不会拆分它们,一行又显示不完全,那怎么办呢?只能像上面那样处理了。于是就会出现了...

2017
03-08

移动端用滚动条属性实现左右滚动效果

前言 移动端左右滚动,不是我们常说的图片切换,只是实现了通过手指实现内容的左右滚动。现在很多app 都会有这样的效果。在线 Demo :http://yunkus.com/demo/mobile-use-scroll-bar-property-realize-horizontal-scroll/。注意:浏览器得切换到手机模式查看效果哦! 入门代码 HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

2017
03-06

仿 PC 端网易云音乐图片轮播效果

本文给大家分享一个仿 PC 端网易云音乐图片轮播效果,代码基于 jQuery 开发,虽然仿得不是十分像,但基本的效果还是做出来了,有需要的朋友可以看看。为了不浪费你的时间,如果是 JS 大神请略过本文,当作什么都没发生过。 效果演示:http://yunkus.com/demo/clone-netease-cloud-music-picture-carousel/ HTML代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="ut...

2017
03-02

JavaScript 变量

什么是变量 变量就是用来存放数据的容器。 变量命名法 变量命名是区分大小写的,并且不允许使用 JavaScript 的关键字和保留字做变量名。所有变量的命名法都是基于上面两条命名原则的。 匈牙利命名法 通过在变量名前面添加相应小写字母作为前缀标示变量的作用域或类型等。前缀后面是一个或多个单词的组合,单词描述了变量的用途,比如g表示全局变量,l表示局部变量。 <script> var gGoodWebsit...

2017
02-28

JavaScript 作用域和作用域链

作用域就是变量或者函数可访问的范围,它分为全局作用域和本地作用域。全局作用域:所有属于浏览器 window 对象的变量或者函数都归属于全局作用域。本地作用域:以函数为边界的区块,也可以理解成除了全局作用域,其它的都可以看作是局部作用域,而全局作用域和本地作用域就组成了一条作用域链。 我们可以看看下面这个例子来具体说明什么是全局作用域,什么是局部作用域: <script> // 定义全局变量...

2017
02-27

JavaScript 闭包(Closure)

闭包是什么?为什么要用到闭包?这些问题想必你已经听过不少了,特别是如果你面试前端开发的时候,这是你怎么也躲不过的话题。现在我们来看看闭包到底是什么东西。 什么是闭包? 闭包就是有权访问另一个函数作用域内数据资源(变量、函数)的函数。至于闭包有什么用,下面我们会说到。现在我们要了解闭包,我们得先来明白有关于闭包的一些名词。 相关名词 作用域:就是可访问数据资源(变量、函数)的...

2017
02-24

网站代码高亮插件 prettify.js

作为前端开发者,代码是你躲也躲不开的,下面就教你如何在自己的网站里给所有代码块添加高亮效果。而这篇文章要给你介绍的就是这样一个代码高亮插件 prettify.js 。 这个插件的作用方法也非常简单,你只需要引用相关文件,然后再启用它就可以。 <!-- 引入 CSS 文件 --> <link href="prettify.min.css" rel="stylesheet"> <!-- 引入 JS 文件 --> <script src="jquery.min.js">&l...

2017
02-20

网页天气预报 API 及用法整理

在网站中添加天气预报是常有的事,特别是一事提供日常资讯类的网站。下面就给大家整理出一些天气 API 以及他们的用法。 国家气象局天气预报接口 国家气象局为我们提供了两个可用的天气预报 API 接口: http://www.weather.com.cn/data/sk/101280701.html http://www.weather.com.cn/data/cityinfo/101280701.html 这两个接口返回的数据是不一样的,你可以根据自己需要进行选择。 http://www.weather.com...

2017
02-15

移动端 WEB APP 框架大全

现在如今要开发一个 APP 可以说是一件非常简单的事了,因为网上很在有很多这样的 APP 前端框架。下面我给大家整理下。 SUI Mobile 简介 SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。 轻量的UI库。SUI Mobile 非常轻量,核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K...

2017
02-14

WEB 前端开发插件整理

下拉框插件 网址 1.selecthttp://select2.github.io/ 2.双 selecthttp://loudev.com 3.selectboxhttp://aui.github.io/popupjs/doc/selectbox.html 文字工具插件 网址 1.简繁体转换https://github.com/BYVoid/OpenCC 2.拼音https://github.com/hotoo/pinyin 图表插件 网站网址 1.Highchartshttps://www.hcharts.cn/ 2.EChartshttp://echarts.baidu.com/ 3.Chart.jshttp://chartjs.org/ 4.Paperjsh...

2017
02-14

AngularJS ng-repeat 数据遍历详解

AngularJS 中的ng-repeat 估计你见得不少了。这个东东其实也非常的简单:遍历数据。下面我们变来看看这个ng-repeat 到底可以为我们做些什么。这是本文所写到的例子的在线 Demo:http://yunkus.com/demo/angularjs/ng-repeat/。 基本结构 HTML 结构 <!DOCTYPE html> <html ng-app="yk"> <head> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> ...

2017
01-25

AngularJS ng-style 添加样式详解

AngularJS 里的 ng-style 在平时的项目用也常有用到,一般都是用来通过条件判断然后显示指定的样式。本文我们变来看看这个 ng-style 怎么用,能做什么。下面我们先把基本的HTML 结构和数据准备好。在看代码之前你可以先来看看本文的在线 Demo :http://yunkus.com/demo/angularjs/ng-style/。 HTML 代码 <!DOCTYPE html> <html ng-app="yk"> <head> <meta http-equiv="Content-t...

2017
01-25

AngularJS checkbox 完美实现全选反选功能

刚站的全选反选相信你已经见过不少了,现在我们来看看在 AngularJS 中是如何实现的。下面会给出两个例子,一个是最简单的全选,反选;一个是接近完美的全选反选功能。 你可以先看看本文的 Demo 来预热下:http://yunkus.com/demo/angularjs/checkbox/ 下面直接贴出代码,HTML 代码有点多,但你也不用怕,因为来来去去也就那么几个东西了。现在你可以淡定的开始你的看码之旅了。 HTML代码 <!DOCTYPE html...

2017
01-21

AngularJS 与本地存储 LocalStorage 应用实例

这篇文章是一个关于AngularJS 与本地存储 LocalStorage 配合使用的一个应用实例,里面涉及到的东西也不少,但关键是它们都很简单,你可以不费吹灰之力就能把它人拿下,不信,你试试!废话不多说,直接上代码。你也可以先去品尝一下 AngularJS 与本地存储 LocalStorage 应用实例 Demo:http://yunkus.com/demo/angularjs/localstorage/。戴好安全带,网速有点快。 HTML代码 <!DOCTYPE html> <html...

2017
01-16

AngularJS 数据遍历 angular.foreach()

数据遍历对于前端来说,已经用得不少了,在AngularJS中也一样,我们很多时候需要这么做以达到操作数据的目的。下面我们就来看一个简单的例子。如果你觉得看代码不过瘾,你可以先去观摩下本例子的 Demo:http://yunkus.com/demo/angularjs/foreach/ 基本例子 HTML 代码 <!DOCTYPE html> <html ng-app="yk"> <head> <meta http-equiv="Content-type" content="text/html;chars...

2017
01-14

AngularJS 表单元素操作汇总

本文主要是把AngularJS 里有关表单元素操作的东西整理出来,比如操作input输入框、select下拉框。费话不多说,我们直接进主题。 如果你觉得下面的代码没意思,你也可以直接点这里感受Demo的威力:http://yunkus.com/demo/angularjs/form/ 基本代码结构 HTML代码 <!DOCTYPE html> <html ng-app="yk"> <head> <meta http-equiv="Content-type" content="text/html;charset=utf...

2017
01-14

text-overflow:ellipsis 文字超出省略号代替不起作用解决方法

前言 这个属性想必你平时也用了不少,特别在屏幕小得可怜的移动端。但有时候你会发现它怎么都没效果。思前想后也没发现自己做了什么对不起它事,但他就是对你不理不踩。 场景重现 无效场景一 现在我们来一个正常的例子 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="w...

2017
01-11

AngularJS filter 用法

Angular 里的filter(过滤器)方法可以让你筛选出符合条件的数据。对数据操作有一定要求的网站来说,filter 相当的体贴(如果你的网站是用filter来开发的话)。 Angular 内置了一些常用的过滤器:currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序),共九种。除了内置的过滤器外,你还可以自定义过...

2017
01-06

HTML5 Audio 对象(属性、方法、事件)

首先得先声明一下,这是一篇很无趣的文章,但是却很实用,因为本文把 HTML5 Audio 对象的属性,方法,事件整理出来。方便自己查阅,同时也希望本文能对你有些许帮助。 HTML5 Audio 对象属性 属性 描述 audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。 autoplay 设置或返回是否在就绪(加载完成)后随即播放音频。 buffered 返回表示音频已缓冲部分的 TimeRanges 对象。 control...

2017
01-01

基于HTML5 Audio 开发音乐播放器

因为HTML5 新增了一些很方便的特性,所以HTML5  在前端圈里越来越受到大家的关注,下面就给大家分享一个基本HTML5 audio 属性开发的一个简单的音乐播放器。 HTML5 audio 实例 HTML 代码 <audio id="myMusic" src="./yellow.mp3"></audio> <div class="music-player-box"> <div class="music-info"> <span id="current-time">00:00</span> ...

2016
12-31

前端开发中常用的 CSS 样式整理(经历之谈)

这是一些经验之谈,虽然本博客里的文章几乎都可以称得上是经验之谈,但本文章更接地气,更实用,你可以把它当做一个字典来用,因为下面所收集的css样式真的很常用。 CSS文件中引入CSS文件 @import url("base.css");  角标实现 div{ vertical-align:super } 小三角实现 .triangle{ display:block; width:0; height:0; border-width:0 8px 8px; border-style:solid; border-colo...

2016
12-29

AngularJS 操作JSON文件数据

前言 由于移动端的火爆,AngularJS 也自然而然的流行了起来,不可否认,虽然不能说现如今不能没有AngularJS,毕竟还有其它一些同样棒的MVVC框架,但有AngularJS会让我们的前端世界变得更加多姿多彩。AngularJS 的数据双向绑定可谓是其一大亮点。下面我们变来看一个AngularJS 操作JSON文件数据的例子。 写JSON文件数据(PHP) 不多说,直接上代码。 HTML代码 <!DOCTYPE html> <html ng-app=...

2016
11-20

CSS 水平垂直居中方法大全

前言 居中一个极其常见的需要,你应该绝不会陌生,但下面将要说的方法可能会有你不知道的。 下面的方法统一的HTML代码如下: <div class="demo-wrap"> <div class="demo-center"></div> </div> position+auto .demo-wrap{ width: 300px; height: 300px; background: #eee; position: relative } .demo-center{ width: 200px; height: 2...

2016
10-31

JavaScript 常用的排序方法

前言 Javascript 中排序可以说是非常常见的,不管是在平时的开发还是面试中排序都或多或少出现过。虽然说不算多,但是必不可少是肯定的。那么下面我们就来看看Javascript 中的排序方法都有哪些,在这里就不全列出,只把非常常用的分享给大家,其它的其实我觉得你知道有这个方法,并且知道在什么情况下可以用或者在什么情况下不能用就可以了。 原生sort sort() 方法用于对数组的元素进行排序,在原数组...

2016
10-28

JavaScript 实现数组去重的方法

前言 JavaScript 实现数组去重,一个在面试时常常会碰到的问题。如果你还像我那么不关注,不了解,不研究,那么你下次面试注定会失败,因为我可能就是败给了“去重”。下面我就把去重的方法都整理出来,下面的这些方法都来源于网络,但为了让你看得更清楚明了,我对方法中的代码稍稍作了下修改,但整体的思路还是不变的。 首先我们假定要对如下数组进行去重 var array=['true',true,false,'1',1,'','sss',"...

2016
10-22

CSS:清除浮动的方法(技巧)有哪些?

前言 浮动相信在平时的项目开发当中你一定用了不少,也遇到了不少。也知道有可以清除浮动的最常用的方法。那么下面我就给大家分享下我所知道的可清除浮动的方法。 清除浮动方法 float 法 也就是给父元素一个浮动,以达到清除浮动的效果。 /* 样式 */ .wrap-clear{border:1px solid #ccc;float: left;} .left-column{float: left;border:1px solid teal;} <div class="wrap-clear"> <div...

2016
10-19

立即执行函数(function ( ){……})( )

前言 我不相信你没有看这像标题里的函数书写方法,如果你说没有,那只能说明你才刚刚进入了 JavaScrpt 世界,那这种写法是什么意思,又有什么好处呢?下面我们就一步一步走进立即执行函数世界。 传统与简式 下面我们先来看一个极简单的传统与简式的例子,简单得一看就懂。 传统 我们最常见的函数执行方式就是,先定义一个函数,然后再调用它,如: /*执行函数*/ demo(); /*定义函数*/ function ...

2016
10-17

connect-flash 用法详解

前言 说到 connect-flash ,估计也有很多朋友像我一样被它虐了好一阵子,很多朋友可能都会遇到过这个问题:Express4.x 中的 connect-flash 为什么不起作用?或者 connect-flash 怎么用?诸如此类的问题,在这里我就给大家戳破 connect-flash 的神秘面纱! 官方解释 The flash is a special area of the session used for storing messages. Messages are written to the flash and cleared after being d...

2016
10-05

自己开发的第一个 gulp 插件-文件筛选

前言 自动化工具 gulp 的出现给我们这些从事前端的开发人员提供了很多便利,这让我们的开发效率得到了很大的提高。首先npm 官网上的gulp插件就非常地多,常用的插件基本都可以找到(图片压缩,CSS压缩,js压缩,文件重命名……),如果对这些基本的插件还不了解的可以看看这篇文章《前端自动化工具gulp 初识》。但在实践的项目中,很多时候需要也不是那么简单或者说单纯的现有插件已经满足不了...

2016
09-30