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 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
基于Jquery的温度计动画效果
Jun 18 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 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
mysql 搜索之简单应用
2007/04/27 PHP
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python生成随机密码的方法
2017/06/16 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
python绘制玫瑰的实现代码
2020/03/02 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
工厂门卫岗位职责
2013/11/25 职场文书
好邻里事迹材料
2014/01/16 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2015年双拥工作总结
2015/04/08 职场文书
工作证明格式范文
2015/06/15 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
高三数学教学反思
2016/02/18 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
Python使用Kubernetes API访问集群
2021/05/30 Python
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
Apache自带的ab压力测试工具的实现
2022/07/23 Servers