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 相关文章推荐
JqGrid web打印实现代码
May 31 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
javascript每日必学之多态
Feb 23 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
js正则匹配markdown里的图片标签的实现
Mar 24 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 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
destoon数据库表说明汇总
2014/07/15 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
js日期联动示例
2014/05/02 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
学习jQuey中的return false
2015/12/18 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
React全家桶环境搭建过程详解
2018/05/18 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python模块结构与布局操作方法实例分析
2017/07/24 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
远程调用的原理
2014/07/05 面试题
Python是如何进行类型转换的
2013/06/09 面试题
主持人婚宴答谢词
2014/01/28 职场文书
毕业自我评价
2014/02/05 职场文书
高中历史教学反思
2014/02/08 职场文书
大学生就业策划书范文
2014/04/04 职场文书
大学生支教感言
2015/08/01 职场文书
升学宴学生致辞
2015/09/29 职场文书
品德与社会教学反思
2016/02/24 职场文书
如何理解及使用Python闭包
2021/06/01 Python
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers