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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
实现一个Vue自定义指令懒加载的方法示例
Jun 04 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
laravel 5 实现模板主题功能
2015/03/02 PHP
thinkPHP框架中layer.js的封装与使用方法示例
2019/01/18 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
python3实现ftp服务功能(客户端)
2017/03/24 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python随机模块random使用方法详解
2020/02/14 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
乡镇食品安全责任书
2014/07/28 职场文书
税务会计岗位职责
2015/04/02 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
python脚本框架webpy的url映射详解
2021/11/20 Python