onhashchange事件--司徒正美

onhashchange事件是针对AJAX无缝刷新导致后退键失效而产生的事件,因此属于一个够新的事件,浏览器兼容性如下: Feature Chrome Firefox IE Opera Safari support 5.0 3.6 (1.9.2) 8.0 10.6 5.0 由于chrome引发的版本号竞赛,现在chrome20+,firefox16+,opera12了,因此对于标准浏览器我们不必顾虑支持问题,精力集中在IE678上.IE8在兼容模式下虽然有此事件,但不生效.这个检测也很简单.至于…

[ javascript ] 司徒正美的fadeOut-fadeIn效果!

首先感谢司徒正美的文章! 在司徒大神的博客看到一个简单的渐入渐出的效果.全然採用js实现. 例如以下: <!doctype html> <html dir="ltr" lang="zh-CN" > <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"…

[web前端] 去哪儿网前端架构师司徒正美：如何挑选适合的前端框架？

原文地址: https://www.jianshu.com/p/6327d4280e3b 最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架. 每次新开业务线或启动新项目时,首先第一件事就是纠结:使用什么框架,重造什么轮子?我很高兴应CSDN的邀请谈我的看法. RequireJS,前端技术发展分水岭在五六年前,移动端还没有兴起,我们没有什么选择,就是jQuery.有人会说,jQuery只是类库,不是框架:但那时前端业务还没有像今天这么繁重,原本是后端干的事,全部挪到前端来,因为光是j…

javascript 45种缓动效果BY司徒正美

javascript 45种缓动效果参数类型说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 duration number 可选,缓动效果持续时间,默认是500ms.建议取300~1000ms. field string 必需,要发生变化的样式属性.请在top,left,bottom,right,width与height中选择. ftp number 可选,每秒进行多少帧动画,默认50帧,保证流畅播放…

html标签对应的英文原文 - 司徒正美

标签对应英文说明 <!--> / 注释 <!DOCTYPE> document type 文档类型 <a> anchor 超链接 <abbr> abbreviation 缩写词 <acronym> acronym 缩写词 <address> address 联系信息 <applet> applet / <area> area 定义图像映射中的区域 <article> article 文章 <…

onhashchange事件，只需要修改hash值即可响应onhashchange事件中的函数（适用于上一题下一题和跳转页面等功能）

使用实例: 使用onhashchange事件做一个简单的上一页下一页功能,并且当刷新页面时停留在当前页 html: <!DOCTYPE html><html><body><div id="demo"></div><button class="previous-page">上一题</button><button class="next-page">下一题…

深入理解JavaScript的闭包特性如何给循环中的对象添加事件

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1. <!DOCTYPE HTML> 2. <html> 3. <head> 4. <meta charset="utf…

JS 事件代理

事件处理器:onclick.onmouseover.... 在传统的事件处理中,你需要为每一个元素添加或者是删除事件处理器.然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越大. JavaScript事件代理:当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数.这主要得益于浏览器的事件冒泡机制它是怎么运作的呢? 事件代理用到了两个特性:事件冒泡以及目标元素. 事件冒泡:当一个元素上的事件被触发的时候,比如说鼠标点击了…

javascript事件代理(Event Delegation)

看了几篇文章,放上来供参考司徒正美的文章,Event Delegation Made Easy ------------------------------------------------------------------自己的理解加深印象----------------------------------------------------------------------------- What to use when For really small event handling…

了解javascript中的事件（二）

本文目录如下: 零.寒暄一.事件的分类二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例二.事件代理三.事件代理思想的用处四.总结零.寒暄这篇博客本该出现在两个月以前,但是种种原因,搁浅了.两个月的时间,改变了许多人也改变了许多事,回头看看自己两个月前写的代码,居然有很多可笑之处,这也算是一种成长吧.实习的几个月里,全身心的投入工作,效率奇高,同时,离开学校的这段日子让我充分感受了这个社会的残酷.好酒需陈酿,来的早不如来的巧,今天跟大家分享下javascrip…

如何给循环中的对象添加事件--深入理解JavaScript的闭包特性

JS中事件代理与委托

在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么特殊的用法呢?这篇文章就主要介绍一下javascript delegate的用法和原理,以及Dojo,jQuery等框架中delegate的接口. JavaScript事件代理首先介绍一下JavaScript的事件代理.事件代理在JS世界中一个非常有用也很有趣的功能.当我们需要对很多元素添加事件的…

js事件触发器 dispatchEvent()

