Javascript DOM 笔记

HTML文档可以看成由各种 DOM 节点组成的文档树,例如:整篇文档是一个文档节点;第个标签都是一个元素节点;文本内容可以看成文本节点;标签属性是属性节点,甚至注释也是注释节点。

nodeType

元素节点的类型可以通过node.nodeType访问,例如:

document.nodeType           # 9

主要的节点类型如下所示:

Element Type Node Type
Element 1
Attribute 2
Text 3
Comment 8
Document 9

继续阅读

Browser detect 脚本分析

目前浏览器检测 (Browser detect) 一般有两种方法:

  • 基于userAgent的值的检测;
  • 基于对象的检测,即object detection;

而第一种方法,一般来说效果并不是非常理想,因为许多浏览器都允许用户更改userAgent的值,起因要追究于第一次浏览器大战(PPK on Javascript p57)。因此,这一类的检测都不是万能的,无论是基于navigator.userAgent还是navigator.vendor等,浏览器总有办法绕过这一层检测。

PPK 在他的一篇文章中提供的检测脚本其实也是基于navigator的,但是他在整个脚本的设计上非常细致,覆盖了许多细节,看了之后收获很大。首先使用了下ppk的检测脚本,博客首页右方检测浏览器的功能正是使用ppk的脚本。

例子

当时看脚本的时候还是有点迷糊,因为脑子里面对各个浏览器的userAgent内容非常模糊,其实自己就用过Firefox、Chrome、IE、Opera等几个浏览器,没试过Safari、Konqueror、iCab等等。回头看完了脚本,我就把自己电脑上有的浏览器的userAgent都看了一遍并列了出来:

Opera/9.80 (Windows NT 6.1; U; Edition IBIS; en) Presto/2.6.30 Version/10.60
Mozilla/5.0 (Windows NT 6.1; rv:2.0b8pre) Gecko/20101029 Firefox/4.0b8pre
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.7 (KHTML, like Gecko) Chrome/7.0.517.41 Safari/534.7
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; Tablet PC 2.0; AskTB5.6)

然后是脚本检测的结果分别是:

You're using Opera 9.8 on Windows !
You're using Firefox 4 on Windows !
You're using Chrome 7 on Windows !
You're using Explorer 9 on Windows !

继续阅读

博客侧栏显示文章目录

有些博客文章很长,像我又不喜欢给文章分页,这样一篇博客读下来鼠标要拖很久,读者比较难定位到关心的内容。解决这个问题有很多措施,一种是在文章拖到底部的时候显示一个返回顶部的按钮(做法参考博客添加回到顶部按钮),另外一种是做一个文章目录,这样就比较直观了。

TOC+插件

我之前用Table of Contents Plus插件来实现这个功能,这个插件设置还很多,我之所以选择它,是因为这个插件提供一个文章目录小工具,可以放到侧栏。其它同类的插件或者实现,都是把目录显示在文章内部,比如开头或者结尾,但是在阅读过程中,这其实还是跟没有一样。

继续阅读

CopyBetter: 增强复制扩展

CopyBetter 是我自己写的第一个Chrome扩展,可能有许多不足的地方,如果用到该扩展的同学遇到问题可以在此留言。

对Chrome的扩展开发一直比较感兴趣,春节前给自己定制了一个扩展开发的计划,扩展的主题是增强复制的功能,参考了Copy FixerAutocopy两个扩展。我把这个计划记录在为知笔记上,有段时间还一直在思考这个扩展怎么写。我觉得这个方法挺好的,写的过程中有目标

Google Chrome Web Store下载地址 | 源代码浏览

CopyBetter 描述

本扩展的目标是增强原生的扩展功能,目前有以下功能点:
继续阅读

恢复复制功能脚本

有些网站(例如起点等)为了版权问题而禁用了右键复制的功能,甚至替换了右键菜单(例如起点),这个脚本的作用就是为了重新恢复禁用的复制功能(当然可以扩展其它功能,比如恢复右键菜单)。这个脚本的初衷是,我在准备驾校理论考的时候,在tieba.jxydt.com查找信息并且做笔记的时候,却发现该网站禁用了复制功能,那时候非常无奈,就开始动手写这个脚本,后来为了考虑一些扩展性,添加、封装了一些代码。

总体来说,这个脚本的扩展性还是可以的。可以非常方便的添加更多需要恢复复制功能的网站,但是我个人不是非常满意,觉得有些地方代码有点臃肿了。当然后期的进一步完善,还是需要更多朋友提供建议和反馈。脚本目前支持Firefox和Chrome,其它浏览器未测试。

最新版的代码可以在UserScripts.org下载:地址

原理很简单,无非是找到相关的页面元素,删除或者替换与复制相关的事件,例如oncopy/onselectstart/oncontextmenu/onmousedown等等。如果有一点JavaScript代码的基础,可以参考脚本中已有的网站支持的代码添加新站点支持。不然你可以在这里留言,我会帮你添加。

继续阅读

博客添加回到顶部按钮

