定义和用法

  match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

  该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

 返回值

    成功: ["on", index: 66, input: "http://127.0.0.1:8020/js/%E8%8F%9C%E9%B8%9F%E6%95%99%E7%A8%8B/img/on.png"]

失败: null

具体实现

   html:

    <img src="./img/on.png" id="change" onclick="changeImg()" />

  

  js:

    function changeImg(){
      var element = document.getElementById("change");
      if(element.src.match("on")){
        element.src = "./img/off.png";
      }else{
        element.src = "./img/on.png";
      }
    }

结果

  点击后

总结

  match() 方法将检索字符串 stringObject,以找到一个或多个与 regexp 匹配的文本。

js match 来点击切换图片的更多相关文章

  1. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  2. 22.用demo通过点击切换图片路径

    用demo通过点击切换图片路径 html: <img src="images/driving.png" class="driving"/> js: ...

  3. 利用DOM的方式点击切换图片及修改文字

    本案例主要学习理解,用到的几个DOM方法 01.getAttribute()方法,获取元素的属性值 02.setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值 ...

  4. JS原生隐藏显示图片,点击切换图片的效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...

  5. Android之点击切换图片

    package com.example.SlidePictures; import java.util.Timer; import java.util.TimerTask; import com.ex ...

  6. Fragment 回退栈 传递参数,点击切换图片使用Fragment ListView

    Fragment回退栈  类似与Android系统为Activity维护一个任务栈,我们也可以通过Activity维护一个回退栈来保存每次Fragment事务发生的变化. 如果你将Fragment任务 ...

  7. C# 使用PictureBox控件--点击切换图片

    效果: 1. 2. 代码: private Boolean fals = true; /// <summary> /// 单击事件 /// </summary> /// < ...

  8. JS练习:切换图片

    代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...

  9. 根据日期切换图片KFX

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. (蓝桥杯)第八届A组C/C++跳蚱蜢

    #include<iostream> #include<memory.h> #include<stack> #include<string> #incl ...

  2. (39.3) Spring Boot Shiro权限管理【从零开始学Spring Boot】

    在学习此小节之前您可能还需要学习: (39.1) Spring Boot Shiro权限管理[从零开始学Spring Boot] http://412887952-qq-com.iteye.com/b ...

  3. springCloud学习-分布式配置中心(Spring Cloud Config)

    1.简介 Spring Cloud Config :分布式配置中心,方便服务配置文件统一管理,它支持配置服务放在配置服务的内存中(即本地),也支持放在远程Git仓库中.在spring cloud co ...

  4. 洛谷——P2871 [USACO07DEC]手链Charm Bracelet

    https://www.luogu.org/problem/show?pid=2871 题目描述 Bessie has gone to the mall's jewelry store and spi ...

  5. N天学习一个linux命令之xargs

    用途 标准输入流读取参数(空格或者换行符分隔),传递给需要执行的命令 用法 xargs [options] [command [initial-arguments]] 常用选项 --arg-file= ...

  6. Bitnami LNMP集成包安装简单总结

    前言发送图文消息时间点,访问量大,请求并发多,业务web机处理不过来,新增加了2台web机应对.搞过Linux软件安装的都知道,各种库的依赖会把人搞崩溃,尤其是服务器不能访问外网的情况下,会非常的蛋疼 ...

  7. NPM 3 Beta为Windows用户带来利好消息

    本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2015/06/angular-2-react-native-roadmap 近日,np ...

  8. java常见的面试题

    1. super()与this()的差别? super和this的差别: 1)super(參数):调用基类中的某一个构造函数(应该为构造函数中的第一条语句) 2)this(參数):调用本类中还有一种形 ...

  9. VMware Workstation 集群仲裁磁盘和数据共享磁盘的创建

    近期项目须要对SQL Server建立集群服务,多个SQL Server数据库建立集群服务,对外提供唯一的URL訪问地址.当主节点断电.断网后,通过心跳线将消息传递到备用节点.备用节点在3秒内接管数据 ...

  10. 使用Genymotion无法连接网络设置代理

    A.) Genymotion 的 Proxy 设置 , 在Android的设置 -> 无线网络 -> Wi-Fi 之中 1.) 在 设置 -> 无线网络 -> Wi-Fi 里面 ...