Tag: javascript

  什么是闭包？ 什么是闭包？闭包是什么？ 先来看一段代码： function a(){ var n = 0; function inc() { n++; console.log(n); } inc(); inc();… Read More

代码精炼是每个有追求的程序所向往的，本文总结了19个JavaScript的简写技术，其中包括三元操作符、短路求值简写方式、声明变量简写方法等等，希望对你有帮助。 1.三元操作符当想写if…else语句时，使用三元操作符来代替。 简写： 也可以嵌套if语句： 2.短路求值简写方式当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句。 或者可以使用短路求值方法： 3.声明变量简写方法 简写 4.if存在条件简写方法 简写： 只有likeJavaScript是真值时，二者语句才相等 如果判断值不是真值，则可以这样： 简写 5.JavaScript循环简写方法 简写 也可以使用Array.forEach： 6.短路评价给一个变量分配的值是通过判断其值是否为null或undefined，则可以： 简写… Read More

前言 密码，如果设置的太简单，很容易就被攻破，所以很多网站将密码设置的要求设置的挺严格，一般是字母、数字、字符3选2，区分大小写。对于设置得太简单的密码，予以错误提示。或者予以密码等级（低中高）显示，让用户设置高级密码。那如何利用JS实现呢？ 代码 链接：https://gist.github.com/xuanfeng/a44f20cb4569d5b4cd5e function passwordLevel(password) { var Modes = 0; for (i = 0; i < password.length;… Read More

前言 网站运营久了之后，无法避免会出现图片404的情况，原因可能是图片文件本来就不存在或目前不存在。常见的解决方案是将404图片隐藏或者是替换为默认的图片。 img标签事件属性 img标签可使用的时间属性有： onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop,… Read More

DEMO: http://sources.ikeepstudying.com/jsdata/ 摘要：本文主要讲了javascript中的基本数据类型，以及值类型和引用类型的区别与使用 一、基本数据类型 在javascript中申明变量使用的关键字都是var，这点与其他的编程语言不尽相同，但是javascript亦含有五种基本的数据类型（也可以 说是简单数据类型），它们分别是：Undefined，Null，Boolean，Number和String。还含有一种复杂数据类型—Object。 (1)、”undefined”——未申明，或者变量的值即为undefined或者未初始化； (2)、”boolean” ——如果这变量的值是布尔类型； (3)、”string” ——值是字符串类型； (4)、”number” ——值是数字类型； (5)、”object” ——对象或者值为null； typeof这个关键字是一定要说的，因为javascript是松散类型的，在变量申明时并没有使用与之类型相对应的关键字，如果在代码中想要获知某个变量的基本数据量，就可以使用typeof。这里要注意的是typeof返回的是字符串类型。 (5)、”function” ——函数。… Read More

1.遍历数组法 最简单的去重方法， 实现思路：新建一新数组，遍历传入数组，值不在新数组就加入该新数组中；注意点：判断值是否在数组的方法“indexOf”是ECMAScript5 方法，IE8以下不支持，需多写一些兼容低版本浏览器代码，源码如下： // 最简单数组去重法 function unique1(array){ var n = ; //一个新的临时数组 //遍历当前数组 for(var i = 0;… Read More

本文主要阐述使用js实现思维导图的关键技术点，如果还不知道什么是思维导图的同学，请自行度娘。以下是demo和源码的传送门： demo：http://sources.ikeepstudying.com/mindmaptree-master/ 源码：http://github.com/RockyRen/mindmaptree/tree/master 下载：mindmaptree-master 在源码中我使用了svg绘制思维导图。与canvas相比，svg将图像当成对象，我们可将思维导图中节点和线等图形表现为对象，而且svg更适合用于动态交互的应用 下面介绍几个关键技术点： 子节点位置的重绘 一个基本的思维导图工具应该拥有增加节点和删除节点的功能。在某个节点上增删节点时，为了使得所有子节点的高度相对于该节点垂直居中，都会重新渲染子节点的垂直位置。 如图1所示，首先求得父节点的中心点F的坐标为(hfx, hfy)，设父节点与子节点的水平距离为interval，父节点的宽为parentWidth。作水平线段FC，C点的横坐标即为子节点的横坐标childX。如下图所示： 为了让子节点间垂直隔开，每一个子节点上下都有补白，所以一个子节点所占的区域高度为该子节点的节点高度加上两个补白高度。迭代所有子节点，求取所有子节 点的区域高度areaHeight，然后在线段FC的C点上作一条长度为areaHeight的垂直平分线AB，所有子节点的垂直区域都在垂直平分线AB 内，这样可以保证所有子节点的高度相对于该节点垂直居中。如下图所示：   我们需要求得每一个子节点的垂直坐标childY。首先求得A点的垂直坐标startY = hfy –… Read More

为什么先讲数组 数据结构可以简单的被分为线性结构和非线性结构。 线性结构大致包括： 数组（连续存储）； 链表（离散存储）； 栈（线性结构常见应用，由链表或数组增删和改进功能实现）； 队列（线性结构常见应用，由链表或数组增删和改进功能实现）； 非线性结构大致包括： 树； 图； 其中，数组是应用最广泛的数据存储结构。它被植入到大部分编程语言中。由于数组十分容易懂，所以它被用来作为介绍数据结构的起点非常合适。 JavaScript数组基础知识 在ECMAScript中数组是非常常用的引用类型了。ECMAScript所定义的数组和其他语言中的数组有着很大的区别。那么首先要说的就是数组在js中是一种特殊的对象。 特点： 数组是一组数据的线性集合； js数组更加类似java中的容器。长度可变，元素类型也可以不同； 数组的长度可以随时修改（length属性）； 常用操作方法：… Read More

为什么要使用数据结构和算法（程序=数据结构+算法）         数据结构是对在计算机内存中（有时在磁盘中）的数据的一种安排。包括数组、链表、栈、二叉树、哈希表等。        算法是对这些结构中的数据进行各种处理。比如，查找一条特殊的数据项或对数据进行排序。 举一个简单的索引卡的存储问题，每张卡片上写有某人的姓名、电话、住址等信息，可以想象成一本地址薄，那么当我们想要用计算机来处理的时候，问题来了： 如何在计算机内存中安放数据？ 所用算法适用于100张卡片，很好，那1000000张呢？ 所用算法能够快速插入和删除新的卡片吗？ 能够快速查找某一张卡片吗？ 如何将卡片按照字母进行排序呢？ 事实上，大多数程序比地址簿要复杂得多，想象一下航班预订系统的数据库，存储了旅客和航班的各种信息，需要许多数据结构组成。如果您很清楚这些问题，那么请您对我的博文给出宝贵意见，如果不清楚，那么在我的博文中可以给您一些适当的指引。 随着NodeJs技术的发展，可以在服务器端使用javascript，控制MongoDB进行持久化数据存储。这就需要一些复杂的数据结构和算法来提高程序的性能，仅仅使用数组和for循环来处理数据是远远不够的。 数据结构概述 数据结构 优点 缺点 数组 插入快，如果知道下标，可以非常快的存取 查找慢，删除慢，大小固定… Read More

提示框弹窗类 Facebox Facebox 是一个基于jQuery，Facebook-style的lightbox。能够展示示images，divs或者整个远程页面 。 Facebox SimpleModal SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。 SimpleModal jTip jTip一个利用jQuery开发的提示工具。jTip通过HttpXMLRequest获取内容。用法简单，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以。 jTip BetterTip 一个可以自定义Tooltip的jQuery插件。基于jTip，但比它来得更加灵活。 BetterTip clueTip clueTip这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时，它的内容将变成clueTip的标题。clueTip中显示的内容可以通过Ajax获取，也可以从当前页面中的元素中获取。 clueTip… Read More