随笔分类 - [10]JS
-
offsetParent算法分析
摘要:offsetParent算法分析 <!DOCTYPE HTML><html id="html"> <head> <title>offsetParent by 司徒正美</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="mass.js"> </script> <style type=&quo 阅读全文
-
onhashchange事件
摘要:onhashchange事件是针对AJAX无缝刷新导致后退键失效而产生的事件,因此属于一个够新的事件,浏览器兼容性如下:FeatureChromeFirefoxIEOperaSafarisupport5.03.6 (1.9.2)8.010.65.0由于chrome引发的版本号竞赛,现在chrome20+,firefox16+,opera12了,因此对于标准浏览器我们不必顾虑支持问题,精力集中在IE678上。IE8在兼容模式下虽然有此事件,但不生效。这个检测也很简单。至于如何产生历史,这也很简单,直接在隐藏iframe中调用document.write方法就行。hash的变化,是通过定时器检测, 阅读全文
-
jquery基础-jquery和dom对象转换
摘要:Window.onload=function(){//页面加载,不能同时编写多个,最后面的会覆盖前面的}$(document).ready(function(){//页面加载,能同时编写多个});相当于$(function(){//页面加载,能同时编写多个9});$(“#foo”).html()相当于Document.getElementById(“foo”).innerHTML;Jquery对象转换成dom对象第一种方法:Var $cr=$(“#cr”);//jquery对象Var cr=$cr[0];//dom对象Alert (cr.checked);第二种方法,通过get方法Var $c 阅读全文
-
抢书之JS版
摘要:无疑汤姆大叔送书是今天的热点,此贴一出立即在园子里面引起了轩然大波,书啊,免费,30本立即让大家红了眼啊,人气那叫一个排山倒海,大有要盖园子里最高楼的豪情啦,还等什么,赶快加入抢书热潮吧 咱是程序员,抢书也得科学,自第一次抢书失败后,我便写了一个用户脚本,代码很简单,咱就让悬念停在提交延时那一块和谁对博客园服务器时间测试得更准确,行,开工,下面我粘一下代码,是一段用户脚本,存为GrabTheBook.user.js,拖到google浏览器,然后刷新就可以了,最后说一句:大叔莫怪!// ==UserScript==// @name Grab The Book// @author... 阅读全文
-
onvaluechange事件
摘要:这不是一个真实的浏览器事件,不过的确曾经存在这样一个事件满足我们的需求。很多时候,我们需要对文本域的值进行变化检测,不论是这变化是用户通过键盘敲打引发的,或是通过el.setAttribute("value","aaa")引发的,还是el.value = "bbb"引发的,还是用户通过复制粘贴引发的,更恶心的是HTML通过语音输入引发的。只要里面的文字发生变化,我们希望都能比较及时调用相应的程序进行处理。在旧式IE(IE6-8)下,onpropertychange可以满足上述所有需求(由于IE不支持input[speed]),因此不用 阅读全文
-
为页面上某些文本框添加离开验证输入事件
摘要:为页面上某些文本框添加离开验证输入事件今天朋友问我一个js的问题,他是这么描述的:页面上有些许文本框,但是要求获得焦点后就必须为其输入数据. 如果光标离开,验证是否已经填入数据,如果没有填入数据就弹出提示对话框. 结束对话框后,要求该文本框获得焦点,可以继续输入.起初我没有在意,但是看了他的要求,我觉得应该很简单吧!后来看了看,似乎并不容易.问题出现在怎么添加事件执行代码. 先贴一段代码,为id为text的div标签下的所有文本框添加失去焦点的事件 1 <html> 2 <head> 3 <title></title> 4 <script 阅读全文
-
NodeJs新手学习笔记练习项目大纲
摘要:NodeJs新手学习笔记练习项目大纲导言NodeJs的个人看法练习项目大纲导言毕竟已经不是第一次学编程了,所以就想着折腾点好玩的东西,去NodeJS官网和CnodeJs转一圈以后,慢慢的有点感觉了,把学习过程中的点点滴滴记录下来当做一个一个存档或者为nodejs做一份贡献吧.NodeJs的个人看法NodeJs里面最经典的例子莫过于那个http服务器了,也是目前而言最成熟的nodejs学习的案例.在学习nodejs的过程中发现,很少发现有Nodejs 更移动客户端打交道的资料,个人愚见,nodejs的异步IO模型非常适合用于在移动客户端的领域里面,举个不太严谨的例子,例如上传一张图片,在当前的移 阅读全文
-
Wijmo jQuery 插件集
摘要:有些朋友第一次看到本系列文章,所以给出本系列文章的链接:不得不爱开源 Wijmo jQuery 插件集(1)-【开篇】(附演示和源码)不得不爱开源 Wijmo jQuery 插件集(2)-【准备工作】(附30种Theme演示和源码)不得不爱开源 Wijmo jQuery 插件集(3)-【Menu】(附页面展示和源码)不得不爱开源 Wijmo jQuery 插件集(4)-【手风琴效果】(附页面展示和源码)不得不爱开源 Wijmo jQuery 插件集(5)-【对话框】(附页面展示和源码)首先让我们看看 Wijmo Popup 给我们带来了哪些惊喜?wijpopup 用于灵活的展示或隐藏页面元素。 阅读全文
-
完善twitter
摘要:今天我们来完善twitter应用。首先回到昨天的例子。var express = require('express')var app = express()app.get('/', function(req, res) { res.send('Welcome to Node Twitter')})app.listen(8000) 这里我们使用express模块来代替第一讲中使用的http模块,但其实express底层仍然使用到了http模块,它会帮我们完成服务器的创建和监听。完成express实例的创建之后,我们需要监听请求事件,这里我们使用ge 阅读全文
-
.创建自己的twitter
摘要:这篇文章将通过开发一个简单聊天室的方式,介绍node.js的net模块。 一、第一版,只向客户端发送信息 我们先实现一个简单的版本,代码如下:var net=require('net');var chatServer=net.createServer();chatServer.on('connection',function(client){ client.write('hi!\n'); client.write('bye!\n'); client.end();})chatServer.listen(9001); 代码讲解: 1. 阅读全文
-
node.js入门 - 1.我们的第一个服务
摘要:从今天开始,我将开始一个关于node.js的专题,是我读《node:up and running》的总结。第一课是关于node.js的安装,开发工具的介绍,以及如何创建我们的第一个服务:hello word。 window平台的node.js安装很简单,大家到http://nodejs.org/下载安装文件,直接安装就可。 开发工具推荐大家使用WebStorm,多node.js的支持相当的好。大家可以读的博文http://www.cnblogs.com/softlover/archive/2012/08/19/2646265.html了解这个软件的安装。 我们使用webstorm创建名叫... 阅读全文
-
“计算机之子”的MVVM框架源码学习笔记
摘要:随着avalon v2项目的启动,我又开始学习业内的各个MVVM框架。在一次偶然机会,幸运接触到计算机之子winter-cn的MVVM源码,需要认真学习一下。不过,这放出来是比较早期的源码,现在可能改进很多,膜拜地址:http://shaofei.name/mvvm/计算机之子的MVVM现在只支持非常高级的浏览器,还在使用IE678这样破浏览器,就免进吧,人家的高瞻远瞩岂非尔等屌丝所能想象的!他的框架由三个文件组成,分别是EventSource.js,ViewModel.js,HTMLTemplate.js。EventSource其实就可以看作为W3C的EventTarget类,是提供观察者模 阅读全文
-
我的模块加载系统 v18
摘要:本版本亮点是加入本地储存的支持与版本控制。根据我们正常的思路,上线前我们会把这个页面的所有JS文件打包成一个,或尽可能少的JS文件,其目的是减少请求数。然后,模块化带来的一个直接结果是把一个框架打散成N多JS文件,真是反其道而行。但是一个网站是由许多页面组成,每个页面其实都是引用N个相同的JS文件(包括基础库,工具库与通用组件库),与针对这个页面的专用JS文件。因此想搞鼓出最优的打包方案是很难的,打包后我们图的是利用浏览器的静态缓存减少对服务器的压力!不过,请神容易送神难,静态缓存后,我们想刷掉这缓存比较麻烦,不能要求用户按F5或Ctrl+F5来清吧!涉及CDN就更麻烦了。而且合并JS后,意味 阅读全文
-
高质量的Javascript
摘要:这章的内容我看的最久,这是跟我js基础没打好有着莫大的关系,但是还是耐着性子看完了, 不懂的东西都是百度上搜索,理解后再继续。下面是记录下来的笔记。1)如何避免JS冲突A:匿名函数在多人合作一个网站时,每个人都会写自己的JS代码,定义变量的时候有可能会引起命名冲突,如何避免这种冲突隐患呢?一种最简单有效的办法是“匿名函数”将脚本包起来,让变量的作用域控制在匿名函数之内。匿名函数:(function (){})() 前面的括号内是函数体,后面的()表示执行。如:(function(){ var name,user="test"; //包含在这个匿名函数中的变量,作用域不再是w 阅读全文
-
全国城市三级级联菜单(java+Ajax+jQuery)
摘要:先创建HTML(显示)<!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 三级地市级联菜单_http://www.codefans.net</title> < 阅读全文
-
各大类库的类工厂
摘要:类工厂是指用于生成类的函数,我们不能每写一个类都重复以下代码,要好好封装一下!varF = function(){}F.prototype = SuperClass.prototype;SubClass.prototype = newF;SubClass.prototype.constructor = SubClassPrototype.js1.6之后的类工厂varAnimal = Class.create({initialize: function(name, sound) {this.name = name;this.sound = sound;},speak: function() {a 阅读全文
-
我的模块加载系统 v17的入门教程3
摘要:本节将介绍如何支持“simplified CommonJS wrapper”模块,node.js的SJS模块实质在内部包一层构成一个SCW模块,而seajs提倡的 CMD 也源自于它。//http://blog.millermedeiros.com/amd-is-better-for-the-web-than-commonjs-modules///一个遵循SCW规范的模块,SCW是CommonJS关于模块定义的一个子规范define(function(require, exports, module){varmyLib = require('myPackage/myLib'); 阅读全文
-
分享一个用原生JavaScript写的带缓动效果的图片幻灯
摘要:朋友让帮忙找个原生JS写的带缓动效果的图片幻灯,类似Tmall首页的效果,找了一圈后发现网上JS写的图片幻灯很多,相关的jQuery插件也很多,但用原生JS写的带缓动效果的却不多。没办法只好自己动手,现在把代码分享给大家,希望对大家有用。 代码中的缓动公式用了司徒正美博客中整理的代码:http://www.cnblogs.com/rubylouvre/archive/2009/09/17/1567607.html 缓动公式的推导主要利用了物理中的加速度知识,推荐过程可以看看这篇文章:http://floatyears.info/javascript-animation-easing HT... 阅读全文
-
jQuery1.8 css模块评析
摘要:jQuery早期的核心设施早都是DE大神那里拿过来的,什么选择器,事件系统,精确计算样式……现在CSS模块集中了DE大神的两个伟大的HACK一个是用于在标准浏览器下转换百分比值为更有用的像素值// A tribute to the "awesome hack by Dean Edwards"// Chrome < 17 and Safari 5.0 uses "computed value" instead of "used value" for margin-right// Safari 5.1.7 (at least) re 阅读全文
-
我的模块加载系统 v17的入门教程2
摘要:第一节,我们聊到相对于当前目录用“./”,相对于父目录用“../”,相对于父父目录用“http://www.cnblogs.com/”,如果是远程文件直接用URL。其实模块标识还有一种是相对于根目录,这特指是mass.js所在的目录。当然你可以通过配置手段修改根目录,但不建议这样干。比如aaa.js与mass.js是会于同一目录,用么沿着第一节的例子:<!DOCTYPE HTML><html><head><title>AMD</title><metahttp-equiv="Content-Type"conte 阅读全文