文章分类:前端开发

656 阅读 3 评论

Javascript判断浏览器及版本

在实际应用中,往往我们需要判断浏览器的类型从而对它们对应的操作。

通过翻阅书籍和研究js框架,提供一个小巧的函数判断。

function uaMatch() {
    var ua = window.navigator.userAgent.toLowerCase();

    var browser = {
        ie: false,
        firefox: false,
        safari: false,
        opera: false,
        chrome: false,
        
        gecko: false,
        webkit: false,
        
        version: null
    };
    
    if(window.opera) {
        browser.version = window.opera.version();
        browser.opera = true;
    } else {
        var match = /(chrome)[ \/]([\w.]+)/.exec(ua) ||
            /(webkit)[ \/]([\w.]+)/.exec(ua) ||
            /ms(ie)\s([\w.]+)/.exec(ua) ||
            /(firefox)[ \/]([\w.]+)/.exec(ua) ||
            [];
        
        if(match[1]) browser[match[1]] = true;
        browser.version = match[2] || "0";
        
        if(browser.webkit) {
            browser.safari = true;
            var safariMatch = /version\/([\w.]+)/.exec(ua);
            browser.version = safariMatch[1] || "0";
        }
        if(browser.chrome) browser.webkit = true;
        if(browser.firefox) browser.gecko = true;
    }
    
    return browser;
};

var browser = uaMatch();

阅读全文...

406 阅读 2 评论

JavaScript nodeType Mark

最近在写原生的Javascript,经常会因为取到的节点类型不对而导致下面的执行JS报错。这时候一个判断是很有必要的。

众观jQuery的源码,有一个属性在各种场合都会使用的。那就是nodeType,这个属性很好的告诉我们当前节点类型。

下面是nodeType对应的值和代表的东东:

1- ELEMENT

2- ATTRIBUTE

3- TEXT

4- CDATA

阅读全文...

4802 阅读 12 评论

轻量级日期选择器 Pikaday

相信大家在使用日期插件的时候首先就想到 My97datepicker,他是一个强大的日期选择器,那相对老旧的样式和用起来有点重的感觉让我不太愿意选他。

今天无意中发现了一个外国人写的轻量级日期插件 Pikaday 符合我的要求。

他的演示地址:http://dbushell.com/2012/10/09/pikaday-javascript-datepicker/


很显然,如果用在日常项目的话,老外的东西还是不太符合国情,我做出了几点修改。

阅读全文...

368 阅读 0 评论

高亮插件 Prettify

很多人要我公布一下自己的高亮代码,觉得他复制不会带序号挺好。在这里说一下原因。

我用的google的prettify,这个优点的简单,小清新,但是功能也太弱了点,但够用就行嘛。

至于那个序号,我是通过Css写出来的,也就是浏览器自带标签的 ol 的 list-style 样式。

list-style-type: decimal;

还有那个隔开,是通过Css3写的,利用了内阴影的原理。

-webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;
-moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; 
box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0;

后台调用时候只要在下面这个标签里面就可以自动转化,别忘了前台载入插件。

<pre class="prettyprint linenums lang-css">XXXXX</pre>

插件下载:prettify.zip

阅读全文...

1390 阅读 4 评论

Javascript 简单选择器实现

当我们在使用jQuery的选择器的时候,是不是很感慨他的强大。

当我们只用原生js的时候,是不是觉得遍历一个class的节点都是那么的艰辛。

在此写一个js的选择题给大家分享下,实际上现在我就需要用到。。。

演示demo:http://www.travisup.com/demo/plugins/tquery/demo.html

JS代码如下:

阅读全文...