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. lua程序设计 第一章习题答案

    练习1.1:运行阶乘的示例并观察,如果输入负数,程序会出现什么问题?试着修改代码来解决问题. 答:当输入负数时,循环无法终止,因为原本程序中的终止条件为n==0,而在输入为负数情况下,无法达成此终止条 ...

  2. spring中的BeanDefinitionRegistryPostProcessor

    spring中的BeanDefinitionRegistryPostProcessor是BeanFactoryPostProcessor的子接口,BeanFactoryPostProcessor的作用 ...

  3. Django--Form组件使用出现的小bug记录--username拿到None

    form过滤代码: class LoginForm(forms.Form): username = forms.CharField(max_length=20,min_length=3,label=' ...

  4. 生产环境中的 redis 是怎么部署的

    redis cluster,10 台机器,5 台机器部署了 redis 主实例,另外 5 台机器部署了 redis 的从实例,每个主实例挂了一个从实例,5 个节点对外提供读写服务,每个节点的读写高峰q ...

  5. [CF1146D]Frog Jumping_exgcd_堆优化dij

    Frog Jumping 题目链接:http://codeforces.com/contest/1146/problem/D 数据范围:略. 题解: 首先发现,如果$x\ge a +b$,那么所有的$ ...

  6. [转帖]tr命令的用法

    tr命令的用法 https://www.cnblogs.com/bingguoguo/articles/9188703.html tr命令   tr命令可以对来自标准输入的字符进行替换.压缩和删除.它 ...

  7. abstract class 与 interface

    abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制,正是由于这两种机制的存在,才赋予了Java强大的面向对象能力. abstract class和inte ...

  8. Windows Eclipse Scala的入门HelloWorld

    [学习笔记] Windows Eclipse Scala的入门HelloWorld 有关带scala版本的eclipse4.7的下载, 你可以直接去: http://scala-ide.org/dow ...

  9. python学习-4 python基础-2 条件语句（if的简单用法1）

    条件语句的原理: 2.举个例子:比大小 #!/usr/bin/env python # -*- coding:utf8 -*- a=input("请输入a:") b=input(& ...

  10. 内存溢出,内存泄漏,CPU溢出区别

    内存溢出 out of memory,就是你要的内存空间超过了系统实际分配给你的空间,此时系统相当于没法满足你的需求,就会报内存溢出的错误 内存泄漏是指你向系统申请分配内存进行使用(new),可是使用 ...