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修改css样式style
Apr 15 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
Angular Renderer (渲染器)的具体使用
May 03 Javascript
vue如何引入sass全局变量
Jun 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内置函数使用指南
2014/11/27 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
jquery实现textarea 高度自适应
2015/03/11 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
vue实现扫码功能
2020/01/17 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
详解Python的单元测试
2015/04/28 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
在django view中给form传入参数的例子
2019/07/19 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python实现三壶谜题的示例详解
2020/11/02 Python
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
幼儿园运动会加油词
2014/02/14 职场文书
建筑投标担保书
2014/05/20 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js