img图片与容器下边界的缝隙的解决方式 今天在给图片弄hover遮罩时，发现遮罩的下方与图片的下边界没有对齐，而是多了4px左右，这里就记录下几个解决方案。通常在img图片的父级容器是块级元素时，就会造成如下的现象：.css_img_main{border: 1px solid #f00; width: 475px;} 我们看到图片的下边界与div中间有个小的缝隙，那么我们就得需要解决这个问题。如果不解决这个问题的话，那底部有个遮罩的话，那也就不能跟图片的下边界对齐了。 这里简单的介绍3个解决方案： 1. 给图片添加vertical-align属性 # .main img{ vertical-align : bottom; // top, middle } 只要vertical-align的值是以上三个中任意的一个，就能解决缝隙的问题。 2. 定义容器里的字体大小为0 # .main{ font-size : 0; } 这样也可以解决缝隙的问题。 3. 把图片设置为块级元素 # .main img{ display : block; } 据说，图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关），所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。

jshint在gulp中的使用 jshint是用来检测javascript的语法错误的，在grunt和gulp都有这个插件，这里简单的介绍下jshint的使用方法。 1. 安装jshint # 在已经安装node的情况下，在当前项目的目录下，使用以下的命令即可进行安装，非常的方便，因为是在gulp下使用，所以也得先安装gulp：npm install gulp npm install jshint 安装完成上面的两个组件后，在当前目录下新建一个gulpfile.js，在这个文件里，我们来调用jshint进行代码检查。 2. jshint的配置 # 这里主要讲解jshint中参数的配置和报错提示的设置。 2.1 jshint参数的配置 # 首先我们来了解下jshint的来源，再说jshint的参数配置。前端领域的大牛Douglas Crockford编写了JsLint，将他认为的那些重要的js编程实践作为静态检查项，他提出的某些编程实践也确实被人们所接受，因为这确实是容易引起问题的关键点（例如，在应该使用===的地方不要使用==等）。不过JsLint也存在一些问题，如它的某些检查过于严苛；遇到for-in语句后会停止检测；且非开源。。这些问题都使得人们对JSLint“敬而远之”。为解决jslint现存的问题，有了JSHint这个项目，此开源项目作为JSLint的一个分支，允许用户自定义检查项，使用起来更加轻量级。有了JSHint，程序员就可以根据自己的编程习惯来定制个性化的检查策略。通过以上的历史我们能够知道，jshint能进行参数配置，正是对jslint的一种改进。jshint的配置有两种方式：使用特殊文件.jshintrc和讲参数都写进json文档里(比如叫jshint_age.json)。如果使用的是.jshintrc的这种方式，jshint就会首先在当前目录里查找是否存在.jshintrc这个文件，如果没有找到就向上一级目录里寻找，直到文件的根目录。这种方式，可以让你对每个项目进行单独的配置，不过，如果你想所有的项目都是使用相同的配置，可以将.jshintrc放在根目录。还有一种就是使用json文件的配置方式，将各种参数都写进这个json文件里，然后gulpfile.js在进行引用。关于参数，可以参考的设置：{ "undef": true, // 所有的非全局变量，在使用前必须都被声明 "unused": true, // 所有的变量必须都被使用 "predef": [ "MY_GLOBAL" ] // 这里的变量可以不用检测是否已经提前声明 } 2016年8月4日添加如何在json文件进行配置呢，这里我简单的写了一个demo，可以参考一下。package.json :{ "jshintConfig":{ "undef": true, "unused": true, "predef": [ "MY_GLOBAL", "ads" ] // 声明几个全局变量 }, "author": "wenzi", "license": "ISC" } index.js :var num = 0; ads = 1; function func(){ var a=1,b; console.log(a); } gulpfile.js :var gulp = require('gulp'); var jshint = require('gulp-jshint'); var packageJSON = require('./package'); var jshintConfig = packageJSON.jshintConfig; jshintConfig.lookup = false; // 根据jshintConfig的规则检测index.js文件 gulp.task('default', function(){ gulp.src('./index.js') .pipe(jshint(jshintConfig)) .pipe(jshint.reporter('default')); }) 运行gulp之后得到的结果是：index.js: line 6, col 13, 'b' is defined but never used. index.js: line 3, col 1, Read only. index.js: line 8, col 5, 'console' is not defined. index.js: line 1, col 5, 'num' is defined but never used. index.js: line 5, col 10, 'func' is defined but never used. 5 errors 可以看到，配置文件已经起作用了，ads的全局变量没有被检测出来。2016年8月4日添加end这里再讲解几个参数的说明，如果想了解更多的参数，还可以访问其官方网站：【jshint的参数配置】 prop description bitwise 如果是true，则禁止使用位运算符 curly 如果是true，则要求在if/while的模块时使用TAB结构 debug 如果是true，则允许使用debugger的语句 eqeqeq 如果是true，则要求在所有的比较时使用===和!== evil 如果是true，则允许使用eval方法 forin 如果是true，则不允许for in在没有hasOwnProperty时使用 maxerr 默认是50。 表示多少错误时，jsLint停止分析代码 newcap 如果是true，则构造函数必须大写 nopram 如果是true，则不允许使用arguments.caller和arguments.callee nomen 如果是true，则不允许在名称首部和尾部加下划线 onevar 如果是true，则在一个函数中只能出现一次var passfail 如果是true，则在遇到第一个错误的时候就终止 plusplus 如果是true，则不允许使用++或者- -的操作 regexp 如果是true，则正则中不允许使用.或者`[^…]` undef 如果是ture，则所有的局部变量必须先声明之后才能使用 sub 如果是true，则允许使用各种写法获取属性(一般使用.来获取一个对象的属性值) strict 如果是true，则需要使用strict的用法，详见http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/ white 如果是true，则需要严格使用空格用法。 2.2 jshint的错误提示 # 既然检测错误，那就得把错误信息和错误位置提示出来，好让我们进行修改。在gulpfile.js里编写如下的代码var gulp = require('gulp'); var jshint = require('gulp-jshint'); // 建立js任务，进行代码检查 gulp.task('js', function(){ gulp.src('./js/**/*.js') // 检查文件：js目录下所有的js文件 .pipe(jshint()) // 进行检查 .pipe(jshint.reporter('default')) // 对代码进行报错提示 }); gulp.task('default', ['js']) 然后在命令里运行gulp，就可以看到对js代码的检查信息了，如果代码里有错误的话，就会提示到命令行里。当然，我们还可以自定义错误提示，不过需要引入map-stream模块。var mapstream = require( 'map-stream' ); /* file.jshint.success = true; // or false 代码检查是否成功 file.jshint.errorCount = 0; // 错误的数量 file.jshint.results = []; // 错误的结果集 file.jshint.data = []; // JSHint returns details about implied globals, cyclomatic complexity, etc file.jshint.opt = {}; // The options you passed to JSHint */ var myReporter = map(function (file, cb) { if (!file.jshint.success) { console.log('[ '+file.jshint.errorCount+' errors in ]'+file.path); file.jshint.results.forEach(function (err) { /* err.line 错误所在的行号 err.col 错误所在的列号 err.message/err.reason 错误信息 */ if (err) { console.log(' '+file.path + ': line ' + err.line + ', col ' + err.character + ', code ' + err.code + ', ' + err.reason); } }); } cb(null, file); }); gulp.task('jshint', function() { return gulp.src('./lib/*.js') // lib目录下所有的js文件 .pipe(jshint()) // js代码检查 .pipe(myReporter); // 若有错误，则调用myReporter进行提示 }); 这样就能根据我们自己的配置来进行比较顺手的错误提示，帮助我们修改代码。 3. 总结 # 当然，jshint仅仅是javascript的语法检查工具，检测不出来我们的逻辑问题；也不能用于代码的压缩与合并，其他的功能则需要其相应的模块进行处理

简析jQuery中的ready事件 不管是我们使用 jQuery 还是其他任何的库，我们大部分都会使用到 ready 的事件，因为很多的代码只能在 DOM 结构加载完成后才能执行，否则就会报错。因此都会封装跨浏览器兼容性的 ready 事件，不过本篇文章主要是讲解 jQuery 中的 ready 事件。 1. 为什么要使用 ready # 上面已经说了，“有些代码只能在 DOM 结构加载完成后才能执行”，不过有的人可能不是太理解，这里我们来举一个简单的例子var time = document.getElementById('time'); time.innerHTML = Date.now(); 我们在页面中运行上面的代码，控制台就报错：Uncaught TypeError: Cannot set property 'innerHTML' of null，意思就是不能给不存在的对象设置 innerHTML 属性。这是因为当代码执行到document.getElementById('time')时，id 为 time 的 DOM 元素还没加载，找不到 time 这个元素，代码就报错了；正确的方式就是把 js 代码放到 body 的后面，这样就能保证所有的 DOM 元素都执行完后才执行 js 代码。如果只是特别单纯简单的 js 代码，从上往下执行的那种，直接放在 body 的后面，是没必要使用 ready 的；但是，更多的情况，是没有那么多简单的 js 代码的，比如有的时候需要把 js 代码放在前面，有时需要延迟执行一些 js 代码，等等，这些就需要用到 ready 事件了。 2. ready 的书写方式 # jQuery 中的 ready 事件通常有两种书写方式，效果都是一样的：简写方式：$(function () { // ready }); 完整的方式：// 给document元素绑定ready事件 $(document).ready(function () {}); 其实在 jQuery 的内部，简写的方式最终也是通过调用下面的方式的。我们来看 jQuery 的源码里：// HANDLE: $(function) // Shortcut for document ready if () { } else if ( jQuery.isFunction( selector ) ) { return typeof rootjQuery.ready !== "undefined" ? rootjQuery.ready( selector ) : // Execute immediately if ready is not present selector( jQuery ); } 在$(selector)里，若参数 selector 是 function 类型的，即$(function () {}); function ready() {} $(ready); 则调用rootjQuery.ready( selector )，而且:rootjQuery = jQuery(document); 即：jQuery(document).ready(function () {}); 3. ready 的触发机制是什么 # 我们在上面已经了解了 jQuery 的 ready 的使用方法，在这一节我们来了解下 ready 的实现机制： document.readyState 表示文档当前的加载状态，因此可以使用document.readyState==complete来判断 DOM 是否加载完成，但是低版本的 firefox 不支持此属性： UNINITIALIZED：XML 对象被产生，但没有任何文件被加载。 loading：加载程序进行中，但文件尚未开始解析。 loaded：部分的文件已经加载且进行解析，但对象模型尚未生效。 interactive：仅对已加载的部分文件有效，在此情况下，对象模型是有效但只读的。 complete：文件已完全加载，代表加载成功。 DOMContentLoaded 是当所有 DOM 结构解析完，而不用等待其他的资源（如图片，PDF 等）加载完成，就可以触发这个事件；所有的高级浏览器都支持此事件，只有低版本的 IE 不支持此事件； ie6~8 可以使用 document.onreadystatechange 事件监听 document.readyState 状态是否等于 complete 来判断 DOM 是否加载完毕，如果页面中嵌有 iframe 的话，ie6~8 的 document.readyState 会等到 iframe 中的所有资源加载完才会变成 complete，此时 iframe 变成了耗时大户。但是经过测试，即使页面中没有 iframe，当 readyState 等于 complete 时，实际触发的是 onload 事件而不是 DOMContentLoaded 事件，对这点表示惊奇。 还好 ie 有个特有的 doScroll 方法，当页面 DOM 未加载完成时，调用 doScroll 方法时，就会报错，反过来，只要一直间隔调用 doScroll 直到不报错，那就表示页面 DOM 加载完毕了，不管图片和 iframe 中的内容是否加载完毕，此法都有效。 当我们了解了上面的知识后，就容易理解 jQuery 的 ready 设计机制了。// Catch cases where $(document).ready() is called after the browser event has already occurred. // we once tried to use readyState "interactive" here, but it caused issues like the one // discovered by ChrisS here: http://bugs.jQuery.com/ticket/12282#comment:15 // 曾经打算用document.readyState === "interactive"来判断DOM是否加载完成，但是会出现bug，因此使用complete // 如果当前状态已经是complete里，就直接执行 if (document.readyState === 'complete') { // Handle it asynchronously to allow scripts the opportunity to delay ready // 异步执行ready方法，以保证脚本有机会延迟执行（holdReady） setTimeout(jQuery.ready); // Standards-based browsers support DOMContentLoaded // 支持addEventListener的浏览器都支持DOMContentLoaded，直接调用DOMContentLoaded即可 } else if (document.addEventListener) { // Use the handy event callback document.addEventListener('DOMContentLoaded', completed, false); // A fallback to window.onload, that will always work // 有的浏览器会缓存load方法，下一次加载时load有可能优先于DOMContentLoaded触发 // 因此两个都写上，哪个先触发就走哪个 // 但是两个都写上，就不怕触发两次么，先把这段代码看完，然后看第4节 window.addEventListener('load', completed, false); // If IE event model is used // 如果当前是IE浏览器 } else { // Ensure firing before onload, maybe late but safe also for iframes // 绑定onreadystatechange以监听readyState的变化 document.attachEvent('onreadystatechange', completed); // A fallback to window.onload, that will always work window.attachEvent('onload', completed); // If IE and not a frame // continually check to see if the document is ready // 如果当前页面中没有frame，则持续检查是否可以调用doScroll方法以监听document是否加载完成 var top = false; try { top = window.frameElement == null && document.documentElement; } catch (e) {} if (top && top.doScroll) { (function doScrollCheck() { if (!jQuery.isReady) { try { // Use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ top.doScroll('left'); } catch (e) { return setTimeout(doScrollCheck, 50); } // detach all dom ready events detach(); // and execute any waiting functions jQuery.ready(); } })(); } } 4. completed 方法 # 在上面的方法中，不论是触发 DOMContentLoaded，还是 load，还是 onreadystatechange，都会执行 completed，那这个方法里都干了些什么呢？我们来看看。/** * The ready event handler and self cleanup method */ function completed() { // readyState === "complete" is good enough for us to call the dom ready in oldIE // 即使在老版IE下readyState === "complete"也足以说明DOM加载完成 if (document.addEventListener || event.type === 'load' || document.readyState === 'complete') { detach(); // 执行detach函数 jQuery.ready(); // 执行ready } } /** * Clean-up method for dom ready events */ // 从这个方法里可以看到，不论是先执行DOMContentLoaded还是先执行load，都会把两个事件同时解除掉，因此这两个事件最多只能触发一次；IE下同理 function detach() { if (document.addEventListener) { document.removeEventListener('DOMContentLoaded', completed, false); window.removeEventListener('load', completed, false); } else { document.detachEvent('onreadystatechange', completed); window.detachEvent('onload', completed); } } 看着写了挺多，其实还有很多没有说到点子上，只是写了一些自己的理解罢了！！

使用DOM中的a标签解析url 当我们想要解析当前页面的url时，可以使用window.location中提供的各种方法，比如一个页面的地址是这样的：http://www.xiabingbao.com：80/javascript/2015/11/28/javascript-a-parse-url/?from=google&v=1.2#hash 那么我们在当前页面下的js里，就可以这样获取url中的各个部分： window.location.href : 整个完整的url window.location.protocol : url的协议（http:或https:等），当前例子返回 http: window.location.host : url的主机地址，当前例子返回 www.xiabingbao.com window.location.port : url的端口号，若采用默认的80端口（即使手动添加），则返回空字符串，当前例子返回 "" window.location.pathname : url的路径部分，当前例子返回 /javascript/2015/11/28/javascript-a-parse-url/ window.location.search : url的查询参数部分（返回带有问号），当前例子返回 ?from=google&v=1.2 window.location.hash : url的锚点部分，当前例子返回 #hash 但是，如果分析的不是当前页面的地址，而是一个变量中的值，那我们应该怎么办呢？这里我们可以借助a标签来实现解析url的功能。// 创建一个额外的a标签 function parseURL(url) { var a = document.createElement('a'); a.href = url; return { source: url, protocol: a.protocol.replace(':',''), host: a.hostname, port: a.port, query: a.search, params: (function(){ var ret = {}, seg = a.search.replace(/^\?/,'').split('&'), len = seg.length, i = 0, s; for (;i

用js制作一个简单的明朝时间轴 不多说，先上 github 地址：ming_timeline。目前皇帝和事件的数据只弄了几个，后续会接着完善，也欢迎大家补充，^_^。这个项目没有使用什么高深的技术，就是用 html 拼接出来的。这个时间轴主要是由三部分组成： 时间刻度轴（公历） 皇帝在位轴（从某年到某年在位） 大事件轴（于某年发生某事） 1. 时间刻度轴 # 设置时间刻度轴需要设置两个变量：每个年份之间的像素距离（year_per）和每个大刻度之间的年数（year_degree）// 设置时间刻度 setYearLine : function(defaults){ var html = ''; for(var i=defaults.year_start; i 0) { this.scrollLeft = sleft - 100; // 滚动条向左移动 } else { this.scrollLeft = sleft + 100; // 滚动条向右移动 } }); 当然还有很多其他的内容需要添加上，比如各个派系，内阁首辅是谁等等，需要完善的地方还有很多。