文档章节

简易仿浏览器F12,鼠标获取页面元素功能

路程
 路程
发布于 2018/06/02 09:49
字数 155
阅读 48
收藏 0

<!doctype html>
<html id="html">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
</head>
<body id="body" style="cursor:default;">
<div id="xyzId" name="xyzName" class="xyzClass">
    test div id
</div>

<div id="xyzId" name="xyzName" class="xyzClass">
    test div id
</div>

<div id="xyzId" name="xyzName" class="xyzClass">
    test div id
</div>

<div id="xyzId" name="xyzName" class="xyzClass">
    test div id
</div>

<script type="text/javascript">
    $(function(){
    
        $("*").click(function(e){
            var v = $(e.target);
            
            var cv = $(v).context;
            
            var id = $(cv).attr("id");
            var name = $(cv).attr("name");;
            
            console.log(id+"---"+name);
            
            
            var parentEls = $(v).parents()
            .map(function () { 
                  
                  console.log(this.id+"---");

                });
            
            
            e.stopPropagation();
            
        }).mouseover(function(e){
            
            var v = $(e.target);
            $("*").css("border","none")
            $(v).css("border","solid 1px blue")
            
        });
    })
</script>
</body>
</html>

© 著作权归作者所有

路程

路程

粉丝 4
博文 10
码字总数 4054
作品 0
西安
程序员
私信 提问
[译]15个关于Chrome的开发必备小技巧

摘要: 谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器。最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具。例如,在线编辑CSS,console...

姬子玉
2017/11/30
0
0
如何使用浏览器查看页面源码-快速拿到页面定位元素

查看页面源码,不同浏览器会有不同的查看方法。 一、“谷歌”浏览器,查看页面源码的方法,比较准确,可以移动鼠标来准确定位元素。 查看方法如下: 1.1 进入要测试的系统页面,光标定位到要...

金龙鱼管家
2016/12/19
356
0
前端开源项目周报0418

由OpenDigg 出品的前端开源项目周报第十七期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具等。 reactxp 跨平台应...

OpenDigg
2017/04/19
0
0
Yahoo UI库--YUI

Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证 ...

匿名
2008/09/05
131.6K
5
[python爬虫] 爬取图片无法打开或已损坏的简单探讨

本文主要针对python使用urlretrieve或urlopen下载百度、搜狗、googto(谷歌镜像)等图片时,出现"无法打开图片或已损坏"的问题,作者对它进行简单的探讨。同时,作者将进一步帮你巩固seleniu...

Eastmount
2015/12/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux使用源码包安装软件

前言: 最近整理一些以前的学习笔记。 过去都是存储在本地,此次传到网络留待备用。 源码包 Linux软件多数免费、开源,是开发人员编写的,具有很强可读性的一组相关代码文本。 源码包 --> 编...

迷失De挣扎
今天
2
0
IPv4如何转换为IPv6?

ipv6已经逐渐在应用,现在已经有很多的运营商支持ipv6,前天我们也发布了如何让电脑使用ipv6地址?有很多朋友在问?ipv6有什么作用,它的表示方式是什么,今天我们来一起来详细了解下ipv6相关计...

xiangyunyan
今天
3
0
小白讲网络安全系列

注入攻击防护 XSS注入 SQL注入 命令注入 文件上传 文件解压缩 CSRF防护 对称加密 非对称加密 数字证书 数字签名 完整性校验 消息验证码 单向散列Hash函数 口令单向加密算法 审计日志 认证鉴权...

一刀
今天
2
0
MYSQL 嵌套事务(SAVEPOINT) 与Spring 事务传播

摘要 savepoint 关键字可以实现嵌套事务。结合savepoint关键字,更方便理解spring的事务传播。 事务嵌套 初始化表脚本 drop table t;create table t(a int, primary key(a)); 开启事务 my...

liangxiao
今天
4
0
Chrome OS 更新新版本可让Linux访问USB连接的Android设备

谷歌再次为Chrome OS带来了重大版本更新,使版本号达到了75。本次更新的一大亮点就是允许在Chrome OS上运行的Linux能够识别通过USB方式连接的Android设备,能够让用户使用Linux进行调试等等。...

linuxCool
昨天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部