RequireJS 教程详解

什么是 RequireJS RequireJS 用于代码模块化,RequireJS 以一个相对于 baseUrl 的地址来加载所有的模块代码,使用 RequireJS 来开发,可以很好的避免变量污染全局环境。它的模块管理遵守AMD (Asynchronous Module Definition)规范,通过 define 方法来完成模块的定义以及模块代码的加载。 RequireJS 使用 引入 require.js <script src="js/require.js" defer async="true" data-main="js/main"&...

2017
04-02

移动端列表索引效果

移动端列表索引效果非常实用,比如:手机通讯录。你可以根据字母来查找对应的内容。下面这个例子我是参考了 MUI 里的列表索引效果,写出来的代码,代码的结构基本一样,但功能会少一些,去掉了搜索框搜索,只有单纯的字母索引,不过这也基本够用了。这个效果是基于 jQuery 库的,所以在用的时候就记得引入 jQuery 库。 为了版面美观我专门用横屏截了个图,正如你所看到的,样板还是挺好看的,那功能怎么样...

2017
03-22

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

仿 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

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 生成随机数方法

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

2016
07-27

document.querySelector()

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

2016
06-22

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

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

2016
06-21

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

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

2016
06-14