jQuery动态移除和添加背景图片的方法详解


Posted in Javascript onMarch 07, 2017

本文实例讲述了jQuery动态移除和添加背景图片的方法。分享给大家供大家参考,具体如下:

利用jQuery移除和添加图片

1、样式

<style type="text/css">
  .changeImage{
     background:url(images/right.png) no-repeat center;
  }
</style>

2、JS

(1)在改变标签的样式,需要移除之前添加的样式

$("#tab tr").find("td").removeClass("changeImage");

(2)添加样式

$("#tab tr").find("td").addClass("changeImage");

附:完整示例demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery移除和添加图片</title>
<script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
<style type="text/css">
.changeImage{
 background:url(images/arrow1.gif) no-repeat center;
}
</style>
<script>
function removeimg(){
$("#tab tr").find("td").removeClass("changeImage");
}
function addimg(){
$("#tab tr").find("td").addClass("changeImage");
}
</script>
</head>
<body>
  <table border=1 id="tab">
  <tr><td>年</td><td>制造商</td><td>型号</td><td>说明</td><td>价值</td></tr>
  <tr><td>1997</td><td>Ford</td><td>E350</td><td>"ac</td><td> abs</td><td> moon"</td><td>3000.00</td></tr>
  <tr><td>1999</td><td>Chevy</td><td>"Venture ""Extended Edition"""</td><td>""</td><td>4900.00</td></tr>
  <tr><td>1999</td><td>Chevy</td><td>"Venture ""Extended Edition</td><td> Very Large"""</td><td>""</td><td>5000.00</td></tr>
  <tr><td>1996</td><td>Jeep</td><td>Grand Cherokee</td><td>"MUST SELL!</td></tr>
  <tr><td>air</td><td> moon roof</td><td> loaded"</td><td>4799.00</td></tr>
  </table>
  <input type="button" value="添加样式" onclick="addimg()"/>
  <input type="button" value="删除样式" onclick="removeimg()"/>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
js函数调用的方式
May 06 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 #Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 #Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 #Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 #Javascript
AngularJS监听路由变化的方法
Mar 07 #Javascript
微信小程序开发之入门实例教程篇
Mar 07 #Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 #Javascript
You might like
谈谈PHP语法(2)
2006/10/09 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
jQuery+css实现的换页标签栏效果
2016/01/27 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
Python 解析XML文件
2009/04/15 Python
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Python定时器实例代码
2017/11/01 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
python list元素为tuple时的排序方法
2018/04/18 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
基于python实现操作redis及消息队列
2020/08/27 Python
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
一套C++笔试题面试题
2012/06/06 面试题
法律专业应届本科毕业生求职信
2013/10/25 职场文书
保安员岗位职责
2013/11/17 职场文书
承诺书模板
2014/08/30 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
教师工作总结范文2014
2014/11/10 职场文书
李强为自己工作观后感
2015/06/11 职场文书
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技