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

AngularJS filter 用法

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

2017
01-06

AngularJS 操作JSON文件数据

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

2016
11-20

JavaScript 常用的排序方法

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

2016
10-28

JavaScript 实现数组去重的方法

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

2016
10-22

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

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

2016
10-17

纯 JavaScript 带小图导航的焦点图、图片切换效果

作为前端,我们以开发页面时,难免会用到一些切换效果,比如常用的焦点图(Banner),但在这里我要跟大家分享的是一个带小图导航的图片切换效果,一个不基于其它库(如:jQuery)的实现方法。我们还是先来看看这个效果的过截图吧,一个是垂直方向的,一个是水平方向的,我想就这两个基本的效果都可以解决你90%关于带小图导航的图片切换了问题了。 由于代码有点多,就不在这里贴出来了,你可以点击对应效果...

2016
08-29

常用的 JavaScript 函数封装

获取兄弟节点 所有兄弟节点(不含自己) // 获取所有兄弟节点(不包含自己) function yk_sibling( elem ) { var ar = []; var n = elem.parentNode.firstChild; for ( ; n; n = n.nextSibling ) { if ( n.nodeType === 1 && n !== elem) { ar.push( n ); } } return ar; } 所有节点(含自己) // 获取所有兄弟节点(包含自己) functio...

2016
08-11

纯 JavaScript 固定导航效果(fixed)

前言 现在不少网站页面本身内容都会比较多,从而导致页面过长,当用户浏览页面时,如果要用户反手动拉滚动条回到顶部找导航那多少会有点不方便,或者说这样用户体验不怎么好。其实他个问题有很多种解决方案,如:给页面添加一个返回顶部的按钮,这样用户就可以快速地返回到顶部。那很多时候我们就是导航固定在页面的顶部,毕竟这个对于提高用户体验还是有帮助的。下面我们就来看看如何通过纯 JavaScript ...

2016
08-04

纯 JavaScript 实现单条新闻滚动效果

前言 单条新闻滚动效果相信你已经见过不少了,这个效果在很多导航页面中或多或少都会出现。最近我们360导航中就看到了这个效果,可当我研究下这是怎么实现的时候,竟然有意外的收获,这个页面里用到的方法是我从来都没有想过的,不过我也不知道我的猜测对不对,光从页面中的 HTML 结构及运动效果我大概地想到了这是如何实现的,但到底不是不真的像我想的那样,那就不一定了。好了费话不多说,我们还是来...

2016
08-01

纯 JavaScript 实现 tab 切换效果

作为前端开发人员,一些效果你肯定会常常用到,在这里我给大家分享一个tab 切换效果,这个效果我已经封闭好了,如果你想用直接把源代码复制到你的项目中就可以了,下一步你只需要在需要用到这个效果的页面调用这个函数就可以了,不管页面中有多少个Tab 切换,你都可以轻而易举地完成。下面我就直接把源代码贴出来。 移动端 Tab 切换 JavaScript 代码 function tab(tabWrap,tabMenu,tabLink,tabContent,...

2016
07-30

纯 JavaScript 生成随机数方法

前言 用到随机数的地方还是挺多的,如有些网站为了吸引用户就会对网站文章的点赞数,评论数,阅读数等等作出一个可观的数字,让别人看起来觉得不点都不舒服,虽然把随机数用到这里有点不好,但这种现象确确实实存在于我们的生活中。随机数除了这个用途外,其实还有很多方面会用到它。下面我们变来了解下如何通过 JavaScript 生成一个随机数。 相关方法 在说随机数之前我们先来了解JavaScript 中的几个...

2016
07-27

document.querySelector()

前言 在平时的前端开发中,我们经常需要写一些小效果,比如TAB切换、图片轮播等等,不管是写什么 JavaScript 效果,你肯定离不开获取元素作为对象,然后对这个对象进行一系列的操作。而获取元素时,我们可以使用jQuery 库,也可以使用 JavaScript 为我们提供的原生的并且比较常用的方法getelementbyid()、getelementbyTagName()、getElementsByClassName()。但是本文要跟大家分享是另一种方法也是 JavaSc...

2016
06-22

纯 JavaScript 实现页面返回顶部效果

前言 对于一个内容有点多的页面来说,当你滚动页面底部浏览了一通后,突然想回到页面顶部,而如果页面没有类似于返回顶部功能的按钮,那么你也只能乖乖地滚动鼠标滚轮或者拉动浏览器滚动条来实现回到页面,很多时候你会觉得这个很费劲,特别是在手机端,一个屏幕本来就小得可怜的手机,如果内容非常,那么手动滚动回到页面顶部就如同噩梦一般。所以下面就给大家分享一个纯 JavaScript 实现的页面返回顶部...

2016
06-21

AngularJS

简单介绍 HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. 译:不可否认 HTML 是一个很棒的静态文档语言,但当我们用它来做 webAPP 应用时,它就...

2016
06-16

JavaScript call() 方法 和 apply() 方法详解

前言 最近在研究canvas时无意中遇到了call方法,于是乎一场不可避免的为期两天的厮杀就这样开始了。call() 听起来简单,但要是让你在别人的项目中遇到了,我估计你还是不怎么明白,别人为什么这样写。就拿我自己来说,一开始在网上查了了,看到一个解释是说这个方法是用来改变this 的指向的。如果单单看到这个,我想我早就应该明白了,call() 方法说真的其实很简单,但要把它真真正正的搞明白了,还是需...

2016
06-14

原生js开发,轻量级的移动端图片懒加载(lazyloadImg)插件

前言 下面给大家分享一个很好用,很经量的图片懒加载插件,重点是它是原生的javascript 不依赖任何 javascript 库。所以对于移动端来说,这真是一个棒极了的图片懒加载插件。我们先来看看官方激动人心的介绍: LazyloadImg介绍 LazyloadImg 轻量级的移动端图片懒加载插件 原生js开发,不依赖任何框架或库 支持将各种宽高不一致的图片,自动剪切成默认图片的宽高。比如说你的默认图片是一张正方形的图片...

2016
06-01