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用户注册提示效果的简单实例
Aug 17 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
Webpack 之 babel-loader文件预处理器详解
Mar 23 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 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中curl、fsockopen的应用
2016/12/10 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
python机器人行走步数问题的解决
2018/01/29 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python实现字符串加密成纯数字
2019/03/19 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
浅析python 字典嵌套
2020/09/29 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
linux面试题参考答案(1)
2016/01/22 面试题
棉花姑娘教学反思
2014/02/15 职场文书
班干部演讲稿
2014/04/24 职场文书
运动会标语
2014/06/21 职场文书
代办委托书怎么写
2014/08/01 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
鸟的天堂导游词
2015/01/31 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
被委托人身份证明
2015/08/07 职场文书
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
MySQL数据库 任意ip连接方法
2022/05/20 MySQL