摘要：
作为全球最知名的js框架之一，jQuery的火热程度堪称无与伦比，简单易学的API再加丰富的插件，几乎是每个前端程序员的必修课。从读《锋利的jQuery》开始，到现在使用jQuery有一年多的时间了，对jQuery算是比较了解了，唯一没做到的就是读源码。网上看到有人写jQuery源码解析的，我也没细看，个人觉得如果光是为了解析源码而解析源码，未免有点太劳神了，没有实际用途，我更倾向于在实际应用中遇到不懂的方法或是文档说明不清楚的地方，可以查找到相应的位置看下源码，足矣。 闲话不多讲了，今天的主题是jQuery中的事件监听器的绑定方式。在学习jQuery之初，就在网上不只一次搜过相关主题，... 阅读全文
摘要：
原标题：Internet Explorer CSS Bugs原文地址：http://haslayout.net/css/以下是英文全文：---------------------------------------OverviewInternet Exploreris famous for not supporting many ofCSSpropertiesas well as contaning numerous bugs in the ones it supports.This page lists problems in Internet Explorer, samples demon 阅读全文
摘要：
一、事件的捕获与冒泡 由W3C规定的DOM2标准中，一次事件的完整过程包括三步：捕获→执行目标元素的监听函数→冒泡，在捕获和冒泡阶段，会依次检查途径的每个节点，如果该节点注册了相应的监听函数，则执行监听函数。以下面的HTML结构为例： 父亲 孩子 执行的流程应该是这样的： 下面是一组例子，分别点击孩子节点可以清楚的看到第三个参数的影响：父亲孩子 父亲节点的监听函数在捕获阶段执行：var parent1 = document.getElementById('parentdiv1');var child1 = document.getElementById('child.. 阅读全文
摘要：
一、开篇 在学习javascript之初，就在网上看过不少介绍javascript事件的文章，毕竟是js基础中的基础，文章零零散散有不少，但遗憾的是没有看到比较全面的系列文章。犹记得去年这个时候，参加百度的实习生面试，被问到事件模型，当时被问的一头雾水，平时敲onclick敲的挺爽，却没有关注到事件模型的整体概念。这个周末难得清闲，决定就javascript中的事件模型写个系列，算是对知识点的一个总结，也是对自己的一个交代。 初步计划分为以下几个部分： ① javascript事件的基本概念及基于原始、IE、DOM2的三种模型的异同点 ② javascript事件流介绍，捕获-冒泡... 阅读全文
摘要：
要在旧系统中加一个jquery插件，本地demo测试没问题，部署到服务器后却报错。使用的是IE9浏览器，打开F12调试台，发现默认的文档模式是IE7，调成IE9后，报错消失。可以确认是该插件不兼容IE7造成的。 有一个重大的疑惑，明明是IE9浏览器，打开后怎么会默认是IE7模式呢？ 很快，在我翻看旧系统的代码时，这个疑惑稍稍有点眉目，看到了这样的一句：，原来此标签正是设置文档用IE7来解析，究其原因，是一个历史问题。在IE8刚刚发布还未稳定之时，有些网页都不能正常显示，于是眉毛胡子一把抓，强制令其使用IE7来解析，已到达在IE8下正常显示的目的，详细请参考这里。 为什么说稍稍有点眉目... 阅读全文
摘要：
在博客园浏览大牛们写的文章时，经常会看到在文章中混有一些可运行示例，例如司徒正美的博客中： 带有可运行示例 可以点击“运行代码” 经过一番小小的探索，掌握了这种写博技巧，希望大家也借鉴大牛们的写法，让我们的博客更有表现力~开始~一、博客中带有可运行javascript示例 很显然，作者是写了js代码在文章里面了，方法也比较简单，进入后台编辑器的源码编辑模式，在里面直接敲 怎么样？是不是感觉瞬间高端洋气了呢~看着虽简单，这可是我鼓捣了半天那个编辑器才试成功的，这里不得不吐槽一下博客园的编辑器，太不好用了！而且还有一个重要问题： 没有想到别的办法，目前只能这么处理了。若大... 阅读全文
摘要：
消息提示插件大伙并不陌生了，无论是个系统还是网站，基本都要有消息系统。但我认为，一个好的提示插件应当具备很好的独立性，不与页面其他元素发生任何关系，其次是能对外提供丰富的接口，因为你生来就是被别人来调用的嘛。看了下百度个人首页的右侧滑出层效果还不错（尽管百度的UI一直被广大业内人士诟病），决定仿造它来做个消息提示插件。插件写的不多，拿此来练练手~ 百度的我的 样式是由单独的css文件控制的，不喜欢的可以自己设置。下面介绍一下对外提供的API： 首先，代码中有这么一行：$(function(){ window.msgbox = $.msgbox(); }); 即创建一个全... 阅读全文
摘要：
很早以前，“焦点图”这个名称就出现在了网页制作中，能够完成绚丽的图片切换效果。有很多由flash和jquery制作的焦点图，其特点就是一个比一个炫。其中有一种特效就是有镜头左右摇摆或是拉远拉近的视觉效果，如果你印象不深了，可以点击这里体验一下。随着CSS3的发布，我们可以利用它的变形、渐变、动画属性来代替jquery的动画函数，用更少的代码来实现这种有“镜头感的”效果。本文就将探索一下如何利用CSS3来制作一个有镜头感的网页。 从最终效果来想想原理，在页面上依次出现的这些内容，其实一开始页面加载的时候就已经都在页面上了，只不过大部分内容都在浏览器窗口“之外”，我们看不到，等到需要显示它的... 阅读全文
摘要：
一、history API知识点总结 在HTML4中，我们已经可以使用window.history对象来控制历史记录的跳转，可以使用的方法包括： history.forward();//在历史记录中前进一步 history.back();//在历史记录中后退一步 history.go(n);//在历史记录中跳转n步，n=0则刷新当前页，n=-1则后退一步 在HTML5中，又新增了四个可用的API，包括：history.pushState(data[,title][,url]);//向历史记录中追加一条记录，data是一个js对象，可以是任何格式的json数据，title参数暂时不起作... 阅读全文
摘要：
处理代码的兼容性是前端攻城师们的家常便饭了，一般是对各种浏览器进行兼容性处理。但是有时候我们也会遭遇到浏览器以外的影响因素，这个是经常会被忽视掉的内容。比如前几天就听说客户端安装迅雷、暴风影音等软件会修改http连接数，从而影响浏览器的http并发数。今天有幸，让我见识了另一个因客户端安装个别软件而造成的程序兼容问题。罪魁祸首便是金山WPS2013. 故事的开始是这样的。。。我用HTML5写了一个文件上传插件，其中使用到了file API，在验证文件类型的时候使用了file.type获取的文件MIME类型，如果获取的值在允许列表中，就让其通过验证。插件写完了，应用到了项目中，提交测试了，... 阅读全文
摘要：
一、需求的诞生 在我们的网页或者web应用中，想要对列表中的元素进行位置调整（或者说排序）是一个常见的需求。实现方式大概就以下两种，一种是带有类似“上移”、“下移”的按钮，点击可与相邻元素交换位置，另一种便是通过拖拽进行排序。搜索“jquery拖拽排序插件”，你会看到相关插件层出不穷。在HTML5拖拽API完善再加上移动设备横行的今天，后者似乎更受青睐，因为它有更简洁的操作，你看看，拖来拖去就可以调整顺序，多炫啊。 但是！为什么要说但是呢，因为这种拖拽操作也有它的弊端。首先是功能不明显，用户进来你的页面后不知道原来这些东西是可以拖动的，除非你再旁边加一行说明“拖动这些图片可以进行排序”；其.. 阅读全文
摘要：
虽然说使用css hack来解决页面兼容性bug并不是个好办法，但是有时候这些hack还是用的着的，比如你接受了一个二手或是三手的遗留界面，杂乱无章的css代码，只在某个浏览器下有兼容bug，而且需要短时间内处理。 下面一段代码可以让你很快利用css来为特定的浏览器指定样式。不多赘述，看码即懂：属性过滤：_height:10px; /* IE6支持 */*height:10px; /* IE6、IE7支持 */height:10px\0/; /* IE8支持 */选择器过滤：/*针对IE6*/* html #nav{ margin:12px; }/*针对IE7*/*+html #na... 阅读全文
摘要：
平时在浏览网页的时候经常会看到诸如“CSS 3D效果”、“css3动画”之类的字眼，看过效果后觉得很神奇，但也一直没机会研究一下原理。因为真正项目中还没用到这些东西。但这些新的技术在不久的将来必定是要大放异彩的，这是标准的一部分呀，一定有步入正轨的那一天。趁着阅读《响应式web设计》这本书，来把这部分知识学习一下。Javascript动画VS CSS动画 用js写的动画大家都不陌生了，使用jQuery或者其他框架可以方便的制作出各种动画效果。那我们为什么还要用CSS来做动画呢？它有哪些优势呢？ 首要功绩便是效率。如果一个新手用js写了一个简单的动画效果（比如鼠标悬停），作为一个自称是完美主义. 阅读全文
摘要：
看了HTML5和CSS3相关的章节，老实讲其实我还是挺失望的，并没有看到像媒体查询或是流体布局那样令人激动的东西。更多的是HTML5、CSS3基本知识的介绍。但也不可否认我也有一些收获，下来就总结一下吧。 让旧版本浏览器支持HTML5 大家可能都已经见过或者是使用过了，通过使用js脚本，可以让低版本IE支持HTML5新标签。如Remy Sharp写的HTML5 enabling script。其实这种脚步还有个名字呢：腻子脚本（polyfill），指用来弥补老浏览器的缺陷的脚本。如果你去搜索会发现这样的腻子脚本还是挺多的，有的是专门为支持canvas写的，有的则是为支持其他特性写的。为... 阅读全文
摘要：
闲来无事翻司徒正美的博客，无意间看到了一篇文章《监听文本框输入》，有一个大发现，原来js中竟有oninput这样的事件，在文本框的输入、退格、空格、粘贴等操作均能触发，利用这个事件就可以动态捕捉用户的输入情况。记得以前做动态监测输入，都是用onkeydown或onkeyup，太土了，现在直接用这个吧。不过呢，有点兼容性问题，没错，就是IE（每次都是你！），而且IE9和其他版本的IE还不太一样。还好正美已经在他的文章中进行了兼容性处理，可以拿来直接用了。 本文的重点，就是想利用这个事件来写一个jquery插件，限制字数的textarea。相信你已经不陌生了，像新浪微博： 这个插件其实相当... 阅读全文