博客的文章往往篇幅比较长,如果访客要访问博客的其它文章(例如通过侧栏的Widgets访问相关的文章)就需要滚动鼠标,移动到页面的头部。比较人性的一个设计是,在页面的底部(或者中靠近下的位置)添加一个“回到页面顶部”的按钮,可以快速定位到文章的顶部位置。

这个功能设计起来不难,可以采用如一文中提到的锚链接形式,例如回到顶部按钮是一个链接:

<a href="#top">Top</a>

将其放到页面底部,点击该链接可以直接定位到页面顶部。但是如果我们不希望用链接来实现呢,而是模拟一个按钮(用span),并且希望按下回到顶部按钮的时候,可以比较平滑地回到顶部,那该怎么做呢?代码非常简单,这里只用到些许的CSS样式以及jQuery代码。

首先在在文章页面body底部添加以下代码(index.php或者single.php):

<span id="back-to-top">Top</span>

为了方便起见,以上按钮的代码在jQuery中创建添加,不需要手动去修改php文件。同时,利用jQuery完成按钮的行为,主要通过监听window的onscroll事件,当滚动距页面顶部超过100px的时候,淡入显示按钮。当滚动距页面顶部少于100px的时候,淡出隐藏按钮。使用jQuery的animate函数,可以实现平滑地滚动效果(利用document.body或者document.documentElement的scrollTop属性完成动画效果)。

添加的jQuery代码如下所示:

/* Add a back to top button */
function back_to_top()
{
    /* Cache back-to-top button object */
    var $top = $('<span id="back-to-top">Top</span>').appendTo('body');

    /* Cross-browser compatible in scrollTop */
    var $body = (!window.opera) ? $('html, body') : (document.compatMode == 'CSS1Compat'
        ? $('html') : $('body'));

    if ($top.length == 0)
         return;
 
    /* Hide back-to-top button at first */
    $top.hide();
 
    /* Fade in back-to-top button when need */
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $top.fadeIn();
        } else {
            $top.fadeOut();
        }
    });
 
    /* Scroll to top when click back-to-top button */
    $top.click(function () {
        $body.animate({ scrollTop: 0 }, 800);
    });
}

back_to_top();

同时在博客样式(style.css)中添加以下自定义的样式内容:

#back-to-top {
    background-color: #F5F5F5;
    bottom: 0;
    box-shadow: 0 0 6px #808080;
    color: #444444;
    padding: 5px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
}

这里将按钮固定定位到(position: fixed)页面右下角,并且添加边框阴影等效果。

最后附上一段区分外部链接的代码片断(摘自Learning jQuery 3rd edition)

    /* Add tag next to the external link */
    $('.column .post-entry a').not(':has(img)').filter(function() {
        return this.hostname && this.hostname != location.hostname;
    }).addClass('external').attr('target', '_blank');

JavaScript 最佳实践

原文链接:http://www.javascripttoolbox.com/bestpractices/
翻译声明:非逐句逐字翻译,若有翻译不当,纯属搞笑。
翻译状态:未完成

介绍

这篇文档是一份清单,它罗列了一系列开发JavaScript代码的最佳的编程实践和首选的编程方法。文档中的每条内容都基于JavaScript社区中众多开发者的意见和经验总结而来。但是,这些条款仅仅是一些建议,而并非需要绝对遵守的原则,一些经验丰富的开发者对于以下描述的内容,可能会持有些许不同的意见。

始终使用var关键字

JavaScript中变量只有两种作用域范围:全局作用域和函数作用域, 使用var关键字对于保持变量作用域清晰是至关重要的。当声明一个变量作为全局变量或者函数级的变量(译者注:函数内部声明的变量,也就是在函数内部的局部变量), 始终在声明的最前面添加var关键字。下面的例子强调不使用var关键字会造成的潜在问题:

不使用var造成的问题

var i=0; // 正确:通过声明创建了一个全局变量
function test() {
   for (i=0; i<10; i++) {
      alert("Hello World!");
   }
}
test();
alert(i); // 警告:全局变量i的当前值为10

继续阅读

Remove Google Redirection

This user script has been published on UserScripts.org for near one year, which is made to prohibit click-tracking and prevent redirection in the Google search results. I'm very surprised by so many downloads in UserScripts.org, about 6,805 times. I think many people really need this function provided by this script. So I have decided to update it since last update about three months ago.

What and Why

You can read this blog “Block Google from Click Tracking Web Search Results” for more information about "what is click-tracking and how it track user click event".

Sometimes click-tracking and URL redirection are very annoying, especially when Google is not well accessible for some reason. In this case, we need a method to remove this, so we can directly visit the original site URL rather than indirectly through Google.

Support and Feedback

Because of some technical reasons, the previous versions didn't support very well when Instant Search is on. And the Google search URLs were not listed completely in the @include metablock of UserScript. Now this script support both instant on and instant off search, and I added the missing URLs in the @include. You can add your favorite Google search URLs as you like.

继续阅读