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 相关文章推荐
Extjs实现进度条的两种便捷方式
Sep 26 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
webpack4从0搭建组件库的实现
Nov 29 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/09/13 PHP
理解JavaScript中的事件
2006/09/23 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
javascript的内存管理详解
2013/08/07 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
详解Python的三种可变参数
2019/05/08 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
python通过cython加密代码
2020/12/11 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
外贸采购员求职的自我评价
2013/11/26 职场文书
KTV的创业计划书范文
2014/02/02 职场文书
银行业务授权委托书
2014/10/10 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
光荣之路观后感
2015/06/12 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
教你用python控制安卓手机
2021/05/13 Python
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
Python基本数据类型之字符串str
2021/07/21 Python
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers