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 相关文章推荐
js循环改变div颜色具体方法
Jun 25 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 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面向对象之反射功能与用法分析
2017/03/29 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
python在不同条件下的输入与输出
2020/02/13 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
养殖行业的创业计划书
2014/01/05 职场文书
文明餐桌活动方案
2014/02/11 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
防灾减灾活动总结
2014/08/30 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
假释思想汇报范文
2014/10/11 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python
GPU服务器的多用户配置方法
2022/07/07 Servers