[其实就是自动触发事件,而非手动(交互)触发事件] dispatchEvent是作为高级浏览器(如chrome.Firfox等)的事件触发器来使用的,那么什么是事件触发器?就是触发事件的东西.可能有人觉得有点莫名其妙,触发事件不是在交互中被触发的吗?的确,通常情况下,事件的触发都是由用户的行为如点击.刷新等操作实现,但是,其实有的情况下,事件的触发必须由程序来实现,比如ajax框架的一些自定义事件.正如事件的绑定一样,对于浏览器而言,绑定事件分为高级浏览器和IE浏览器两派,事件触发器也是分为高级…

事件触发器-----dispatchEvent

不要被标题蒙蔽了,今天的重点不是论述事件触发器,而是说一下dispatchEvent这个东西.好了,先简单做个铺垫,dispatchEvent是作为高级浏览器(如chrome.Firfox等)的事件触发器来使用的,那么什么是事件触发器?就是触发事件的东西.可能有人觉得有点莫名其妙,触发事件不是在交互中被触发的吗?的确,通常情况下,事件的触发都是由用户的行为如点击.刷新等操作实现,但是,其实有的情况下,事件的触发必须又程序来实现,比如ajax框架的一些自定义事件.正如事件的绑定一样,对于浏览器而言…

自定义事件的触发dispatchEvent

