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. flask核心对象

    appcontext 上下文 处理

  2. tomcat8.5.37设置虚拟目录

    之前做的solr和tomcat是放在tomcat的webapps下 solr7.2.1+tomcat8.5.37+jdk8安装配置 现在就是放在其他,通过tomcat的server.xml配置虚拟目录 ...

  3. APUE ☞ 文件和目录

    粘着位(Sticky Bit) S_ISVTX位被称为粘着位.如果一个可执行程序文件的这一位被设置了,程序第一次运行完之后,程序的正文部分的一个副本仍被保存在交换区(程序的正文部分是机器指令).这使得 ...

  4. 幻数浅析（Magic Number）

    在源代码编写中,有这么一种情况:编码者在写源代码的时候,使用了一个数字,比如0x2123,0.021f等,他当时是明白这个数字的意思的,但是别的程序员看他的代码,可能很难理解,甚至,过了一段时间,代码 ...

  5. DS博客作业--07查找

    目录 DS博客作业--07查找 1.本周学习总结(0--2分) 1.思维导图 2.谈谈你对查找运算的认识及学习体会. 2.PTA实验作业(6分) 2.1.题目1:6-1 二叉搜索树的操作集 (30 分 ...

  6. HanLP分词工具中的ViterbiSegment分词流程

    本篇文章将重点讲解HanLP的ViterbiSegment分词器类,而不涉及感知机和条件随机场分词器,也不涉及基于字的分词器.因为这些分词器都不是我们在实践中常用的,而且ViterbiSegment也 ...

  7. Hadoop介绍与安装

    前言 最近想学习下大数据,有点急于求成,于是去网上找了各种培训机构的视频,发现大都质量不佳,理论基本不说或者简单讲下,然后教你照猫画虎的敲代码,出了问题都没法分析.最后还是找了厦门大学的公开课从理论开 ...

  8. win10现在安装redis

    一.下载: 下载地址: https://github.com/MicrosoftArchive/redis/releases 根据系统下载的版本:以(64位为例) 下载后一般解压到根目录下:如(E:\ ...

  9. Kubernetes---Pod重启策略

    PodSpec中有一个restartPolicy 字段,可能的值为Always.OnFailure和Never.默认为Always.restartPolicy 适用于Pod 中的所有容器.restar ...

  10. 剑指offer16：输入两个单调递增的链表，合成后的链表满足单调不减规则。

    1 题目描述 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 2 思路与方法 迭代法:两个链表中较小的头结点作为合并后头结点,之后依次合并两个链表中较小的 ...