js match 来点击切换图片
定义和用法
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 来点击切换图片的更多相关文章
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- 22.用demo通过点击切换图片路径
用demo通过点击切换图片路径 html: <img src="images/driving.png" class="driving"/> js: ...
- 利用DOM的方式点击切换图片及修改文字
本案例主要学习理解,用到的几个DOM方法 01.getAttribute()方法,获取元素的属性值 02.setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值 ...
- JS原生隐藏显示图片,点击切换图片的效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
- Android之点击切换图片
package com.example.SlidePictures; import java.util.Timer; import java.util.TimerTask; import com.ex ...
- Fragment 回退栈 传递参数,点击切换图片使用Fragment ListView
Fragment回退栈 类似与Android系统为Activity维护一个任务栈,我们也可以通过Activity维护一个回退栈来保存每次Fragment事务发生的变化. 如果你将Fragment任务 ...
- C# 使用PictureBox控件--点击切换图片
效果: 1. 2. 代码: private Boolean fals = true; /// <summary> /// 单击事件 /// </summary> /// < ...
- JS练习:切换图片
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- 根据日期切换图片KFX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 20.混合使用match和近似匹配实现召回率与精准度的平衡
主要知识点: 召回率的慨念 精准度的慨念 match和近似匹配混合使用方法 召回率(recall):比如你搜索一个java spark,总共有100个doc,能返回多少个doc作为结果 ...
- Maven学习总结(10)——使用Maven编译项目gbk的不可映射问题
Maven学习总结(十)--使用Maven编译项目gbk的不可映射问题 一.问题描述 今天在MyEclipse中使用Maven编译项目源代码时,结果如下了如下的错误 百思不得其解啊,java源代码在M ...
- cxf 和 httpclient 客户端调用 webservice 接口
一.cxf 生成 webservice 客户端 1.接口路径 http://ws.webxml.com.cn/WebServices/WeatherWS.asmx 2.进入你需要放置 webservi ...
- noip2013 Day2 T2 花匠 解题报告
题目: 3289 花匠 2013年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目描述 Description 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大, ...
- kendo Grid Unexpected number错误
这种用了自定义function来代替默认的就需要把所有的created,update等都替换掉,不能只替换部分
- [Cypress] Create a Single Custom Cypress Command from Multiple Commands
Cypress provides a straightforward API that allows you to define custom commands. In this lesson, we ...
- Android游戏框架Libgdx使用入门
转载自:http://blog.csdn.net/cping1982/article/details/6176191 Libgdx作者博客:http://www.badlogicgames.com/ ...
- Gevent的协程实现原理
之前之所以看greenlet的代码实现,主要就是想要看看gevent库的实现代码. .. 然后知道了gevent的协程是基于greenlet来实现的...所以就又先去看了看greenlet的实现... ...
- 64位oracle数据库用32位plsql developer无法连接问题(无法载入oci.dll)
在64位操作系统下安装oracle数据库,新下载了64位数据库(假设是32位数据库安装在64位的操作系统上,无论是client还是server端.都不要去选择C:\Program Files (x86 ...
- HTML文档基础
一.HTML(Hyper Text Markup Language超文本标记语言)是一种用来制作超文本文档的简单标记语言,HTML在正文的文本中编写各种标记,通过Web浏览器进行编译和运行才干正确显示 ...