得到网页中选择的元素的xpath或者jQuery的选择器

某些时候，利用jquery选择器、xpath、xQuery查询DOM节点非常的方便，然而我们有了DOM节点想得到xpath等就要很麻烦。

这里我写了一个jQuery的小插件，供大家使用。 当然刚刚写完，有些bug或者功能没实现，大家可以找我修改或者自己修改。

用法其实很简单：

 

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-pathFinder-1.0.7.js"></script>
<script type="text/javascript">  
    $(document).click(function(e){
         e=e||window.event;
         var target=e.target||e.srcElement;
         var path = $(target).getQuery({
             type: 'xpath',        //生成类型:  'xpath' or 'selector', 默认是'xpath'
             preferenceAttr: 'class', // 属性偏好: 'id' or 'class', 默认是id
             highLight : true, //选择的元素是否高亮显示, 默认是true
             bgColor: 'yellow',        //背景色, 默认是'yellow'
             border:'yellow 1px solid',//边框, 默认是'yellow 1px solid'
             expansion: 3,//扩大边框, 默认是3
             fullPath: false //是否是全路径, 默认是false
         });
         alert(path);
         return false;
     });
</script>

 

 

下面是插件的代码jquery-pathFinder-1.0.7.js

 

/*!
 * jQuery xpathFinder v1.0.7
 * http://www.xuriyunhai.com/
 *
 * Copyright 2011, xuriyunhai
 * GPL Version 2 licenses.
 *
 * Date: Thu Sep 3 23:17:53 2011
 */
(function($){
        $.fn.getQuery = function(options){
                o = $.extend({
                        type: 'xpath',        //生成类型  'xpath' or 'selector'
                        highLight : true, //选择的元素是否高亮显示
                        fullPath : false, //是否是全路径
                        preferenceAttr: 'id', //属性偏好 'id' or 'class'
                        bgColor: 'yellow',        //背景色
                        border:'yellow 1px solid',//边框
                        expansion: 3,//扩大边框
                }, options||{});
                if(o.highLight){
                        this.highLight(o);
                }
                
                var path = getPath(this, '');
                selector = path.replaceAll('/', '>').replaceAll('\\[', ':eq(').replaceAll('\\]', ')').replaceAll('\\:eq\\(\\@', '[').replaceAll('\'\\)', '\']');
                query = '/' + path;
                if(!o.fullPath){
                        query = '/' + query;
                }
                if(o.type=='selector'){
                        return selector;
                } else {
                        return query;
                }
        }

        this.getXpath = function(){
                return query;
        }

        this.getSelector = function(){
                return selector;
        }

        $.fn.highLight = function (options){
                op = $.extend({
                        bgColor: 'yellow',        //背景色
                        border:'yellow 1px solid',//边框
                        expansion: 3,//扩大边框
                }, options||{});
                $('body').append("<div id='abs-box' class='abs'> </div>");
                $('head').append("<style>.abs{position:absolute;zoom:1;pointer-events:none;z-index:-1;}</style>");
                var div = $('#abs-box');
                if(div != this){
                        var pos=this.offset(), em = op.expansion;
                        div.css({'left':pos.left-em,'top':pos.top-em,'width':this.width()+2*em,'height':this.height()+2*em});
                        div.css({'background-color':op.bgColor, 'border':op.border});
                }
        }
                
        function getPath (e, path){
                var tn = e.get(0).tagName;
                if(isNullOrEmpty(e) || isNullOrEmpty(tn)){
                        return path;
                }
                var attr = getAttr(e);
                tn = tn.toLowerCase() + attr;
                path = isNullOrEmpty(path) ? tn : tn + "/" + path;
                var parentE = e.parent();
                if(isNullOrEmpty(parentE) || (!o.fullPath && attr.substring(0, 5) == '[@id=')){
                        return path;
                }
                return getPath(parentE, path);
        }

        function getAttr (e){
                var tn = e.get(0).tagName;
                var id = e.attr('id'), clazz = e.attr('class');
                var hasId = !isNullOrEmpty(id), hasClazz = !isNullOrEmpty(clazz);
                id = "[@id='" + id + "']";
                clazz = "[@class='" + clazz + "']";
                if(hasId && hasClazz){
                        if(o.preferenceAttr.toLowerCase() == 'class'){
                                return clazz;
                        } else {
                                return id;
                        }
                } else if(hasId && !hasClazz) {
                        return id;
                } else if(!hasId && hasClazz) {
                        return clazz;
                } else {
                        if(e.siblings(tn).size() > 0) {
                                var i = e.prevAll(tn).size();
                                if(o.type=='xpath'){
                                        i++;
                                }
                                return '[' + i + ']';
                        } else {
                                return '';
                        }
                }
        }

        function isNullOrEmpty (o){
                return null==o || 'null'==o || ''==o || undefined==o;
        }

})(jQuery);

String.prototype.replaceAll = function(regx,t){   
        return this.replace(new RegExp(regx,'gm'),t);   
};

 

 

总结一下，jQuery用法很简单，这里就不在累赘。它有一些函数式编程的思想，大家有空可以多多关注函数式编程，相对于命令式的编程思想，函数式编程有它独特的一面。

当今运行在JVM上语言有很多种， 有动态的（JRuby、Jython、Clojure、JavaFX、IBM的NetRexx、Groovy等），有静态的（Scala、Fantom等）。

这里给大家推荐的是--Scala，这是一种函数式编程和命令式编程相结合的、代码密度非常高的、可以和Java类库很方便交互的一门简洁的运行在JVM上的静态语言。

如果大家已经厌倦了Java的繁琐，又想有跨平台的特性，来吧，Scala将会给你耳目一新的感觉。