首页

记录点滴,修炼自己。
0

JavaScript双向选择器的实现

前言  双向选择器是网站中经常使用的一种组件,适合于要求用户输入固定的一个或多个标签内容的场景,这种格式比普通input输入框的交互方式更加友好,而且可以防止因用户输入的随意性而导致的其他多余工作(比如表单验证)甚至错误。 效果  在说具体细节之前,可以先看一下效果,下图中就实现了一个最基本的双向选择器。 注意事项1.以上组件的编写没有基于原生的CSS,而是引入了AmazeUI框架,利用了

0

CSS[内容盒模型]和[边框盒模型]的对比分析

盒模型概述  盒模型是CSS中的一个重要概念和组成部分,直接决定了页面的基本布局。下图是一张网上常见的关于CSS盒模型的立体图,很好的解释了盒模型中的基本概念。  不同种类和版本的浏览器对于width, height, padding, border, margin的解析有所不同,导致同样的CSS代码在不同浏览器上有不相同的效果。本文对此进行小结。  所有HTML元素可以看作盒子,在CSS中,”

0

Session相关总结

前言  本篇简单总结session的概念,作用,应用,实现案例等要点,关于大段的介绍,就不再重复了,网上有很多可以参考。而且session相关是一个很大的话题,这里只是简单小结,主要包括以下几个大的方面:  1.直观感受  2.session相关介绍  3.session安全性问题  4.session的不同实现方式  5.cookie与session的对比分析  6.session在PHP开发

0

胖URL(fat url)

前言  HTTP本身是匿名/无状态的请求/响应协议,为了能够进行客户端识别,发展出了很多种解决方案,胖URL就是其中一种用户识别机制,它是一种在URL中嵌入识别信息的技术。 定义  服务端可以通过为每个用户生成特定版本的URL来追踪用户身份。通常的做法是在URL开始或结束的地方增加一些状态信息。用户浏览站点时,web服务器会动态生成一些超链,继续维护URL中的状态信息。这种改动后的URL就被称

0

《JavaScript权威指南》中文版P204纠错

  中文版《JavaScript权威指南》第六版P204中,讲到使用构造函数定义类时,提到“Range()构造函数是通过new关键字调用的(在示例代码的末尾)”,如下图:   找了半天没看出来示例代码中到底是怎么通过new关键字调用的,于是,查看了一下原书第六版,如下图:   好吧,原来中文版这里出现了一点小错误,直接将前一页P203示例代码“用原型对象定义方法”中的代码粘贴过来了,怪不得

0

JavaScript的null和undefined对比总结

前言  说到这两个类型,首先应该从整体上明确一下JavaScript中提供的数据类型。  JavaScript中的数据类型分为两类:原始类型和对象类型。  其中,原始类型又可以细分为如下5类:数字,字符串,布尔值,null,undefined。  null和undefined都表示一种“空缺”的意思,但具体还有很多细节不同。 null类型检测对null使用typeof检测,可得: 说明  由以

0

《JavaScript 权威指南》P147的一处分析

情景  在《JavaScript权威指南 第六版 中文版》P147,讲到稀疏数组时,书中给出如下的分析和例子:  读完后感觉第一个红框和第二个红框中的表述不是很清楚,有些矛盾。于是在chrome浏览器的控制台进行测试,结果如下: 第一个红框对应结果 第二个红框对应结果 第三个红框对应结果也就是说实测结果与书中第一个红框中的蓝色小框表述相反:0 in a1输出的值是false。 分析  以下

0

CSS相关单位(pt,px,PPI,DPI,em,rem)

