1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"> 5 </script> 6 <script> 7 8 function readXPath(element) { 9 if (element.id! == ""){//判断id属性,如果这个元素有id,则显 示//*[@id="xPath"] 形式内容 10 return ‘//*[@id=\"‘+element.id+‘\"]‘; 11 } 12 13 if (element.getAttribute("class")! == null){ //判断class属性,如果这个元素有class,则显 示//*[@class="xPath"] 形式内容 14 return ‘//*[@class=\"‘+element.getAttribute("class")+‘\"]‘; 15 } 16 //因为Xpath属性不止id和class,所以还可以更具class形式添加属性 17 18 //这里需要需要主要字符串转译问题 19 20 21 if (element == document.body){//递归到body处,结束递归 22 return ‘/html/‘+element.tagName.toLowerCase(); 23 } 24 26 var ix= 0,//在nodelist中的位置,且每次点击初始化 27 siblings= element.parentNode.childNodes;//同级的子元素 28 29 for (var i= 0,l=siblings.length; i<l; i++) { 30 var sibling = siblings[i]; 31 if (sibling == element){//如果这个元素是siblings数组中的元素,则执行递归操作 32 return arguments.callee(element.parentNode)+‘/‘+element.tagName.toLowerCase()+((ix+1)==1?‘‘:‘[‘+(ix+1)+‘]‘);//ix+1是因为xpath是从1开始计数的,element.tagName+((ix+1)==1?‘‘:‘[‘+(ix+1)+‘]‘)三元运算符,如果是第一个则不显示,从2开始显示 33 }else if(sibling.nodeType == 1 && sibling.tagName == element.tagName){//如果不符合,判断是否是element元素,并且是否是相同元素,如果是相同的就开始累加 34 ix++; 35 } 36 } 37 }; 38 39 $(document).ready(function () { 40 var xpath = ‘‘, o; 41 $(‘*‘).click(function (e) { 42 e.stopPropagation();//停止冒泡 43 o = this; 44 alert(readXPath(o)); 45 }); 46 }); 47 48 </script> 49 </head> 50 <body> 51 <p>如果您点击我,我会消失。</p> 52 <p>点击我,我会消失。</p> 53 <p>也要点击我哦。</p> 54 </body> 55 </html>
时间: 2024-11-05 22:46:56