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. PHP新特性

    1.太空船操作符<=> 2.变量类型限定 3.$a = $b??$c 4.常量数组,define($arr,['a','b']) 5.namespace批量导入 等等

  2. hdoj1561 The more, The Better （树形dp，分组背包）

    题目链接:https://vjudge.net/problem/HDU-1561 题意:给一个森林,每个结点有个权值,求选m个结点的最大权值和,并且选子结点前必须先选父结点. 思路: 把每颗树的树根连 ...

  3. 【转帖】Webmin 安装 (centos7 rpm 方式)

    https://www.cnblogs.com/osfipin/p/5948803.html 这两天公众号都在手这个小工具, 今天早上试了下 挺好用的 还看到了启动 samba 的方法. 一会儿 再学 ...

  4. Kettle无法打开文件资源库

    问题: Kettle无法打开文件资源库. 问题描述: 新建文件资源库之后,资源库路径中有中文路径.退出kettle之后,再次进去发现没有了右上角的connect按钮了. 原因: kettle的repo ...

  5. QT QcustomPlot的使用（二）

    在QcustomPlot中,给横纵坐标添加箭头的方法 //在末尾添加箭头 customPlot->xAxis->setUpperEnding(QCPLineEnding::esSpikeA ...

  6. oracle多表关联删除的两种方法

    oracle多表关联删除的两种方法 第一种使用exists方法 delete from tableA where exits ( select 1 from tableB Where tableA.i ...

  7. MyBatis 源码篇-整体架构

    MyBatis 的整体架构分为三层, 分别是基础支持层.核心处理层和接口层,如下图所示. 基础支持层 反射模块 该模块对 Java 原生的反射进行了良好的封装,提供了更加简洁易用的 API ,方便上层 ...

  8. Path.Combine(

    // 获取程序的基目录. var dir1 = System.AppDomain.CurrentDomain.BaseDirectory; // 获取模块的完整路径. var dir2 = Syste ...

  9. hdu 1113 简单字符处理问题

    #include <map> #include <cstdio> #include <iostream> #include <string> #incl ...

  10. vue 安装插件

    import VueClipboard from 'vue-clipboard2' import MessagePlugin from '../message' import * as filters ...