JavaScript 中面向对象的属性和方法

JavaScript 中面向对象的属性和方法比如 hasOwnProperty、constructor ,虽然不是很常用,但是了解它们对于学习 JavaScript 还是有帮助的。下面我们就来看看这些属性和方法 hasOwnProperty() hasOwnProperty:判断是否是对象自身下面的属性 var arr = []; arr.Site = "云库网"; Array.prototype.siteDomain = "yunkus.com"; console.log(arr.hasOwnProperty("site")); // true console.log(arr.hasOw...

2017
05-30

JavaScript 中的包装对象

请看下面这几行代码: var str = "yunkus"; str.length str.charAt(0); str.toUpperCase(); console.log( typeof str ); 相信像上面这样写,你肯定不会觉得奇怪,因为平时你也是这么使用的。但如果你仔细想一想,心里就会有一个疑惑:为什么基本类型也有属性和方法,这不是对象的专利吗?我们都知道 str 是一个字符串类型,也就是基本类型,为什么还会有属性和方法,它是通过什么方式实现的? 没错就是...

2017
05-28

JavaScript 面向对象编程详解

前言 JavaScript 面向对象编程估计你平时也看到了不少,只不过你可能不知道它就是 JavaScript 面向对象编程,这也就是为什么你会来到这里的原因。话不多说,我们马上开始面向对象之旅。 什么是面向对象编程 面向对象编程(Object Oriented Programming,OOP,面向对象程序设计)简单的说就是用对象的思想去编程,也就是创造一个对象,然后往这个对象身上添加若干属性和方法。 面向对象编程特点 1.封装...

2017
05-22

移动端一个像素问题解决方案

前言 移动端(手机等)已成为人们最常用的设备,对于我们这些前端开发人员来说,为了让用户用得爽,看得服务是不够的,因为你有时候还得听一个人的话,他就是传说中的设计师,比如:有时他会跟你讨论这样一个问题,为什么这条线看起来比我原型稿的粗一些,这也太粗了吧?诸如此类的话,让你连反驳的机会都没有,于是也只能暗暗的研究,找解决方法。 起因 这个原因真的不能怪你,但必需要你自己解决。生...

2017
05-21

CSS3 transform 你知多少?

transform 属于CSS3 的新属性。这个属性可以让我们实现很多以前只能通过 JavaScript 来实现的效果。比如元素的运动(缩放、旋转……)。所以这个新属性还是有必要用专门一篇文章来介绍它。毕竟它让我们通过了另一种方式让网页走向多姿多彩的世界。如果你觉得 transform 只能给你带来一点点便利,那么你就大错特错了,因为 transform 除了可以实现 2D 效果外,它还可以实现 3D 效果。现在让我们开...

2017
05-08

JavaScript 事件冒泡与事件捕获详解

在前端里,说到交互我们就不得不提提 JavaScript 中的事件,而事件又分为很多种,比如:点击事件。但这篇文章的主要内容不是分析有什么事件,而是在另一个角度来了解事件机制。正如标题所说的冒泡以及捕获。 一个事件被触发后,一般会有三个不同的阶段:捕获阶段、目标阶段和冒泡阶段。 捕获阶段:从文档的根节点开始流到目标节点。 目标阶段:当到达目标节点时,进入目标阶段。 冒泡阶段:冒泡正好跟捕获...

2017
04-30

移动端触摸(touch)事件

移动端时代已经到来,作为前端开发的我们没有理由也不应该坐井观天,而是勇敢地跳出心里的那口井,去拥抱蔚蓝的天空。该来的总会来,我们要做的就是接受未知的挑战。正如你所看到的,这是一篇关于移动端触摸事件的文章,也就是我们平时在手机中用得最多的动作:touch。现在让我们开始 touch touch touch 吧! Touch 事件 首先 touch 包含三类事件,它们分别是:touchstart、touchmove、touchend 。望文生...

2017
04-23

按需加载图片(图片懒加载)

前言 按需要加载图片,这是一个非常实用的功能,不仅可以提高网站的性能,还可以为你节省流量。对于用虚拟主机的朋友来说,如果你的网站是一个图片网站或者图片比较多的网站,那么图片懒加载功能真不能少。 原理 实现图片懒加载的原理也非常地简单,默认情况下不给图片 scr 属性赋值。当满足一定的条件时才把图片地址取出来赋值给 src 属性。一般地,这上为了让网站页面有更好的用户体验,我们都会预先...

2017
04-18

Visual Studio Code 让高效进行到底

准备 一直都是用 sublime text 作为开发工具,用久了自然而然会觉得生活无趣,于是决定试试微软的新产品  Visual Studio Code 。 下载地址:https://code.visualstudio.com/ 安装完后给我的第一感觉就是天边送来了一波难以抵抗的视觉盛宴。 在这里界面里你就可以看到一个非常有情怀的快速链接:安装键盘快捷方式(你可以安装包括但不限于 Vim、Sublime、Atom 的键盘快捷方式),所有这个 coding 工具还...