单位介绍 pt:磅(point),绝对单位,印刷行业常用,等于1/72英寸(即0.03526厘米,1英寸 = 2.54厘米)。 px:像素(pixel),相对长度单位,相对于显示器屏幕分辨率而言。 PPI:像素密度(Pixel Per Inch),每英寸所拥有的像素数量。因此PPI数值越高,即代表显示屏能够以越高的密度显示图像。当然,显示的密度越高,拟真度就越高。 DPI:点数密度(Dot

0

通用的HTML文档DOM树遍历函数

前言  本篇记录《JavaScript权威指南》中提供的通用性的DOM结构遍历函数,这是十分常用的场景,可以获取除了Text节点以外的全部文档节点。 实现parent函数 返回元素e的第n层祖先元素,如果不存在则返回null 如果n===0;返回e本身;n===1,返回父节点,以此类推123456function parent(e, n) { if (n === undefin

0

JavaScript的闭包案例---2

前言  接续之前的一篇JavaScript的闭包案例—1,加深对《JavaScript权威指南》P187的理解。 描述  使用闭包,可以实现共享私有状态,实现私有存取器属性。本质上就是在同一个作用域链上定义了两个或多个闭包,来共享同样的私有变量。这是十分重要的一种应用,但是要十分小心因为这种做法将那些本不希望共享的变量共享给了其他闭包,这会造成严重的错误并让我们不解。  假设有这样的需求:需要

0

setTimeout与setInterval的对比与互相实现

案例 setTimeout和setInterval对比 另外,根据网上一张关于此问题比较流行的图:1234567function click() { // code block1... setInterval(function() { // process ... }, 200); // code block2 } setInterval可能会存在的问题

0

JavaScript的闭包案例---1

背景  闭包是JavaScript中的一个重要概念。  JavaScript采用词法作用域,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的。函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内,这就是闭包的特性。

0

使用JavaScript实现数组去重的4种方法及性能比较

方法一思路:创建一个新的结果数组,遍历原数组,利用数组indexOf()方法,判断原数组当前值是否在结果数组中存在,如果存在则跳过,否则压入结果数组。12345678910 function removeDuplicatedItem(ar) { var ret = []; for (var i = 0, j = ar.length; i < j; i++)

0

jQuery的ajax()方法详细分析

前言  ajax,即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种异步加载数据的Web交互方法,在网页开发中使用十分普遍,实现局部刷新以达到更好的交互效果是ajax的典型应用。 核心  $.ajax(即jQuery.ajax),是jQuery库进行的一次封装。其核心实现是利用了JavaScript中的XMLHttpRequest对

0

使用JavaScript实现非法输入字符实时过滤

前言  表单提交是一项常见操作,对于输入内容的合法性必须在前后端都做验证才能保证可靠性。表单验证有很重要的意义,除了防止注入攻击之类的安全问题外,有时如果不能正确的进行验证,可能会使合法的页面渲染受到影响。比如在实际开发中遇到的一种问题,jsp页面使用JSTL库自定义标签渲染后台传来的数据时,需要将这组数据作为参数传入相应点击事件的回调函数,如果参数中一旦也有双引号”,就会导致解析错误—oncl

0

使用JavaScript实现金额格式化转换

前言  实现金额数字的每三位打”,”,便于识别金额大小。 实现12345678910111213//s: 希望转换的金额数字;n:希望保留的小数位数function formatMoney(s, n) { n = n > 0 && n <= 20 ? n : 2; //正则/[^\d\.-]/g表示去除传入字符串中非数字,非小数点,非负号以

0

使用JavaScript实现短信重发倒计时

主要html结构以下html片段表示了重发倒计时组件的文档结构,依赖Amaze UI样式框架。 onclick=”btnSendMsgAgain();return false;”中的return false作用:验证码是位于form表单中的,点击该按钮的作用是发送验证码,而不是提交表单,return false为了彻底阻止元素的默认事件。 123<div class="am-u-sm-

0

HTML转义字符

背景  HTML转义字符又称字符实体。一些字符在HTML中有特殊的含义,比如小于号”<”已经用于定义HTML标签的开始。而这些标签在渲染出的html页面是不会显示出来的,如果我们希望浏览器正确地显示这些字符,我们必须在HTML源码中插入字符实体。  字符实体有三部分,而且有两种写法: