JQ版

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

    </script>

    <script>

        $(document).ready(function () {

            $("p").click(function () {

                $(this).hide();

            });

        });

    </script>

</head>

<body>

    <p>如果你点我，我就会消失。</p>

    <p>继续点我!</p>

    <p>接着点我!</p>

</body>

</html>

JS版

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>菜鸟教程(runoob.com)</title>

</head>

<body>

    <p>如果你点我，我就会消失。</p>

    <p>继续点我!</p>

    <p>接着点我!</p>

    <script>

        // 使用原生js 实现点击消失效果

        window.onload = function () {

            var ppp = document.getElementsByTagName("p");

            console.log(ppp)

            if (ppp.length > 0) {

                for (var i = 0; i < ppp.length; i++) {

                    console.log(ppp[i])

                    ppp[i].addEventListener("click", function () {

                        this.hidden = true;

                    });

                }

            }

        }

    </script>

</body>

</html>

有时间再详细说一下js的事件冒泡和事件捕获。

使用原生js 实现点击消失效果的更多相关文章

  1. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  2. 利用tween，使用原生js实现模块回弹动画效果

    最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...

  3. 原生JS实现幻灯片轮播效果

    在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...

  4. 原生js简单实现拖拽效果

    实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...

  5. 原生 js 实现点击按钮复制文本

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...

  6. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  7. 第54天：原生js实现轮播图效果

    一.轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片. 二.Html布局 首先父容器containe ...

  8. 原生JS 实现点击按钮创建元素

    要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外 思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...

  9. 原生js写轮播图效果

    <script> var picarr=[ "pic/lb1.jpg", "pic/lb2.jpg", "pic/lb3.jpg" ...

随机推荐

  1. 解决从github上下载代码仓库慢的问题

    一,打开命令提示符,最好之前准备一个仓库地址,这样下载下来的文件方便查看,这里打开你想要的下载根目录,进行下载. github上下载代码仓库慢的问题"> 二:复制代码仓库的地址 三:右 ...

  2. [CF261E]Maxim and Calculator_搜索_欧拉筛素数_动态规划

    Maxim and Calculator 题目链接:https://www.luogu.org/problem/CF261E 数据范围:略. 题解: 考试的时候只会暴力,学弟太强了$\%\%\% Or ...

  3. JAVA日常之四

    构造函数 又称“构建器”,函数名称与类名称完全相同,无返回值. 每个类都有构造函数. 可以自定义构造函数,并且可以创建多个重载/过载的构造函数. 若没有手动创建该函数,总会存在一个默认的构造函数(无参 ...

  4. JSP和Servlet异常处理转发

    <error-page> <!-- 指明异常类型. --> <exception-type>java.lang.ArrayIndexOutOfBoundsExcep ...

  5. python查询neo4j的数据以字典的方式返回数据

    在使用python操作neo4j的时候,如果查询的数据比较多,结构比较复杂的时候,返回的数据量会比较大,而且信息比较多,并且不唯一.所以写了该方法,用于查询比较复杂的数据. def query_gra ...

  6. java中讲讲PrintWriter的用法，举例？

    [学习笔记] 1.2 PrintWriter的用法 PrintWriter和PrintStream类似,只不过PrintStream是针对字节流的,而PrintWriter是针对字符流的. 例:1.2 ...

  7. npm—入门指导

    npm npm是什么? NPM(node package manager),通常称为node包管理器.顾名思义,它的主要功能就是管理node包,包括:安装.卸载.更新.查看.搜索.发布等. npm的背 ...

  8. Codeforces 1247D. Power Products

    传送门 要满足存在 $x$ ,使得 $a_i \cdot a_j = x^k$ 那么充分必要条件就是 $a_i \cdot a_j$ 质因数分解后每个质因数的次幂都要为 $k$ 的倍数 证明显然 设 ...

  9. HTML form表单中action的正确写法

    我的Java Web Application的context是myweb,即http://localhost:8080/myweb/index.jsp是欢迎页. 现在我的一个Controller的映射 ...

  10. 服务返回的json数据过大，nginx无法返回给client

    现象:请求同样的服务器,N多个接口中,只有一个接口未返回:从日志看,请求已到后端服务,并返回 解决方案:配置nginx缓冲大小 ###Nginx的缓冲区的大小 proxy_buffer_size 5m ...