2017
04-03

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

移动端侧滑导航、侧滑菜单效果

手机端的侧滑导航、侧滑菜单效果极其地常见,这篇文章就是分享侧滑导航的制作过程。首先这是一个基于 jQuery 库的插件,其实不用 jQuery 库也是可以的,并且代码改起来也不能,这里就不作过多的讲解。 首先做这个效果的时候我们得分析下,要实现这个功能,我们需要什么技术。 所需技术 1.滑动,你可以JavaScript 实现 也可以用 CSS3 实现。这里我用CSS3 实现。 2.JavaScript 事件绑定解绑、事件禁用。 从...

2017
03-24

移动端列表索引效果

移动端列表索引效果非常实用,比如:手机通讯录。你可以根据字母来查找对应的内容。下面这个例子我是参考了 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

Linux 环境下 WordPress 发邮件的坎坷之旅

用上了阿里云的云服务器后,我的生活发生了翻天覆地的变化,天天被被折腾得体无完肤,吃不下,睡不着,辗转反侧,失眠多梦。从云服务器降生(13:25:23 2017/2/7)到 WEB 站点服务环境配置完成,到网站上线时文件权限设置及数据库文件上传的解决,再到后来的一些小事,如:WordPress 图片/文件上传问题,Linux 定时备份,还有这次记录的 WordPress 发邮件的坎坷之旅。整整花费了一个多月,其实在买这个云服...

2017
03-11

关于 WordPress 更新出错的那点事

事情发生在 13:35 2017/3/11 ,一个吃午饭的时间。打开wordpress 后台看到升级提示,对于我这种有微弱强迫症的人来说,升级是必需的。谁知道升级按钮一点,浏览器转了好久,然后无情地来了一个空白页,什么都看不见,心突然就碎满一地。 于是重新刷新了一遍页面,竟然提示我:您确定要这样做? 无耐,只能关掉页面重新再试一遍。美美地又来到了更新界面,点击更新按钮,被提示:“升级 WordPress 另一更新正...

2017
03-11

文字换行处理 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

Linux 环境实现自动备份站点文件和数据库

站点备份是每一个站长不得不面对的事,所以自动备份就成了必备技能。这篇文章就是为了解决这个问题的。Linux 环境下网站文件和数据库的自动备份。 配置 在这里以 /home/backup 目录为例子。我们把所有备份文件(站点文件,及数据库文件.sql)都放到这里来。切换到 /home/backup (如目录不存在可新建) cd /home/backup .sh 关键代码 在此目录下新建一个文件名为backup.sh(文件名可以自己随便取) vi ...

2017
03-05

Centos 7(Linux)文件增删改查操作

在 Linux 中文件的增删改查操作一个都不能少,这也是你经常用到的命令行,所以下面就给大家整理出来。让你在需要他的时候不用求爷爷,告奶奶,众里寻它千百度,因为一切尽在云库! 增(create) 添加目录,添加文件。有添加目录用 mkdir。添加文件用 touch。 创建目录 mkdir //在当前目录下创建名为yunkus.com的目录 mkdir yunkus.com //在指定目录下创建名为yunkus.com的目录(使用绝对路径),比...

2017
03-02

仿 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

wordpress 主题查看源代码时最开始空了几行的解决方法

很多时候我们会遇到这样的情况,当你做好一个主题后,你在浏览器里ctrl+u查看源代码时会看到源码的头几行是空白的,不管你是那种内容管理系统,都有可能会遇到这种情况。比如像下面这样: 到目前为止我知道的就只有两种可能会导致这种情况发生。这两种可能还得是在是 wordpress 内容管理系统才会出现的,如果是其它的内容管理系统估计其中一种可能就不会发生了。下面我们就来看看这两种可以分别是什么。 ...

2017
02-22

网站代码高亮插件 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

phpMyAdmin 登录出错 session_start(): open(SESSION_FILE, O_RDWR) failed: Permission denied

在配置 vsftpd 虚拟用户之前,是可以登录 phpMyAdmin 后台的。配置完 vsftpd 虚拟用户后就出现了如下图片所示的错误。 phpMyAdmin – Error Error during session start; please check your PHP and/or webserver log file and configure your PHP installation properly. Also ensure that cookies are enabled in your browser. session_start(): open(SESSION_FILE, O_RDWR) failed: Permission ...

2017
02-13

Linux 里 phpMyAdmin 无法上传大文件的解决方法

不管是网站的迁移还是其它操作,很多时候我们都需要对数据库进行备份还原,而在这个过程中,我们不得不去面对的问题就是大数据库文件的上传问题。下面就给大家分享下这个问题的解决方法。 这个问题大概的解决方法有两种,一种就是修改 php.ini,另一种方法就是修改 phpMyAdmin 的配置文件 config.inc.php。 修改 php.ini 修改 php.ini,这种方法改动的地方有点多,但是总的来看还是很简单的。因为只需要...

2017
02-13