1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: document.createEvent() event.initEvent() element.dispatchEvent() 举个例子: var dom = document.querySelector('#id') dom.addEventListener('alert', function (event)…

(转)js原生自定义事件的触发dispatchEvent

1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: 1 2 3 document.createEvent() event.initEvent() element.dispatchEvent() 举个例子: 1 2 3 4 5 6 7 8 9 10 11 12 var dom = document.querySelector('#id') document.addE…

javascript 正則表達式补充

定义 JavaScript种正則表達式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串 1. 构造函数 var reg=new RegExp('<%[^%>]+%>','g'); 2. 字面量 var reg=/<%[^%>]%>/g; g: global.全文搜索,默认搜索到第一个结果接停止 i: ingore case,忽略大写和小写,默认大写和小写敏感 m: multiple lines.多行搜索元字符正則表達式让人望而却步以一个重要原因…

JavaScript 概览更新时间2014-0414-0837

一些概念 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM Level1规划文档结构:DOM Level2扩展了对鼠标和用户界面事件等的支持:DOM Level3支持了XML1.0特性,包括XPath等.还有其他语言发布了自己的DOM标准:可缩放矢量图形(SVG),同步多媒体集成语言(SMIL)等.DOM描述了处理网页内容的方法和接口:BOM描述了与浏览器进行交互的方法和接口. ECMAScript数据类型 5种原始类型:Undefined.Null.Boolean.Nu…

谈谈DOMContentLoaded：Javascript中的domReady引入机制

一.扯淡部分回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想想都有些小激动呢~然而人生不如意者十之八九,刚踏上征程就经常会被各种Error虐到体无完肤,有时候甚至会被在现在看来很低级的bug折磨得生不如死.但没有一种成长是不需要付出代价的,也就是那段刚跳入泥潭的日子开启了让自己成为一名真正的JSer的大门,也使自己在奔向高大上的路上让“见招拆招.兵来将挡”成…

前端自学路线之js篇

上一篇我们讲了前端切图的学习路线,不知大家有没有收获.今天来聊聊前端工程师的核心技能之——JavaScript.js这门语言看似简单,但要做到入门.熟练以至于架构的程度,还是有一段路要走的,今天就来聊聊这段路上都要经历些什么.准备好小板凳,开讲~ level 1 首先你要对js的基础知识进行系统的学习,脑海中先有一幅知识蓝图.我们现在说的js其实包含三部分:ECMAScript规范.DOM规范.BOM规范,你要知道这三部分都有哪些内容.其中ECMA规范定义了js作为一门编程语言的标准,包含变量基…

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Controller Controller 完成业务逻辑后,要求 Model 改变状态 Model 将新的数据发送到 View,用户得到反馈更详细的说明: 模型(Mod…

AngularJS 脏检查深入分析

写在开头关于Angular脏检查,之前没有仔细学习,只是旁听道说,Angular 会定时的进行周期性数据检查,将前台和后台数据进行比较,所以非常损耗性能. 这是大错而特错的.我甚至在新浪前端面试的时候胡说一通,现在想来真是羞愧难当! 没有深入了解就信口开河实在难堪大任. 最后被拒也是理所当然. 在剖析之前,非常感谢坐镇苏宁的徐飞,现在已经不在苏宁了,我也是在他翻译的文章(Build Your own AngularJS)和博客才略懂一二. 徐飞关于知乎问题国内前端团队分布和前景是怎样的?的回答…

JavaScript中尺寸、坐标

测试环境是IE8,Chrome38,Firefox40,下面是全局通用脚本打印代码 /** * 打印 */ function write(str) { document.write(str + '<br/>'); } 一.尺寸在container外面我还套了个container_out,宽度为1000px,方便演示用,HTML代码如下: <div class="container_out"> <div id="container"&g…

angularjs和ajax的结合使用（一）

好久没写文了.这是一篇关于easyui配合ajax使用的文章, 顺带介绍angularjs的使用以及让你感受到angularjs的威力.网上对于ajax 的文也是多如牛毛 .我就不直接从那种原生的httpxmlrequest 对象的js 写起了哈. 看那种东西也存粹是了解高层的东西是怎么来的原理是啥真正做的时候写那种东西不是扯淡么你叼你技术牛逼整站的代码你全用那种写.html js 这种东西最开始设计出来就没考虑周全就是坨屎.还好现在有各种框架可以帮助我们更容易的把这坨…

JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）

前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue也确实挺火,各种入门博文眼花缭乱,博主也不敢说写得多好,就当是个学习笔记,有兴趣的可以看看. 本文原创地址:http://www.cnblogs.com/landeanfen/p/6054654.html 一.MVVM大比拼关于MVVM,原来在介绍knockout.js的时候有过讲解,目前市面上比…

前端神器avalonJS入门（一）

转自:http://www.cnblogs.com/vajoy/p/4063824.html avalonJS是司徒正美开发和维护的前端mvvm框架,可以轻松实现数据的隔离和双向绑定,相比angularJS等前端框架它有如下优势: 1.压缩后仅有60多kb,而angular的min版是100多kb: 2.兼容IE6+,符合天朝市场需求: 3.效率更高,跑起来比angular和knockout都要更快,在移动端上该优势会更大(avalon有移动端专版的avalon.modern.js).关于其性能…

我们是怎么管理QQ群的

文章背景:腾讯平台上的qq群数以千万百万计,但99%的在吹水扯蛋,从早上的问好开始,到晚上的晚安,无一不浪费青春之时间,看之痛心,无力改变,只好自己建了一个,希望能以此来改变群内交流的氛围或环境. 以下是我群的一些约定分享一下,给其它行业同仁一点借鉴,以此也侧面推动行业阶梯式的进步,让入门级初中级找到一个适合的学习群. 以下为具体内容: 群号:159758989 人的存在是为了创建价值,群的存在是为了解决问题,你的存在是为了问题快速解决. 为了使你的问题得到快速的解决,请抽空阅读以下约定: 如…

JavaScript异步编程原理

众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着.在事件队列中加一个延时,这样的问题便可以得到缓解. A: 嘿,哥们儿,快点! B: 我要三分钟,你先等着,完了叫你~ A: 好的,记得叫我啊~ 你(C)也等着吧,完了叫你~ C: 嗯! ... 告诉后面排队的人一个准确的时间,这样后面的人就可以利用这段时间去干点别的事情,而不是所有的人都排在队列后抱…

迷你MVVM框架 avalonjs 入门教程

新官网请不要无视这里,这里都是链接,可以点的 OniUI组件库学习教程视频教程: 地址1 地址2 关于AvalonJs 开始的例子扫描视图模型数据模型绑定作用域绑定(ms-controller, ms-important) 忽略扫描绑定(ms-skip) 模板绑定(ms-include) 数据填充(ms-text, ms-html) 类名切换(ms-class, ms-hover, ms-active) 事件绑定(ms-on,--) 显示绑定(ms-visible) 插入绑定(m…

前端展望：取avalon，弃angular

打给比方,如果说angularJS是剑,那么avalon就是匕首.匕首比剑更易学,更快,更适合快速作战... 我们还是直接来实际的吧: 目前项目开发中有以下几个通用需求: 有前端路由系统,用来划分逻辑模块. 有异步模块载入,如requireJS或者seaJS. 数据与视图自动绑定,并且性能出众. 框架学习曲线不要太陡,并且让我的代码越少越好. 路由 AngularJS不能无缝与第三方路由整合,只能用它自己的模块,如”ui-status“.原因是AngularJS的数据模型是包裹在它的“con…

【onhashchange事件--司徒正美】的更多相关文章