随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始流行起来。javascript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，近一年来在开源社区中更是百花齐放，在 Twitter、淘宝网、新浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影。 本文将用最简单的示例代码描述现有的 javascr...
pushStack是jQuery内核中一个非常重要的函数，它是如此重要，以至于许多jQuery内部函数中都频繁用到它。平常情况下，虽然很少用到它, 但是掌握这个函数，不仅有利于理解jQuery的运行原理，还方便我们做更加高级的jQuery操作。 顾名思义，pushStack是入栈, 栈作为一种数据结构，是一种只能在一端进行插入和删除操作的特殊线性表。数据入栈时，类似与我们进电梯，后进而先出, 如下图:jQuery中的栈其实并不是真正的栈，而是给jQuery对...
jQuery中，noconflict是用来防止变量冲突，用来释放变量控制权的一个重要方法。我们知道，jQuery中对外提供有两个全局变量，$和jQuery，虽然jQuery只产生了两个全局变量，极少情况下才会出现冲突，但是如果网页中如果包涵较多的类库,有自定义$或jQuery全局变量的存在时，就产生冲突。 jQuery提供的noconflict函数很好的解决了变量冲突问题，无论是$或者jQuery冲突都可以解决，接下来我们就来分析一下jQuery的冲突处理。 先来看一下...
extend()是jQuery中一个重要的函数，作用是实现对对象的扩展, 它经常用于jQuery插件的开发，jQuery内部也使用它来扩展属性方法，如上篇文章中讲到的noConflict方法，就是用extend方法来扩展的。在jQuery的API手册中，我们看到，extend实际上是挂载在jQuery和jQuery.fn上的两个不同方法，尽管在jQuery内部jQuery.extend()和jQuery.fn.extend()是用相同的代码实现的，但是它们的功能却不太一样。来看一下官方API对extend的解释: 代码...
刚接触到RPC（远程过程调用），就是可以在本地调用远程机子上的程序的方法，看到一个简单的nodejs实现，用来学习RPC的原理很不错：nodejs light_rpc 使用示例：代码如下: //服务端 var light_rpc = require(./index.js); var port = 5556; var rpc = new light_rpc({ combine: function(a, b, callback){ callback(a + b); }, multiply: function(t, cb){ cb(t*2); } }).listen(port);Sample clie...
截取指定长度字符串操作在网站建设中大量使用，尤其是在新闻列表这种类型的操作中大量应用。 下面就是一个截取字符串代码实例: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="http://www.softwhy.com/" /> <title>jQuery截取字符串操作</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <sty...
今天来记录下js来自定义鼠标右键，同样先来分解下它的实现原理： 1、屏蔽右键默认事件；（一度我以为修改的就是默认事件） 2、对一个ul的隐藏；（这个我也曾迂腐的认为值得这样操作的都是div，汗） 3、对鼠标点击右键做出的响应，显示隐藏的ul； 4、鼠标重新点击后，ul重新被隐藏 这样来看的话，我们需要做的事情是不是就简单了很多，先上代码： html部分 <ul id="testRight" style="width: 100px;background-color: yellow;positi...
效果预览： 一、模拟抽奖的实现过程 旋转原理：当支持CSS3属性采用transform: rotate（角度deg）设置,当角度为正数时顺时针旋转，当为负数时逆时针旋转。如果是IE8及其以下，采用采用绝对定位设置top和left，模拟角度旋转。 run方法，参数angle指角度 代码如下:function run(angle) { if (isIE) { cosDeg = Math.cos(angle * Math.PI / 180); sinDeg = Math.sin...
其实原理很简单，我们点击的时候我们给元素加上一个自定义的attr，加上后便会有有一个匹配的样式去自动适配背景，几秒后去掉该样式恢复原状 首先在自己的js中拓展一个方法hoverEl 代码如下:$.extend($.fn, { hoverEl:function(){ var _this = $(this); var _t = setTimeout(function(){ _this.attr("hover", "on"); }, 10); _this.attr("hoverTimeout", _t); setTimeout(function(){ clearTimeout( _this.attr("hoverTimeout") );...
代码演示： http://www.imqing.com/demo/movediv.html 大概原理： 使div的position为绝对定位absolute，然后控制其top与left值，需要监听鼠标事件，主要用到mousedown, mousemove, mouseup。 在mousedown后，记录mousedown时鼠标与需要移动的div的位置，然后取得两者之差，得到在鼠标移动后，div的位置。即： left = 当前鼠标位置.x - (鼠标点击时的.x值 - div的初始位置x值) top = 当前鼠标位置.y - (鼠标点击时的.y值 - div的初始...
对于一些比较小的图片，通过鼠标移动到图片上进行放大显示，原理很简单，就是将图片显示的尺寸变大后放在浏览器的一个指定位置，从而实现图片的放大预览。以下是代码： 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery图片预览</title> <script type="text/javascript"...
背景：项目中需要做个对两位小数点的正负浮点数的处理， 要求：非数字或者.字符自动清除，并对.12自动修补.前的0 原理：在输入框中加入两个事件，keyup与blur，keyup处理字符串中非要求的字符，blur中对最终字符串处理成理想的格式111.11 实现：通过七个正则处理掉主功能 val代表输入的字符串 /^\d*\.?\d{0,2}$/ 验证val是否是ddd.dd的格式，是则不处理，否才处理 /[^.0-9]+/ 处理掉val中所有的非数字与.的字符 /(?:\d*\.\d{0,2}|\...
在动态站点上经常需要上传自己的图片，而这些图片的大小是未知的，在显示成缩略图的时候必须进行按比例的缩放才能美观地显示。以最近做的golf网站（http://www.changligolfsales.com）做例子。 该网站需要上传高尔夫产品图片，并以缩略图显示在列表上，站点服务器支持Asp，但不支持aspjpeg之类的生成缩略图组件，所以将上传的图片直接显示成缩略图，就需要按比例缩放了，前提是要获取图片的长宽，第一个想到的方法是在上传的时候通...
代码如下:<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单拖曵原理实例</title> <style type="text/css"> #drag{width:400px;height:300px;background:url(http://upload.yxgz.cn/uploadfile/2009/0513/20090513052611873.jpg);cursor:move;position:absolute;top:100px;left:100px;border:solid 1px #ccc;} h2{color:#fff;background: none repeat scroll 0 0 rgba(1...
原理和过程 1.页面滚动加载事件 2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片 3.获取元素集合 加载过的图片从集合里删除 效果预览：http://jsfiddle.net/dtdxrk/SkYNq/embedded/result/ 代码如下:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生Js页面滚动延迟加载图片</title> <style type="text/css"> *{margin: 0;padding: 0} img.scroll...