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 相关文章推荐
javascript中length属性的探索
Jul 31 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
详解tween.js 中文使用指南
Jan 05 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
js实现移动端图片滑块验证功能
Sep 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调用mysql存储过程
2007/02/14 PHP
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
Prototype String对象 学习
2009/07/19 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
微信小程序实现点赞业务
2021/02/10 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
pyhanlp安装介绍和简单应用
2019/02/22 Python
Django 多环境配置详解
2019/05/14 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
使用Django清空数据库并重新生成
2020/04/03 Python
pandas apply多线程实现代码
2020/08/17 Python
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
电大毕业生自我鉴定
2013/11/10 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