某些时候,利用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将会给你耳目一新的感觉。
相关推荐
我们根据实例来解释JQuery选择器(selectors)中xpath几种常用的用法
jQuery选择器:jQuery的Document元素选择 1。 从$开始 2。xpath+css 3。常用自定义选择器
JQuery选择器,xpath类型等的选择器
jQuery允许开发者使用从CSS1到CSS3... jQuery选择器类型 jQuery选择器主要分为四类: 1、基本选择器 2、层次选择器 3、过滤选择器 4、表单选择器 由于过滤选择器内容比较多,因此本文仅介绍前两种,下篇文章将介绍后两
去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第...
去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第...
。
。
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...
jQuery 元素选择器和属性选择器允许您...jQuery 属性选择器 :jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $(“[href]”) 选取所有带有 href 属性的元素。 $(“[href=’#’]”) 选取所有带有 href 值等于
jQuery 获取路径 在某些特定情况下,您可能希望以独特的方式识别 HTML 元素 - 使用 jQuery Selector 或 XPath - 以便在另一个浏览器 - 不同的 DOM - (例如:访问者鼠标和键盘实时监控)中选择它。用法 $('body')....
本文实例讲述了jQuery选择器用法。分享给大家供大家参考,具体如下: jQuery 使用两种方式来选择 html 的 element,第一种使用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$(“div > ul a”...
jQuery 1.1.3(2007年7月):这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始,jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。 jQuery 1.2(2007年9月):...
prototype: var element = $(‘eleId’) jquery: var element = $(‘#eleId’) DOM: var element = document.getElementById(‘eleId’) 以上三种选择方式是等价的,相比prototype来说jquery多了个#号 ...
2.1 DOM 2.2 工厂函数$() 2.3 CSS选择符 2.4 XPath选择符 2.5 自定义选择符 2.6 DOM遍历方法 2.7 访问DOM元素 2.8 小结第3章 事件——扣动扳机 3.1 在页面加载后执行任务 3.1.1 代码执行的时机选择 ...
上边的效果是点击文档中所有a标签时将弹出对话框,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$...
JQuery优点 ◦体积小(v1.2.3 15kb) ◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器(IE6,FF,Safari,Opera) ◦链式代码 ◦强大的事件、样式支持 ◦强大的AJAX功能 ◦易于扩展,插件丰富 jQuery的构造函数接收四种...
jQuery构造函数 JQuery优点 ◦体积小(v1.2.3 15kb) ◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器(IE6,FF,Safari,Opera) ◦链式代码 ◦强大的事件、样式支持 ◦强大的AJAX功能 ◦易于扩展,插件丰富 jQuery的...